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




{% block app_styles %}
<style>

    h1, td{
        text-align:center;
    }

    .taskcontainer {
        margin: auto;
        outline: dodgerblue;
        border-style: groove;
        max-width:1000px;
        /*max-width improve the browser's handling of small windows.*/
        padding: 25px 50px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        text-align:center;
        font-size: 30px;
    }

    .button {
        border-color: coral;
        background-color: white;
        padding: 5px 5px;
        border-radius: 50%;
        font-size: 20px;
    }


</style>

{% endblock %}

{%block content%}

<h1> &nbsp</h1>
<h1>Counting Task 4</h1>
<h1> &nbsp</h1>
<div class="taskcontainer">
    <table>

        <tr>
            <td rowspan="4" style="border: 1px solid black; padding: 10px; width: 50%">

                1010101100110110001
                1010101001001010111


            </td>
            <td colspan="2">&nbsp</td>

        </tr>
        <tr>
            <td colspan="2" style="font-size: 20px">
                How many 0s are there in the table?
            </td>
        </tr>
        <tr>
            <!--use the float property to set the position of a button or image-->
            <td style="font-size: 25px; float: right" >
                <!--use the style::width to set the size of the input box-->
                <input type="number" id="count1" name="count1" style="width: 100px" step="1">
            </td>
            <td>
                <button type="button" id="submit"  onclick="checkresult()" class="button"> Submit </button>
                <!--                Sometimes, check()/submit() doesn't work because the name overrides some other functions, -->
                <!--                especially the system defined ones. checkit() works well.-->
                <button type="submit" value="Submit" id="next_page" class="button"> Next </button>
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp</td>
        </tr>


    </table>
</div>

{%endblock%}

{% block scripts %}

<script>
    document.getElementById("next_page").disabled = true;//cannot go to the next page freely
    function checkresult() // if the input is correct, move on; eitherwise, try again.
    {
        var x = document.getElementById("count1").value;
        if (x!=18) {
            alert("Try again!");
        }
        else {
            document.getElementById("submit").disabled = true;//can only submit once
            document.getElementById("next_page").disabled = false; // the button go to next page
        }
    }

</script>

{% endblock %}