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

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

  • 1 February 2021
  • 22 replies
  • 1105 views
H

Hi everyone,
For a new research project, I ask participants to evaluate fictitious job candidates. The information of the job candidates is summarized in a small table (implemented in Qualtrics as a descriptive text).
Since the participants in the survey need to evaluate the candidates with respect to a bunch of statements it would be great if the table with info would move down when the participants scroll down through the statements. In this way the participants can always see the qualifications of the job applicants while evaluating them.
I was wondering how I could implement this in Qualtics? I have seen discussions regarding fixing images, however with respect to fixing questions I have not seen any solutions for my problem so far. Maybe good to know is that I am completely new when it comes to coding. So any detailed solution on how I could program this, would be great!
Thanks in advance for the input!
Hannah

icon

Best answer by ahmedA 1 February 2021, 14:29

View original

22 replies

A
Rank
Userlevel 7
Badge +21

Answered here: https://www.qualtrics.com/community/discussion/14035/pin-instructions-to-top-of-page-as-participants-scroll-through-questions#latest

H

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.docximage.png

1 Attachment
A
Rank
Userlevel 7
Badge +21

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

H

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 = `PROFILE CANDIDATE A

 

 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
 Name ${lm://Field/21}
 Commuting Distance 0-5 miles
 Experience in the occupation About 2 years
 Recent period of unemployment No
 Extracurricular activities  Volunteering
`
   
   // This is important, otherwise, the element you add will be at the back
  base_element.style.zIndex = 1;
  new_element.style.zIndex = 10;
});

H

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!

A
Rank
Userlevel 7
Badge +21

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

Replace 
${lm://Field/21}
in the body with 
`+my_text+`

It should work now.

H

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.
image.png
Thanks again for all your help.

A
Rank
Userlevel 7
Badge +21 


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

                    
                                    
                            
            
            

                                        

                        


    
    


        





        

        

                            

                    H
                

                    

                    

            
    


        

            

    
    

        
    


    
    

        
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. 

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




    
    


        





        

        

                            

                    A
                

                    

                    
Rank

            
    


        
                

                
Userlevel 7

            

    
                    

    
                
    

        Badge
                    +21
            


            

    
    

        
    


    
    

        
can you share the preview link?

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




    
    


        





        

        

                            

                    H
                

                    

                    

            
    


        

            

    
    

        
    


    
    

        
This is the preview link of the block: 

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

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




    
    


        





        

        

                            

                    A
                

                    

                    
Rank

            
    


        
                

                
Userlevel 7

            

    
                    

    
                
    

        Badge
                    +21
            


            

    
    

        
    


    
    

        
Okay. add background white to the div sticky_vid

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




    
    


        





        

        

                            

                    H
                

                    

                    

            
    


        

            

    
    

        
    


    
    

        
It works! Thanks a lot Ahmed!! 

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




    
    


        





        

        

                            

                    A
                

                    

                    

            
    


        

            

    
    

        
    


    
    

        
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', '
');
   new_element = document.querySelector("#sticky_vid")
   // Change the text below to add the element of your choice
   new_element.innerHTML = 'PROFIEL KANDIDAAT C
 

                                
            
                        

    
    


                        



                        



                        



                        



                        



                        



 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
  
  
 
 
Geslacht'+gender+' 
Leeftijd'+leeftijd+'
Afstand tussen woonplaats en werkplaats'+woonwerkafstand+'
Werkervaring in het beroep'+ervaring+'
Statuut'+statuut+'
Werkloosheidsduur'+werkloosheidsduur+'
Extra-curriculaire activiteiten'+extracurriculaire_activiteiten+'
Sollicitatiewijze'+sollicitatiewijze+'

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

A
Rank
Userlevel 7
Badge +21

You are using single quotes for 

new_element.innerHTML
, use backticks and it should work.

L
Rank
Badge +2

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!

 

 

A
Rank
Userlevel 7
Badge +21

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?

 

L
Rank
Badge +2

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.

A
Rank
Userlevel 7
Badge +21

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

L
Rank
Badge +2

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.

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;

 

L
Rank
Badge +2

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

5
Badge

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!

 

 

Leave a Reply


Terms & Conditions