Display dynamically updating scores to respondents for multi-select (checkbox) questions | XM Community
Solved

Display dynamically updating scores to respondents for multi-select (checkbox) questions

  • 22 February 2021
  • 9 replies
  • 114 views
V

Hello, I am relatively new to Qualtrics and even newer to JS.
I came across the following thread on how to dynamically display the score of a single answer MC question to the respondent:
https://www.qualtrics.com/community/discussion/5854/how-to-display-score-on-survey-page-that-dynamically-updates.
Contained within it is the following JS, which works fantastically for single-answer MC questions:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

jQuery("input[type=radio]").change(function() {

    if(jQuery("#QID636 input.radio").is(":checked")){
var choiceNum1 = jQuery("#QID636 input.radio:checked").attr("choiceid");
var recodeMap1 = {"1" : 0, "2" : 100, "3" : 200, "4" : 300, "5" : 400, "6" : 500, "7" : 600, "8" :700, "9" : 800, "10" : 900, "11" : 1000};
var qScore1 = recodeMap1[choiceNum1];
    } else {
        var qScore1 = 0;
    }

 if(jQuery("#QID653 input.radio").is(":checked")){
var choiceNum2 = jQuery("#QID653 input.radio:checked").attr("choiceid");
var recodeMap2 = {"1" : 10, "2" : 20, "3" : 30, "4" : 40, "5" : 50};
var qScore2 = recodeMap2[choiceNum2];
    } else {
        var qScore2 = 0;
    }

 if(jQuery("#QID644 input.radio").is(":checked")){
var choiceNum3 = jQuery("#QID644 input.radio:checked").attr("choiceid");
var recodeMap3 = {"1" : 0, "2" : 50, "3" : 100, "4" : 150, "5" : 200};
var qScore3 = recodeMap3[choiceNum3];
    } else {
        var qScore3 = 0;
    }

var qScore = qScore1 + qScore2 + qScore3

jQuery("#totalscore").html(qScore);
jQuery("#totalscore").text(qScore);
Qualtrics.SurveyEngine.setEmbeddedData("eJStotalscore",qScore);

});

});
However, for my purposes I need to allow multiple answers to each question, i.e. I have a multi-select/checkbox format.
Specifically, a respondent will e.g. have the option to choose between "apples", "bananas", "cherries" and "strawberries" as well as a "none" option.
The respondent can then choose to select only one option or multiple options (except for when "none" is chosen which I have set to exclude other answers) within each of the three questions.
Would it be possible to adjust the code used in the above link for my purposes?
I would be grateful for any suggestions.
Thank you!

icon

Best answer by ahmedA 22 February 2021, 22:01

View original

9 replies

A
Rank
Userlevel 7
Badge +21

Your question is not clear and the other discussion is too long.
What are you looking for? Would be better if you could explain it with some screenshots.

V

Sure. I will try my best to clarify.
In a very simplified manner, the question I want to create will look something like the screenshot below.
Respondents are able to freely put together a frozen yoghurt or fruit cup as they would like and the number of calories displayed on the bottom of the question is dynamically updated to show the total number of calories of their order.
If I use the code below, I am able to get the total if respondents can choose only one topping per category, but I do not know how to adjust the code to work in a multi-select environment.
image.pngCode:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

jQuery("input[type=radio]").change(function() {

if(jQuery("#QID40 input.radio").is(":checked")){
var choiceNum1 = jQuery("#QID40 input.radio:checked").attr("choiceid");
var recodeMap1 = {"1" : 100, "2" : 150, "3" : 125, "4" : 0};
var qScore1 = recodeMap1[choiceNum1];
    } else {
        var qScore1 = 0;
    }

 if(jQuery("#QID41 input.radio").is(":checked")){
var choiceNum2 = jQuery("#QID41 input.radio:checked").attr("choiceid");
var recodeMap2 = {"1" : 50, "2" : 80, "3" : 30, "4" : 0};
var qScore2 = recodeMap2[choiceNum2];
    } else {
        var qScore2 = 0;
    }

  if(jQuery("#QID42 input.radio").is(":checked")){
var choiceNum3 = jQuery("#QID42 input.radio:checked").attr("choiceid");
var recodeMap3 = {"1" : 70, "2" : 1000, "3" : 40, "4" : 0};
var qScore3 = recodeMap3[choiceNum3];
    } else {
        var qScore3 = 0;
    }

var qScore = qScore1 + qScore2 + qScore3

jQuery("#totalscore").html(qScore);
jQuery("#totalscore").text(qScore);
Qualtrics.SurveyEngine.setEmbeddedData("eJStotalscore",qScore);

});

});

And for the Score:
Your yoghurt has a total of  ${e://Field/etotalscore} kcal

A
Rank
Userlevel 7
Badge +21

See if this code works for you:
Qualtrics.SurveyEngine.addOnReady(function () {
    var q_weights = {
        1: [100, 150, 125, 0],
        2: [50, 80, 30, 0],
        3: [70, 100, 40, 0],
    };


    var all_questions = [];
var display_cal;
    document.querySelectorAll("div[id^=QID]:not(.Separator)").forEach((question) => {
        if (question.className.includes("TE")) {
            display_cal = question.querySelector("input");
        } else {
            all_questions.push(question);
        }
    });


    display_cal.readOnly = true;
    display_cal.style.cursor = "not-allowed";


    function cal_sum() {
        var sum = 0;
        all_questions.forEach((question, which_q) => {
            question.querySelectorAll(".q-checkbox").forEach((chkbox, which_o) => {
                if (chkbox.className.includes("q-checked")) {
                    sum += Object.values(q_weights)[which_q][which_o];
                }
            });
        });
        display_cal.value = sum;
    }
    var config = { attributes: true, subtree: true };


    var option_watcher = new MutationObserver(cal_sum);
    all_questions.forEach((question) => {
        option_watcher.observe(question, config);
    });
    document.querySelector("#NextButton").onclick = function () {
        option_watcher.disconnect();
    };
});

Add a text entry question somewhere on the page to display the value. The answer from this can then be used for piping rather an embedded variable.
You can change weigths as you like.

V

Thank you so much!
The code worked perfectly. I truly appreciate your help.
Best,
Valerie

I

https://www.qualtrics.com/community/discussion/comment/34859#Comment_34859I have a similar issue with my experiment and have only adapted the weights from this code. Unfortunately, I still do not get the updated score on my page. Where should I paste the JavaScript code? Should I paste it in the corresponding JavaScript section of the text entry question or in the previous questions? I have several multiple choice questions in one question block. Also, how would I display my score in the text entry question? I have tried both piped text and embedded values and have not been successful. I also think it goes without saying that am new to both Qualtrics and JavaScript 😃 Thanks in advance!

A
Rank
Userlevel 7
Badge +21

Please go through the support pages regarding enterning JavaScript. If you face problems even after that, please let me know.

I

Hi ahmedA,
Thanks for the reply. It worked for me as well! Would you however by any chance know if you can dynamically update the score without a textbox? By that I mean dynamically updating the score using the Text/Graphic question type. I'm not a huge fan of the text entry aesthetic.

A
Rank
Userlevel 7
Badge +21

Yes. its possible to do that.

I

How would one do that?
Best :)

Leave a Reply


Terms & Conditions