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

{{ block content }}

{{ formfields }}
<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>
<button class="accordion">Introduction</button>
<div class="panel">
  <p>
&bull;In this “duel game” you are competing with another player.
    </p>
<p>
&bull;Each round has one prize that will be awarded either to you or to your opponent, based on your choice, their choice, and luck.
    </p>
<p>
&bull;You will be matched with another human player and you will keep playing against the same player until the end of the game.
    </p>
</div>
<button class="accordion">Game Overview</button>
<div class="panel">
  
<p>
&bull;In each round, you are asked to decide how long to wait before starting the duel.
     </p>
<p>
&bull;Imagine you and your opponent are two cowboys in a duel. Each of you have only one chance of shooting the opponent, but you lose the duel if you miss the shot.
    </p>
<p>
&bull;Imagine you are initially very far from each other, and with a low accuracy, but you can aim better and better by walking towards each other.
    </p>
<p>
&bull;The longer you wait, the higher is the accuracy (both for you and your opponent) and therefore the chance of hitting the target.
</p>
</div>
<button class="accordion">Decision</button>
<div class="panel">
  <p>
&bull;Similar to the example, in each round, you decide how long to wait before “shooting.”
    </p>
<p>
&bull;You will see on the screen how the accuracy increases over time, both for you and your opponent.
    </p>
<p>
&bull;You will indicate in which period you want to shoot, moving a slider to select an integer number between 0 (do not wait at all) and 20 (wait as much as possible).
    </p>

</div>
<button class="accordion">Duel Simulation</button>
<div class="panel">
  <p>
&bull;After both players indicate their choice, the computer simulates the duel in two steps.
    </p>
<p>
&bull;First, it determines who is shooting, i.e. who is the fastest cowboy. This is based on which player wants to wait the least before shooting. Ties are broken randomly, with equal chance.
    </p>
<p>
&bull;Second, it determines if the shot is successful, based on the accuracy probability in that period. If the shot is successful, the fastest cowboy wins the round. Otherwise, the slowest cowboy wins the round.
    </p>
</div>
<button class="accordion">Results</button>
<div class="panel">
 <p>
&bull;Consider this example: 
Both players start with 20% accuracy (in period 0) and the accuracy
increases by 10% with each additional period.
</p>
<p>
&bull;Suppose player A decides to wait until period 4, and player B until
period 6.
</p>
<p>
&bull;Player one is the fastest and shoots in period 4. Their accuracy is now 20% + 4 x 10% = 60%.
</p>
<p>
</div>
<button class="accordion">Recap</button>
<div class="panel">
  <p>
&bull;You will play 12 rounds of this duel game.
</p>
<p>
&bull;In each round, only one player wins the prize (one point). You
cumulate points over rounds.
</p>
<p>
&bull;The rounds will differ in the accuracy of shooting at different periods,for example:
    </p>
    <p>
    &emsp;&bull;different initial accuracy for period 0, or
        </p>
<p>
    &emsp;&bull;different accuracy increase for every additional period.
</p>
<p>
&bull;Each round will have a pair of figures that indicate the accuracy.
</p>
<p>
&bull;In some rounds, you and your opponent will have the same accuracy.
</p>
<p>
&bull;In other rounds, you will be different, for example one player starts from a higher accuracy level.
    </p>

</div>



{{ endblock }}