{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block styles %}
    <link href="{% static 'stag_hunt/filkin_pie/filkin_pie.css' %}"rel="stylesheet">
    <style>
    li{
      margin: 10px 0;
    }
    </style>
{%endblock%}

{% block scripts %}
<script src="{% static 'stag_hunt/filkin_pie/filkin_pie.js' %}"></script>
<script>
    var divtoshow=0;
     $( "input#clicky" ).click(function() {
         divtoshow++;
         $('div#par'+divtoshow).show();
         if (divtoshow==3){startWatch();$(this).hide();}
     });
</script>
{% endblock %}


{% block title %}

Task 1
{% endblock %}

{% block content %}

<div class="row">
   <div class="instructions well well-lg" style="padding-top:3px; padding-bottom:5px; margin-top:20px;">

<p>In the next pages you will be invited to read some text. Please read it carefully.
  Click as you finish reading each section.</p>
<hr>

<div id="par1" style="display:none;">
    <p>Imagine that you are having troubles with your teeth.</p>
    <p>Your dentist recommends a {{tr_text.0}} treatment.</p>
    <p>This treatment is not covered by your insurance.</p>
    <p>You now need to decide the following:</p>
</div>


<div id="par2" style="display:none;">
<ol>
    <li>
        <b>Pay the full amount in cash.</b>
        Would this require spending your savings? How would you go about it?
    </li>
    <li>
        <b>Take out a loan, which you can pay back in monthly instalments.</b>
        A typical such loan may require monthly payments of {{tr_text.1}} a month for 12 months,
        which would amount to {{tr_text.2}} in total.
    </li>
    <li>
        <b>Take a chance, forego the treatment, and hope that the troubles with your teeth will disappear.</b>
        Of course, this leaves open the possibility of conditions worsening, or even greater expenses in the long run.
    </li>
</ol>
</div>


<div id="par3" style="display:none;">
    <p> How would you go about making this decision?</p>
    <p>Would it be an easy or a difficult decision for you to make?</p>
    <p>Please take your time considering these questions.
    We will ask you at a later point to provide short answers to these questions.</p>
    <p>You will be moved on to the next slide in {{Constants.priming_time}} seconds.</p>
</div>


<div id="par3" style="display:none;" class="timer fill" >
</div>


    <div id="time_left" style="display: none;">{{time_left}}</div>




</div>
<input class="btn btn-primary btn-large btn-primary next-button" type="button" value="Click" id="clicky">
{% endblock %}