{% 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 class="text-justify">
        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 suis incapable de me déplacer à pied</li>
  <li> Je suis incapable de me laver ou de m'habiller tout(e) seul(e)</li>
  <li> Je suis incapable d'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 class="text-justify"> <strong>Seriez-vous prêt(e) à payer pour ne plus avoir cet état de santé pendant un mois et donc avoir un état de santé parfait ? </strong> <br>
<input type="radio" name="wtp1" value="Oui" onclick="yes();" id="oui"> Oui  <br>
 <input type="radio" name="wtp1" value="Non" onclick="no();" id="non"> Non  <br>

    </p>

    <div id="show" >
<p class="text-justify"> <strong>Combien seriez-vous prêt(e) à payer (de vos 1000€) pour ne plus avoir cet état de santé pendant un mois
et donc avoir un état de santé parfait ? </strong> <br>
    Déplacez le curseur pour indiquer votre choix. </p>

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

{{ form.wtp1.errors }}


    {% next_button %}

{% endblock %}