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

{% block title %}Questions de compréhension{% endblock %}

{% block content %}

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

  .p1-wrap p{
    margin-bottom: 14px;
  }

  .p1-wrap hr{
    margin: 18px 0;
  }

  .p1-wrap h5{
    margin: 0 0 12px 0;
  }

  .p1-section{
    margin-top: 24px;
    margin-bottom: 24px;
  }

  /* consistent right-aligned next button */
  .next-btn-wrap{
    text-align: right;
    margin-top: 24px;
  }

  /* 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;
  }
</style>

<div class="p1-wrap">
  <div class="p1-section">

    <p>
      Merci de répondre aux questions suivantes pour vérifier votre compréhension des instructions.
    </p>
    <p>
      Vous pouvez revenir en arrière si vous souhaitez relire les instructions.
    </p>

    <hr>

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

    {% formfield player.comp_decisions %}
    <div class="activity-title-box">
      Question 2
    </div>
    {% formfield player.comp_scenarios %}
    <div class="activity-title-box">
      Question 3
    </div>
    {% formfield player.comp_priming %}
    <div class="activity-title-box">
      Question 4
    </div>
    {% formfield player.comp_reflexion %}
    <div class="p1-final-instruction">
        <p>
            Dès que vous pensez avoir répondu correctement à ces 4 questions, veuillez cliquer sur le bouton "Suivant" pour faire apparaitre le premier scénario et ainsi commencer à prendre vos décisions.
        </p>
    </div>
    <div style="margin-top:18px; display:flex; justify-content:space-between; align-items:center;">

        {{ back_button }}
        {{ next_button }}

    </div>

  </div>
</div>

{% endblock %}