Horizontal multiple choice (1-10 scale) questions

Hi gauravbhagat,
Could you share your solution?
Thanks!

@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"
});

}

});