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

{% block title %}
    Stage2　確認テスト
{% endblock %}

{% block content %}

{% include Constants.instructions_template %}

<p> 最終的な獲得ポイントは次のように計算されます。<br>
    <b>（最終的な獲得ポイント）＝（初期保有ポイント）＋（Round1～3で獲得したポイントの合計）</b><br>
</p>
<p><b>以下の問題１～３について、回答を半角で入力し、「回答する」ボタンを押してください。</b><br>
   <b>問題１から順に回答してください。問題１に正解すると問題２に、問題２に正解すると問題３に回答することができるようになります。</b></p>

<p><h5>問題１</h5>
    あなたが"P"を選択し、相手も"P"を選択した場合、あなたの獲得ポイントはいくらですか？
</p>
<form>
    <input id="Q1" type="number" name="Q1">
    <button type="button" id="button1" onclick="func1()">回答する</button>
    <b><div id="output1"></div></b>
</form>

<p><h5>問題２</h5>
    あなたが"Q"を選択し、相手が"P"を選択した場合、あなたの獲得ポイントはいくらですか？
</p>
<form>
    <input id="Q2" type="number" name="Q2">
    <button type="button" id="button2" onclick="func2()" disabled>回答する</button>
    <b><div id="output2"></div></b>
</form>

<p><h5>問題３</h5>
    あなたの初期保有ポイントが200ポイントだったとします。
    このとき、あなたが"P"を選択し、相手が"Q"を選択した場合、あなたの<b>最終的な獲得ポイント</b>はいくらですか？
</p>
<form>
    <input id="Q3" type="number" name="Q3">
    <button type="button" id="button3" onclick="func3()" disabled>回答する</button>
    <b><div id="output3"></div></b>
</form>

<script>
    function func1() {
        let Q1_answer = document.getElementById("Q1").value;
        if (Q1_answer == 50){
            document.getElementById("output1").innerHTML = "正解です。";
            document.getElementById("button1").disabled = true;
            document.getElementById("button2").disabled = false;          
        } else{
            document.getElementById("output1").innerHTML = "不正解です。もう一度回答してください";
            document.getElementById("button1").disabled = false;
        }    
    }
    function func2() {
        let Q2_answer = document.getElementById("Q2").value;
        if (Q2_answer == 100){
            document.getElementById("output2").innerHTML = "正解です。";
            document.getElementById("button2").disabled = true;
            document.getElementById("button3").disabled = false;        
        }else{
            document.getElementById("output2").innerHTML = "不正解です。もう一度回答してください";
            document.getElementById("button1").disabled = true;
            document.getElementById("button2").disabled = false;
        }
    }
    function func3(){
        let Q3_answer = document.getElementById("Q3").value;
        if (Q3_answer == 150){
            document.getElementById("output3").innerHTML = "正解です。";
            document.getElementById("button3").disabled = true;
            document.getElementById("next_button").disabled = false;
            document.getElementById("next_string").style = "visibility:visible;";      
        }else{
            document.getElementById("output3").innerHTML = "不正解です。もう一度回答してください";
            document.getElementById("button1").disabled = true;
            document.getElementById("button2").disabled = true;
            document.getElementById("button3").disabled = false;
        }
    }
</script>


<p id="next_string" style="visibility: hidden;">これでStage2の説明及び確認テストは終了です。「Next」ボタンを押して本番に進んでください。</p>
<button type="submit" id="next_button" disabled>Next</button>

{% endblock %}