Javascript to check for duplicate answers across 3 questions | XM Community
Skip to main content
Solved

Javascript to check for duplicate answers across 3 questions


I have three duplicate questions that ask you to select a response. Due to accessibility issues, we are unable to combine these into one multiple answer question.

 

The issue is that people select the same response in multiple questions. We would like the questions on the same page with no page breaks which removes the option to use carry forward. I was hoping someone may know some JavaScript that could be used to check these 3 questions for duplicates and give an error if there are any. 

 

3 replies

Userlevel 3
Badge +13

Hey @Elisabeth 

if you want it like this

 You can use this code:

Qualtrics.SurveyEngine.addOnload(function() {

    var qid1 = "QID1";

    var qid2 = "QID2";

    var qid3 = "QID3";

    function getSelectedValue(qid) {

        var qContainer = document.getElementById(qid);

        var selectedInput = qContainer.querySelector("input[type='radio']:checked");

        return selectedInput ? selectedInput.value : "";

    }

    function checkForDuplicates() {

        var val1 = getSelectedValue(qid1);

        var val2 = getSelectedValue(qid2);

        var val3 = getSelectedValue(qid3);

        var values = [val1, val2, val3].filter(Boolean);

        var uniqueValues = new Set(values);

        return uniqueValues.size !== values.length;

    }

    function displayError(show) {

        var errorContainer = document.getElementById("customError");

        if (!errorContainer) {

            errorContainer = document.createElement("div");

            errorContainer.id = "customError";

            errorContainer.style.color = "red";

            errorContainer.style.fontWeight = "bold";

            errorContainer.innerText = "You have selected the same response in multiple questions. Please choose different responses.";

            document.getElementById("Questions").prepend(errorContainer);

        }

        errorContainer.style.display = show ? "block" : "none";

    }

    function validateDuplicates() {

        if (checkForDuplicates()) {

            displayError(true);

            document.querySelector("#NextButton").disabled = true;

        } else {

            displayError(false);

            document.querySelector("#NextButton").disabled = false;

        }

    }

    [qid1, qid2, qid3].forEach(function(qid) {

        var qContainer = document.getElementById(qid);

        var inputs = qContainer.querySelectorAll("input[type='radio']");

        inputs.forEach(function(input) {

            input.addEventListener("change", validateDuplicates);

        });

    });

    // Initial validation

    validateDuplicates();

});

 

 

make sure the Question ID “QID1, QID2 and QID3” are correct.


You write this code on the first question off the 3

Badge +2

Hi @RickB, that’s exactly what I’m after, thanks! I’ve added it in but can’t get it to work. I am using a select box and not a multiple choice question format so could that be the issue?

Userlevel 3
Badge +13

 

I chance the code a bit:

Qualtrics.SurveyEngine.addOnload(function() {

    var qid1 = "QID1";

    var qid2 = "QID2";

    var qid3 = "QID3";

    function getSelectedValue(qid) {

        var qContainer = document.getElementById(qid);

        var selectedInput = qContainer.querySelector("select");

        return selectedInput ? selectedInput.value : "";

    }

    function checkForDuplicates() {

        var val1 = getSelectedValue(qid1);

        var val2 = getSelectedValue(qid2);

        var val3 = getSelectedValue(qid3);

        var values = [val1, val2, val3].filter(Boolean);

        var uniqueValues = new Set(values);

        return uniqueValues.size !== values.length;

    }

    function displayError(show) {

        var errorContainer = document.getElementById("customError");

        if (!errorContainer) {

            errorContainer = document.createElement("div");

            errorContainer.id = "customError";

            errorContainer.style.color = "red";

            errorContainer.style.fontWeight = "bold";

            errorContainer.innerText = "You have selected the same response in multiple questions. Please choose different responses.";

            document.getElementById("Questions").prepend(errorContainer);

        }

        errorContainer.style.display = show ? "block" : "none";

    }

    function validateDuplicates() {

        if (checkForDuplicates()) {

            displayError(true);

            document.querySelector("#NextButton").disabled = true;

        } else {

            displayError(false);

            document.querySelector("#NextButton").disabled = false;

        }

    }

    [qid1, qid2, qid3].forEach(function(qid) {

        var qContainer = document.getElementById(qid);

        var selectElement = qContainer.querySelector("select");

        selectElement.addEventListener("change", validateDuplicates);

    });

    // Initial validation

    validateDuplicates();

});

 

Dont forget to chance the Question ID to your Question ID

Leave a Reply