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

{% block title %}

{% endblock %}

{% block content %}
<h6>Period 4</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='num7' 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 Athens, Greece</i> <br> <br>
    <i>On July 10, 1977, the temperature in Athens reached a record breaking high of 48 °C  - the hottest temperature ever recorded in Europe. Athens was the birthplace of the modern Olympic games in 1896. However, the ancient Olympics were never actually held in the Greek capital.</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 %}