Hi Team Guru! I struggle to believe, that Qualtrics cannot support horizontal 1-10 multiple choice questions with label options within mobile devices. Hopefully I have just not looked the right place ... Basically I want to have as shown in the attached screenshot: ! My problem is, that Multiple Choice options gets vertical when using from mobile. NPS has the EXACT layout I need, but it does not allow me to edit the options (I need 1-10 and 11th option is "Don't know".) Matrix is not an option as it creates space and movies the option far right. So the 1000 dollar question is, how can I get this multiple choice horizontally on both desktop and mobile just like the NPS? 😃 Do I need to do some coding? If so, any suggestion? This has to be a feature request by the way 😉 Big thanks in advance.

@PeeyushBansal, I see what you mean, and appreciate the thoroughness of your testing! This is because the increment is only happening when the next button is pressed, not for the back button also. Removing "if(type == "next")" from the addOnPageSubmit will increment the choice value any time the page is submitted, not just the next button. Try the below:Qualtrics.SurveyEngine.addOnload(function(){/*Place your JavaScript here to run when the page loads*///are any options checkedvar qchecked = document.querySelectorAll(".q-checked");if (qchecked.length > 0) {//if any are checked, get the choicesvar selChoiceLoad = this.getSelectedChoices();//if choice is set to 0, select option that is don't knowif(selChoiceLoad == 0) {this.setChoiceValue(10, true);} else {//if any other choice is selected, subtract 1 and selectvar selChoiceNumLoad = parseInt(selChoiceLoad) - 1;this.setChoiceValue(selChoiceNumLoad, true);}}});Qualtrics.SurveyEngine.addOnReady(function(){/*Place your JavaScript here to run when the page is fully displayed*///relabel the choicesjQuery("#"+this.questionId+"-0-label").html("1");jQuery("#"+this.questionId+"-1-label").html("2");jQuery("#"+this.questionId+"-2-label").html("3");jQuery("#"+this.questionId+"-3-label").html("4");jQuery("#"+this.questionId+"-4-label").html("5");jQuery("#"+this.questionId+"-5-label").html("6");jQuery("#"+this.questionId+"-6-label").html("7");jQuery("#"+this.questionId+"-7-label").html("8");jQuery("#"+this.questionId+"-8-label").html("9");jQuery("#"+this.questionId+"-9-label").html("10");jQuery("#"+this.questionId+"-10-label").html("Don't Know").css({"padding":"1px"});});Qualtrics.SurveyEngine.addOnUnload(function(){/*Place your JavaScript here to run when the page is unloaded*/});Qualtrics.SurveyEngine.addOnPageSubmit(function(type){/*Place your JavaScript here to run when the page is unloaded*///Get the choices when page submitsvar selChoice = this.getSelectedChoices();//if don't know option, set value to 0if(selChoice == 10 ) {this.setChoiceValue(0, true);jQuery("#"+this.questionId+"-0-label").css({"background": "#f1f1f1", "border": "none", "color": "#000000"});} else {//if any other choice is selected, add 1 and selectvar selChoiceNum = parseInt(selChoice) + 1;this.setChoiceValue(selChoiceNum, true);jQuery("#"+this.questionId+"-"+selChoiceNum+"-label").css({"background": "#f1f1f1", "border": "none", "color": "#000000"});}});

Hi @AbdulDezkam,what about using a matrix, but hide the part with the statemen using CSS and not put your options into the matrix options, but above using HTML with our custom CSS?Personally, I'd prefer to have the question horizontal on mobiles, but to put the labels above and below the text. I can provide you a script for this. However, this would likely require to have the last option in a separate question and you probably prefer the horizontal layout...

Horizontal multiple choice (1-10 scale) questions

Horizontal multiple choice (1-10 scale) questions | XM Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded