{{ block title }}
<h1 style="margin-bottom: 20px;"><b>One last question</b></h1>
{{ endblock }}
{{ block content }}
{{ include '_static/MyStyles.html'}}
{{ include '_static/JS_Functions.html'}}

<h4><b>Do you think that the guesstimation tasks are easier for men or for women?</b></h4>
<p class="stlText">
    Use the sliders below to indicate your answers. 0 means no gender difference. The more certain you are that there
    is a gender difference, the more you should move the slider in the relevant direction.
</p>
<p class="stlText">
    (1) Do you think that men or women, on average, know more about the <b>FIRST</b> guesstimation question ({{ keyword1 }})?
</p>

<table style="width: 80%; margin-left: auto; margin-right: auto;">
    <tr style="padding-top: 12px;">
        <td style="width: 25%"></td>
        <td id="Value1" style="text-align: center; padding-left: 60px; padding-right: 60px; width: 50%"></td>
        <td style="width: 25%"></td>
    </tr>
    <tr>
        <td style="text-align: left" >Men know more</td>
        <td style="text-align: center">
            <label for="GenderTask1"></label><input type="range" style="width: 100%" min="-100" max="100" value="0" id="GenderTask1">
        </td>
        <td style="text-align: right;">Women know more</td>
    </tr>
</table>

<p class="stlText" style="padding-top: 20px">
    (2) Do you think that men or women, on average, know more about the <b>SECOND</b> guesstimation question ({{ keyword2 }})?
</p>
<table style="width: 80%; margin-left: auto; margin-right: auto;">
    <tr style="padding-top: 12px;">
        <td style="width: 25%"></td>
        <td id="Value2" style="text-align: center; padding-left: 60px; padding-right: 60px; width: 50%"></td>
        <td style="width: 25%"></td>
    </tr>
    <tr>
        <td style="text-align: left" >Men know more</td>
        <td style="text-align: center">
            <label for="GenderTask2"></label><input type="range" style="width: 100%" min="-100" max="100" value="0" id="GenderTask2">
        </td>
        <td style="text-align: right;">Women know more</td>
    </tr>
</table>
<br><br>

<div id="HiddenFormField" style="display: none">
    {{ formfields }}
</div>



    {{ next_button }}

<script>
    let fldGenderGuess1 = document.getElementById("id_MyGenderGuess1");
    let fldGenderGuess2 = document.getElementById("id_MyGenderGuess2");

    let btnNext = document.getElementsByClassName('otree-btn-next')[0];
    btnNext.innerHTML = 'Continue';
    btnNext.className = 'stlMyButton';
    btnNext.style.float = 'right';
    btnNext.style.marginLeft = '0';

    let slider1 = document.getElementById("GenderTask1");
    let slider2 = document.getElementById("GenderTask2");
    let value1 = document.getElementById("Value1");
    let value2 = document.getElementById("Value2");
    value1.innerHTML = slider1.value;
    value2.innerHTML = slider2.value;

    slider1.oninput = function() {
        value1.innerHTML = (iif(this.value<0,-1,1)*this.value).toString();
        value1.style.textAlign = iif(this.value<0,"left",iif(this.value>0,"right","center"));
        fldGenderGuess1.value = this.value;
    }
    slider2.oninput = function() {
        value2.innerHTML = (iif(this.value<0,-1,1)*this.value).toString();
        value2.style.textAlign = iif(this.value<0,"left",iif(this.value>0,"right","center"));
        fldGenderGuess2.value = this.value;
    }
</script>

{{ endblock }}