{{ block title }}
{{ endblock }}
{{ block content }}
<p><center> Round {{ round }} out of 14</center>
</p>

<p>
    Stage 1: Rock-paper-scissors game
</p>
<p>
    You and the participant you are matched with have both bid for the advantage.
</p>

<p>
    You two will now play a game of rock-paper-scissors to determine who has the advantage.
</p>
<p>
    <center><img src="{% static 'respon.png' %}" alt="My Image"></center>
</p>
<p>
   Please make your choice below:
</p>
{{ formfield 'game1' }}
<br>
<br>
<p>
    Please, tell us the following: What do you think is your probability of winning this rock-paper-scissors game. Regardless of your answer, you will be paid 3 additional tokens at the end of the experiment if this round is selected for payment.
</p>

<style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>


    {{ formfield_errors 'winprob' }}
    <p>Click the blue bars to reveal the sliders and the numbers represent the probability in percentage.</p>

    <div id="sliders_here"></div>

    <script src="{{ static 'mgslider.js' }}"></script>

    <script>
        $(document).ready(function (event) {
            slider2 = new mgslider("winprob", 0, 100, 1);
            slider2.print(document.getElementById("sliders_here"));
        });
    </script>



<center><button class="btn btn-primary">Continue</button></center>

{{ endblock }}