Hi, I’m also looking for a solution if you found one!
@TomG Got it, sorry for the confusion! Having used the YouTube API, the glitching issue is now gone, but I’ve noticed that the video now takes a substantial amount of time to load (which is an issue because this is part of a cognitive task, so it needs to happen seamlessly and quickly), and I am also trying to find a way to hide the Youtube logo/user name: My Javascript/HTML code to try to do this is below. Thank you! Qualtrics.SurveyEngine.addOnload(function() { var base_element = document.querySelector(".SkinInner"); base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">'); var new_element = document.querySelector("#sticky_vid"); new_element.innerHTML = '<video autoplay class="qmedia" height="400" preload="auto" width="800"><source src="https://youtu.be/5QAg21KgdhM" type="video/mp4" /><embed align="middle" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quick
@TomG Sorry to follow up on this, but any idea with my previous response? Thanks for your continued help! I really appreciate it!!
@TomG that makes sense, thanks! Unfortunately, the video is no longer loading. Is there anything wrong in the below revised HTML/Javascript code? Thank you!! <video autoplay="" class="qmedia" height="400" preload="metadata" width="800"><source src="https://youtu.be/5QAg21KgdhM" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://youtu.be/5QAg21KgdhM" type="video/quicktime" width="800" /></video> Qualtrics.SurveyEngine.addOnload(function() { var base_element = document.querySelector(".SkinInner"); base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">'); var new_element = document.querySelector("#sticky_vid"); new_element.innerHTML = '<video autoplay class="qmedia" height="400" preload="auto" width="800"><source src="https://youtu.be/5QAg21KgdhM" type="video/m
Hi @TomG, I appreciate your insight! I have tried running the issue on other computers (and it persisted), if that is what you mean. Or do you mean using another survey platform entirely? Thanks!
@Gaurav_27 So sorry for the inconvenience but I’m still having trouble with the bug - I would really appreciate any suggestions you might have!
@vgayraud Thank you for the suggestion. I’ve tested your code, and although the bug now happens less frequently, it did still occur a couple of times when I tried it out. Any more ideas? I really appreciate the help!
@Gaurav_27 Yes, when I changed the code to what you had suggested, the video stopped loading.
@Gaurav_27 Hi, thanks for the suggestion! It looks like the video doesn’t load at all anymore with that code. Do you have any ideas as to why?
@dxconnamnguyen I’ve DM’ed you, thanks!
@dxconnamnguyen I appreciate the suggestion! It doesn’t look like it changed anything, though. Would you be able to additionally clarify what you had meant earlier about setting the internal HTML height to 500px? I had changed the JavaScript code to that height where it said “new_element.innerHTML =” accordingly.
@dxconnamnguyen Got it, thanks! But wouldn’t that apply to the entire survey (I have additional sections in the survey)? To give an idea of my survey looks like, it is glitching a bit:You’ll see at the 2-second and 7-second marks that when the pages with the videos load, they start out at a certain size and then reconfigure, which is quite disorienting. Any ideas why this occurs? The videos in which I have not yet adjusted the code do not have this issue. And after I’ve added the custom CSS code, this is actually happening throughout the entire survey, too, though it’s not nearly as noticeable. Below is the HTML and JavaScript code for the first video shown, if that helps. Thanks!:<video autoplay="" class="qmedia" height="400" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime
@dxconnamnguyen Yes, you’ve been helping me quite a bit! :)Would the code look like this? I’m getting an error message now (“Invalid JavaScript! You cannot save until you fix all errors: Unexpected token .”):Qualtrics.SurveyEngine.addOnload(function() { .Skin. SkinInner { padding-top: 0px !important;} var base_element = document.querySelector(".SkinInner"); base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">'); var new_element = document.querySelector("#sticky_vid"); new_element.innerHTML = '<video autoplay class="qmedia" height="500" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle" bgcolor="white" class="qmedia" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800" /><
@dxconnamnguyen Removing controllers=false worked, thank you!I’ve tried the code you suggested, and below is an image of how the page now looks like: Since I still need to scroll down a little to see the full video, do you know if there is a way to move the video up the page even further? I may have to reduce the size of the video, but I'd prefer not to. Thank you so much for your ongoing help!
@dxconnamnguyen Thanks for the suggestion. I tried changing controller to “false,” but it didn’t quite work; I still can see the controllers.As for pinning the video, I’ve tried combining the suggested code and what I had for coding keyboard response to the video (i.e., pressing “J” or “K” for the appropriate multiple choice response after watching the video, which would take the respondent to the next page):Qualtrics.SurveyEngine.addOnload(function(){ base_element = document.querySelector(".SkinInner") base_element.insertAdjacentHTML('afterbegin', ''); new_element = document.querySelector("#sticky_vid") new_element.innerHTML = ~<video autoplay="" class="qmedia" controls="false" height="600" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle" bgcolor="white" class="qmedia" controller="false" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="http
@dxconnamnguyen That did work, thanks! Is there also a way to disable the controls? Would you also happen to know how to pin the video at the top of the page? The reason I want to do that is because if the video autoplays, then the respondent will miss part of the video when they have to scroll down to see it. Thanks!
@ahmedA Would you happen to know how to do this with a question? I am looking to present my question at the top of the page when it loads so that respondents don’t need to scroll down to view the question. Would the code be any different? Thank you!
@dxconnamnguyen Thanks for the input! Would you be able to clarify how to map the keyboard responses with the advance button?
@dxconnamnguyen, it means, for instance, pressing “A” on the keyboard if your answer to a question is “yes” or “B” on the keyboard if your answer is “no.” I would like to make two keyboard responses, each corresponding to a different multiple choice answer, for a question.
Alternatively, the problem I run into when I turn off the in-page display logic but have both pools in the same block is that the question randomization also randomizes the display logic questions. I cannot find a way for them to appear only if its original question is randomly selected. I know there is the advanced randomization option to keep certain items fixed and others randomized, and while I could certainly keep the items from Pool #2 in a fixed position, when I do the same for the display logic questions, they appear regardless of if its original question was randomly selected or not. Is there a way to fix this? And assuming I am indeed able to find a way around this, is there an option to additionally randomize the order of the questions? For instance, here is how the advanced randomization looks like:The words that are alone (i.e., elbow, precede, etc.) are the original questions, and the display logic questions are the ones that begin with “What was the color…”. The last two
@rgupta15 Thank you for the suggestion! After looking into the Randomizer from survey flow, is there a way to separately randomize the two aforementioned pools? Because I want questions from the two pools to be mixed together after they are randomly selected accordingly, I am unsure of how to place the Randomizers in the survey flow such that the way why I randomize pool #1 doesn’t affect pool #2. It doesn’t look like I can place two separate Randomizers, since then the pools will not mix, nor can I place one Randomizer under another since it would disrupt the randomizing of the first pool.
Already have an account? Login
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.
