{{ extends 'global/Page.html' }}
{{ block title }}Video Instructions{{ endblock }}

{{ block content }}

<p>
    Please watch the following video carefully before proceeding. There are two parts to this video, split up by a comprehension question.
    <b>Participants who spend an unusually long amount of time on either video page may be excluded from the study.</b>
 </p>

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/Lt40UQWjrOk?si=ADg7fvR56K9cN_ri" 
    title="Instruction Video" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

<p>If you'd like to review the instructions in text form, you can find them <a href="https://drive.google.com/file/d/1an4m4aCrY71bhE4HsHZQVQWIljEmt7OH/view?usp=drive_link" target="_blank">here</a>.</p>
<p>
    We recommend accessing this instructions now as they may be helpful throughout the game. 
</p>

<p id="timerMessage">You can proceed after the video ends.</p>

<button id="nextButton" disabled>Next</button>

<script>
    // Set the duration of the video in seconds
    const videoDuration = 225; // Replace with video length in seconds (510 for us)
    const nextButton = document.getElementById("nextButton");
    const timerMessage = document.getElementById("timerMessage");

    // Enable the Next button after the video ends
    const timer = setTimeout(() => {
        nextButton.disabled = false;
        timerMessage.textContent = "You may now proceed.";
    }, videoDuration * 1000);

    // Additional safeguard to ensure the button enables when video ends
    document.getElementById("instructionVideo").addEventListener("ended", () => {
        clearTimeout(timer);
        nextButton.disabled = false;
        timerMessage.textContent = "You may now proceed.";
    });
</script>


{{ endblock }}