{% block app_styles %}
<link rel="stylesheet" href='{{static "global/rulers100.css"}}'>
<link rel="stylesheet" href='{{static "global/CM_css.css"}}'>
<style data="after_click" typt="text/css"></style>
{% endblock %}
{{ block content }}

<!--    <h2>Block 1 Guessing Task - Procedure <span style="color: #4c6baf">Pick-One-on-the-Slider-Bar </span></h2>-->

<h3>Instruction 2/2</h3>
<hr>
<ul>
    <li>
        There are 5 guessing tasks.
    </li>
    <li>
        For example, we might ask you a question like "James and Calie are a married couple. They have two children. Assume that the chance of each gender is 1/2. What is the chance that they have two girls?"
    </li>
</ul>
<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next1" onclick="next(1)">Next</button>
</div>
<br>


<div id="part2" style="display: none">
<h3>Submit Your Guess </h3>
<hr>
<ul>
   <li> In each task, you have to make and submit your guess by picking a number on the slider bar. To do so, you need to click on and drag the slider bar.
   </li>
</ul>
<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next2" onclick="next(2)">Next</button>
</div>
<br>
</div>
<div id="part3" style="display: none">
<h3>Example of a Task</h3>
    <hr>
    <p>
        Here is an example of how the task and procedure proceeds to give you an overview of how things work.
    </p>


<div class="taskcontainer">

    <div class="intro">
        <p><u>EXAMPLE:</u></p>
        <p>
            James and Calie are a married couple. They have two children. Assume that the chance of each gender is 1/2. What is the chance that they have two girls?
        </p>

    </div>
    <div class="task">

        <table>
            <colgroup>
                <col span="1" style="width: 50%;">
                <col span="1" style="width: 50%;">
            </colgroup>
            <br>
            <tr>
                <td colspan="2" style="text-align: justify;">
                    <p>The chance that they have two girls is  <span id="belief1" style="visibility: hidden"></span> %
                </td>

            </tr>
            <tr>

                <td style="width: 50%">
                    <div class="ruler1" id="ruler1" style="width: 100%">
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'></div>
                    </div>
                </td>
                <td style="width: 50%">
                    <div class="ruler2" id="ruler2" style="width:100%">
                        <div class='cm' style="border: transparent">
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                            <div class='mm'></div>
                        </div>
                        <div class='cm'></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p>
                        <input type="range" class="slider" min="0" max="100" style="width:100%" step="1" id="Range1" onclick="show()"> </p>
                </td>
            </tr>


            <tr>
                <td colspan="2">
                    <button style="float: right; visibility: hidden" type="button" id="next_page" class="otree-btn-next btn btn-primary" onclick="show2()">Finish</button>
                </td>
            </tr>

        </table>
    </div>
</div>
    <br>
</div>

<div id="next_part" style="visibility:hidden;text-align: right">

    <p style="color: red">Once you click the next button, the comprehension check questions will start.
    </p>
    {% next_button %}
</div>


<!--<div id="CQ" style="visibility: hidden">-->
<!--    <br>-->
<!--    <h3>Check Your Understanding</h3>-->
<!--    <hr>-->
<!--    <p>Before you proceed, we need to ask you some questions to make sure you understand the instructions. You have to get all the questions correct to proceed.-->
<!--    </p>-->
<!--    <p>-->
<!--        <b>Question 1</b><br>-->
<!--        How will you submit your guess in each task of Block 1?-->
<!--        <br>-->
<!--        <input type="radio" name="CQ1" value=1><label>By clicking on a slider bar to submit my guess.-->

<!--    </label><br>-->
<!--        <input type="radio" name="CQ1" value=2><label>Make my guess by choosing which range I think is more likely between two ranges of numbers along with an “EXIT” button; if I choose one range, the computer will further zoom in the range I chose to ask which range I think is more likely between two refined ranges of numbers with an “EXIT” button; if I click on “EXIT”, the computer will randomly select a number from the last range I chose and submit it for me.-->

<!--    </label><br>-->
<!--    </p>-->
<!--    <div style="text-align: right">-->
<!--        <p style="text-align: right"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="check_quiz()" >Check Answer</button></p>-->
<!--    </div>-->
<!--</div>-->



{{ endblock }}

{% block scripts %}
<script>
    // display the slider value in the number input box
    var belief1 = document.getElementById("belief1");
    var Range1 = document.getElementById("Range1");
    var style = document.querySelector('[data="after_click"]')

    belief1.value = Range1.value;
    Range1.oninput = function(){
        belief1.innerHTML = this.value;
    }

    function next(x){
        document.getElementById("next"+x).style.display = "none";
        document.getElementById("part"+(x+1)).style.display = "inline";
    }

    show = function () {
        style.innerHTML=" .slider::-webkit-slider-thumb { width: 25px; height:25px; }"
        style.innerHTML +=".slider::-moz-range-thumb { width: 25px; height:25px; }"
        document.getElementById("belief1").style.visibility = "visible";
        document.getElementById("next_page").style.visibility = "visible";
        //alert("You can use arrow keys on your keyboard to control the slider bar!")
    }

    show2=function(){
        document.getElementById("next_part").style.visibility="visible";
    }

    check_quiz = function(){
        var radio1 = document.querySelector('input[name="CQ1"]:checked');
        if(radio1==null){
            alert("Please answer question 1!");
        } else{
            var answer1 = radio1.value;

            if (answer1!=1){
                alert("Please check your answer for Question 1!");
            }else{
                alert("You are correct!")
                document.getElementById("next_part").style.visibility="visible";
            }
        }
    }
</script>

{% endblock %}