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

{% block title %}

{% endblock %}

{% block content %}

<style>
    .otree-body {
        max-width:800px
    }

    .button {
        border-color: coral;
        background-color: white;
        padding: 5px 5px;
        border-radius: 50%;
    }


</style>
<h3>Instruction</h3>
<p>Thank you for participating in this study.</p>

<p>    This study will take approximately 15 minutes to complete.</p>

   <p> You will earn a fixed reward of $5. In addition, you can earn more by doing tasks in the study.
       Please read all instructions carefully.
</p>
<p>You are going to do one task. At the end of the task, you will be paid for finishing it.
    In addition, an allocator in a previous session had decided to allocate extra money to you and one other participant based on your experience today.
    Your total payment for this experiment will be the fixed payment, payment for the task, and the money distributed by a participant in a previous session.
    Details of your payments will be shown later.

</p>
<p id="button1"><button type="button" class="button" onclick="show_policy()" id="continue" style="float: right"> Continue</button></p>
<h1> &nbsp</h1>
<p id="policy_name"></p>
<p id="policy"></p>
<!--<img src="" alt="" id="figure" width="500px">-->
<p id="requirement"></p>
<p id="payment_title"></p>
<p id="payment"></p>
<p id="start"></p>
<p id="next_page"></p>

<script>
    function show_policy() {
        document.getElementById("policy_name").innerHTML = "<b>Task: Number Counting</b>"
        document.getElementById("policy").innerHTML = "In this part of the experiment your task is to count zeros in a series of 10 tables. "
        //document.getElementById("policy").innerHTML = "In this part of the experiment your task is to count zeros in a series of 10 tables. " +
                  //  "The figure shows the work screen you will use later: "
        // document.getElementById("figure").src = "https://drive.google.com/drive/u/2/folders/1geLjxdHnmsxafjOVyM3ZAG_rvHbJ49QH"
        document.getElementById("requirement").innerHTML ="Enter the number of zeros into the box on the screen. " +
                    "After you have entered the number, click the Submit-button. If you enter the correct result, the Next-button will be enabled, " +
                    "you can click and go to the next table. If your input is wrong, you cannot proceed and must try again on the same table. "
        document.getElementById("payment_title").innerHTML= "<b>Your Payment:</b>"
        document.getElementById("payment").innerHTML= "<p>After finishing counting 10 tables, you will get $3 for the reward. However, " +
                    "1/3 of you may suffer a bad luck, and get nothing at all for Part 1. Who will get $3 and who will get $0 is randomly determined. </p>"
        document.getElementById("start").innerHTML = "Enjoy your experiment!"
        document.getElementById("next_page").innerHTML = "<button type='submit' class='button' id='next_page' style='float: right'>Next</button>"
    }
</script>



{% endblock %}