How to use js to insert the question number when using question randomization within block? | XM Community
Skip to main content

For example, I have a block consisting of 8 questions. I randomize the order of the questions and present one question per screen. I would like to insert the question number on each page. I saw an old discussion (attached below) in the community and implement the idea in the following step:
https://www.qualtrics.com/community/discussion/11982/adding-question-numbers-to-randomized-blocks
(1) I insert an embedded data "qnumber" and set its initial value to be 1
(2) I insert "${e://Field/qnumber}" in each question and hope it will show question numbers.
(3) I insert javascript code in each question. I tried two versions.
The first one result: question numbers increases as I click "continue" button, but it will also increase the question number when I click "previous" button. It is obviously incorrect code to use.
The second result: I tried to avoid the mistakes in version 1, but it doesn't work at all. When I click "continue" button, the question number doesn't increase as expected.
Does any of you know how to do this? Or can you help me fix my code to make it work? I am really confused. Why the second version doesn't work? Thank you very much!
version 1
Qualtrics.SurveyEngine.addOnReady(function() {
var qnumber="$e{ 1 + e://Field/qnumber }";
Qualtrics.SurveyEngine.setEmbeddedData( 'qnumber', qnumber);
});
version 2
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery('#PreviousButton').click(function(event) {
   var qnumber="$e{ e://Field/qnumber - 1 }"
 Qualtrics.SurveyEngine.setEmbeddedData( 'qnumber', qnumber);
  });
jQuery('#PreviousButton').click(function(event) {
   var qnumber="$e{ e://Field/qnumber + 1 }"
 Qualtrics.SurveyEngine.setEmbeddedData( 'qnumber', qnumber);
  });
});

I have realized that attaching a click handler to the Next button can cause conflicts. Someone suggest to create a new button so that I can add what I want. I insert in html view
 
And the following JS code works. But there's still problem. I don't know how to place the button after all questions within one page. Do you have any insight?
jQuery("#myButton1").click(function() { 
 var qnumber="$e{ e://Field/qnumber - 1 }";
 Qualtrics.SurveyEngine.setEmbeddedData( 'qnumber', qnumber);
 jQuery("#PreviousButton").click();
});
jQuery("#myButton2").click(function() { 
 var qnumber="$e{ e://Field/qnumber + 1 }";
 Qualtrics.SurveyEngine.setEmbeddedData( 'qnumber', qnumber);
 jQuery("#NextButton").click();
});

I just figured out how to insert question numbers when using question randomization. I did some research in Qualtrics community and combined several best answers. Especially I would like to thank @TomG for his help (I really don't know how to mention people and whether I do it in a right way). He proposed the idea of using addOnPageSubmit and make the solution easier than I think.
(1) I insert an embedded data "qnumber" and set its initial value to be 1
(2) I insert "${e://Field/qnumber}" in each question body where I want to place the question number.
(3) I insert JavaScript code in each question.
Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{
if(type == "next")
{ var qnumber ="$e{ e://Field/qnumber + 1 }";
Qualtrics.SurveyEngine.setEmbeddedData("qnumber", qnumber);
}
if(type == "prev")
{ var qnumber ="$e{ e://Field/qnumber - 1 }";
Qualtrics.SurveyEngine.setEmbeddedData("qnumber", qnumber);
}
});

Leave a Reply


Terms & Conditions