Delayed Slider Question Doesn't work with my Javascript | XM Community
Skip to main content
Solved

Delayed Slider Question Doesn't work with my Javascript

  • January 18, 2021
  • 6 replies
  • 130 views
T

Hello! I'm new to customizing Qualtrics survey questions and need some support. I have slider questions that I'm using Javascript to delay until after a video finishes playing (I found the script in this post), but the slider doesn't work once it appears after the delay. The slider disappears and I'm not able to move the slider when previewing it (see image below). My other questions (e.g., multiple choice) work just fine though with the exact same script. Does anyone know how I can fix this?

Screen Shot 2021-01-17 at 8.08.56 PM.png

Best answer by ahmedA

This seems to be a really weird issue. Perhaps Qualtrics should look into it. LaurenK could you please ask someone from the tech team to check why the slider gets disabled when it is hidden.
Meanwhile, you can use this code to get the job done.
Qualtrics.SurveyEngine.addOnReady(function () {
    qid = "#" + this.questionId;
    document.querySelector(qid).style.opacity = "1%";
    delay_time = 3000;
    setTimeout(function () {
        document.querySelector(qid).style.opacity = "";
    }, delay_time);
});

6 replies

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

This seems to be a really weird issue. Perhaps Qualtrics should look into it. LaurenK could you please ask someone from the tech team to check why the slider gets disabled when it is hidden.
Meanwhile, you can use this code to get the job done.
Qualtrics.SurveyEngine.addOnReady(function () {
    qid = "#" + this.questionId;
    document.querySelector(qid).style.opacity = "1%";
    delay_time = 3000;
    setTimeout(function () {
        document.querySelector(qid).style.opacity = "";
    }, delay_time);
});

    LaurenK
    Former XM Community Team Member
    Forum|alt.badge.img+13
    • LaurenK
    • Former XM Community Team Member
    • January 22, 2021

    Hi ahmedA! Unfortunately, the Qualtrics Support team is unable to provide assistance with troubleshooting custom code solutions. Posting right here in the Developer Corner will be your best bet moving forward! 😀

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

    Thanks for update Lauren, but I think this problem isn't associated with the custom code, but instead with how Qualtrics implements the slider.
    There is some code at the backend, which freezes the slider once it is hidden. Perhaps someone from the tech team could share advice on how to avoid this issue or what is causing the freeze. Because it doesn't happen with other questions.

      T
      • Trinda
      • Author
      • January 24, 2021

      Thank you ahmedA! I decided to go a different route with the survey but I appreciate your response

      M
      Forum|alt.badge.img+1
      • Max_Ga
      • May 11, 2022

      https://community.qualtrics.com/XMcommunity/discussion/comment/33620#Comment_33620This code does not seem to work if I want to hide several questions in the same block, right?
      ahmedA: Do you have any suggestion what I need to change so that the code works for multiple questions?

      S
      Forum|alt.badge.img

      I've been struggling with the delayed slider for a little bit now! I think I've found a workaround for, what seems to be, a glitch. You can adjust the visibility in CSS through JavaScript, setting the question to hidden on load and delay setting it to visible on ready. Hopefully the code below will help someone!

      Qualtrics.SurveyEngine.addOnload(function()
      {
      	qid = "#" + this.questionId;
          document.querySelector(qid).style.visibility = "hidden";
      });
      Qualtrics.SurveyEngine.addOnReady(function () {

          delay_time = 5*1000;
          setTimeout(function () {
              document.querySelector(qid).style.visibility = "visible";
          }, delay_time);
      });

       

      Terms & ConditionsAccessibility statement