How to count number of selected answers on Qualtrics?

Question

I am new to Qualtrics and to JavaScript. I am using a "hot spot" question for particular reasons. I want to be able to count and display the number of hot spot regions the participant clicks. So I just need to run some simple JavaScript counting up the regions that have been clicked. I have tried numerous things with no success. Basically, I have created an embedded data element, call it "NumberofChoices" and I want to run some JavaScript on a question to count the number of choices and replace this embedded data element with the correct value.

Someone suggested jQuery to me, so I have tried something like

Qualtrics.SurveyEngine.addOnload(function()
{

var Box1 = 0 
var Box2 = 0
var Box3 = 0
var Box1Clicked = 0
var Box2Clicked = 0
var Box3Clicked = 0


$j('input[name=Q1_1]').click( function(){
Box1 = Box1 + 1
Box1Clicked = Box1 % 2 == 1 
Qualtrics.SurveyEngine.setEmbeddedData("Box1", temp)
})

$j('input[name=Q1_2]').click( function(){
Box2 = Box2 + 1
Box2Clicked = Box2 % 2 == 1
Qualtrics.SurveyEngine.setEmbeddedData("Box2",temp)
})

$j('input[name=Q1_3]').click( function(){
Box3 = Box3 + 1
Box3Clicked = Box3 % 2 == 1
Qualtrics.SurveyEngine.setEmbeddedData("Box3",temp)
})


$j('#NextButton').click(function() {
   var howManyClickedQ1 = Box1Clicked + Box2Clicked + Box3Clicked 
Qualtrics.SurveyEngine.setEmbeddedData("NumberofChoices",howManyClickedQ1)
   })

});

This does not work. It always returns a value of 0, so I think the .click function isn't updating the variables. (I do have the \\script and no conflict codes in the header, so that isn't the issue).

I have also tried something like

Qualtrics.SurveyEngine.addOnload(function()
{
var Box1=0
this.questionclick = function(click,Q1_1){
Box1 = 1;
Qualtrics.SurveyEngine.setEmbeddedData("NumberofChoices",Box1)
}
});

This DOES work, but only for one of the box elements. If I duplicate it for multiple and then try to sum them up, it only ever returns a value of 1. Plus, I would still need to add the modulo commands. I wasn't sure about the =function(event, element) for the above. Do I keep it as (event, element) or do I replace it with the actual click event and element?

If I do this, it does not work

this.questionclick = function(event,element){
    if (element=='Q5_1'){Box1 = 1;}
    else if (element=='Q5_2'){Box2=1;}
    else if (element=='Q5_3'){Box3=1;}
    else if (element=='Q5_4'){Box4=1;}
    else {Box1=0;}
howManyClickedQ1 = Box1 + Box2 + Box3 + Box4 + Box5 + Box6 + Box7;
Qualtrics.SurveyEngine.setEmbeddedData("NumberofChoices",howManyClickedQ1);
}

Like I said, I've never used Qualtrics before and I've never used JavaScript, so I don't know how to troubleshoot this problem! I would appreciate any help I can get.

Answer 1

You picked a really difficult task to start on. The issue is that the hotspot regions are in an svg, which the browser treats as an external object. Any script that refers to the svg must be within the svg. Your script isn't, and there really isn't any way to add a script to the svg.

If you need to get a count of regions clicked, do it after the hotspot question using piped values from the hotspot question. You can do the parsing/calculations in a web service script or in a javascript attached to a subsequent question.

EDIT: Addition based on comments below.

Part of JavaScript to count regions checked in subsequent question:

var count = 0;
if("${q://QID1/ChoiceGroup/SelectedAnswers/11}" == "On") count++;  //region 1
if("${q://QID1/ChoiceGroup/SelectedAnswers/12}" == "On") count++;  //region 2
// etc...