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

{% block title %}
    Game III
{% endblock %}

{% block content %}

<div class="instructions well well-lg">

<p>In this part of the experiment you will be asked to make a series of choices.</p>
<p>How much you receive will depend partly on <b>chance</b> and partly on the <b>choices</b> you make.</p>
<p>The decision problems are not designed to test you. What we want to know is what choices you would make in them.
    The only right answer is what you really would choose.</p>
<p> </p>
<p>For each line in the following table, please state whether you prefer <b>Option L</b> or <b>Option R</b>. Only one turning point is allowed to be made.</p>
<p>Notice that there are a total of <b>ten lines</b> in the table but only <b>one line</b> will be randomly selected for payment.</p>
<p>You do not know which line will be paid when you make your choices. Hence you should pay attention to the choice you make in every line.</p>
<p>After you have completed all your choices, the computer will randomly generate a number, which determines which line is going to be paid.</p>
<p> </p>
<p>Your earnings for the selected line depend on which option you chose:
    If you chose Option L in that line, you will receive <b>20 ECUs</b>.
    If you chose Option R in that line, you will receive either <b>60 ECUs</b> or <b>0 ECUs</b>.</p>
<p>To determine your earnings in the case you chose Option R, there will be a second random draw.
    The computer will randomly determine if your payoff is <b>60 ECUs</b> or <b>0 ECUs</b>, with the chances stated in Option R.</p>
<p>Note: Every 20 ECUs is equal to 1 Dollar.</p>
</div>

<table class="table">
        <tr>
            <th>Option Number</th>
            <th>Option L</th>
            <th>Option R</th>
        </tr>
        <tr>
            <td> 1 </td>
            <td><input type="radio" name="d0" value="1" onclick="myFunction0(this.value)" id="d01"> 20 ECUs <br></td>
            <td><input type="radio" name="d0" value="2" onclick="myFunction0(this.value)" id="d02"> 60 ECUs with 0% chance, 0 ECUs with 100% chance. <br></td>
        </tr>
        <tr>
            <td> 2 </td>
            <td><input type="radio" name="d1" value="1" onclick="myFunction1(this.value)" id="d11"> 20 ECUs <br></td>
            <td><input type="radio" name="d1" value="2" onclick="myFunction1(this.value)" id="d12"> 60 ECUs with 10% chance, 0 ECUs with 90% chance. <br></td>
        </tr>
        <tr>
            <td> 3 </td>
            <td><input type="radio" name="d2" value="1" onclick="myFunction2(this.value)" id="d21"> 20 ECUs <br></td>
            <td><input type="radio" name="d2" value="2" onclick="myFunction2(this.value)" id="d22"> 60 ECUs with 20% chance, 0 ECUs with 80% chance. <br></td>
        </tr>
        <tr>
            <td> 4 </td>
            <td><input type="radio" name="d3" value="1" onclick="myFunction3(this.value)" id="d31"> 20 ECUs <br></td>
            <td><input type="radio" name="d3" value="2" onclick="myFunction3(this.value)" id="d32"> 60 ECUs with 30% chance, 0 ECUs with 70% chance. <br></td>
        </tr>
        <tr>
            <td> 5 </td>
            <td><input type="radio" name="d4" value="1" onclick="myFunction4(this.value)" id="d41"> 20 ECUs <br></td>
            <td><input type="radio" name="d4" value="2" onclick="myFunction4(this.value)" id="d42"> 60 ECUs with 40% chance, 0 ECUs with 60% chance. <br></td>
        </tr>
        <tr>
            <td> 6 </td>
            <td><input type="radio" name="d5" value="1" onclick="myFunction5(this.value)" id="d51"> 20 ECUs <br></td>
            <td><input type="radio" name="d5" value="2" onclick="myFunction5(this.value)" id="d52"> 60 ECUs with 50% chance, 0 ECUs with 50% chance. <br></td>
        </tr>
        <tr>
            <td> 7 </td>
            <td><input type="radio" name="d6" value="1" onclick="myFunction6(this.value)" id="d61"> 20 ECUs <br></td>
            <td><input type="radio" name="d6" value="2" onclick="myFunction6(this.value)" id="d62"> 60 ECUs with 60% chance, 0 ECUs with 40% chance. <br></td>
        </tr>
        <tr>
            <td> 8 </td>
            <td><input type="radio" name="d7" value="1" onclick="myFunction7(this.value)" id="d71"> 20 ECUs <br></td>
            <td><input type="radio" name="d7" value="2" onclick="myFunction7(this.value)" id="d72"> 60 ECUs with 70% chance, 0 ECUs with 30% chance. <br></td>
        </tr>
        <tr>
            <td> 9 </td>
            <td><input type="radio" name="d8" value="1" onclick="myFunction8(this.value)" id="d81"> 20 ECUs <br></td>
            <td><input type="radio" name="d8" value="2" onclick="myFunction8(this.value)" id="d82"> 60 ECUs with 80% chance, 0 ECUs with 20% chance. <br></td>
        </tr>
        <tr>
            <td> 10 </td>
            <td><input type="radio" name="d9" value="1" onclick="myFunction9(this.value)" id="d91"> 20 ECUs <br></td>
            <td><input type="radio" name="d9" value="2" onclick="myFunction9(this.value)" id="d92"> 60 ECUs with 90% chance, 0 ECUs with 10% chance. <br></td>
        </tr>
    </table>

