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

{% block title %}
Experimental tasks
{% endblock %}

{% block content %}
<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <p>
            <strong>
                In each task, you give instructions 
            </strong> about 
            how to take a single risk repeatedly. 
            After you completed all tasks, 
            the computer  
            follows your instructions for your bonus task 
            (the task in your {{player.participant.bf}}.pdf)
            to determine your bonus.
        </p>

        <p>
            Note:
            <ul style="margin-top:-15px;">
                <li>
                    If you instruct the computer about what you want, you also get what you want!
                </li>
                <li>
                    There are no right or wrong instructions. Please instruct the computer according to what you want most yourself.
                    That (what <u>you</u> want) is also what we – the experimenters – are interested in and want to investigate.
                </li>
            </ul>
        </p>

        <button type="button" onclick="$('#structurePopUp').modal('toggle')" class="btn btn-primary">    
            What happens next?
        </button>
    <!--
        <button class="btn btn-primary">    
            Okay, please explain
        </button>
    -->

    </div>
</div>


<!-- Modal with structure of experiment -->
<div class="modal fade" id="structurePopUp" tabindex="-1" role="dialog" aria-labelledby="structurePopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="structurePopUpLabel">
                    You get detailed explanations of the experiment, accompanied by comprehension questions
                </h5>
                <button type="button" class="close" onclick="$('#structurePopUp').modal('toggle')" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    We first explain what a <i>single risk</i> is and 
                    what <i>taking a single risk repeatedly</i> means. 
                    Then, we explain 
                    how you give instructions about taking the 
                    single risk repeatedly. 
                </p>

                <p>
                    Reading the explanations and answering the 
                    comprehension and attention questions
                    may take longer than 
                    completing the tasks / the experiment ifself.
                    It is important that you understand your tasks, 
                    because each task could determine your entire bonus.
                </p>
            </div>
            <div class="modal-footer justify-content-center">
                <button class="btn btn-primary"> 
                    Start the explanations
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}