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

{% block title %}
    Schooltime Brainstorming Exercise
{% endblock %}

{% block content %}


<ul>
{% for word in player.get_split_words %}
    <li>{{word}}</li>
{% endfor %}
</ul>

You may enter <b>up to 3</b> guesses as well. 
Use this opportunity to <b>brainstorm</b> some ideas.
Remember the answer must be a different word than the three given words.  

<table style="width:100%;">

<tr>
<th>Guesses</th>
<th>Confidence</th>
<th>Confidence slider</th>
</tr>

    <tr>
        <td>
            {% formfield player.guess1 %}
        </td>
        <td width="25%">
            <div id="cd1" class="conf_disp">100</div>
        </td>
        <td>
            <input type="range" min="0" max="100" value="0" class="conf_slider" id="cs1">
        </td>
    </tr>


    <tr>
        <td>
            {% formfield player.guess2 %}
        </td>
        <td>
            <div id="cd2" class="conf_disp">100</div>
        </td>
        <td>
            <input type="range" min="0" max="100" value="0" class="conf_slider" id="cs2">
        </td>
    </tr>

    <tr>
        <td>
            {% formfield player.guess3 %}
        </td>
        <td>
            <div id="cd3" class="conf_disp">100</div>
        </td>
        <td>
            <input type="range" min="0" max="100" value="0" class="conf_slider" id="cs3">
        </td>
    </tr>


</table>


<!-- <p>Your confidence in your choice:</p> -->
<!-- <div id="conf_disp">100</div> -->

<!-- <br> -->
<!-- <input type="range" min="0" max="100" value="0" class="slider" id="conf_slider"> -->

<div id="hide_this">
{% formfield player.confidence1 %}
{% formfield player.confidence2 %}
{% formfield player.confidence3 %}

</div>


<style>
    .conf_disp{
        font-weight: bold;
        font-size: 32px;
        background-color: gray;
        color: white;
        text-align: center;
        width: 50%;
    }
    .conf_disp::after{
        content: "%"
    }
    #hide_this{
        display: none;
    }
    .conf_slider{
        width: 50%;
    }
    
    .conf_slider {
        -webkit-appearance: none;  /* Override default CSS styles */
        appearance: none;
        background: #d3d3d3; /* Grey background */
        height: 15px;
        outline: none; /* Remove outline */
    }
    
    .conf_slider::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 25px; /* Set a specific slider handle width */
        height: 40px; /* Slider handle height */
        background: #4CAF50; /* Green background */
        cursor: pointer; /* Cursor on hover */
        border-style: outset;
        border-color: #6ad96f #468f49;
    }

    .conf_slider::-moz-range-thumb {
        width: 25px; /* Set a specific slider handle width */
        height: 25px; /* Slider handle height */
        background: #4CAF50; /* Green background */
        cursor: pointer; /* Cursor on hover */
        border-style: outset
    }
    
    table, th, td {
        <!-- border: 1px solid black; -->
        text-align: center;
    }

</style>

<script>
conf_slider=document.getElementById("conf_slider")
conf_disp=document.getElementById("conf_disp")
conf_input_box=document.getElementById("id_confidence_first_answer")

cs1=document.getElementById("cs1")
cd1=document.getElementById("cd1")
cb1=document.getElementById("id_confidence1")
cd1.innerHTML = cs1.value;
cb1.value=cs1.value;

cs2=document.getElementById("cs2")
cd2=document.getElementById("cd2")
cb2=document.getElementById("id_confidence2")
cd2.innerHTML = cs2.value;
cb2.value=cs2.value;

cs3=document.getElementById("cs3")
cd3=document.getElementById("cd3")
cb3=document.getElementById("id_confidence3")
cd3.innerHTML = cs3.value;
cb3.value=cs3.value;



cs1.oninput = function() {
    cd1.innerHTML = this.value;
    cb1.value=this.value;
}
cs2.oninput = function() {
    cd2.innerHTML = this.value;
    cb2.value=this.value;
}
cs3.oninput = function() {
    cd3.innerHTML = this.value;
    cb3.value=this.value;
}

</script>

    {% next_button %}

{% endblock %}