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

{% block title %}

{% endblock %}

{% block content %}
<h6>Period 3</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='num6' 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 Atlanta, U.S.</i> <br> <br>
    <i>Atlanta is the only city in North America to have been destroyed as an act of war when General Sherman burnt it to the ground in November 1864. Atlanta is home to 71 streets with a variation of the word “Peachtree” in their names: Peachtree Avenue, Peachtree Plaza, etc. Coca-Cola was first invented in downtown Atlanta on May 8th, 1886.</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 %}