Hi there,
My goal is to display a set of suboptions if a previous option is selected, but within the same question. Thanks to in page display logic and some help from a previous thread on how to remove blank spaces before and after questions, I ended up with a pretty good looking question. Each option is an individual question within a block.
But now, the issue is that I cannot randomize the order of the questions within the block, as I'm using in page display logic.
Would anyone have any ideas or any custom code I could use to achieve this?
I have attached a screenshot of how the question looks like, without the randomization.
Thanks in advance!
Solved
Randomize questions within block with in page display logic
Best answer by TomG
It isn't working because 'this' no longer refers to the question object inside the click function. Add this at the beginning of script:
var q = jQuery("#"+this.questionId);
Then use:
q.find("input[choiceid=4]")
+27I would make it all one question and use JavaScript to only show the sub-options if the parent option is checked. That way, question randomization won't have any impact on it.
Thanks TomG for your suggestion! That would completely solve my problem. I'm not an expert with JS, would you happen to know which code I could use? or point me in the direction of where I could find that answer?
+27https://www.qualtrics.com/community/discussion/comment/29028#Comment_29028I've never had the need for it myself and don't recall seeing it anywhere else. It will be a bit tricky, so if you lack JS skills you may need to find someone to write it for you.
TomG unfortunately there is nobody with JS skills in my team. But I have made more digging in other threads and I have found a code that might work. I managed to hide the option, but not to display it once another option is selected. Would you mind to take a look, please?
Thanks!
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" input[choiceid=4]").closest("li").hide();
jQuery("#"+this.questionId+" input[type='checkbox']").change(function(){
if(jQuery("#"+this.questionId+" input[choiceid=1]").prop("checked") == true)
{
// now reveal the question!
jQuery("#"+this.questionId+" input[choiceid=4]").closest("li").show();
} else {
// or not
jQuery("#"+this.questionId+" input[choiceid=4]").closest("li").hide();
}
});
+27I think your event handler should be:
jQuery("#"+this.questionId+" input[choiceid=1]").click(function() {
if(this.checked) {
...etc...
However, you are really going about this the hard way. I would avoid using hard coded choice ids.
TomG Thanks for the tip, I think I'm getting closer but not there yet... Still the option doesn't display on click. I saw your response to another thread that triggered the next button once an option was selected. Would a version of that work?
And happy not to use hard coded choice ids, but I didn't know any alternatives. I would be open to any suggestions.
Thanks a lot for your help!
PS. The latest code I used based on your suggestion is this:
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" input[choiceid=4]").closest("li").hide();
jQuery("#"+this.questionId+" input[choiceid=1]").click(function() {
if(this.checked) {
jQuery("#"+this.questionId+" input[choiceid=4]").closest("li").show();
} else {
jQuery("#"+this.questionId+" input[choiceid=4]").closest("li").hide();
}
});
I am looking for the same thing!
https://www.qualtrics.com/community/discussion/comment/29104#Comment_29104
+27It isn't working because 'this' no longer refers to the question object inside the click function. Add this at the beginning of script:
var q = jQuery("#"+this.questionId);
Then use:
q.find("input[choiceid=4]")
Thanks a lot TomG !!
For LADYKSTRA or for anyone looking to solve this issue, this is the final code:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var q = jQuery("#"+this.questionId);
jQuery(q.find("input[choiceid=4]")).closest("li").hide();
jQuery("#"+this.questionId+" input[choiceid=1]").click(function() {
if(this.checked) {
// now reveal the question!
jQuery(q.find("input[choiceid=4]")).closest("li").show();
} else {
// or not
jQuery(q.find("input[choiceid=4]")).closest("li").hide();
}
});
});
+27In case there is any interest...I've developed a JavaScript function that provides a flexible solution to this in one question. Demo here.
It supports any number of choices and sub-choices without JS modification. It has options for automatic deselect (i.e., automatically deselect sub-choices when parent choice is deselected or don't allow parent deselection if sub-choices are selected), sub-choice indentation, and choice alignment. It supports randomization of choices and sub-choices including anchoring sub-choices, and the previous/back button.
Contact me by private message if interested (it isn't free).
Hi Everyone,
Hope You Are Good,
Could you please attach a QSF. Please anyone can share. I will appericiate because i am confusing and QSF is a Solution
https://www.qualtrics.com/community/discussion/comment/29218#Comment_29218Thanks for the code,
I think I am looking for one step previously. How does one put the sub options in the first place. I actually don't need them randomized. Is this the same code?
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.