Hide list item in Qualtrics with jquery

Question

I can hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my 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>

Can you add the html code ? No necessary for all listing - just a block with id = "QID2" ? — alexoander, Sep 27 '16 at 12:35
When you use $() you are using prototypejs, not jquery. Based on what you said you did, use jq() for jquery. — T. Gibbons, Sep 27 '16 at 13:19
@T.Gibbons, do you mean `jq("#QID2 .ChoiceStructure ul li:eq(0)").hide();`? also no success here... — Flo, Sep 27 '16 at 13:25
Yes, that is what I meant. I'll post an answer using just prototypejs. — T. Gibbons, Sep 27 '16 at 15:02

score 2 · Accepted Answer · answered Sep 27 '16 at 15:09

2

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

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

answered Sep 27 '16 at 15:09

T. Gibbons

4,919
2
15
32

alexoander · Answer 2 · 2016-09-27T13:00:39.097

Maybe some of rules that you added in JQuery request ( i mean inside the brackets $(here)) is not valid and JQuery returns wrong link to node element (or returns "undefined"). I guesting that a problem in last construction with .class ul li (because u added class to ul). So you need to use

$("#QID2 ul li:eq(0)") or

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

About refer to the question - you can use variables as in normal JS and add value in JQuery using simple concatenation like

$("#QID"+variableWithQuestionNumber+" li:eq(0)")

(function(){
  var counter = 0;
  $(".myButton").click(function(e){
    if (counter===0){
      $("#QID2 ul li:eq(0)").hide();
      counter++;
    }else{
      $("#QID2 ul li:eq(0)").show();
      counter--;
    }
  });

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>

<input type="button" class="myButton" value="Push me"/>

Would this not hide the entire question, rather than an item within the question? Also, I think there might be some Qualtrics peculiarities as the code you suggested does not do anything. — Flo, Sep 27 '16 at 12:21
Oh you are right about hiding - my bad. Try to use the same request but without ul inside `$("#QID2 .ChoiceStructure ul li:eq(0)").hide();` . I am guessing u have a 1) Id on the question 2) class ="ChoiceStructure" and 3) li inside. Can u add in question your HTML example for sure? — alexoander, Sep 27 '16 at 12:27
apologies for the long wait, somehow I lost formatting while copying the html and had to manually indent everything — Flo, Sep 27 '16 at 12:40
So as i guested - u need just `$("#QID2 ul li:eq(0)")` - changed answer as well. — alexoander, Sep 27 '16 at 12:43
hm my feeling is that there is a Qualtrics peculiarity at work here, as this does not work in Qualtrics. — Flo, Sep 27 '16 at 12:48
Only if Qualtrics changes the html and css content. In other case u can use other JQuery function - .attr( attributeName, value ). I mean `$("#QID2 ul li:eq(0)").attr("display","none");` — alexoander, Sep 27 '16 at 12:54
thank you for this suggestion! Unfortunately also this code did not have any effect in Qualtrics. — Flo, Sep 27 '16 at 12:57
updated the answer - add code that you can run on the site. I hope u can resolve your problem using that example. — alexoander, Sep 27 '16 at 13:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124302/discussion-between-flo-and-alexoander). — Flo, Sep 27 '16 at 13:04

Hide list item in Qualtrics with jquery

2 Answers2