Test_Johanne/old_versions/exp_e4c_en_questionnaire_final_v2/templates/exp_e4c_en_questionnaire_final_v2/Risk_BinsWanger_qc.html

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

{% block title %}
    {% if player.id_in_group == 1 %}
    Game 2
    {% endif %}
    {% if player.id_in_group == 2 %}
    Game 1
    {% endif %}

{% endblock %}

{% block content %}

<p> <b>
This game can be taken into account when calculating your gains. </b></p>

<div class="card bg-light instructions">
    <div class="card-body">


    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>


         <h4>
             Rules of the game:

         </h4>

         <p>
             Look at the table below. It presents 5 different situations. Look at them carefully.
             Situations A, B, C, D and E contain two possible gains (in ECUS): the red gains on the left and
             green gains on the right. You will receive one of these two amounts of ECUS depending on the color that
             will be assigned to you at the end of the game.
         </p>

         <p>
At the end of the game, the ECU you have won will be converted into € using the following rule: </p>
         <p>
         <center> <b> 1 ECU =… € </b> </center>
         </p>

         <p>
So you will first have to choose the situation you prefer the most: A, B, C, D or E. </p>

<br> <br>

         <p> <b> Warning! The image below is an example, your choice will be saved later. </b> </p>

               <table class='table table-bordered text-center' style='width: auto; margin: auto'>

        <tr>
            <th> Options </th>
            <td bgcolor="#ffe6e6"> <b><FONT color="red"> Red </FONT></b> </td>
            <td bgcolor="#e6ffe6"> <b> <FONT color="green"> Green </FONT> </b> </td>


        </tr>

        <tr>
            <th align="center" > A </th>
            <td align="center" bgcolor="#ffe6e6">
                     <p>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>

                     <p>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>
            </td>


            <td align="center" bgcolor="#e6ffe6">
                     <p>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>

                     <p>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>
            </td>




        </tr>


        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (4 ECUs) </td>
            <td bgcolor="#e6ffe6">  (4 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>




            <th> B </th>
            <td bgcolor="#ffe6e6">

    <br>
           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
    <br>

            </td>

            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>


        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (3 ECUs) </td>
            <td bgcolor="#e6ffe6">  (6 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>



        <tr>
            <th> C </th>
            <td bgcolor="#ffe6e6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>

            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>



        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (2 ECUs) </td>
            <td bgcolor="#e6ffe6">  (8 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>



        <tr>
            <th> D </th>
            <td bgcolor="#ffe6e6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>
            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>





        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (1 ECU) </td>
            <td bgcolor="#e6ffe6">  (10 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>


        <tr>
            <th> E </th>
            <td bgcolor="#ffe6e6">
            </td>
            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
               <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
               <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
               <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>



        </tr>


        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (0 ECUs) </td>
            <td bgcolor="#e6ffe6">  (12 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>

    </table>

        <br><br>

<p>

Second, your color will be revealed to you, <b> at the end of the experiment </b>, with the following process:

     <br> You will choose between two buttons that look like this:

</p>

        <br>

        <head>
<style>
.button {
  background-color: #a3a3c2;
  border: none;
  color: white;
  padding: 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 10px 10px;
  cursor: pointer;
  border-radius: 8px;
}
</style>
</head>

        <center>
        <button
                type="button"
                class="button"
                id="color"
                name="colorbutton"
                value="1"
        >
        </button>

        <button
                type="button"
                class="button"
                id="color"
                name="colorbutton"
                value="2"
        >
        </button>


</center>

        <br>

<p> After clicking one of the buttons, a red or green color will appear. This color will determine your winnings. </p>
          <p> There is a 50% chance that the color red will be behind the left or right button. The same probability applies
              for the color green. </p>
<br> <br>

    <br><br><br><br><br>





</div>



</div>


    {% next_button %}

{% endblock %}






{% block scripts %}



    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>


{% endblock %}