{{ extends "global/Page.html" }}
{{ load otree static }}

{{ block title }}
    Comprehension Check
{{ endblock }}

{{ block content }}
{# APP: oathexp (First Mover) | FILE: ComprehensionQuiz.html #}

<style>
  .instructions-toggle {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin: 20px auto;
    display: block;
  }

  .instructions-toggle:hover {
    background-color: #0056b3;
  }

  .instructions-content {
    display: none;
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
    border-radius: 5px;
  }

  .instructions-content.show {
    display: block;
  }

  .example-box {
    background-color: #f0f7ff;
    border: 1px solid #b8d4f0;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 16px 0;
  }

  .example-box h5 {
    margin-top: 0;
    color: #0055a5;
  }

  .example-box table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
  }

  .example-box table th {
    background-color: #d0e8ff;
    text-align: center;
    padding: 6px 10px;
    border: 1px solid #b8d4f0;
  }

  .example-box table td {
    text-align: center;
    padding: 6px 10px;
    border: 1px solid #b8d4f0;
  }

  .quiz-box {
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
  }

  .quiz-box h5 {
    margin-top: 0;
    color: #7a5c00;
  }

  .quiz-box table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
  }

  .quiz-box table th {
    background-color: #ffe082;
    text-align: center;
    padding: 6px 10px;
    border: 1px solid #f0c040;
  }

  .quiz-box table td {
    text-align: center;
    padding: 6px 10px;
    border: 1px solid #f0c040;
  }

  .formula-box {
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 12px 20px;
    margin: 16px 0;
    font-weight: bold;
    text-align: center;
  }
</style>

