Timer Float with Survey Flow
Best answer by NM_Morales
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!
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!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.