Timer Float with Survey Flow | XM Community
Skip to main content
Hello!

I recently created multiple surveys and had trouble making my timer float along with my questions. The timer stayed fixed at the top of the survey where the first question was displayed. I wanted the timer to move down (be visible) when I scrolled down to through the entire survey. I did some research through posts in the qualtrics community and found a code that worked perfect! I just had to modify the QID number to match the QID of my timer question.
div#QID5Timer {
position: fixed;
top: 0;
right: 0;
background: #000;

However, my supervisor now 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 into one, the original CSS codes I had for each individual survey did not work (which makes sense that they wouldn't).

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 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?
Would JavaScript be able to better do the trick?
Thank you!

Have you found a solution to this? I also need to have a floating timer in one block of my survey.

Hello!

I am a bit new to using Javascript in Qualtrics and I also want my timer to float, but I was wonder how you exactly modified the QID number to match the QID of your timer question? I read something about the Custom CSS, but I am not entirely sure what to enter there..

Thanks!

Hello!
What I ended up doing is entering a long list of code in the CSS box (which you may find under the survey settings, "Survey Look & Feel" -> "Style" -> "Custom CSS"). To obtain the ID for each question, I had to select the specific question on the page I wanted a timer on, then clicked on the tab that reads "Piped Text" -> "Survey Question" -> (select the question you want to know the ID of) -> "Question Text". Qualtrics will then generate a strand of text in that particular question you have selected. For example, "${q://QID2052/QuestionText}". Here, you would want to make note of the question's "QID" number (in this case, 2052). So, in my code, I only changed the actual number of the question ID and the rest I kept the same.
div#QID2052Timer {
    position: fixed;
    top: 0;
    right: 0;
    background: #000;
}

div#QID1742Timer {
    position: fixed;
    top: 0;
    right: 0;
    background: #000;
}
...so on and so fourth.
To be clear, I only generated the QID code for each block I needed a timer on. At the top of each block, I selected a question type of "Timing". Here you are able to select a timer counting up or down, as well as other settings. I obtained the QID for each of my timer questions ONLY, so not each individual question in my block. The CSS code worked perfectly for me, in having the timer displayed and float at the top of the page even when I scrolled up or down.
I am not sure if there is an easier way to go about this through Javascript. But here are some links that I looked into to help me with creating a floating timer on specific blocks in my survey.
JavaScript & Qualtrics: Getting StartedCustom Timers and Time’s Up Notifications in QualtricsqualtricsTimer.js
I hope the information in creating a CSS code and/or one of these links are useful!

Leave a Reply


Terms & Conditions