Solved

count

Forum|Forum|6 months ago
June 3, 2025
4 replies
71 views

P

+2

PRIYABHARDWAJ
Level 2 ●●

can we put count on dynamic selection in the same question of graphic options selection question?

Best answer by omkarkewat

@PRIYABHARDWAJ please use try the below code in your Question’s Javascript.

Qualtrics.SurveyEngine.addOnload(function() {
    var q = jQuery("#" + this.questionId);
    var limit = 10;

    // Add counter display
    q.find(".QuestionText").after("<div class='selectionCount' style='margin-top:10px; font-weight:bold; color:#007ac0;'>Selected: 0/" + limit + "</div>");
    var display = q.find(".selectionCount");

    // All checkboxes in this question
    var checkboxes = q.find("input[type='checkbox']");

    // Count function
    function updateSelectionCount() {
        var count = checkboxes.filter(":checked").length;
        display.text("Selected: " + count + "/" + limit);
    }

    // Attach listener
    checkboxes.on("change", function () {
        updateSelectionCount();
    });

    // Run once in case there's pre-selected options
    updateSelectionCount();
});

This is how it will look like. You can change the styling of the text according to your need.

O

+21

omkarkewat
QPN Level 5 ●●●●●
Forum|Forum|6 months ago
June 4, 2025

@PRIYABHARDWAJ can you please elaborate your use case?

Like

P

+2

PRIYABHARDWAJ
Author
Level 2 ●●
Forum|Forum|6 months ago
June 4, 2025

@omkarkewat ya, so I have a question where participants are supposed to select 10 out of 20 items. The 10-item selection is a strict validation cap that I have put on the question.

Now, I want the participant to be able to see the count of items they are selecting out of 20 dynamically. meaning, if I select one item, the count should be 1; if I select 3 items count should be 3. This count should display in the same question as the person keeps selecting; the count should change.

Like

O

+21

omkarkewat
QPN Level 5 ●●●●●
Answer
Forum|Forum|6 months ago
June 5, 2025

@PRIYABHARDWAJ please use try the below code in your Question’s Javascript.

Qualtrics.SurveyEngine.addOnload(function() {
    var q = jQuery("#" + this.questionId);
    var limit = 10;

    // Add counter display
    q.find(".QuestionText").after("<div class='selectionCount' style='margin-top:10px; font-weight:bold; color:#007ac0;'>Selected: 0/" + limit + "</div>");
    var display = q.find(".selectionCount");

    // All checkboxes in this question
    var checkboxes = q.find("input[type='checkbox']");

    // Count function
    function updateSelectionCount() {
        var count = checkboxes.filter(":checked").length;
        display.text("Selected: " + count + "/" + limit);
    }

    // Attach listener
    checkboxes.on("change", function () {
        updateSelectionCount();
    });

    // Run once in case there's pre-selected options
    updateSelectionCount();
});