New entry types in limesurvey

Question

I want to add a question type to a limesurvey based survey. It is for standard raven-like IQ tests, and I would like the user to be able to click the correct choice on the picture area instead of clicking a radio button below.

I have a JQuery maphighlight snippet that works in a stand-alone way (link), but I am wondering about how to best integrate it into limesurvey?

Documentation on limesurvey question plugins seems scarce, but from what I can tell, they are mainly meant for when you need custom database entries. For this purpose, the answer is still just a number of 1-8 so I should be able to get by with just some Javascript on the frontend. However, considering I have about 60 such questions, it would make sense to add it somewhere central.

Could anyone point me in the right general direction?

Answer 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).