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

{% block title %}Partie 3 de l'expérience{% endblock %}

{% block content %}

<style>
    /* Same spacing system as your reference page */
    .p1-wrap{
        max-width: 980px;
        margin: 0 auto;
    }
    .p1-wrap p{
        margin-bottom: 14px;
        line-height: 1.35;
    }
    .p1-section{
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .p1-wrap ol,
    .p1-wrap ul{
        margin-top: 0;
        margin-bottom: 14px;
    }
    .p1-wrap li{
        margin-bottom: 8px;
        line-height: 1.35;
    }

    /* Match EXACT box design from your Part 1 page */
    .p1-subtitle-card{
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 10px 0 14px 0;
    }
    .p1-subtitle-card h5{
        margin: 0;
    }

    /* Standard activity boxes */
    .activity-title-box {
        display: inline-block;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 8px 16px;
        background: #fafafa;
        font-weight: 600;
        margin: 18px 0 10px 0;
    }

    /* Table styling consistent with the other pages */
    .p1-table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    .p1-table th,
    .p1-table td{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    .p1-table thead th{
        background: #fafafa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
    }
    .p1-table td{
        text-align: center;
        vertical-align: middle;
    }
    .p1-table td:first-child{
        text-align: left;
        width: 200px;
    }
    .p1-table th{
        line-height: 1.2;
    }
</style>

<div class="p1-wrap">

    <div class="p1-section">

        <div class="p1-subtitle-card">
            <h5>Questions 10 à 13</h5>
        </div>

        <p>
            Pour les 4 dernières questions, l’ordinateur tirera au hasard un·e participant·e parmi les 9 personnes ayant participé à la première session de l'expérience.
            Les 4 questions concerneront cette même personne.
        </p>

        </p>

        <div class="activity-title-box">
            Rappel
        </div>
        <p>
            Ces 9 personnes ont dû résoudre des exercices de logique pendant 15 minutes au total :
        </p>
        <ul>
            <li>
                5 minutes lors de la Partie 1 de l'expérience.
            </li>
            <li>
                10 minutes lors de la Partie 2 de l'expérience.
            </li>
        </ul>

        <div class="activity-title-box">
            Question 10
        </div>

        <p>
            {% formfield player.p10 %}
        </p>

        <div class="activity-title-box">
            Question 11
        </div>
        <p>
            {% formfield player.p11 %}
        </p>
        <div class="activity-title-box">
            Question 12
        </div>
        <p>
            {% formfield player.p12 %}
        </p>
        <div class="activity-title-box">
            Question 13
        </div>
        <p>
            {% formfield player.p13 %}
        </p>
        <div style="text-align:right;">
            {{ next_button }}
        </div>

    </div>

</div>


{% endblock %}