I’m wanting to switch from flat layout to simple layout to make our survey more accessible but having issues with one of my questions. I have a multiselect question that is currently using select2 to search and select through a long list of options. It is working great with the flat layout but does not work when I change to simple. Here is how it is set up currently. Is there any way to make it work with the simple layout? JS:Qualtrics.SurveyEngine.addOnReady(function(){jQuery("#"+this.questionId+" select").select2({placeholder: 'Select all that apply',closeOnSelect: false,width: '100%'});});Header: <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

Hi! I made select2 work using simple layout and a list box (as dropdown doesn’t have <select>). However, I cannot identify why after selecting a country on a mandatory question, the answer doesn’t get passed to the back end. Then, an error shows to the participant saying they must answer the question.Any help would be greatly appreciated!Here is the code I added to the country question:Qualtrics.SurveyEngine.addOnload(function() { // Get the ID of the question container and ensure it only has the correct "QID" prefix var qid = this.getQuestionContainer().id.replace("question-", ""); // Find the select element within the question container var selectElement = $("#" + this.getQuestionContainer().id).find("select"); // Set the correct 'name' attribute to ensure Qualtrics captures the selection selectElement.attr("name", qid); // This sets the name to "QID18" correctly // Retrieve and log the language variable var lang = "${e://Field/Q_Language}"; console.log("Current language code: " + lang); // Function to set placeholder based on language function setPlaceholder() { var placeholders = { "EN": "Select your country", "AR": "اختر بلدك", "BS": "Odaberi svoju zemlju", "PT-BR": "Selecione seu país", "ZH-S": "选择你的国家", "HR": "Odaberi svoju zemlju", "FR-CA": "Sélectionne ton pays", "HI": "अपना देश चुनें", "KO": "당신의 나라를 선택하세요", "ES": "Selecciona tu país", "TE": "మీ దేశాన్ని ఎంచుకోండి" }; var placeholderText = placeholders[lang] || placeholders["EN"]; // Destroy the existing Select2 instance if it exists if (selectElement.data('select2')) { selectElement.select2('destroy'); } // Initialize Select2 with the dynamic placeholder selectElement.select2({ placeholder: placeholderText, allowClear: true, minimumResultsForSearch: 0 }); } // Initial set of the placeholder setPlaceholder(); // Capture changes in the dropdown and log the selected value selectElement.on("change", function() { var selectedValue = $(this).val(); console.log("Selected value: " + selectedValue); // Store the selected value in Embedded Data Qualtrics.SurveyEngine.setJSEmbeddedData("CountrySelection", selectedValue); });});Qualtrics.SurveyEngine.addOnReady(function() { // Code here runs when the page is fully displayed});Qualtrics.SurveyEngine.addOnUnload(function() { // This code runs when the page is unloaded (useful for cleanup)});I sorted it out in another way, but posting it here in case it helps anyone.Template: Simple LayoutQuestion type: multiple choiceFormat: drop downTranslations: multipleChoices: full list of countries.Behaviour: sort list in any language which is not English, while keeping the first and last <li> element in their original position.You only need to add this to the question > javascript. changing “QID18” for your question ID.Qualtrics.SurveyEngine.addOnload(function() { // Get the language setting from embedded data var lang = "${e://Field/Q_Language}"; console.log("Current language code: " + lang); // Only proceed with sorting if the language is not English if (lang !== "EN") { // Get the list of <li> elements var menuList = document.querySelectorAll("#select-menu-QID18 li.menu-item"); // Convert the NodeList to an array var menuArray = Array.prototype.slice.call(menuList); // Separate the first and last elements var firstItem = menuArray.shift(); // Removes and stores the first item var lastItem = menuArray.pop(); // Removes and stores the last item // Sort the remaining items based on the text content menuArray.sort(function(a, b) { var textA = a.textContent.trim().toUpperCase(); var textB = b.textContent.trim().toUpperCase(); return textA.localeCompare(textB); }); // Get the parent element var parent = document.querySelector("#select-menu-QID18"); // Append the first item back to the parent parent.appendChild(firstItem); // Append the sorted items to the parent menuArray.forEach(function(item) { parent.appendChild(item); }); // Append the last item back to the parent parent.appendChild(lastItem); console.log("Options sorted with first and last items preserved."); }});Qualtrics.SurveyEngine.addOnReady(function() { // Code here runs when the page is fully displayed});Qualtrics.SurveyEngine.addOnUnload(function() { // This code runs when the page is unloaded (useful for cleanup)});

Search bar using select2 with Simple layout

Search bar using select2 with Simple layout | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded