{% load otree %}

{% block title %}

    Game {{player.game_num}}


{% 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 9 different situations. Look at them carefully.
             Situations A, B, C, D, E, F, G, H or I 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><b><center>The exchange rate for this game is (1 ECU = 0.8 EUROS) </center></b></p>
        <br>

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


        <p>
            At the end of the experiment, a random draw will be made by the programme to determine your colour (50% chance of red and 50% chance of green).
        </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"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <br>
                        <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>
            </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"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <br>
                         <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>
            </td>
        </tr>
        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (8 ECUs) </td>
            <td bgcolor="#e6ffe6">  (8 ECUs)  </td>
            <td>  </td>
        </tr>


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

        <tr>
            <th> B</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"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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>

            <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>

               <br>
                <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>

        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (7 ECUs) </td>
            <td bgcolor="#e6ffe6">  (10 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"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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>

            <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>

               <br>
                <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"/>
                <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"> (6 ECUs) </td>
            <td bgcolor="#e6ffe6">  (12 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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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"/>
               <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"/>
               <br>
                <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"/>
                <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"> (5 ECUs) </td>
            <td bgcolor="#e6ffe6">  (14 ECUs)  </td>
            <td>  </td>
        </tr>


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

        <tr>
            <th> E </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"/>
               <br>
                <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"/>
               <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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"/>
                <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>

            </td>

        </tr>

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

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

        <tr>
            <th> F </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"/>
                <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"/>
               <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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"/>
                <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"/>
               <br>
               <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">  (18 ECUs)  </td>
            <td>  </td>
        </tr>




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


        <tr>
            <th> G </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"/>
               <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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"/>
                <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"/>
               <br>
               <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"> (2 ECU) </td>
            <td bgcolor="#e6ffe6">  (20 ECUs)  </td>
            <td>  </td>
        </tr>

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


                                   <tr>
            <th> H </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"/>
               <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"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <br>
                <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"/>
                <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"/>
               <br>
               <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"/>
                <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">  (22 ECUs)  </td>
            <td>  </td>
        </tr>




        <tr>
            <th> I </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"/>
               <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"/>
               <br>
                <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"/>
               <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"/>
               <br>
                <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"/>
                <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">  (24 ECUs)  </td>
            <td>  </td>
        </tr>

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

    </table>



        <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 %}