<script>
    function myFunction0(input) {
        if (document.getElementById("d02").checked) {
            document.getElementById("d12").checked = true;
            document.getElementById("d22").checked = true;
            document.getElementById("d32").checked = true;
            document.getElementById("d42").checked = true;
            document.getElementById("d52").checked = true;
            document.getElementById("d62").checked = true;
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction1(input) {
        if (document.getElementById("d11").checked) {
            document.getElementById("d01").checked = true;
        }
        if (document.getElementById("d12").checked) {
            document.getElementById("d22").checked = true;
            document.getElementById("d32").checked = true;
            document.getElementById("d42").checked = true;
            document.getElementById("d52").checked = true;
            document.getElementById("d62").checked = true;
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction2(input) {
        if (document.getElementById("d21").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
        }
        if (document.getElementById("d22").checked) {
            document.getElementById("d32").checked = true;
            document.getElementById("d42").checked = true;
            document.getElementById("d52").checked = true;
            document.getElementById("d62").checked = true;
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction3(input) {
        if (document.getElementById("d31").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
        }
        if (document.getElementById("d32").checked) {
            document.getElementById("d42").checked = true;
            document.getElementById("d52").checked = true;
            document.getElementById("d62").checked = true;
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction4(input) {
        if (document.getElementById("d41").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
            document.getElementById("d31").checked = true;
        }
        if (document.getElementById("d42").checked) {
            document.getElementById("d52").checked = true;
            document.getElementById("d62").checked = true;
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction5(input) {
        if (document.getElementById("d51").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
            document.getElementById("d31").checked = true;
            document.getElementById("d41").checked = true;
        }
        if (document.getElementById("d52").checked) {
            document.getElementById("d62").checked = true;
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction6(input) {
        if (document.getElementById("d61").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
            document.getElementById("d31").checked = true;
            document.getElementById("d41").checked = true;
            document.getElementById("d51").checked = true;
        }
        if (document.getElementById("d62").checked) {
            document.getElementById("d72").checked = true;
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction7(input) {
        if (document.getElementById("d71").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
            document.getElementById("d31").checked = true;
            document.getElementById("d41").checked = true;
            document.getElementById("d51").checked = true;
            document.getElementById("d61").checked = true;
        }
        if (document.getElementById("d72").checked) {
            document.getElementById("d82").checked = true;
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction8(input) {
        if (document.getElementById("d81").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
            document.getElementById("d31").checked = true;
            document.getElementById("d41").checked = true;
            document.getElementById("d51").checked = true;
            document.getElementById("d61").checked = true;
            document.getElementById("d71").checked = true;
        }
        if (document.getElementById("d82").checked) {
            document.getElementById("d92").checked = true;
        }
    }

    function myFunction9(input) {
        if (document.getElementById("d91").checked) {
            document.getElementById("d01").checked = true;
            document.getElementById("d11").checked = true;
            document.getElementById("d21").checked = true;
            document.getElementById("d31").checked = true;
            document.getElementById("d41").checked = true;
            document.getElementById("d51").checked = true;
            document.getElementById("d61").checked = true;
            document.getElementById("d71").checked = true;
            document.getElementById("d81").checked = true;
        }
    }
</script>


    {% next_button %}

{% endblock %}