Hi everyone,
I am posting the solution to a question that I had but (finally) figured out the solution to. This is for those wanting to pin/freeze an image to the top of the screen (with a white background) so that it remains in place while the participant scrolls through survey questions.
Shoutout to ahmedA for responding in related forums and for providing the step-by-step instructions for how to do with this text: https://community.qualtrics.com/XMcommunity/discussion/14035/pin-instructions-to-top-of-page-as-participants-scroll-through-questions#latest
There's only a couple steps to pin your image to the top of the screen.
- Within your question block in Qualtrics that you want to add the image to, right-click on any question and click on the option "Add JavaScript"
- Delete all of the code in the box and replace it with the code below:
Qualtrics.SurveyEngine.addOnload(function()
{
base_element = document.querySelector(".SkinInner")
base_element.insertAdjacentHTML('afterbegin', '
');
new_element = document.querySelector("#sticky_vid")
// Replace LOCATION OF IMAGE FILE with the link to your image. Do not delete the double quotes
// You can also edit the image dimensions under "width: XXXpx" and height: XXXpx"
new_element.innerHTML = '
'
// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;
});
That's basically it. Hopefully this helps other fellow non-coders!
Jenn
new_element = document.querySelector("#sticky_vid")
// Replace LOCATION OF IMAGE FILE with the link to your image. Do not delete the double quotes
// You can also edit the image dimensions under "width: XXXpx" and height: XXXpx"
new_element.innerHTML = '
// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;
});
That's basically it. Hopefully this helps other fellow non-coders!
Jenn