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

{{ block content }}

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

<!--Instructions Button-->

{{ next_button }}

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

<div id="instructions" style="display: none;">
    <h2>The Consequences</h2>
    <p>You and your rivals make extra revenue for every unit of data received in the sharing decision. All units of data you have access to will be added up and will be multiplied by a certain <b>revenue factor</b> giving you your base revenue.</p>
    <p class="equation">Base revenue = (Your data + data shared with you) * revenue factor</p>

    <p>The average of your rival's base revenue multiplied by a <b>competition factor</b> will be deducted from your base revenue giving you your profit.</p>

    <p class="equation">Profit = Base revenue – competition factor * average base revenue of rivals</p>

    <h2>Your Strategy</h2>
    <p>Any amount of data you share is unfavorable to your profit as part of the others' base revenue will be deducted from your own results. However, in every environment you may face, you can <b>achieve higher profits if you get your rivals to share data with you.</b></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 }}