This is a weird one.
I had custom js in a loop and merge to create an early exit option in place of the usual back button (since back button is disabled in survey anyway). It’s been working great.
I want to add code to hide the next button until the video on p1 (of the 2p loop and merge block) has reached the end. I found code in the forums here and got it working on its own in a test survey. Then I added in the early exit bits into the test survey and it worked great. But when I copied over the newer code into my real survey (which has lots of display logic, quotas, etc), the exit early worked but the continue button never appeared.
Tried it in three different branch blocks and had the same result. Imported the block from my test survey to the beginning of the real survey and that block worked, but the later branch still didn’t. I re-copied and pasted the code in case I’d accidentally cut off a character or added a space or something, but no change. I can’t for the life of me figure out what would prevent it from working in the branched block in my real survey, but not in the first block, or in either a first or branched block in the test survey. I tried various fiddlings with the code (I suspected some of the exit early code was not needed and just hadn’t been removed from original dev). In all cases they worked in the test survey and the first block of real survey and not in the branched block of the real one. Here’s the code in the two questions on page one of 2-page loop and merge block (2nd page is just questions about the video).
Embedded Data. Set at beginning of survey flow, EndLoop = 0.
On every question in loop and merge block, display logic to only display if EndLoop = 1.
Q1. A timing question. In js popup, this is all for the early exit:
/* Get the EndLoop variable */
var EndLoop = "${e://Field/EndLoop}";
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var that = this;
jQuery( '<input type="button" id="PreviousButton" class="Button PreviousButton" value="Exit Early" />' )
.css( 'background-color', 'rgba(61,61,68,0.3)' )
.prependTo( jQuery('#Buttons') )
.on( 'click', function(e){
e.preventDefault();
if ( confirm( "Are you sure you'd like to skip the rest of the videos?" ) ) {
Qualtrics.SurveyEngine.setEmbeddedData('EndLoop', 1);
that.clickNextButton();
}
});
jQuery("#"+this.questionId).prev(".Separator").hide();
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});Q2. A Text/Graphic question that pulls in the vimeo embed using piped text from the LM table.
/* Get the EndLoop variable */
var EndLoop = "${e://Field/EndLoop}";
Qualtrics.SurveyEngine.addOnload(function()
{
/* hide previous and next button */
$('NextButton') && $('NextButton').hide();
$('PreviousButton') && $('PreviousButton').hide();
/* Function: on click on user-defined button -> change the field EndLoop */
var that = this;
setEndLoop = function(){
Qualtrics.SurveyEngine.setEmbeddedData('EndLoop', 1);
that.clickNextButton();
};
});
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
this.hideNextButton();
this.getChoiceContainer().hide();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var my_vid = document.querySelector("myvideo");
const player = new Vimeo.Player("myvideo");
that = this;
document.addEventListener("visibilitychange", () => {
if (document.visibilityState !== 'visible') {
player.pause();
}
});
player.on("play", function () {
my_vid.style.pointerEvents = "none";
});
player.on("ended", function () {
that.showNextButton();
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});I have separate OnLoad segments in this snippet so it’s easy to see which code goes with which feature but the outcome is the same whether they are in one block or two. The upper segment is for early exit, while the second OnLoad and the OnReady are for the autopause and hidden next button until the video ends. In my fiddling, I found that removing all the EndLoop stuff from this one made no difference and it still worked as expected based on the EndLoop code on Q1 (I tried it because I was vaguely remmebering some older code might still be hanging out).
With or without the EndLoop stuff in Q2, the flow is like this...
Looks like this when page 1 of lm block loads:
And like this when video is completed:
If someone clicks Exit Early before the last loop (randomized, select x of total loops in table) is finished, they get a popup that looks like this:
If they click OK, it skips them to the next block in survey flow after the loop and merge.
Can anyone think of a reason why it works in the test survey (both as block 1 and as branched blocks) and as block 1 in the real survey, but not in a branched block in the real survey? I’ve been trying to figure this out for five hours and can’t think of anything else to try, short of abandoning the real survey and starting over (hate to do that because the setup would take days due to answer choice logic earlier in the survey that determines available videos based on quotas and two previous questions). I also tried opening in Firefox in case it was just a weird Chrome cache thing, restarted Chrome, no change.
Help?
