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


{% block content %}

{% if form.errors %}
<div class="alter alert-danger" role="alert">
  <p>Please indicate your answer by clicking on the slider.</p>
</div>
{% endif %}
{% include "global/fopen_bt.html" %}

{% include "global/fopen_at.html" %}

What do you think would be approximately the optimal division of your time between the two tasks? 
This means the allocation of your time that would maximize your payoffs. Please indicate your answer on the slider below. 
<br>
<table class="table">
  <tr>
    <td style="text-align: center;">
        <input type="range" min="0" max="{{Constants.timeout}}" class="form-range" 
               id="sliderValue" name="sliderValue"
               style="width: 80%;
               border-radius: 5px;
               margin: 0 auto;
               display: block;">
    </td>
</tr>
</table>
<div>
  <span id="math_time"><b>Math Task:</b> seconds </span>
  <span style="float:right" id="code_time"><b>Code Task:</b> seconds</span>
</div>

<br>

<button class="otree-btn-next btn btn-primary">Next</button>
 {% include "global/fclose.html" %}

 <input type="hidden" id="q_subjective_optimality_1" name="q_subjective_optimality_1">
 <input type="hidden" name="Exit_Q2_warnings" value="0" id="Exit_Q2_warnings"/>
 <input type="hidden" name="Exit_Q2_time_spent" value="0" id="Exit_Q2_time_spent"/>

{% endblock %}


{% block scripts %}
<script>
  const tot_time = {{Constants.timeout}}; // Replace 60 with the actual value of Constants.timeout
  document.getElementById('sliderValue').oninput = function() {
    document.getElementById('math_time').innerHTML = "<b>Math Task:</b> " + this.value + " seconds";
    document.getElementById('code_time').innerHTML = "<b>Code Task:</b> " +(tot_time - this.value) + " seconds";
    document.getElementById('q_subjective_optimality_1').value = this.value;

}
</script>
{% endblock %}
{% block styles %}
<style>
.otree-btn-next {
  float: right;
}
.alert-danger {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .25rem;
  }
.otree-form-errors {
    visibility: hidden;
    display: none;
  }
</style>
{% endblock %}