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

Valerie_KValerie_K Community Member Qubie ✭

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

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!

Best Answers

  • Valerie_KValerie_K Community Member Qubie ✭
    edited February 22 Accepted Answer

    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.

    Code:

    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&nbsp;&nbsp;<span id="totalscore">${e://Field/etotalscore} kcal</span>

  • ahmedAahmedA IndiaCommunity Member Wizard ✭✭✭✭✭
    Accepted Answer

    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.

Answers

  • ahmedAahmedA IndiaCommunity Member Wizard ✭✭✭✭✭

    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.

  • Valerie_KValerie_K Community Member Qubie ✭

    Thank you so much!

    The code worked perfectly. I truly appreciate your help.

    Best,

    Valerie

  • Its_LeviosaIts_Leviosa Community Member Qubie ✭

    I 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 :D Thanks in advance!

  • ahmedAahmedA IndiaCommunity Member Wizard ✭✭✭✭✭

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

  • Its_LeviosaIts_Leviosa Community Member Qubie ✭

    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.

  • ahmedAahmedA IndiaCommunity Member Wizard ✭✭✭✭✭

    Yes. its possible to do that.

  • Its_LeviosaIts_Leviosa Community Member Qubie ✭

    How would one do that?

    Best :)

Sign In to Comment