{% extends "global/Page.html" %}

{{ block title }}
Instructions{{ endblock }}

{% block content %}
<style xmlns="http://www.w3.org/1999/html">
    .tab {
        display: none;
    }
</style>

<div class="tab">
    <p>Welcome to our experiment! Please read the instructions carefully.</p>
    <p>For your participation, you will receive a participation fee of <strong> $0.1</strong> plus a bonus based on your <strong>performance and decisions</strong> in the experiment. The experiment consists <strong>3 tasks and a survey</strong>. We will explain each task in detail before it starts.</p>
    <p>We will randomly select <strong>one of the 3 tasks</strong> and combine the <strong>performance and decisions in the survey</strong> to determine your total payment. You will receive the <strong>combined payments</strong> from the selected task and survey within one week after the end of the experiment.</p>
    <p>Communicating with others, using mobile phones, or starting other programs on the computer may affect your performance. We expect you to complete this experiment on your computer by yourself. Thank you for your understanding and support!</p>
    <p>If you have any questions about this research, please feel free to email us at ziyuzhang1019@163.com.</p>
    <p>If you agree to accept this experiment, please click 'next' to  complete the understanding questions. </p>
    <input type="hidden" name="is_mobile" id="is_mobile">
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Next</button>
    </p>
</div>

<div class="tab">
    <h5>Understanding Questions</h5>
To make sure you understand the experiment correctly, please complete the following tests first. If you answer incorrectly, you will automatically jump back to the first page of the Instructions. And you will have to stop the experiment if you fail too many times.
    {{ formfields }}

        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Previous</button>
        <button class="btn btn-primary">Next</button>
    </p>
</div>





<script>
    let activeTab = 0;
    let tabs = document.getElementsByClassName('tab');

    function showCurrentTabOnly() {
      for (let i = 0; i < tabs.length; i++) {
        let tab = tabs[i];
        if (i === activeTab) {
          tab.style.display = 'block';
          tab.scrollIntoView();
        } else {
          tab.style.display = 'none';
        }
      }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }

    //function isMobile() {
    //    const toMatch = [
    //        /Android/i,
    //        /iPhone/i,
    //       /iPad/i,
    //    ];

    //    return toMatch.some((item) => navigator.userAgent.match(item));
    //}

    // 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;

    if (['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPod'].some(s => navigator.userAgent.includes(s))) {
        document.body.innerHTML = `<div style="padding-top: 2rem;text-align: center">Sorry, please join this experiment on computer.</div>`
    }

</script>




{% endblock %}