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

{% block title %}
    Task 1
{% endblock %}

{% block content %}



<p>In this task you must decide between two payment options. You should select the payment
option you prefer. If this task is chosen as the paying task, you will be paid according to
the payment option you choose.</p>


<form>
  <ol>
    <li>
      <input type="radio" id="1" name="task1options" onclick="document.querySelector('[name=task1]').value = 1;"/>
      <label for="option1">
        <b>Option 1</b><br/>
        If a random number is 1, you have a 75% chance of winning $10<br>
        If a random number is 2, 3, 4, 5, or 6, you have a 75% chance of winning $10
      </label>
    </li>
    <li>
      <input type="radio" id="2" name="task1options" onclick="document.querySelector('[name=task1]').value = 2;"/>
      <label for="option2">
        <b>Option 2</b><br/>
        If a random number is 1, you have a 31% chance of winning $10<br>
        If a random number is 2, 3, 4, 5, or 6, you have a 98% chance of winning $10
      </label>
    </li>
  </ol>
</form>



{{ form.task1.errors }}
<input type="hidden" name="task1" />

{% next_button %}



<script>

function radioclick(){
    var radios = document.getElementsByName('genderS');
        for (var i = 0, length = radios.length; i < length; i++) {
          if (radios[i].checked) {
            document.querySelector('[name=payout]').value = parseFloat(radios[i].id);
            alert(parseFloat(radios[i].id))
            break;
        }
    }
}
</script>




<style>
ol{
    padding-left: 0;
    margin-left:0;
}
ol>li {
    list-style-type: none;
    margin-bottom: .5em;
}
ol>li input[type=radio] {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}
ol>li label {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}
</style>
{% endblock %}