Pin instructions to top of page as participants scroll through questions.

For the love of God, can someone please tell me how i can do this? I just want my two sentences of instructions to remain visible as participants are scrolling and answering the questions that follow. How do I do this? I found a couple of posts but they were about images and I have no idea how to translate those pieces of code to use them for text, I know very little about code... Help!

Page 1 / 1

Step 1: Write your instructions in the descriptive text question EXACTLY the way you want them to appear on page.
Step 2: Click on the question text and select HTML view
Step 3: Add one backtick (shift + ~; the one on the left of 1) right at the start of everything and one right at the end.
Step 4: Select everything over there and copy it (Ctrl+A Ctrl+C).
Step 5: Paste it in the code below where it says PASTE HERE
Step 6: Add the modified code to the JS section of any question on the page.
Step 7: Preview. Smile and breathe a sigh of Relief.
Step 8: Thank God!
Qualtrics.SurveyEngine.addOnload(function()
{
base_element = document.querySelector(".SkinInner")
base_element.insertAdjacentHTML('afterbegin', '

');
new_element = document.querySelector("#sticky_vid")
// Change the text below to add the element of your choice
new_element.innerHTML = "PASTE HERE"

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;
});
Demo here
Other resources here

Hey Ahmed this is so helpful, it worked!!!! You saved my sanity
But now another little problem: it shows up in all of the following blocks of questionnaires, while i only want it to show on a single block/page. Do you know how to fix this too?
edit: wait actually im dumb, it did show up on that one page/block.

Updated JS here:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

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");

// Change the text below to add the element of your choice
new_element.innerHTML = "PASTE HERE";

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

Is this possible to do with an image? Is the code any different, thanks for the help!

@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!

Updated JS here:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

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");

// Change the text below to add the element of your choice
new_element.innerHTML = "PASTE HERE";

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

Hi @Tom_1842 , can you please update the JS so the image can be pinned at the top of the page. Thank you very much!

@thangnn - you might be interested in the freezeTopQ function. It doesn’t require any custom JS.

Hello @TomG , thank you very much for sharing the JS. Much appreciate!

I use the JS to pin this photo: https://anu.au1.qualtrics.com/CP/Graphic.php?IM=IM_bPCs2KEE87IvgcS

However, the page show the content link: https://anu.au1.qualtrics.com/CP/Graphic.php?IM=IM_bPCs2KEE87IvgcS but not the photo.

Woud you please help with this? Thank you very much and really appreciate your help!

Linh

@Linh - You need to put it in an <img> tag:

<img src="https://anu.au1.qualtrics.com/CP/Graphic.php?IM=IM_bPCs2KEE87IvgcS">

Hi @TomG Awesome! The code works! Thank you very much.

Would you please help with one more solution for this?

Is there any JS to divide the page into frames so that some are fixed (photo on left hand-side) and some allow scrolling (questions on the right-hand side)?

Much appreciate your help! :)

Thank you! Linh

Hi @TomG Awesome! The code works! Thank you very much.

Would you please help with one more solution for this?

Is there any JS to divide the page into frames so that some are fixed (photo on left hand-side) and some allow scrolling (questions on the right-hand side)?

Much appreciate your help! :)

Thank you! Linh

I have a function, sideQs, for this.

hi @TomG , may I know the price to have the funtion sideQs?

Thank you very much!

Linh

Hi there, I’m trying to have a video locked on the screen so that participants can see it play while answering questions about it. I read through this thread and wasn’t able to fix my problem. (I have the video auto-playing and looping, now I just need it to stay in place). I’m not understanding what custom code to insert and where exactly to paste it while I’m in HTML view.

@CallieRW Did you figure it out? I am trying to do the same thing, with the extra difficulty that my video link is an embedded data from a loop & merge.

This might actually be a solution for you, since my problem comes more from the embedded data I think.

This is my JS:

Qualtrics.SurveyEngine.addOnReady(function()
{
my_video = "${lm://Field/1}"; // this is only needed for the embedded data, in your case you can probably put the link into the src below directly.
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");

// Change the text below to add the element of your choice
new_element.innerHTML = `<div style="text-align: center;"> <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="450" autoplay="true">
<source src=“+my_video+” type="video/mp4">
<embed align="middle" autoplay="true" bgcolor="white" class="qmedia" controller="true" height="300" pluginspage="http://www.apple.com/quicktime/download/" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/quicktime" width="450">
</video>`;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

This is the HTML in my question:

My problem is that this is currently displaying two videos, on that is stuck to the top (which we want), but that unfortunately stays black, and one that plays as expected, but is not fixed to the top (comes from my html probably).

Anybody knows what is going wrong?

Edit: Fixed my problem. Just had to delete the HTML code out, and change the JS to this:

Qualtrics.SurveyEngine.addOnload(function()
{
my_video = "${lm://Field/1}";
});
Qualtrics.SurveyEngine.addOnReady(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");

// Change the text below to add the element of your choice
new_element.innerHTML = `<div style="text-align: center;"> <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="450" autoplay="true">
<source src=`+my_video+` type="video/mp4">
<embed align="middle" autoplay="true" bgcolor="white" class="qmedia" controller="true" height="300" pluginspage="http://www.apple.com/quicktime/download/" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/quicktime" width="450">
</video>`;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;
});

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded