How to lock/fix a question at the top of the screen, while scrolling down?

Hey ahmedA,
It seems that I encounter some problems with implementing the code after all. When I go through the steps you mentioned above, I get to see an error: "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token ILLEGAL"
Because I don't know anything about java script, I have no clue what this means and how I could resolve this. Could you maybe have a look at my code?

Maybe good to know is that I work with piped text in the little tables (i.e., loop and merge). Maybe this might be the thing causing troubles since // seems to be a way to include comments in the code?
Code to fix table on top of screen.docx

Can you send me the code in a plain text file. Just copy everything from the javascript box.

Qualtrics.SurveyEngine.addOnload(function()
{
  base_element = document.querySelector(".SkinInner")
  base_element.insertAdjacentHTML('afterbegin', '

Hi ahmedA
Like this? In the previous post, I also included a word document with my code. I hope this is sufficient. If not, feel free to let me know.

Thanks in advance for having a look at my code!

Your code isn't working because you are using an embedded data within the backticks. Here's the solution:
add this line at the begginign (before base_element = ...)

my_text = "${lm://Field/21}";

${lm://Field/21}

`+my_text+`

Hi ahmedA,

Thanks for having a look at my code. Now it works fine!
I was still wondering, though, whether it was possible to create a white band across the width of the page behind the table (that also drops down when scrolling) as to make the table more readable while scrolling? Now the text above the table becomes very hard to read and the presentation is not really elegant.

Thanks again for all your help.

I've added the white background to your table definition. Use this, instead of the one above.

Hi ahmedA,

Thanks for the quick response. I found out how to give the table a colour already, however, I am particulary interested in how to give the space around the table a colour.
I believe it can be done with the w3-bar class, however, when I try to implement it, it does not seem to work.
Could you maybe have a look at it?

So many thanks, again.

can you share the preview link?

This is the preview link of the block:

https://febugent.eu.qualtrics.com/jfe/preview/SV_0N6Lr7fZ9tqukg6/BL_3QqbONQRmcpkgdM?Q_SurveyVersionID=current

Okay. add background white to the div sticky_vid

It works! Thanks a lot Ahmed!!

I have a similar problem (locking a table with embedded data at the top of the screen), but the proposed solutions don't work as I still get the following error message: "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token ILLEGAL".
Does anyone know what I did wrong in the code below? Many thanks in advance!

Qualtrics.SurveyEngine.addOnload(function()
{
gender = "${e://Field/Gender1}";
leeftijd = "${e://Field/Leeftijd1}";
woonwerkafstand = "${e://Field/Woonwerkafstand1}";
ervaring = "${e://Field/Ervaring1}";
statuut = "${e://Field/Statuut1}";
werkloosheidsduur = "${e://Field/Werkloosheidsduur1}";
extracurriculaire_activiteiten = "${e://Field/Extracurriculaire_activiteiten1}";
sollicitatiewijze = "${e://Field/Sollicitatiewijze1}";
 
   base_element = document.querySelector(".SkinInner")
   base_element.insertAdjacentHTML('afterbegin', '

You are using single quotes for

new_element.innerHTML

Hi @ahmedA! I’m trying to do the same thing, but with a video, which is part of a loop & merge block.

I tried your code:

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

});

The HTML in my video question is this:

<div style="text-align: center;"> <video id="videoPlayer" class="qmedia" controls="true" height="260" preload="auto" width="450" autoplay="true">
    <source src="${lm://Field/1}" 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 partly working for me: but my page now shows two videos, one of them stuck to the top, but not showing anything, and one working one (probably from my html code), that stays in its location. Any ideas what I’m doing wrong?

As always, your help is greatly appreciated!

You have two videos because you are inserting two videos (1 thru html and 1 via JS). 

Is that not the desired outcome? What are you trying to acheive?

Hi @ahmedA! Yeah, that was my thought too. I am actually just trying to display one video, but this video should be fixed to the top of the page, so if a participant scrolls down to answer multiple questions about this video, they still always see the video.

In this case I guess I can delete the HTML video, but then this still doesn’t solve that the loop & merge video link doesnt work when inserted into the JS how I am currently doing it. 

Basically the loop & merge of this block is filled with 12 links, and I need it to go through them and display a new video each time the participant clicks next. In the html one this works fine, but as soon as I move it to JS the video stays black.

Have you my first response to this thread. That should work for you.

Yes, I have added  my_video = "${lm://Field/1}"; to the start of my code, and then referenced it within the JS as source src=“+my_video+”. I didnt quite understand the HTML part in this thread, as when I am adding backticks ` to the html code, the video still shows up twice, and the backticks are also shown.

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

I now went ahead and deleted the HTML in my question, and now I am only seeing one video stuck to the top, but it is still not loading the link of the video.

Current code:

Qualtrics.SurveyEngine.addOnReady(function()

{

my_video = "${lm://Field/1}";

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 = `<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>`;

base_element.style.zIndex = 1;

new_element.style.zIndex = 10;

I fixed it! It was a problem with the backticks! Working code:

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

Hi, I am trying to pin an explanation to the top of my page as well. However I do not understand the steps exactly.

Specifically I do not understand step 6 of the code: “Step 6: Add the modified code to the JS section of any question on the page. Step 6: Add the modified code to the JS section of any question on the page.”

Does this mean that for each block, I have to add the modified JS code? 

For example, I want to have the following explanation pinned in each block of statements:

This section will briefly explain the concept of digital twins in healthcare. 

Digital twins in healthcare are defined as followed:

“Virtual representations (“digital twins”) of patients (“physical twin”) that are generated from multimodal patient data such as genetics, population data and real-time updates on patient and environmental variables” (Venkatesh et al., 2022).

Basically, this means your individual anatomy will be fully duplicated to a virtual environment. This is achieved by combining clinical data from electronic health records with environmental data. With clinical data we mean biological, genetic, molecular and imaging data. With environmental data we mean data sourced from an individual's environment by leveraging sensors and health wearables. 

Digital twins are developed by leveraging several modern technologies such as artificial intelligence, blockchain, and big data analytics. Other important enabling technologies are virtual reality, augmented reality and 3D printing. 

Digital twins have the potential to create predictions and simulations of an individuals’ health. Additionally, digital twins can be used for the improvement of diagnostics and patient treatment, personalized medicine and therapy, and personalized healthcare in general.

If an individual wants to make use of their digital twin, this individual must grant access to their patient data so that the digital twin can be developed and analyzed by medical experts.

 __

What would my JS then look like? And should I add it to each statement block? 

Thanks a lot in advance!