Flo Flo - 2 months ago 13
Javascript Question

Hide list item in Qualtrics with jquery

I managed to hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my question.

screenshot of question

This is the code that I entered into the javascript window belonging to the question:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/

$(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";

});


I was wondering how the same could be achieved with jQuery?




I have successfully installed jQuery thanks to this handy guide by adding

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


in the source view of the header. Additionally, I added
var jq = jQuery.noConflict();
at the top of the javascript window belonging to this question.

By inspecting the source code further I found that the ID of the question is
QID2
. Based on this answer I therefore tried

$("#QID2 .ChoiceStructure ul li:eq(0)").hide();


but without success.

Please note that ideally I would not want to specify the question ID manually, but instead refer to the question as I have with regular JavaScript.

Edit: the html for the qualtrics question is:

<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">

<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR">

<div class="InnerInner BorderColor TX">

<fieldset>

<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->

<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>

<div class="QuestionBody">

<!-- Begin Choices w/o choice groups -->

<ul class="ChoiceStructure">

<li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li>
<li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li>

</ul>
<!-- End Choices w/o choice groups -->

<div class="clear zero"></div>

</div>

</fieldset>

</div>

</div>

</div>

Answer

You can use prototypejs (which Qualtrics already uses) to do it quite simply:

Qualtrics.SurveyEngine.addOnload(function()
{
    $(this.questionId).down('li').hide();
});
Comments