I'm using the "text/ graphic" type que to show a video to the participants. Followig the video there are 3-4 multiple choice questions. The MCQs and next button will be displayed only after the video has been played. The videos are of different durations. I've been able to hide the next button and made it visible when the video finishes playing. I could also hide the question containers of MCQs during page load. However, I'm not being able to make the MCQ questions visible when the next button appears (since the video and MCQs are part of different questions on the same page, I believe all of them have common access to the next button on that page). Previous qualtrics answers do not adequately address my need!
Any help/ direction/access to working code snippet would be great! Thanks!
Show multiple MCQ questions on same page after a video is finished playing
let later = Array.from(document.querySelectorAll(["id^=QID"]))
later.shift() // Assuming the first question contains the video. You may need to remove the appropriate one.
later.forEach(q => q.hide())
let vid = document.querySelector("video") ; // Assuming only one video on the page.
vid.onended = function () {later.forEach(q => q.show())}
Do I need to add this code snippet in the JS of the first que that contains the video? Tried that but the MCQ still appeared first.
It should work on the entire page, so the question doesn't matter.
Can you share your survey link (without this code). I'll probably need to see what's going wrong.
Sorry, I missed your previous reply. I was able to solve it by adding the following code snippet for all the MCQs on the page.
Qualtrics.SurveyEngine.addOnReady(function() {
var con=this;
jQuery("#vid").on("ended", function() { con.getQuestionContainer().show() });
});
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.