This JavaScript code enables the Next Button in Qualtrics after participants have clicked on 7 regions in a hot spot question. It takes advantage of the fact that on/off regions in a Hot Spot question change color when clicked (from white to green). It counts up every time a participant clicks on a region and changes it to green, and counts down every time a participant clicks on a region and changes it to to white.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*First, hides the Next button*/
this.hideNextButton();
/*A variable to capture number of clicks*/
var numberClicks = 0;
/* Qualtrics JavaScript function that counts the number of clicks on areas of interest*/
/* Areas of interest drawn in Qualtrics are wraped in a HTML tags called <path>, when a path is clicked, this function checks if the new color (the fill attribute in the <path> tag) is green, in which case it counts one click. If the color changes to white, it substracts one click. Once 7 areas have changed to green, it activates the NextButton */
this.questionclick = function(event,element){
if (element.tagName == 'path') {
var color = element.getAttributeNS(null, 'fill');
if (color == "#00fe00") {
numberClicks++;
}
if (color == "#000000") {
numberClicks--;
}
if (numberClicks > 6) {
jQuery("#NextButton").show();
}
console.log(numberClicks);
}
}
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
To learn more about the Qualtrics questionclick function (this.questionclick = function(event,element)), go to: https://s.qualtrics.com/WRAPI/QuestionAPI/classes/Qualtrics%20JavaScript%20Question%20API.html
To learn more about interacting with SVGs (which is what Qualtrics uses to create areas of interest in hotspot questions), go to:
https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/