{{ block title }}

{{ endblock }}
{{ block content }}
<div style="max-width: 980px; margin: 0 auto; line-height: 1.55;">

  <div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
    <button type="button" class="btn btn-secondary" onclick="toggleInfo(event)">Show Information</button>
  </div>

  <div id="infoPanel" style="display:none; border:1px solid #ddd; padding:14px 16px; border-radius:6px; background:#fafafa; margin-bottom:16px;">
    <div><style>
  .info-wrap { max-width: 900px; margin: 0 auto; line-height: 1.55; }
  .info-title { text-align: center; font-weight: 700; margin-bottom: 18px; }
  .info-p { margin: 10px 0; }
  .info-list { margin: 10px 0 18px 22px; }
  .info-list li { margin: 10px 0; }
  .section { margin-top: 18px; }
  .subhead { font-weight: 700; margin: 16px 0 6px; }
</style>
<div class="info-wrap">
    <p><center><b>Instructions</b></center></p>
<p>
    This experiment will last for one period. At the beginning of the experiment, each group member will be
    randomly allocated some tokens. We refer to this as your endowment.
</p>

<p>
    Your task is to decide how many of the tokens you have been allocated you want to contribute to a project and
    how many of them to keep for yourself. The other member of your group has to make the same decision. Each group
    member decides simultaneously, that is, without knowing what the other one has done.
</p>

<p>
    <br/>Every token that you do not contribute to the project automatically belongs to you and earns you one point.
    For the tokens contributed to the project the following happens: The total contributions to the project will be
    calculated by adding up the individual contributions made by both group members. This total will then be multiplied
    by 1.5 and this amount will be divided equally among both members of the group. Thus every group member receives
    0.75 points for every token contributed to the project.
</p>

<p>
    <br/>Your bonus amount therefore consists of two parts:
</p>

<p>
    <br/><b>(1) </b>The tokens which you have kept for yourself (“Income from tokens kept”) whereby 1 token = 1 point.
</p>

<p>
    <br/><b>(2) </b>The “Income from the project”. This income is calculated as follows:
</p>

<p>
    <br/>Your income from the project = 0.75 times the total contributions to the project made by both group members.
</p>

<p>
    <br/><b><it>Your bonus amount = Income from tokens kept + Income from the project</it></b>
    <br/>

   <center>
<div>
    <div>

<table class="" width="" cellspacing="0">
    <tr>
        <th width=""></th><b><it>= (Your endowment – your contribution) + 0.75 × (Sum of contributions made by both members
        in the group)</it></b>

    </tr>

</table>

        </div>
    </div>
  </div>
</div>
      </div>
    <script>
  function toggleInfo(e){
    const panel = document.getElementById('infoPanel');
    const open = panel.style.display === 'block';
    panel.style.display = open ? 'none' : 'block';
    e.target.textContent = open ? 'Show information' : 'Hide information';
  }
</script>

<style>
  .q { margin: 18px 0; }
  .q-title { font-weight: 600; margin-bottom: 8px; }
  .inline-input { max-width: 320px; }

  .slider-wrap { margin-top: 8px; }
  .slider-labels { display: flex; justify-content: space-between; font-size: 0.95em; margin-top: 6px; }
  .ticks { display: flex; justify-content: space-between; font-size: 0.85em; margin-top: 4px; }
  input[type="range"] { width: 100%; }

  .help { color: #444; font-size: 0.95em; margin-top: 6px; }

  .other-wrap { display: none; margin-top: 10px; }
  .selected-wrap { text-align: center; margin-top: 10px; }
  .selected-val {
    font-weight: 700;
    font-size: 1.25em;
    display: inline-block;
    min-width: 40px;
    visibility: hidden; /* hidden until moved */
  }
</style>

{{ if player.reveal == '1' }}
<div class="q">
  <div class="q-title">
    Which best describes why you chose to reveal the other participant’s endowment? (Select all that apply)
  </div>

  <div class="circle-checklist" style="margin-top: 12px;">

    <label class="circle-opt">
      <input type="checkbox" name="rev_yes_fair" id="id_rev_yes_fair">
      <span>I wanted to make a fairer decision.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_yes_curious" id="id_rev_yes_curious">
      <span>I was curious and wanted to understand the situation.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_yes_important" id="id_rev_yes_important">
      <span>I thought the information was important for deciding how much to contribute.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_yes_coordination" id="id_rev_yes_coordination">
      <span>I expected it would help coordination and efficiency.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox"
             name="rev_yes_other"
             id="id_rev_yes_other"
             data-other-target="rev_yes_other_wrap">
      <span>Other (please specify):</span>
    </label>

    <div id="rev_yes_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
      <div class="inline-input">
        {{ formfield 'rev_yes_other_text' }}
      </div>
    </div>

  </div>
</div>
<br>

{{ elif player.reveal == '2' }}
<div class="q">
  <div class="q-title">
    Which best describes why you chose not to reveal the other participant’s endowment? (Select all that apply)
  </div>

  <div class="circle-checklist" style="margin-top: 12px;">

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_guilty" id="id_rev_no_guilty">
      <span>I preferred not to know because it would make me feel guilty.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_unnecessary" id="id_rev_no_unnecessary">
      <span>I did not think the information was necessary for my decision.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_comparisons" id="id_rev_no_comparisons">
      <span>I wanted to avoid being influenced by comparisons.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_inappropriate" id="id_rev_no_inappropriate">
      <span>I felt it would be inappropriate to look.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_simple" id="id_rev_no_simple">
      <span>I wanted to keep the decision simple.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_expect_higher" id="id_rev_no_expect_higher">
      <span>I expected the other person’s endowment was higher and I preferred not to confirm it.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox" name="rev_no_expect_lower" id="id_rev_no_expect_lower">
      <span>I expected the other person’s endowment was lower and I preferred not to confirm it.</span>
    </label>

    <label class="circle-opt">
      <input type="checkbox"
             name="rev_no_other"
             id="id_rev_no_other"
             data-other-target="rev_no_other_wrap">
      <span>Other (please specify):</span>
    </label>

    <div id="rev_no_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
      <div class="inline-input">
        {{ formfield 'rev_no_other_text' }}
      </div>
    </div>

  </div>
</div>
<br>
{{ endif }}

<style>
.circle-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
}
.circle-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.circle-opt input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0;
  cursor: pointer;
}
.circle-opt input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2b2b2b;
  transform: translate(-50%, -50%);
}
.circle-opt span{ line-height: 1.25; }
</style>

<script>
(function () {
  function toggleWrap(checkbox) {
    const targetId = checkbox.getAttribute('data-other-target');
    if (!targetId) return;
    const wrap = document.getElementById(targetId);
    if (!wrap) return;
    wrap.style.display = checkbox.checked ? 'block' : 'none';
  }

  const otherBoxes = document.querySelectorAll('input[type="checkbox"][data-other-target]');
  otherBoxes.forEach(cb => toggleWrap(cb));
  otherBoxes.forEach(cb => cb.addEventListener('change', () => toggleWrap(cb)));
})();
</script>

    <center><button class="btn btn-primary">Continue</button></center>

{{ endblock }}