Timing a background-colour change | Experience Community
Skip to main content
Question

Timing a background-colour change

  • February 5, 2021
  • 2 replies
  • 50 views
A

Hi everyone,
I've got a multiple choice question that is timed to last 5 seconds and I want the backgound to change colour after 4seconds to indicate when time is running out.
I've been trying to use setTimout in various ways to achieve this but it hasn't worked, for example:

Qualtrics.SurveyEngine.addOnload (function ()
{
setTimeout(jQuery("#Questions").css("background-color","skyblue"), 4000)
});

Does anyone know a fix? Thanks so, so much!

    2 replies

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • February 5, 2021

    The questions container is for holding the questions. On top of it you have other divs and fieldsets with contain the question and choices. One approach would be to get the question container via JS and apply the colour to it.
    let qc = this.getQuestionContainer();
    setTimeout(function () {qc.style.background = "skyblue"}, 4000);
    This applies only to that specific question. If you want to do it for all questions on the page then use the class 

    QuestionOuter

      A
      • Alexis_S
      • Author
      • February 6, 2021

      Amazing, thanks so much Ahemd!! That worked : )
      By any chance, do you know if there's a way to colour the outside of the question container rather than the inside, in the same timed fashion?
      Thanks again, you're real life saver!

      Terms & ConditionsAccessibility statement