{{ block title }}
<b> <font size = 7> Welcome Page </font> </b> </br>
{{ endblock }}
{{ block content }}

<b> Your payment: </b>
To complete this study, you must make one decision in a game
and answer a short survey. For completing this study, you are
guaranteed to receive 1 GBP within 48 hours.
Additional payment may also be given to you and/or other prolific users. </br> </br>

<b> Completion policy: </b>
We expect you to read the descriptions.
If you do so, you should easily be able to correctly answer the understanding questions.
If you fail more than twice, we will ask you to return your submission. </br> </br>

In particular, after all recruited participants have completed the study,
groups of two will be randomly formed.
One member of each group will be randomly selected to be the
“active player”, the other to be the "passive player", in the game.
Any additional payment that results from the decision made by the
active player in the game will then be distributed within one week.</br> </br>

{{formfield 'Prolific_ID'}}

<p><b>Understanding Questions:</b> Which of the following statements is true?</p>

<style>
ul.no-bullets {
  list-style-type: none;
  margin-left: 0;
}
</style>
    <ul class="no-bullets">
    <li><button style="text-align: left; height:50px;margin-left: 0%; width:100%"  name="Control01" value="1"> My decision will influence the additional payments from this study. </button></li>
    <li><button style="text-align: left; height:50px;margin-left: 0%; width:100%"  name="Control01" value="2"> My decision will NOT influence the additional payments from this study.</button></li>
    <li><button style="text-align: left; height:50px;margin-left: 0%; width:100%"  name="Control01" value="3"> My decision will influence the additional payments from this study, if I am randomly selected to be the active player in my group.</button></li>
    </ul>
<br>
<b style="color:red;"> Please beware: If you fail twice to answer the understanding questions correctly, we will ask you to return your submission. </b><br>

<input type="hidden" name="incorrect_attempts_welcome" id="incorrect_attempts_welcome" value="0" />
{{ formfield_errors 'incorrect_attempts_welcome' }}
<input type="hidden" name="is_mobile" id="is_mobile">
<script>
    function isMobile() {
        const toMatch = [
            /Android/i,
            /iPhone/i,
            /iPad/i,
        ];

        return toMatch.some((toMatchItem) => {
            return navigator.userAgent.match(toMatchItem);
        });
    }

    // here is an alternative technique that checks screen resolution
    // function isMobile() {
    //     return ((window.innerWidth <= 800) && (window.innerHeight <= 600));
    // }

    document.getElementById('is_mobile').value = isMobile() ? 1 : 0;

</script>
{{ endblock }}