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

{% block title %}Quiz 2{% endblock %}
{% block content %}
<style>
        #start-game-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
</style>
    <p>
       Suppose you allocate your tokens as follows: 26 tokens for acceptance in School A and 74 tokens for rejection.<br>
        The slider below displays the token distribution and lottery information for each event.
    </p>

       <div style="display: inline-block;width: 60%;margin-right: -10%">
                    <img  src="{{ static 'histogram/Quiz2.png' }}" width="90%"/>
        </div>
     <p>
In the next round, you discovered that your score is high enough for acceptance in School A.
    </p>
    <p>
    What is the likelihood of winning $10 in the lottery if you are accepted?
    </p>

    <input type="number" id="percentA" value="percentage_A" name="PercentageA"> %

      <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next1" onclick="next(1)">Next</button>
    </div>

    <div id="part2" style="display: none">
    <p>
        You are correct
    </p>

        <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next2" onclick="next(2)">Next</button>
    </div>


    </div>


    <div id="part3" style="display: none">
    <p>
        You are wrong
    </p>

          <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next3" onclick="next(3)">Next</button>
    </div>
    </div>

    <div id="part4" style="display: none">
       <p>
    What is the likelihood of winning $10 in the lottery if you are rejected?
    </p>
     <input type="number" id="percentB" value="percentage_B" name="PercentageB"> %

  <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next4" onclick="next(4)">Next</button>
    </div>

     </div>



        <div id="part5" style="display: none">
    <p>
        You are correct
    </p>

        <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next5" onclick="next(5)">Next</button>
    </div>


    </div>


    <div id="part6" style="display: none">
    <p>
        You are wrong
    </p>

          <div style="text-align: right">
        <button class="otree-btn-next btn btn-primary" type = "button" id="next6" onclick="next(6)">Next</button>
    </div>
    </div>

    <div id="part7" style="display: none">
        <h2 id="part8-message">On the next page, you will retake the quiz</h2>
        <div style="text-align: right">
            <button id="start-game-button" class="btn btn-primary">Press here we will ask a simple question about the game rule</button>
        </div>
    </div>

<form id="percentform" method="post">
    <input type="hidden" name="PercentageA" id="percentA_hidden" value="">
    <input type="hidden" name="PercentageB" id="percentB_hidden" value="">
</form>




<script>
function next(x) {
    if (x === 1) {
        var percentAValue = parseInt(document.getElementById("percentA").value);
        if (percentAValue === 7) {
            document.getElementById("part2").style.display = "inline";
        } else {
            document.getElementById("part3").style.display = "inline";
        }
        // Disable the "percentA" input field after pressing "next1"
        document.getElementById("percentA").disabled = true;
        // Set the value of the hidden input field for PercentageA
        document.getElementById("percentA_hidden").value = percentAValue;
    } else if (x === 2) {
        document.getElementById("part4").style.display = "inline";
    } else if (x === 4) {
        const button = document.getElementById("start-game-button");
        const part8Message = document.getElementById("part8-message");
        var percentBValue = parseInt(document.getElementById("percentB").value);
        if (percentBValue === 55) {
            document.getElementById("part5").style.display = "inline";
            button.textContent = "Next";
            part8Message.textContent = "You will go to the second task of this game rule";
        } else {
            document.getElementById("part6").style.display = "inline";
            button.textContent = "Retake the quiz";
            part8Message.textContent = "You will retake the quiz again";
        }
        // Disable the "percentB" input field after pressing "next4"
        document.getElementById("percentB").disabled = true;
        // Set the value of the hidden input field for PercentageB
        document.getElementById("percentB_hidden").value = percentBValue;
    } else if (x === 5) {
        document.getElementById("part7").style.display = "inline";
    } else {
        document.getElementById("part" + (x + 1)).style.display = "inline";
    }
    document.getElementById("next" + x).style.display = "none";
}

</script>

{% endblock %}