Hiding the answer options until after a video is played | XM Community
Skip to main content

I'm presenting a series of short videos, and after each video participants respond with a multiple choice question (field of 4). I want to make sure that they are actually watching the videos and not just clicking through as fast as possible.
As a temporary fix, I've managed to disable the "next" button until after the video has played with the following code:

  • var qobj = this;

  • qobj.hideNextButton();

  • jQuery("#videoName").on("ended", function() { qobj.showNextButton() });

However, what I would ideally like to do is have the multiple choice options not display until the video has finished playing. I am able to use the following to hide the choices, but then I can't get them to reappear after video plays.
  • qobj.hideChoices();

I've poked around on the Qualtrics properties page, but I can't find a function I can call to make them show up again. There doesn't seem to be any functionality like "qobj.showChoices" or anything along those lines. How can I make this happen?
Thanks in advance...

Hi Dave,

You can use the jQuery below to hide and show the option :
To hide:
jQuery(".Selection").css("display","none") or jQuery("ul").css("display","none")

To show:
jQuery(".Selection").css("display","inline") or jQuery("ul").css("display","inline")

SM_21
I've tried the jQuery code you sent, but can't get it to work. It won't hide the choices in the first place, so I can't evaluate whether or not it will work to bring them back either. Do I need to change one of the parameters in quotations?
Also, is this something that I can call as part of a conditional statement? For example:
jQuery ("#videoName").on("ended",function() {jQuery(".Selection").css("display","inline") })
Thanks!

Try this:
Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;
    const video = qc.querySelector("#videoName");
    const choices = qc.querySelector(".QuestionBody");


    // quest.hideNextButton();


    choices.style.display = "none";
    video.onended = () => {
        choices.style.display = "";
        // quest.showNextButton();
    };
});

ahmedA
Thanks, that works perfectly!

Hi! I had a similar problem, but with an audio file. 

I fixed it mostly with this code, going off the other response:

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;
    const audio = qc.querySelector('audio');
    const choices = qc.querySelector(".QuestionBody");

    // quest.hideNextButton();

    choices.style.display = "none";
    audio.onended = () => {
        choices.style.display = "";
        // quest.showNextButton();
    };
});

 

However, now, I can’t move the slider to answer the question, even though the slider appears. Any advice?

I am unable to move the blue slider up or down. How should I fix this?

 

Leave a Reply


Terms & Conditions