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

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

{% block content %}

<style>
    /* Same spacing system as other pages */
    .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: 28px 0 14px 0;
    }

    .p1-subtitle-card h5 {
        margin: 0;
    }

    .p1-final-instruction {
        margin-top: 48px;   /* increase or decrease to taste */
    }
    /* Harmonize table spacing */

    table.table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    table.table th,
    table.table td{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    table.table thead th{
        background: #fafafa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
    }
    table.table tbody td{
        text-align: center;
        vertical-align: middle;
    }
</style>

<div class="p1-wrap">

    <div class="p1-section">

        <div class="p1-subtitle-card">
            <h5 xmlns="http://www.w3.org/1999/html">Vos décisions</h5>
        </div>
        <p>
            <ul style="margin-top: 0; margin-bottom: 14px;">
                <li><strong>Le contexte :</strong> dans les pages suivantes, vous allez voir <strong>3</strong> scénarios différents.</li>
                <li><strong>Les scénarios</strong> se différencient par l’information liée à vos résultats que vous recevrez une fois l'activité des exercices de logique terminée.</li>
                <li><strong>Votre mission :</strong> choisir combien de temps consacrer entre les 2 activités pour chaque scénario.</li>
                <li><strong>Les contraintes :</strong>
                   <ul style="margin-top: 10px; margin-bottom: 14px;">
                       <li>
                           passer au moins 5 minutes au début sur les exercices de logique
                       </li>
                       <li>
                           passer au moins 1 minute à la fin sur les curseurs
                       </li>
                   </ul>
                <li><strong>Une fois toutes vos décisions prises :</strong>
                    <ul style="margin-top: 8px; margin-bottom: 14px;">
                       <li>
                           <strong>l’un des trois scénarios sera sélectionné au hasard.</strong>
                       </li>
                       <li>
                           vous effectuerez chaque activité selon la répartition du temps choisie pour ce scénario.
                       </li>
                        <li>
                           vous commencerez par les exercices de logique et finirez donc par l’activité des curseurs.
                       </li>
                   </ul>
                <li><strong>Un conseil :</strong> réfléchissez bien à vos décisions, car l’un de
                vos choix sera effectivement mis en œuvre.</li>
        </p>
        </div>

        <div class="p1-subtitle-card">
            <h5 xmlns="http://www.w3.org/1999/html">Avant de commencer</h5>
        </div>
        <p>
            Voici quelques informations qui peuvent être importantes pour guider vos décisions.
        </p>
        <ul>
            <li>
                  Lors de la Partie 1, vous avez obtenu les scores suivants :
            </li>
        </ul>
                 <table class="table score-table">
                            <thead>
                                <tr>
                                    <th>Participant</th>
                                    <th>Temps passé</th>
                                    <th>Performance</th>
                                    <th>Productivité</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-weight: 600;">Vous</td>
                                    <td style="font-weight: 600;">5 minutes</td>
                                    <td style="font-weight: 600;">{{ num_correct }}</td>
                                    <td style="font-weight: 600;">{{ correct_per_min }}</td>
                                </tr>
                            </tbody>
                 </table>
            <ul>
                <li>
                    Les personnes ayant participé à la toute première session de l’expérience étaient des <strong>étudiant·e·s</strong> recruté·e·s de la même manière que vous. Ces personnes ont :
                    <ul style="margin-top: 8px; margin-bottom: 14px;">
                        <li>
                            dû consacrer <strong>exactement 10 minutes à l'activité des exercices de logique</strong>.
                        </li>
                        <li>
                            également reçu {{piece_rate}}€ par exercice correctement résolu.
                        </li>
                        <li>
                            vu les exercices dans le même ordre que vous les verrez.
                        </li>
                    </ul>
                </li>
            </ul>
                <strong>Les résultats dans ce type d’exercices de logiques sont souvent liés à la réussite scolaire et aux revenus futurs.</strong>
            </li>
        </ul>

    </div>


</div>
<div style="margin-top:18px; display:flex; justify-content:space-between; align-items:center;">

    {{ back_button }}
    {{ next_button }}

</div>


{% endblock %}