{{ block title }}
Control Questions (1/3)
{{ endblock }}

{{ block content }}

<button class="otree-btn-next btn btn-primary" id="instrToggle" style="float: right;">Show Instructions</button>

<br><br><br>

<div id="controlQuestions" style="display: block;">

  <h4>Suppose the group participants decided as follows:</h4>
  <br>
  Participant <b>a</b> chooses Field <b>B</b> <br>
  Participant <b>b</b> chooses Field <b>B</b> <br>
  Participant <b>c</b> chooses Field <b>C</b> <br>

  <br>
  <hr><br>

  <b>What is the payoff of each participant in this period?</b> <br><br>
  {{ formfield 'control_1a' }}
  {{ formfield 'control_1b' }}
  {{ formfield 'control_1c' }}

  <br><br>

  {{ next_button }}

</div>


<div id="instructions" style="display: none;">

  <h4>Suppose the group participants decided as follows:</h4>
  <br>
  Participant <b>a</b> chooses Field <b>B</b> <br>
  Participant <b>b</b> chooses Field <b>B</b> <br>
  Participant <b>c</b> chooses Field <b>C</b> <br>

  <br><br>

  <div style="border: 2px solid black; padding: 5px;">
    Your <b><u>payoff</u></b> in a period depends on the following:

    <br><br>

    (1) How many other Participants in your group have chosen the same Field as you, and (2) whether you are on <b>your
      field</b> (<b style="color: #295dcf;">Field {{ player.role.upper }}</b>), or on one of the other fields (<b>Fields
      {{ if player.role == 'a' }}B and C{{ elif player.role == 'b' }}A and C{{ else }}A and B{{ endif }}</b>).

    {{ if group.high_payoffs }}
    <ul>
      <li>If <b>no</b> other participant has chosen the same field as you, you will receive <b>0 points</b> (no matter
        if
        you are on your field or on someone else's field).</li>
      <li>If <b>one</b> other participant has chosen the same field as you, you will receive <b>10 points</b> if it is
        someone else's field, and <b>30 points</b> if it is your field.</li>
      <li>If <b>two</b> other participants have chosen the same field as you, you will receive <b>20 points</b> if it is
        someone else's field, and <b>60 points</b> if it is your field.</li>
    </ul>
    {{ else }}
    <ul>
      <li>If <b>no</b> other participant has chosen the same field as you, you will receive <b>0 points</b> (no matter
        if
        you are on your field or on someone else's field).</li>
      <li>If <b>one</b> other participant has chosen the same field as you, you will receive <b>10 points</b> if it is
        someone else's field, and <b>11 points</b> if it is your field.</li>
      <li>If <b>two</b> other participants have chosen the same field as you, you will receive <b>20 points</b> if it is
        someone else's field, and <b>22 points</b> if it is your field.</li>
    </ul>
    {{ endif }}

    <br>

    Moreover, in every period you will receive <b><u>additional points</u></b> that are independent of your choices. In
    particular:

    {{ if group.lumpsum }}
    <ul>
      <li>Participant <b>a</b> {{ if player.role == 'a' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>30 additional points</b> per period.
      </li>
      <li>Participant <b>b</b> {{ if player.role == 'b' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
      <li>Participant <b>c</b> {{ if player.role == 'c' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
    </ul>
    {{ else }}
    <ul>
      <li>Participant <b>a</b> {{ if player.role == 'a' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
      <li>Participant <b>b</b> {{ if player.role == 'b' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
      <li>Participant <b>c</b> {{ if player.role == 'c' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
    </ul>
    {{ endif }}
  </div>

</div>


<script>
  var instructionsToggled = false;
  var instrToggle = document.getElementById("instrToggle");
  var controlQuestions = document.getElementById("controlQuestions");
  var instructions = document.getElementById("instructions");
  var question1c = document.getElementById("id_control_1c");
  var question1c_value = -1;

  instrToggle.onclick = function () {
    if (!instructionsToggled) {
      // Clear last answer to prevent answer submission
      question1c_value = question1c.value;
      question1c.value = "";

      // Toggle View
      controlQuestions.style.display = "none";
      instructions.style.display = "block";
      instructionsToggled = true;
      instrToggle.textContent = "Show Questions"
    }
    else {
      // Re-enter last answer
      question1c.value = question1c_value;

      // Toggle View
      controlQuestions.style.display = "block";
      instructions.style.display = "none";
      instructionsToggled = false;
      instrToggle.textContent = "Show Instructions";
    }
  }


</script>


{{ endblock }}