New entry types in limesurvey

Question 1

Thank you. The suggestions were really helpful. However - there is one more thing I would like to add. As it was question type I needed to repeat 60 times, it seemed logical to not repat it for each question separately. Thankfully, that is also possible via the templates as I found out.

The final solution basically follows the advice given by tpartner. I needed to put the following code to template.js

$(document).ready(function(){
  var marbel_map = '<map name="$NAME"><area coords="340,100,425,186" data-maphilight="{" href="#" id="1" shape="rect" /> <area coords="340,195,425,283" data-maphilight="{" href="#" id="5" shape="rect" /> <area coords="437,100,522,186" data-maphilight="{" href="#" id="2" shape="rect" /> <area coords="437,195,522,283" data-maphilight="{" href="#" id="6" shape="rect" /> <area coords="535,100,620,186" data-maphilight="{" href="#" id="3" shape="rect" /> <area coords="535,195,620,283" data-maphilight="{" href="#" id="7" shape="rect" /> <area coords="632,100,717,186" data-maphilight="{" href="#" id="4" shape="rect" /> <area coords="632,195,717,283" data-maphilight="{" href="#" id="8" shape="rect" /></map>';
  $('.marbel').each(function(ind,el) {
      $(marbel_map.replace(/id=["']([^"']*)["']/g,"id='"+el.getAttribute('qid')+"$1'")
                                .replace(/\$NAME/g,el.getAttribute('qid')+'_map')).insertBefore(el);
      $(el).attr("usemap",'#'+el.getAttribute('qid')+'_map').maphilight();
      $(el).closest(".question-wrapper").find('.answers-list:first').hide();
    });

   $('area').click(function(){
      $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight');
      $(this).parent().find('.selected').data('maphilight', {
        alwaysOn: false
      }).trigger('alwaysOn.maphilight').removeClass('selected');

      $(this).addClass('selected');

      var id = this.id;
      $('#answer'+id).trigger('click');
    });
});

and an <script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script> tag to startpage.pstpl

after which, each question code just became

<img class="marbel" qid="{SGQ}" src="http://localhost/misc/marbelX.png" />

Questions still need to be of type 8-answer radio list selectors, as was suggested (as the script essentially just passes the click from the area to the radio selector tag).

Question 2

If you want to use the image and map areas from your example...

1) Create a list-radio question with answer codes matching the IDs of your map areas (A, B, C...).

2) Insert your image and map into the list-radio question source.

3) Add this script to the question source. The script will find and click the radio input that has an ID ending with the area ID.

<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('area').click(function(event){ event.preventDefault(); var qID = '{QID}'; var thisID = $(this).attr('id'); $('input.radio[id$="X'+qID+thisID+'"]').click(); }); }); </script>

Question 3

Why try to make a new question type ?

You can easily doing whome in javascript. Choose a single choice (List radio), and use a script.

Example with some SVG:

Choose your favorite color<br />
<script type="text/javascript">
$(document).ready(function() {
        $('#question{QID} .answers-list').hide(); //uncomment to hide radio button
    $("path").click(function() {
        if ($(this).attr('id') != "selected")
                {
                        $("[name={SGQ}]").filter("[value='"+$(this).attr('id')+"']").attr("checked",true);
        $("#selected").css('fill',$(this).css('fill'));
                         $("[name={SGQ}]").filter("[value='"+$(this).attr('id')+"']").trigger('click');
                }
        else
                {
            $("#selected").css('fill','none');
                        $("[name={SGQ}]").attr("checked",false);
                        $("[name={SGQ}]").filter("[value='']").trigger('click');
                }
    });
});
</script>
<center><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="150" style="margin-left:25px">
  <path
     d="M 73.21875,0.03125 A 74.999999,74.999999 0 0 0 37.5,10.0625 l 18.75,32.5 a 37.5,37.5 0 0 1 37.5,-0.03125 L 112.5,10.0625 A 74.999999,74.999999 0 0 0 73.21875,0.03125 z"
     id="C1"
     style="fill:#008000;fillla date au format  traduction-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="M 112.5,10.0625 93.75,42.53125 A 37.5,37.5 0 0 1 112.5,75 L 150,75 A 74.999999,74.999999 0 0 0 112.5,10.0625 z"
     id="C2"
     style="fill:#ffff00;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 112.5,75 a 37.5,37.5 0 0 1 -18.75,32.4375 l 18.75,32.5 A 74.999999,74.999999 0 0 0 150,75 l -37.5,0 z"
     id="C3"
     style="fill:#ff8000;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 93.75,107.4375 a 37.5,37.5 0 0 1 -37.5,0.0312 L 37.5,139.9375 a 74.999999,74.999999 0 0 0 75,0 l -18.75,-32.5 z"
     id="C4"
     style="fill:#ff0000;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 0,75 a 74.999999,74.999999 0 0 0 37.5,64.9375 L 56.25,107.46875 A 37.5,37.5 0 0 1 37.5,75 L 0,75 z"
     id="C5"
     style="fill:#800080;fillla date au format  traduction-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="M 37.5,10.0625 A 74.999999,74.999999 0 0 0 0,75 l 37.5,0 A 37.5,37.5 0 0 1 56.25,42.5625 l -18.75,-32.5 z"
     id="C6"
     style="fill:#0000ff;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m -182.40128,-1.5888613 a 48.619156,48.619156 0 1 1 -97.23831,0 48.619156,48.619156 0 1 1 97.23831,0 z"
     transform="matrix(0.23653228,0,0,0.23653228,129.64379,75.375816)"
     id="selected"
     style="fill:none;stroke:#000000;stroke-width:8.45550537;stroke-miterlimit:4;stroke-dasharray:none" />
</svg> </center>

But it's more easy with a map. You can use alt attribute or id attribute to the link betwwen map and answers.

Example taken from the manual of LimeSUrvey