Javascript code to set validation using the previous selected options and current rank oder

Question

Hi all, I am new to javascript. The validation rule I want is that respondents pass current Rank Order if the options ranked in the last two positions of the current Rank Order question are the same as the options selected in the previous Multiple Choice question (both questions have identical options and corresponding recode values). If this condition is not met, the respondent should see a warning (like a forced response message in red text below the question) when they click next. How can this be implemented in JavaScript and html view? Below is the code Qualtrics Support AI Assistant gave me (and I replace QID with ones in my project) but did not work. I greatly appreciate for any help!Html view is

Please rank the following options:

Javascript is below (no function in addonload and addOnUnload)Qualtrics.SurveyEngine.addOnReady(function() { // Get the question IDs var mcQuestionId = "QID1"; // Replace with the actual ID of the Multiple Choice question var roQuestionId = "QID2"; // Replace with the actual ID of the Rank Order question // Get the warning message element var warningMessage = document.getElementById("warningMessage"); // Function to check the condition function checkCondition() { var mcSelectedValues = []; var roRankedValues = []; // Get selected recode values from the Multiple Choice question jQuery("#" + mcQuestionId + " .q-checked").each(function() { mcSelectedValues.push(jQuery(this).find("input").val()); }); // Get ranked recode values from the Rank Order question jQuery("#" + roQuestionId + " .ranked").each(function() { roRankedValues.push(jQuery(this).find("input").val()); }); // Check if the last two ranked values match the selected values var lastTwoRankedValues = roRankedValues.slice(-2); var conditionMet = mcSelectedValues.every(value => lastTwoRankedValues.includes(value)); // Show or hide the warning message if (!conditionMet) { warningMessage.style.display = "block"; } else { warningMessage.style.display = "none"; } return conditionMet; } // Add event listener to the Next button jQuery("#NextButton").click(function(event) { if (!checkCondition()) { event.preventDefault(); // Prevent the form from submitting } }); // Add event listener to the Rank Order question jQuery("#" + roQuestionId + " .ranked").on("change", function() { checkCondition(); });});

omkarkewat · Accepted Answer

Hi ​@zhyI have tried replicating your setup (using mock values) and also implemented it without Javascript.Please make sure your both the questions are in a different block or they have a page break in between.Assuming the order of the Q1 choices is fixed and the same is present in the Q2 as well.Create a custom validation for Q2 where the conditions says allow respondent to pass only if 4th choice order is equal to 4 and 5th choice order is equal to 5.If the above condition is passed then the respondent can move forward or it will throw an error message. You can customize the error message, store the same in the library and then use it.Let me know if it works!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded