{{ block title }}Experiment Instruction{{ endblock }}

{{ block content }}
{{ include C.PAPERCUPS_TEMPLATE }}

<div class="card bg-light m-3">
<div class="card-body">

    <!-- <audio controlslist="nodownload noplaybackrate" id="my_audio">
        <source src="{{ static 'experiment/subject_id.m4a' }}">
        Your browser does not support the audio element.
    </audio> -->

    <!-- <div id="play_audio_div">
        <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
        <p>
            <font color="red" size="4"><strong>請將你的電腦音源打開，並點擊「播放實驗說明」！</strong></font> -->
            <!-- <input type="button" onclick="playAudio()" value="播放實驗說明"/> -->
            <!-- <button type="button" class="btn btn-primary btn-play-audio" onclick="playAudio()">
                播放實驗說明 <i class='fas fa-play' style='font-size:14px;padding:4px;'></i>
            </button>
        </p>
    </div>     -->
    <!-- <button type="button" onclick="fake_on_ended()">假裝播完實驗說明</button> -->
    

    <div id="main_div">

    <p>
        Hi! Welcome to the participate in this experiment.<br>
    </p>

    <p>
        <mark><strong><font color="red">Wanring</font></strong>: this is just a demonstration.</mark><br>
        <mark> In the actual experiment, subjects will undergo a comprehensive paper-based instruction.</mark>
    </p>

    <p>
        The experiment consists of <strong>three parts</strong>, with <strong>two rounds</strong> in each part.
    </p>

    <p>
        Please enter your subject ID (<strong><font color="blue">{{ real_subject_id }}</font></strong>) to check-in.<br>
        After that, click "Next" to start the experiment.
    </p>

    <p>
        <mark>Please be aware that the game is currently hosted on a free-of-charge Heroku server, which may experience instability.</mark> <br>
        <mark>If you encounter an error, kindly refresh the page.</mark>
    </p>
    
    <br>
    <!-- {{formfields}} -->
    <input type="hidden" id="real_subject_id" value={{ real_subject_id }}/>
    <label for="answer">Your Subject ID：</label><br>
    <input id="subject_id" name="subject_id" onkeydown="return (event.keyCode!=13);"/>
    <input type="button" onclick="clickSubmit()" value="check-in" />

    <div id="ans_correct">
        <p><strong>You are ready! Press "Next" to start the experiment.</strong></p>
    </div>

    <div id="ans_wrong">
        <p><strong>Wrong answer. Please try again.</p>
    </div>

    <div id="next_page">
        <button id="next_button" class="otree-btn-next btn btn-primary" >Next</button>
        <!-- <span id="wait_text"><small>（音檔播放完畢後即可點擊按鈕）</small></span> -->
    </div>
    
</div>
</div>
</div>

<style>
    button {
      display: inline-block;
      background-color: white;
      border-radius: 10px;
      border: 4px double #cccccc;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 10px;
      width: 200px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    .btn-play-audio {
        width: 140px;
        border: 2px solid #808080;
        background-color: white;
        color: 	#808080;
        padding: 2px 4px;
        border-radius: 10px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0px 0px;
    }
    .otree-timer {
        display: none;
    }
    .otree-form-errors {
            display: none;
    }
    #ans_correct {
        display: none;
    }
    #ans_wrong {
        display: none;
    }
    #next_page {
        display: none;
    }
</style>

<script>
    var aud = document.getElementById("my_audio");
    function playAudio() {
        aud.play();   
        // document.getElementById("play_audio_div").style.display = "none";
        // document.getElementById("main_div").style.display = "block";
    }
    aud.onended = function() {
        document.getElementById("next_button").disabled = false;
        document.getElementById("wait_text").innerHTML = "";
    };

    function fake_on_ended() {
        aud.onended();
    }

    function clickSubmit() {
        var real_subject_id = document.getElementById("real_subject_id").value;

        var ans = document.getElementById("subject_id").value;

        if ((ans + "/" == real_subject_id) || (ans == "fail")) {
            document.getElementById("ans_correct").style.display = "block";
            document.getElementById("ans_wrong").style.display = "none";
            document.getElementById("next_page").style.display = "block";
            document.getElementById("test1_ans").readOnly = true;
        } else if (ans == "") {
            document.getElementById("ans_correct").style.display = "none";
            document.getElementById("ans_wrong").style.display = "none";
            document.getElementById("next_page").style.display = "none";
        } else {
            document.getElementById("ans_wrong").style.display = "block";
            document.getElementById("ans_correct").style.display = "none";
            document.getElementById("next_page").style.display = "none";
        }

    }
</script>

{{ endblock }}