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.
Best answer by Tom_1842
@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 choices
jQuery("#"+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...
@wuyue I think the NPS question type works well to display 1-10 horizontally on mobile. You can use JS to adjust the values of the choices that get displayed to the respondent.
This won't change the actual values of the selections (0-10), so you could either:
Add Branching in the Survey Flow for each selection that will set the desired values in an Embedded Data field
Or
Update the value on page submit so that it is set to what was displayed to the respondent. Adding the below to the question’s JavaScript will do this and then change the styling of the new selected choice to match an unselected choice. It will also readjust the value back to what the respondent selected if the back button is used, but test with live link not a preview:
Qualtrics.SurveyEngine.addOnload(function()
{/*Place your JavaScript here to run when the page loads*/var selChoiceLoad = this.getSelectedChoices();
var selChoiceNumLoad = parseInt(selChoiceLoad) - 1;
this.setChoiceValue(selChoiceNumLoad, true);
});
Qualtrics.SurveyEngine.addOnReady(function()
{/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+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*/if(type == "next") {
var selChoice = this.getSelectedChoices();
var selChoiceNum = parseInt(selChoice) + 1;
this.setChoiceValue(selChoiceNum, true);
jQuery("#"+this.questionId+"-"+selChoiceNum+"-label").css({
"background": "#f1f1f1",
"border": "none",
"color": "#000000"
});
}
});
@wuyue I think the NPS question type works well to display 1-10 horizontally on mobile. You can use JS to adjust the values of the choices that get displayed to the respondent.
This won't change the actual values of the selections (0-10), so you could either:
Add Branching in the Survey Flow for each selection that will set the desired values in an Embedded Data field
Or
Update the value on page submit so that it is set to what was displayed to the respondent. Adding the below to the question’s JavaScript will do this and then change the styling of the new selected choice to match an unselected choice. It will also readjust the value back to what the respondent selected if the back button is used, but test with live link not a preview:
Qualtrics.SurveyEngine.addOnload(function()
{/*Place your JavaScript here to run when the page loads*/var selChoiceLoad = this.getSelectedChoices();
var selChoiceNumLoad = parseInt(selChoiceLoad) - 1;
this.setChoiceValue(selChoiceNumLoad, true);
});
Qualtrics.SurveyEngine.addOnReady(function()
{/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+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*/if(type == "next") {
var selChoice = this.getSelectedChoices();
var selChoiceNum = parseInt(selChoice) + 1;
this.setChoiceValue(selChoiceNum, true);
jQuery("#"+this.questionId+"-"+selChoiceNum+"-label").css({
"background": "#f1f1f1",
"border": "none",
"color": "#000000"
});
}
});
For “Don’t know” when hitting back button on live link it takes you to 10. how can this be avoided?
@PeeyushBansal , I see what you mean. I've adjusted the previous code so that it makes use of the unused "0" choice to accommodate the Don't Know selection. When the page loads, it checks to see if any choices are checked. The first time through, nothing will be checked. When returning to the question through the back button, a choice will be checked and so the choices are retrieved, 1 is subtracted, and then that choice is checked. When the page is submitted, the code checks to see if choice value "10" is selected (Don't know). If it is, the value is updated to "0". If it is a choice value other than 10/Don't Know, the choices are retrieved, 1 is added, and then that choice is checked. Give it a try in a live survey that uses Classic layout:
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 choices
jQuery("#"+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*/if(type == "next") {
//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"
});
}
}
});
A modified version of a matrix question with Mobile Friendly turned off, like what TomG offers, would also work well
@PeeyushBansal , I see what you mean. I've adjusted the previous code so that it makes use of the unused "0" choice to accommodate the Don't Know selection. When the page loads, it checks to see if any choices are checked. The first time through, nothing will be checked. When returning to the question through the back button, a choice will be checked and so the choices are retrieved, 1 is subtracted, and then that choice is checked. When the page is submitted, the code checks to see if choice value "10" is selected (Don't know). If it is, the value is updated to "0". If it is a choice value other than 10/Don't Know, the choices are retrieved, 1 is added, and then that choice is checked. Give it a try in a live survey that uses Classic layout:
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 choices
jQuery("#"+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*/if(type == "next") {
//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"
});
}
}
});
A modified version of a matrix question with Mobile Friendly turned off, like what TomG offers, would also work well
@Tom_1842 this worked for back button button but is again moving selections if i go back , back and then next to same page. For exampe 3 pages (from 3rd page if i go back to second it is ok, but if i go from 3rd to 2nd and than to Ist and then back to 2nd it changes selection)
@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 choices
jQuery("#"+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"
});
}
});
@PeeyushBansal glad to hear! And just so it’s here, below is an option for the Matrix question approach. Create a matrix question with 1 statement, 11 scale points, standard likert, 'Add labels' turned on, 'Mobile Friendly' turned off, 'Position text above' turned on. Update scale points and labels, and then add the below CSS to the Style section of the Look and Feel:
@PeeyushBansal glad to hear! And just so it’s here, below is an option for the Matrix question approach. Create a matrix question with 1 statement, 11 scale points, standard likert, 'Add labels' turned on, 'Mobile Friendly' turned off, 'Position text above' turned on. Update scale points and labels, and then add the below CSS to the Style section of the Look and Feel:
