I’m seeking assistance with setting up a timer in a Descriptive question in my Qualtrics survey. I’ve added the necessary HTML and JavaScript for the timer functionality, but I am encountering a few issues, and I would like some guidance.

The Problem:

• Preview Issue: When I preview the question alone, the timer works correctly. However, when I preview the entire block, the timer disappears after I click the "Start Timer" button.
• I have confirmed that the timer container is correctly set to display: none initially and should appear once the button is clicked.

1. Ensure the timer remains visible when previewing the entire block.
2. Confirm if there’s any additional adjustment needed for the JavaScript or HTML to ensure proper functioning across the block.

I appreciate anyone who can help me, the codes are below

Current Setup:

In the Descriptive question, I have the following HTML code:

<div>
  <h3 style="text-align: center;"><strong>Instructions:</strong></h3>
 
  <p style="margin-top: 20px; text-align: center;">
    You are now going to complete a listening activity. Please follow the steps below:<br />
     
  </p>

  <div style="text-align: center;">
    <strong>Step 1:</strong> Click the “Start Timer” button below to begin a 15-minute countdown.<br />
    <strong>Step 2:</strong> Press the play button on the video below and listen attentively for the entire 15 minutes.<br />
    <strong>Step 3:</strong> When the timer reaches 0, click the next arrow to proceed.<br />
    <br />
  </div>

  <!-- Button to start the timer -->
  <div style="text-align: center;">
    <button id="startTimerButton">Start Timer</button>
    <!-- Timer Container (Initially hidden) -->
    <div id="timerContainer" style="display: none;">
      <p>Time Remaining: <span id="timeRemaining">15:00</span></p>
    </div>
  </div>

  <!-- Instructions to press play and video -->
  <p style="text-align: center; font-weight: bold; color: red;">Now, press the play button below:</p>

  <div style="text-align: center;">
    <iframe height="315" src="https://www.youtube.com/embed/2wgg7KtzTrU?start=14" width="560"></iframe>
  </div>

  <p style="text-align: center; font-weight: bold; color: red; margin-top: 20px;">When the timer reaches 0 click the next arrow.</p>
</div>

And I am using the following JavaScript to control the timer:

 

Qualtrics.SurveyEngine.addOnload(function() {
    const startButton = document.getElementById('startTimerButton');
    const timerContainer = document.getElementById('timerContainer');
    const timeRemainingElement = document.getElementById('timeRemaining');

    if (!startButton || !timerContainer || !timeRemainingElement) {
        console.error("Timer elements or button not found!");
        return;
    }

    let timerInterval;

    startButton.addEventListener('click', function() {
        if (timerInterval) return; // Prevent multiple clicks from starting multiple timers

        let timeRemaining = 15 * 60; // 15 minutes in seconds
        startButton.disabled = true; // Disable button once clicked to prevent further clicks

        // Show the timer
        timerContainer.style.display = 'block';

        // Start the timer
        timerInterval = setInterval(function() {
            const minutes = Math.floor(timeRemaining / 60);
            const seconds = timeRemaining % 60;

            // Update the time remaining text
            timeRemainingElement.innerHTML = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;

            timeRemaining--; // Decrement the time remaining

            // Check if the timer has ended
            if (timeRemaining < 0) {
                clearInterval(timerInterval); // Stop the interval
                timeRemainingElement.innerHTML = "Time is up!";
            }
        }, 1000); // Update every second
    });
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/
});