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

{% block title %}

{% endblock %}

{% block content %}
<h6>Period 2</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='num5' 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 Toronto, Canada</i> <br> <br>
    <i>The coldest temperature ever recorded in Toronto was -31.3°C on January 4, 1981. Toronto is North America’s third largest venue for movie production. There are over 25,000 jobs in feature film production. Toronto is 76.5 meters above sea level. The highest point – 209 meters – is at the intersection of Steeles Avenue West and Keele Street.</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 %}