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

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

{% block content %}

<style>
    /* Page container */
    .p1-wrap {
        max-width: 980px;
        margin: 0 auto;
    }

    /* Text blocks */
    .p1-wrap p {
        margin-bottom: 14px;
        line-height: 1.35;
    }

    /* Layout like the PDF */
    .p1-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 22px;
        align-items: start;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* Subtitle card */
    .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-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        align-items: start;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .p1-section {
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .p1-final-instruction {
        margin-top: 48px;   /* increase or decrease to taste */
    }
    /* TRUE SIZE images (intrinsic size), only shrink on narrow screens */
    .p1-wrap img {
        width: auto;
        height: auto;
        max-width: 100%;
        display: block;
    }

    .img-right { margin-left: auto; }
    .img-center { margin: 0 auto; }

    .p1-options p {
        margin: 0 0 12px 0;
        line-height: 1.35;
    }

    /* Colonne / diagonale / coins layout */
    .p1-change-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 48px;
    row-gap: 10px;
    align-items: start;
    margin-top: 6px;
    margin-bottom: 60px;
}

.p1-change-label {
    text-align: center;
    font-size: 1.05em;
    white-space: nowrap;
}

    .p1-change-pics {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
    }

    .p1-change-pics img {
        width: 65px;
        height: auto;
        display: block;
    }

    .p1-emphasis {
    margin-top: 28px;
}
    /* Responsive */
    @media (max-width: 768px) {
        .p1-grid,
        .p1-two-col {
            grid-template-columns: 1fr;
        }

        .p1-change-grid {
            grid-template-columns: 1fr;
            row-gap: 8px;
        }

        .img-right { margin-left: 0; }
    }

    .layout-left {
    text-align: center;
}

.layout-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.layout-left img {
    margin: 0 auto;
}

</style>

<div class="p1-subtitle-card">
    <h5 xmlns="http://www.w3.org/1999/html">Votre mission</h5>
</div>

<div class="p1-wrap">

    <p>
        Dans cette partie, vous devrez résoudre des exercices de logique pendant <strong>5 minutes</strong>
    </p>

    <div class="p1-subtitle-card">
    <h5 xmlns="http://www.w3.org/1999/html">Exercices de logique</h5>
    </div>
    <p>
        Un exercice de logique est une grille de 3 x 3 images organisées selon un certain schéma, sauf que l’image en bas à droite est manquante.
        Votre tâche consiste à identifier quelle image complète correctement la grille.
    </p>

    <div class="p1-subtitle-card">
        <h5 xmlns="http://www.w3.org/1999/html">Exemple</h5>
    </div>
    <div class="layout-wrap">
    <div class="layout-left">
        <!-- Question image at natural size -->
        <img src="{% static 'rank_feedback/matrices/q/q40.jpg' %}"
                 alt="Exemple">

        <hr class="image-separator">
        <!-- Answers image at natural size -->
        <img src="{% static 'rank_feedback/matrices/a/a40.jpg' %}"
     alt="Exemple"
     class="img-center">

    </div>
    </div>
        <p class="p1-emphasis">Dans cet exemple, la bonne réponse est l’option K.</p>

    <div class="p1-subtitle-card">
        <h5 xmlns="http://www.w3.org/1999/html">Comment cela fonctionne ?</h5>
    </div>

    <div class="p1-section">
        <p>
            Comme vous pouvez le voir dans l’exemple précédent, les images peuvent varier selon plusieurs dimensions : la <strong>forme</strong>, la <strong>taille</strong>, la <strong>couleur</strong>, l’<strong>orientation</strong>, le <strong>style du contour</strong> ou encore les <strong>marques dans les coins du cadre</strong>.
        </p>

        <p>
            Les caractéristiques des images peuvent changer dans la grille selon :
        </p>

        <div class="p1-change-grid">
            <div class="p1-change-label">la <strong>ligne</strong>,</div>
            <div class="p1-change-label">la <strong>colonne</strong>,</div>
            <div class="p1-change-label">la <strong>diagonale</strong>,</div>
            <div class="p1-change-label">ou les <strong>coins</strong>.</div>

            <div class="p1-change-pics">
                <img src="{% static 'puzzle_task1/ligne.png' %}" alt="Changement selon la ligne">
            </div>
            <div class="p1-change-pics">
                <img src="{% static 'puzzle_task1/Colonne.png' %}" alt="Changement selon la colonne">
            </div>

            <div class="p1-change-pics">
                <img src="{% static 'puzzle_task1/Diag1.png' %}" alt="Changement selon la diagonale (exemple 1)">
                <img src="{% static 'puzzle_task1/Diag2.png' %}" alt="Changement selon la diagonale (exemple 2)">
            </div>

            <div class="p1-change-pics">
                <img src="{% static 'puzzle_task1/Coin1.png' %}" alt="Changement selon les coins (exemple 1)">
                <img src="{% static 'puzzle_task1/Coin2.png' %}" alt="Changement selon les coins (exemple 2)">
            </div>
        </div>

        <p class="p1-emphasis">
        La difficulté des exercices restera la même tout au long de la session. Elle a été choisie
        pour être proche de l’exemple que vous venez de voir.
        </p>
    <div style="text-align:right;">
      {{ next_button }}
    </div>

</div>

{% endblock %}