<div style="max-width: 800px; margin: 0 auto;">

    <p>
        Before we continue, please make sure you understand how payoffs are calculated.
    </p>

    {{ if attempt_number > 1 }}
    <div style="background-color: #fff3cd; border: 1px solid #ffc107; padding: 15px; margin: 20px 0; border-radius: 5px;">
        <strong>This is attempt {{ attempt_number }}.</strong> Please review the correct answers shown below and try again.
    </div>
    {{ endif }}

    <div class="formula-box">
        Your payoff = (20 &minus; your contribution) + 0.5 &times; (total contributions by all three players)
    </div>

    <hr>

    <p>To illustrate how payoffs are calculated, we show a few hypothetical examples below.</p>

    <div class="example-box">
        <h5>Example 1 &mdash; Everyone contributes 0</h5>
        <table>
            <thead>
                <tr>
                    <th>Group member</th>
                    <th>Contribution</th>
                    <th>Tokens kept<br><small>(20 &minus; contribution)</small></th>
                    <th>Project share<br><small>(0.5 &times; total)</small></th>
                    <th>Total payoff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Member A</td>
                    <td>0</td>
                    <td>20</td>
                    <td>0.5 &times; 0 = 0</td>
                    <td><strong>20</strong></td>
                </tr>
                <tr>
                    <td>Member B</td>
                    <td>0</td>
                    <td>20</td>
                    <td>0.5 &times; 0 = 0</td>
                    <td><strong>20</strong></td>
                </tr>
                <tr>
                    <td>Member C</td>
                    <td>0</td>
                    <td>20</td>
                    <td>0.5 &times; 0 = 0</td>
                    <td><strong>20</strong></td>
                </tr>
            </tbody>
        </table>
        <p style="margin: 10px 0 0 0; font-size: 0.9rem; color: #555;">
            Total contributions = 0 + 0 + 0 = 0. Each group member keeps all 20 tokens and receives nothing from the project.
        </p>
    </div>

    <div class="example-box">
        <h5>Example 2 &mdash; Everyone contributes 20</h5>
        <table>
            <thead>
                <tr>
                    <th>Group member</th>
                    <th>Contribution</th>
                    <th>Tokens kept<br><small>(20 &minus; contribution)</small></th>
                    <th>Project share<br><small>(0.5 &times; total)</small></th>
                    <th>Total payoff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Member A</td>
                    <td>20</td>
                    <td>0</td>
                    <td>0.5 &times; 60 = 30</td>
                    <td><strong>30</strong></td>
                </tr>
                <tr>
                    <td>Member B</td>
                    <td>20</td>
                    <td>0</td>
                    <td>0.5 &times; 60 = 30</td>
                    <td><strong>30</strong></td>
                </tr>
                <tr>
                    <td>Member C</td>
                    <td>20</td>
                    <td>0</td>
                    <td>0.5 &times; 60 = 30</td>
                    <td><strong>30</strong></td>
                </tr>
            </tbody>
        </table>
        <p style="margin: 10px 0 0 0; font-size: 0.9rem; color: #555;">
            Total contributions = 20 + 20 + 20 = 60. Each group member contributes all tokens but earns 30 from the project.
        </p>
    </div>

    <div class="example-box">
        <h5>Example 3 &mdash; Group members contribute different amounts</h5>
        <table>
            <thead>
                <tr>
                    <th>Group member</th>
                    <th>Contribution</th>
                    <th>Tokens kept<br><small>(20 &minus; contribution)</small></th>
                    <th>Project share<br><small>(0.5 &times; total)</small></th>
                    <th>Total payoff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Member A</td>
                    <td>4</td>
                    <td>16</td>
                    <td>0.5 &times; 28 = 14</td>
                    <td><strong>30</strong></td>
                </tr>
                <tr>
                    <td>Member B</td>
                    <td>8</td>
                    <td>12</td>
                    <td>0.5 &times; 28 = 14</td>
                    <td><strong>26</strong></td>
                </tr>
                <tr>
                    <td>Member C</td>
                    <td>16</td>
                    <td>4</td>
                    <td>0.5 &times; 28 = 14</td>
                    <td><strong>18</strong></td>
                </tr>
            </tbody>
        </table>
        <p style="margin: 10px 0 0 0; font-size: 0.9rem; color: #555;">
            Total contributions = 4 + 8 + 16 = 28. Each group member receives the same project share (14 tokens), but keeps different amounts.
        </p>
    </div>

    <hr>

    <div class="quiz-box">
        <h5>Your turn &mdash; calculate the payoffs</h5>
        <p>
            In this scenario, Member A contributes <strong>5</strong> tokens,
            Member B contributes <strong>10</strong> tokens, and
            Member C contributes <strong>15</strong> tokens.
        </p>
        <p>What is the total payoff for each group member?</p>
        <table>
            <thead>
                <tr>
                    <th>Group member</th>
                    <th>Contribution</th>
                    <th>Tokens kept<br><small>(20 &minus; contribution)</small></th>
                    <th>Project share<br><small>(0.5 &times; total)</small></th>
                    <th>Total payoff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Member A</td>
                    <td>5</td>
                    <td>15</td>
                    <td>?</td>
                    <td>?</td>
                </tr>
                <tr>
                    <td>Member B</td>
                    <td>10</td>
                    <td>10</td>
                    <td>?</td>
                    <td>?</td>
                </tr>
                <tr>
                    <td>Member C</td>
                    <td>15</td>
                    <td>5</td>
                    <td>?</td>
                    <td>?</td>
                </tr>
            </tbody>
        </table>
    </div>

    {{ formfield 'quiz_payoff_a' }}
    {{ if quiz_error_a }}
    <div style="color: #c0392b; background-color: #fdf2f2; border: 1px solid #e74c3c; border-radius: 4px; padding: 8px 12px; margin: -8px 0 12px 0; font-size: 0.9rem;">
        {{ quiz_error_a }}
    </div>
    {{ endif }}

    {{ formfield 'quiz_payoff_b' }}
    {{ if quiz_error_b }}
    <div style="color: #c0392b; background-color: #fdf2f2; border: 1px solid #e74c3c; border-radius: 4px; padding: 8px 12px; margin: -8px 0 12px 0; font-size: 0.9rem;">
        {{ quiz_error_b }}
    </div>
    {{ endif }}

    {{ formfield 'quiz_payoff_c' }}
    {{ if quiz_error_c }}
    <div style="color: #c0392b; background-color: #fdf2f2; border: 1px solid #e74c3c; border-radius: 4px; padding: 8px 12px; margin: -8px 0 12px 0; font-size: 0.9rem;">
        {{ quiz_error_c }}
    </div>
    {{ endif }}

    <div style="text-align: right;">{{ next_button }}</div>

</div>

<button type="button" class="instructions-toggle" onclick="toggleInstructions()">
    Show/Hide Full Instructions
</button>

{{ include 'oathexp/instructions.html' }}

<script>
function toggleInstructions() {
    const instructions = document.getElementById('instructions');
    instructions.classList.toggle('show');
}
</script>

{{ endblock }}