How to display text after user finishes selecting multiple options in multiple choice question | XM Community
Solved

How to display text after user finishes selecting multiple options in multiple choice question

  • 10 July 2018
  • 8 replies
  • 258 views

We need to reveal some text to a respondent after they have finished selecting multiple options in multiple choice question.
How would you do this?
e.g. The respondent choses 6 of the 11 MC options below.
How would we put up a 'Next' or 'Continue' button then have the text appear?

!
icon

Best answer by mattyb513 11 July 2018, 13:08

View original

8 replies

Userlevel 6
Badge +6
It's a little unclear what you are asking for but it probably requires JavaScript. You would typically listen for every click and then evaluate whether your conditions were true, then display some text.

If it's a specific set of the 6 MC options, then I would just use Custom Validation on a separate question on the same page and not use any JavaScript.

If it's _any_ set of 6, Custom Validation will become tedious. In that case, I would do something like this:

```javascript
// put this in the addOnLoad function

var that = this;
this.questionclick = function(event,element) {
var choices = that.getSelectedChoices(); // returns an array of all selected options
if (choices.length >= 6) {
// now reveal the question!
jQuery('#QID2').show();
} else {
// or not
jQuery('#QID2').hide();
}
}

// put this is the addOnReady function

// on page load, hide the question you want to use to display extra text
jQuery('#QID2').hide();


```

This JavaScript would be placed in the JavaScript editor the question on the page containing the options.

Working example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_aahaMOlHHLyVtDn?Q_SurveyVersionID=current&Q_CHL=preview
Userlevel 6
Badge +6
Sorry to not post the entirety of the JavaScript code, but Qualtrics' question parser seems to be blocking any type of functions, annoyingly. Here it is in a gist:

https://gist.github.com/mattbloomfield/d06c25da2b48737001e891b7c33d62cf
Hey Matty, thanks for that! I'll give that a try 😉
Hi Matty, this might make things clearer.
If you look at this screenshot, what I imagined was not a fixed number but rather having a button (like the Next button) that when you pressed it would reveal the text at the bottom regardless of the amount of options chosen. (Sorry, I'm still a bit of a Javascript newbie.)
!
Userlevel 6
Badge +6
Try this out instead. Note that you may need to change the QID for the hidden question.

I also point out in the comments that you may want to add additional styling to the Next button, which you can do using CSS.

https://gist.github.com/mattbloomfield/1a34555b9f1618ebbd07a458167b69c6
Userlevel 4
Badge +5
Hi @"peter.bright",

You may use in page display logic to apply the setup.

Step 1 : Create a multiple select question with option as above in your example.
Step 2: Create a text question with text written in it and apply a dispaly logic on question to be shown once the corresponding choice is selected.

Hope this help!

Regards,
Samarth
> @mattyb513 said:
> It's a little unclear what you are asking for but it probably requires JavaScript. You would typically listen for every click and then evaluate whether your conditions were true, then display some text.
>
> If it's a specific set of the 6 MC options, then I would just use Custom Validation on a separate question on the same page and not use any JavaScript.
>
> If it's _any_ set of 6, Custom Validation will become tedious. In that case, I would do something like this:
>
> ```javascript
> // put this in the addOnLoad function
>
> var that = this;
> this.questionclick = function(event,element) {
> var choices = that.getSelectedChoices(); // returns an array of all selected options
> if (choices.length >= 6) {
> // now reveal the question!
> jQuery('#QID2').show();
> } else {
> // or not
> jQuery('#QID2').hide();
> }
> }
>
> // put this is the addOnReady function
>
> // on page load, hide the question you want to use to display extra text
> jQuery('#QID2').hide();
>
>
> ```
>
> This JavaScript would be placed in the JavaScript editor the question on the page containing the options.
>
> Working example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_aahaMOlHHLyVtDn?Q_SurveyVersionID=current&Q_CHL=preview

Is it possible to apply to several questions on a page? Such as making sure the respondent answer at least one of the questions and then reveal the next button.

Leave a Reply