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

{% block title %}
    Questionnaire
{% endblock %}

{% block content %}

    <div style="text-align:center !important;margin-bottom:30px">
        <h3>What is your willingness to take a risk in the following situations?</h3>
        <div style="font-size:120%;">1 = completely unwilling</div>
        <div style="font-size:120%;">10 = completely willing</div>
    </div>
    <ol>
        <li>&bull; Expressing disagreement by peaceful actions?</li>
        <div class="slider-container-left">Completely Unwilling 1</div>
        <div class="slider-container"><input type="range" min="1" max="10" value="1" step="1" class="slider" name="q_q1"></div>
        <div class="slider-container-right">10 Completely Willing</div>
    </ol>
    <ol>
        <li>&bull; Expressing disagreement by aggressive actions?</li>
        <div class="slider-container-left">Completely Unwilling 1</div>
        <div class="slider-container"><input type="range" min="1" max="10" value="1" step="1" class="slider" name="q_q2"></div>
        <div class="slider-container-right">10 Completely Willing</div>
    </ol>
    <ol>
        <li>&bull; Majority of your group members engange in aggressive actions? How willing are you to join them?</li>
        <div class="slider-container-left">Completely Unwilling 1</div>
        <div class="slider-container"><input type="range" min="1" max="10" value="1" step="1" class="slider" name="q_q3"></div>
        <div class="slider-container-right">10 Completely Willing</div>
    </ol>
    <ol>
        <li>&bull; Some of your group members engange in aggressive actions? How willing are you to join them?</li>
        <div class="slider-container-left">Completely Unwilling 1</div>
        <div class="slider-container"><input type="range" min="1" max="10" value="1" step="1" class="slider" name="q_q4"></div>
        <div class="slider-container-right">10 Completely Willing</div>
    </ol>
    <ol>
        <li>&bull; Majority of your group members engange in peaceful actions? How willing are you to join them?</li>
        <div class="slider-container-left">Completely Unwilling 1</div>
        <div class="slider-container"><input type="range" min="1" max="10" value="1" step="1" class="slider" name="q_q5"></div>
        <div class="slider-container-right">10 Completely Willing</div>
    </ol>
    <ol>
        <li>&bull; Some of your group members engange in peaceful actions? How willing are you to join them?</li>
        <div class="slider-container-left">Completely Unwilling 1</div>
        <div class="slider-container"><input type="range" min="1" max="10" value="1" step="1" class="slider" name="q_q6"></div>
        <div class="slider-container-right">10 Completely Willing</div>
    </ol>

    {% next_button %}

{% endblock %}

{% block comment %}
    https://www.w3schools.com/howto/howto_js_rangeslider.asp
{% endblock %}

{% block scripts %}
    <style>
        ol {
            width:100%;
            padding:0;
            margin:0;
            overflow:hidden;
            margin-bottom:30px;
        }

        ol > li {
            font-size:20px;
            padding:0;
            margin:0;
            font-weight:bold;
            color:#333333;
        }

        ol > .slider-container {
            width:50%;
        }

        ol > div {
            margin-top:30px;
            float:left;
        }

        ol > .slider-container-left {
            text-align:right;
            margin-right:1%;
            width:24%;
        }

        ol > .slider-container-right {
            text-align:left;
            margin-left:1%;
            width:24%;
        }

        #styling {
        border: 1px;
        text-align: center;
        }

        .first_column {
            table-layout: auto;
        }

        .second_column {
            width: 50%;
        }

        .third_column {
            table-layout: auto;
        }

        .slidecontainer {
        width: 100%; /* Width of the outside container */
        }

        /* The slider itself */
        .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        }

        /* Mouse-over effects */
        .slider:hover {
        opacity: 1; /* Fully shown on mouse-over */
        }

        /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
        .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #3070b3;
        cursor: pointer;
        }

        .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #3070b3;
        cursor: pointer;
        }
    </style>
{% endblock %}