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

{% block title %}
    Partie 2
{% endblock %}

{% block scripts %}
<script>
document.getElementById('show').style.display = "none";
function yes() {
    document.getElementById('show').style.display = "block";
    $(function () {
        var SliderTouched = false;
        var selector = $('[data-slider] input[type="range"]');
        selector.change(function () {
            SliderTouched = true;
        });

        $("#form").submit(function (event) {
            if (!SliderTouched) {
                event.preventDefault();
            }
        });
    });
}
function no() {
     document.getElementById('show').style.display = "none";
}



</script>
{% endblock %}

{% block content %}
<p>
        Imaginez que vous avez un revenu mensuel de 1000€ (une fois votre loyer payé). Vous tombez malade pendant un mois.
        Votre état de santé est alors le suivant :
        <ul>
  <li> Je ne peux pas me déplacer à pied plus de 2h30 par jour</li>
  <li> J’ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
  <li> J’ai des problèmes modérés pour accomplir mes activités courantes</li>
  <li> J'ai des douleurs ou une gêne modérée(s) </li>
  <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul>

    </p>

<p> Imaginez que l'on vous propose un traitement à prendre en une fois et au lieu de l'état de santé précédent vous auriez l'état de santé suivant :
<ul>
  <li> Je n'ai aucun problème pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour me laver ou m'habiller tout(e) seul(e)</li>
  <li> Je n'ai aucun problème pour accomplir mes activités courantes</li>
  <li> Je n'ai ni douleur ni gêne </li>
  <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul>
</p>


<p> <strong>Seriez-vous prêt(e) à payer pour ce traitement ? </strong> <br>
<input type="radio" name="wtp4" value="Oui" onclick="yes();" id="oui"> Oui  <br>
 <input type="radio" name="wtp4" value="Non" onclick="no();" id="non"> Non  <br>

    </p>

    <div id="show" >
<p> <strong>Combien seriez-vous prêt(e) à payer pour ce traitement ? </strong> <br>
    Déplacez le curseur pour indiquer votre choix. </p>

{% formfield player.slide_wtp4 %}
</div>

{{ form.wtp4.errors }}


    {% next_button %}

{% endblock %}