Hi there, have you tried using the Classic Layout over in the survey's Look & Feel? For Multiple Choice questions, the choice text is displayed within the buttons, like in the below picture where the Classic Layout is on top and your HTML is on the bottom.
If you would rather go with the HTML version, you can use JavaScript to set values in the data based on the HTML button selections. If your HTML buttons are being housed within a Text/Graphic question, setting this value with Embedded Data might be the way to go.
In your Survey Flow, create an Embedded Data Element at the top of the Flow and create an Embedded Data field called "size_q". Set the value of this field to be "0".
Next, add the below JavaScript to the Onload section of the question so that a value gets Embedded when an HTML button is selected:
document.querySelector("#small").onclick = function () {
Qualtrics.SurveyEngine.setEmbeddedData("size_q", "1");
}
document.querySelector("#medium").onclick = function () {
Qualtrics.SurveyEngine.setEmbeddedData("size_q", "2");
}
document.querySelector("#large").onclick = function () {
Qualtrics.SurveyEngine.setEmbeddedData("size_q", "3");
}
document.querySelector("#x-large").onclick = function () {
Qualtrics.SurveyEngine.setEmbeddedData("size_q", "4");
}
document.querySelector("#xx-large").onclick = function () {
Qualtrics.SurveyEngine.setEmbeddedData("size_q", "5");
}
Hi Tom, thanks for that - I will go the HTML route.
Hi Tom, I am trying to insert html into the Text/Graphic question but I cannot see how to do it?
Braemarblue In the Survey Builder, with the text of your Text/Graphic question selected, click on "Rich Content Editor" to add anything beyond just plain text. In the Rich Content Editor, click on the "<>" icon to see the HTML source view and you can place the HTML there. To add the JavaScript, click the " JavaScript" option under Question Behavior.
Hi Tom, I cannot see the html or JS entry icons?
Also, how would I insert css into this ?
Hi Tom, still cannot add the html or the JavaScript?
Hi Tom
In the classic view, the buttons are specified as horizontal, but the render vertical on the mobile device? Also, can the width/color of the buttons be changed?
Hi Tom
Can I add a css to the Text/Graphic question?
Braemarblue In the Rich Content Editor, HTML can be added by clicking on the source view icon "<>" in the top row, next to the text that reads "Less..."
CSS can be added to a single page by wrapping it in within the HTML source view of the Question Text, or to the whole survey by adding it to the "Custom CSS" portion over in the Look & Feel's Style section.
JavaScript is not added via the Rich Content Editor, but by clicking the " JavaScript" option on the left side of the Survey Builder, which can be seen towards the left in your screen shot. It looks like it is grayed out though, so you may need to check with your Administrator to enable the JavaScript permission.
Qualtrics will auto format Multiple Choice questions to be vertical for mobile devices, but a workaround might be to use the NPS question type and change how the scale gets displayed. The links provided by TomG in this thread have JavaScript that can change the scale by hiding options or adjusting the numerals that get displayed.
Hi Tom
We need - if its possible(?) - to style the radio buttons inside a Matrix survey question as below.
We have of course multiple languages as well to support.
Braemarblue It is possible to build a matrix table out of HTML and use the set Embedded Data method for each potential answer option, but that would be a lot of configuring and I am not sure how that would be supported in multiple languages. I think your best bet would be to use a Qualtrics question type so that you can use the Translations feature and respondents can select a language during the survey.
You might consider using a Matrix question that is set to Format = Profile. This will display radio buttons with text inside, but the mobile view will be vertical unless "Mobile Friendly" is unselected. With 7 point scale, it is likely to go off the screen when horizontal, though reducing the font size and answer padding might help. The top option in the below screen shot.
For always having horizontal radio buttons on desktop+mobile and with numbers displayed within the buttons on a 1-7 scale, the closest I was able to come was to use an NPS question type, hide the answer options for 7-10, widen the answer options for 0-6, and then relabel 0-6 to be 1-7. The bottom option in the below screen shot.
For the matrix profile option, the CSS to reduce answer padding is below:
.Skin .Matrix label.SingleAnswer {
padding: 10px !important;
}
For the NPS option, the CSS to hide 7-10 and widen 0-6 is below:
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(8),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(9),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(10),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(11) {
display: none;
}
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(1),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(2),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(3),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(4),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(5),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(6),
div.Inner.BorderColor.NPS > div > fieldset > div > table > tbody > tr:nth-child(2) > td:nth-child(7) {
width: 14.28571%;
}
For the NPS option, the JavaScript to relabel 0-6 to 1-7 is below.
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");
Thanks Tom, will give that a try!
