Pin/freeze instructions to top of page as participants scroll through questions. | XM Community
Skip to main content

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.

  1. 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"

  2. 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

Hi Jennifer,
It doesn't solve my current Qualtrics problem, but it might very well solve a future problem. Thanks for posting this !
Jacqueline


This isn’t working for me. I keep getting an error. Can you please clarify what “Replace LOCATION OF IMAGE FILE with the link to your image. Do not delete the double quotes” is in reference to?


Leave a Reply