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

{% block title %}
    Part 1
{% endblock %}

{% block content %}
    <div class="info_box">
        <div class="header">
            <p class="formatting_header">
                Information:
            </p>
        </div>
        <div class="content">
            <div style="margin: 25px">
                <p class="formatting_content">
                    In Part 1, we want you to answer a question.
                    Please read the question carefully and answer truthfully.
                </p>
            </div>
            <div style="margin-left: 50px; margin-bottom: 25px">
                <span style="margin-right: 10px"> To reopen the description of the situation </span>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('screen1').style
                .display='block'">Click here!</button>
            </div>
        </div>
    </div>
    <div class="task_box">
        <div style="margin: 25px">
            <div style="margin-left: 25px">
                <b> If you had to describe the rule to other study participants, how would you describe it?</b>
            </div>
            <div class="formatting_content">
                {% formfield player.rule label="" %}
            </div>
        </div>
    </div>
    <div class="button_box">
        <br>
        <span style="margin-right: 10px"> Click on the "Continue" button to continue with the study! </span>
        <input class="btn btn-primary" type="submit" value="Continue"/>
        <br><br>
    </div>
    <div id="screen1" class="info_page">
        {% include Constants.RFT_Box %}
        <div class="button_box">
            <br>
            <span style="margin-right: 10px"> Click on the "return" button to return to your task! </span>
            <button type="button" class="btn btn-primary" onclick="document.getElementById('screen1').style
            .display='none'">return</button>
            <br><br>
        </div>
    </div>
{% endblock %}