{{ extends 'global/Page.html' }}
{{ block title }}Comprehension Test: Question 2{{ endblock }}

{{ block content }}

<div id="info">
        <h2>Question 2:</h2>
    
        {{ formfields }}
</div>

{{ next_button }}

<!--Instructions Button-->

<button type='button' id="toggleButton" onclick="toggleInstructions()">Show Relevant Instructions</button>

<div id="instructions" style="display: none;">
    <h2>The Setting</h2>
    <p>You and two other companies (also controlled by humans), in the future called "rivals", may share data with each other, you're each given a 100 data units. The underlying mechanics on revenue generation are exactly the same for all rivals. You will play 7 rounds, every round is a clean slate, no profit or data is carried over.</p>
</div>

{{ endblock }}

{{ block scripts }}
<script>
function toggleInstructions() {
    var instructions = document.getElementById("instructions");
    var toggleButton = document.getElementById("toggleButton");

    if (instructions.style.display === "none" || instructions.style.display === "") {
      // Show the instructions
      instructions.style.display = "block";
      toggleButton.innerHTML = "Hide Instructions";
    } else {
      // Hide the instructions
      instructions.style.display = "none";
      toggleButton.innerHTML = "Show Instructions";
    }
  }
</script>
{{ endblock }}