Dynamically showing score depending on the number of "On" Hot Spot Regions | XM Community
Skip to main content

Hi there,
I am very new to JS and made great progress in understanding my problem by parsing throught the posts of this wholesome community, but still got stuck in coming up with a (working) solution. I thus resolved to adding a post of my own in case some benefactor could help alleviate my woes.
Here is my problem : I am setting up a task in which I want participants to activate/deactive Regions in a Hot Spot question. So far, so good.
However, I also want to display a point tally on the same page, that is dynamically updated as a function of the number of "On" regions in the Hot Spot. Thus, my problems are :
1) How to dynamically get the number of On Regions of a Hot Spot Questions on the same page & in real time
2) How to calculate a score depending on the number of "On" regions ?
3) How to display this score ?
1) I luckily found some similar questions on the forum, e.g https://community.qualtrics.com/XMcommunity/discussion/9626/how-to-display-choice-count-dynamically-in-question-text-for-likert-single-answer-question-type
It seems that the HotSpot question might make it a little bit more complicated though. Here is what I found for checkboxes :
varQID = this.questionId ;
jQuery("#"+ QID + " input[type='checkbox']").on("click", function() {
jQuery('#chkcount').text(jQuery("#"+ QID + " td.c4 input[type='checkbox']:checked").length);
});
...and what I came up with, which is obviously wrong :
var QID = this.questionId ;
jQuery("#" + QID + ".HotSpotContainer").on("click", function() {
var s = jQuery("#" + QID + ".HotSpotContainer:On").length; jQuery('#chkcount').text(s);
Qualtrics.SurveyEngine.setEmbeddedData("Count", s);
});
Unfortunately, I could not find any ressources to help me understanding how to manipulate Hot Spot questions and its content (:On won't work I guess). The only ressource I found was this : https://community.qualtrics.com/XMcommunity/discussion/11077/is-there-a-way-to-use-the-js-methods-to-access-the-region-on-off-data-within-a-hot-spot-image (summary : use getAttributeNS) but could not find how to so.
2) Calculating score : Would simply adding this work ?
var OnScores = {"1": -500, "2": -800, "3": -1000}; //3 regions by example
var QID = this.questionId ;
jQuery("#" + QID + ".HotSpotContainer").on("click", function() {
var s = jQuery("#" + QID + ".HotSpotContainer:On").length;
jQuery('#chkcount').text(s);
Qualtrics.SurveyEngine.setEmbeddedData("Count", s);
var Score = OnScore[Count];
Qualtrics.SurveyEngine.setEmbeddedData("Point",Score);
});
3) ...and then display the score by simply adding in a text description HTLM on the same block/page
Your current score is ${e://Field/Score}
I would be very thankful for any help !

Embedded data won't work in realtime because they need a page break to update.
Here's a simple code:
Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    quest.questionContainer
        .querySelector("legend")
        .insertAdjacentHTML("beforeend", "

Active Regions: 0
");


    quest.questionclick = function () {
        let selected = 0;
        quest.getChoices().forEach((i) => {
            if (quest.getChoiceAnswerValue(i) == 2) selected++;
        });
        quest.questionContainer.querySelector(".active_regions").innerText = selected;
    };
});
demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/6b9b7ec1-3223-4ed3-9ffa-ed8ac72620c4/SV_bd8Lv6cH7a3pJVb/BL_0ctjz7hwNvMNMnc?Q_SurveyVersionID=current


That is very helpful, thank you so much !
One last trick : the number of already active regions by default is randomized ; with the current code, it's displaying "Active region : 0" by default, whatever active regions there already are (which is then updated by clicking a first time).


Leave a Reply