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

{{ block content }}


<p>Please watch the following video carefully before proceeding. There will be two comprehension questions after the video is done.</p>
<iframe 
    width="640" 
    height="360" 
    src="https://www.youtube.com/embed/2T3XUqK3-oU?si=O-67x25hVdev0hVP" 
    title="Instruction Video" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin"
    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=sharing" 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 = 600; // 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 }}