{% block scripts %}

    <!-- Check if JS is enabled -->
    <script src="{{ static "js/jscheck.js" }}"></script>

    <!-- Check for mobile devices -->
	<script src="{{ static "js/MobileCheck.js" }}"></script>


    <script>

        var welcome_button_clicks = 0
        function myFunction() {
            var x = document.getElementById("welcome_button");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            welcome_button_clicks += 1
            document.getElementById("welcome_button_clicks").value = welcome_button_clicks;
        }

    </script>

{% endblock %}


{{ block title }}

    <table class="table">
        <tr>
            <td style="width:70%;border-color:transparent">Welcome to this study!</td>
            <td style="width:30%;border-color:transparent;text-align: right;">
                <img src="{% static 'img/UM_logo.jpg' %}" style="width:30%;">
            </td>
        </tr>
    </table>

{{ endblock }}


{{ block content }}
    <p>
        Welcome to this study conducted by researchers at Maastricht University.
        You will earn a <b>fixed participation fee of {{ session.config.participation_fee }}</b> if you complete the study.

    </p>

    <p>
        <input type="hidden" name="welcome_button_clicks" id="welcome_button_clicks" value="0"/>



        <div style="display:none" id="welcome_button">

        After you read the instructions you will be asked to answer 6 comprehension questions.
        <ul>
            </li>
            <li>
                If you complete the survey, you secure the participation fee of {{ session.config.participation_fee }}.
            </li>
        </ul>

        </div>
    </p>

    <p>
        The study will take on average around 5 minutes. It is important to note that we apply
        a strict "no-deception" rule, meaning that everything we write is true and implemented exactly as described.

    </p>
    <p>
        Before you begin, please turn off your phone/e-mails/music so that you can concentrate on this study. Thank you!
    </p>

    <style>
        .next {float: right; margin: 40px auto;}
    </style>
    <button class="btn btn-primary next">Next</button>

    <input type="hidden" name="is_mobile" id="is_mobile">

{{ endblock }}