{{ block title }}
Control Questions (2/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>C</b> <br>
  Participant <b>b</b> chooses Field <b>A</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_2a' }}
  {{ formfield 'control_2b' }}
  {{ formfield 'control_2c' }}

  <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 <b>same field</b> as you.

    <br><br>

    (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 <u>no other participant</u> 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 <u>one other participant</u> 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 <u>two other participants</u> 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 <u>no other participant</u> 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 <u>one other participant</u> 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 <u>two other participants</u> 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 }}

    (3) 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 question2c = document.getElementById("id_control_2c");
  var question1c_value = -1;

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

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

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


</script>


{{ endblock }}