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

{{ block content }}

<div id="info">
        <h2>Question 4:</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 Scenarios</h2>
    <p>(1) You may face scenarios where you and your rivals have different revenue factors, so that for the same amount of data, you will make different revenues.
    </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 }}