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

{% block title %}

{% endblock %}

{% block content %}
<h6>Period 5</h6>
<div id="q1">
<div class="d-flex justify-content-center"><h5>Question1</h5></div>
<br>
<div class="range-slider">
    <label for="vol" style="padding-right:20px">12 X 5 = </label>

    <input id='vol' name='num8' style="width:80%" type="range" value="0" min="0" max="100" oninput="num.value = this.value">
    <output id="num">0</output>
</div>

<br>
<div class="d-flex bd-highlight mb-3">
    <div class="p-2 bd-highlight"></div>
    <div class="p-2 bd-highlight"></div>
    <div class="ml-auto p-2 bd-highlight">
        <button class="otree-btn-next btn btn-primary">Submit</button></div>
</div>

</div>

<div id="t1" style="display:none">
    <i>Trivial facts about Melbourne, Australia</i> <br> <br>
    <i>Australia’s first traffic lights were installed in Melbourne in 1912 at the corner of Collins and Swanston Street. According to the Royal Society for the Prevention of Cruelty to Animals, Melbourne is the fox capital of the world with 6-23 foxes per square kilometer in central Melbourne. Until 1966, it was illegal for pubs in Melbourne to be open after 6pm.</i>
</div>

<div class="d-flex bd-highlight mb-3">
    <div class="p-2 bd-highlight"></div>
    <div class="p-2 bd-highlight"></div>
    <div class="ml-auto p-2 bd-highlight">
        <button class="otree-btn-next btn btn-primary" id ='b1' onclick="breakUp();" type="button">Take a break</button></div>
</div>

<div class="d-flex bd-highlight mb-3" >
    <div class="ml-auto p-2 bd-highlight">
        <div class="d-flex p-2 bd-highlight">
            <div style="float:left; padding-right:30px">
        <button class="otree-btn-next btn btn-primary" id='b3' style="display:none; " type="button" >Read about another city</button></div>
        <button class="otree-btn-next btn btn-primary" id ='b2' style="display:none" onclick="ShowUp();" type="button">Go back to the slider task</button></div>
        </div>
    </div>

<script>
    function breakUp(){
        console.log("hidden");
        document.getElementById('q1').style.display='none',
        document.getElementById('b1').style.display='none',
        document.getElementById('t1').style.display='block',
        document.getElementById('b2').style.display='block',
        document.getElementById('b3').style.display='block'
    }

    function ShowUp(){
     console.log("show");
     document.getElementById('t1').style.display='none'
     document.getElementById('q1').style.display='block',
     document.getElementById('b2').style.display='none',
     document.getElementById('b1').style.display='block',
     document.getElementById('b3').style.display='none'
    }

</script>

{% endblock %}