How to get a timer to float (item remain in position)? | XM Community
Skip to main content
Hello, I have a timing question that gives participants/respondents a countdown of available time as they answer a series of questions (see pic below) on a page. The series of questions is several 'scrolls' long by design. Is there a way -- in javascript-- to get the timer to 'float' down or stay in the same place, always visible, as the participants scroll down through the series of questions so that they can always see how much time they have left? I found this https://stackoverflow.com/questions/46286498/how-to-have-entire-item-in-qualtrics-remain-in-position-when-scrolling but I can't seem to figure out how to implement this with the timing question. Thanks in advance! -- Newbie, RKC

!
This CSS should work



```css

div#QID5Timer {

position: fixed;

top: 0;

right: 0;

background: #000;

}

```



Make sure you change the QID to match the QID of your Timer question. This can be inserted in the Look and Feel > Advanced > Custom CSS
Thanks. Great solution.
Hello! I tried this code and it worked! It did just what I wanted it to do. However, my supervisor asked me to mash up several surveys together to have one big survey instead. So now, with survey flow, the people taking the surveys are able to see ONLY the parts of the survey that correspond to them based on a selection of answers at the beginning of the survey. Thus, certain blocks do have timers and some don't. When I imported my surveys onto one, the original CSS codes did not work. Is there a way to tell qualtrics to have the timer float for say 4 blocks out of 8? I tried to include 4 individual codes with different QIDs but qualtrics didn't like that. So then, I tried to modify the first line of the code you provided but none of the things I tried work. For example I wrote:



div#QID13-91-328-247Timer {

position: fixed;

top: 0;

right: 0;

background: #000;



I also tried



div#QID13:91:328:247Timer {

position: fixed;

top: 0;

right: 0;

background: #000;



and,



div#QID13QID91QID328QID247Timer {

position: fixed;

top: 0;

right: 0;

background: #000;



Would anyone be able to help me figure this one out?

Thank you!

Leave a Reply


Terms & Conditions