Script: Image Highlighter - Autosubmit Once Selection is Made

This article will give you some code to automatically submit the next page button after the first item has been selected in an 'Image Highlighter' exercise

Background

You may want to use an 'Image Highlighter' as a way to have a respondent find an item on the screen and then auto-submit the page once any item has been selected. This is usually used for a "Findability" exercise. The instructions below will help you set this up.  

Instructions

1. Program your question as needed.
2.  Add the following code to the '+' field
   • See article: Adding JavaScript and/or CSS to a Question
   • Update the question number in the code below to match yours. It is "Q100" in the code below. 
     

     var $ = jQuery,
         q = $('#question-Q100'), /* UPDATE YOUR QUESTION NUMBER HERE - REPLACE "Q100" */
         container = q.find('.cm-highlight-image'),
         hotspots = q.find('.datastore > input'),
         next = $('#cm-NextButton');
     
     
     container.click(function() {
       var counter = 0;
       hotspots.each(function() {
         var value = $(this).attr('value');
         if (value >= 1) {
           counter++;
         }
       });
       if (counter == 1) {
         next.click();
         container.slideUp('slow');
       }
     });
     		

3. Make sure to test to confirm the time is correct