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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'mpl/css/custom.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}

{% endblock %}

{% block content %}
    <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>
<p>
    <b>Now we would like to ask you some questions about the chance of something happening or not happening. We would like
you to give a number from 0 to 100, where ”0” means that you think there is absolutely no chance, and ”100” means that 
        you think the event is absolutely sure to happen.</b> </p>
<p>Consider a bowl with 10 balls in total. Some of the balls may be white and some red. Please click the blue bars to
    reveal the sliders </p>

<p>1. Suppose this bowl has 10 white balls and no red balls. You will be asked to draw one ball without looking. On a
    scale from 0 percent to 100 percent, what is the percent chance that the ball you draw is red? </p>
{{ formfield_errors 'numeracy1' }}
<div id="slider1_here"></div>
<p>2. Suppose that the bowl has 7 white balls and 3 red balls. You will be asked to draw one ball without looking. On a
    scale from 0 percent to 100 percent, what is the percent chance that the ball you draw is white? </p>
{{ formfield_errors 'numeracy2' }}
<div id="slider2_here"></div>
<p>3. Imagine that the weather report tells you that the chance it will rain tomorrow is 70%. Assuming the weather report
    accurately reports the chance of rain and on a scale from 0 percent to 100 percent, what is the chance it will
    NOT rain tomorrow? </p>
{{ formfield_errors 'numeracy3' }}
<div id="slider3_here"></div>
<p>4. Imagine that whether it rains in your town and whether it rains in New York City are unrelated. The chance that
    it will rain in your town tomorrow is 50%. The chance that it will rain in New York City is also 50%. On a
    scale from 0 percent to 100 percent, what is the chance that it will rain both in your town and in New York
    City tomorrow? </p>
{{ formfield_errors 'numeracy4' }}
<div id="slider4_here"></div>

<script src="{{ static 'mgslider.js' }}"></script>
<script>
        $(document).ready(function (event) {
            slider1 = new mgslider("numeracy1", 0, 100, 10);
            slider1.print(document.getElementById("slider1_here"));

            slider2 = new mgslider("numeracy2", 0, 100, 10);
            slider2.print(document.getElementById("slider2_here"));

            slider3 = new mgslider("numeracy3", 0, 100, 10);
            slider3.print(document.getElementById("slider3_here"));

            slider4 = new mgslider("numeracy4", 0, 100, 5);
            slider4.print(document.getElementById("slider4_here"));
        });
</script>


{% next_button %}
{% endblock %}