Test_Johanne/old_versions/exp_e4c_en_risk_binswanger_v2/templates/exp_e4c_en_risk_binswanger_v2/Risk_BinsWanger_qc2.html

942 lines
27 KiB
HTML
Raw Normal View History

2025-03-06 10:28:01 +01:00
{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Comprehension Questionnaire
{% endblock %}
{% block content %}
<div class="card bg-light instructions">
<div class="card-body">
<link rel="stylesheet" type="text/css"
href="{% static 'global/matrix.css' %}"/>
<p> Now we want to test if you have understood the in-game instructions. </p>
<br>
<h3>
Example 1:
</h3>
<p> If you have chosen situation B, then the color <b> <FONT color = "green"> Green </FONT> </b> appears.
</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>
<td> </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>
<td align='center' >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> A
</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>
<td align='center' valign="bottom" >
<input type="radio" name="imgsel" value="" checked="checked" /> B
</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>
<td align='center'>
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> C
</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>
<td align='center' valign="bottom" >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> D
</td>
</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>
<td align='center' valign="bottom" >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> E
</td>
</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>
<p>
What would your earnings be? </p>
{% formfield player.riskqc_a label="" %}
<br> <br>
<h3>
Example 2:
</h3>
<p> If you have chosen situation D, then the color <b> <FONT color = "red"> Red </FONT> </b> appears.
</p>
<br>
<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>
<td> </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>
<td align='center' >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> A
</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>
<td align='center' valign="bottom" >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> B
</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>
<td align='center'>
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> C
</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>
<td align='center' valign="bottom" >
<input type="radio" name="imgsel1" value="" checked="checked" /> D
</td>
</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>
<td align='center' valign="bottom" >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> E
</td>
</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>
<p>
Question 2: What would your earnings be? </p>
{% formfield player.riskqc_b label = ""%}
<br> <br>
<h3>
Example 3:
</h3>
<p> If you have chosen situation E, then the color <b> <FONT color = "red">
</FONT> </b> appears.
</p>
<br>
<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>
<td> </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>
<td align='center' >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> A
</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>
<td align='center' valign="bottom" >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> B
</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>
<td align='center'>
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> C
</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>
<td align='center' valign="bottom" >
<img src="{% static 'expines/radio_button.png' %}" width="23" height="23"/> D
</td>
</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>
<td align='center' valign="bottom" >
<input type="radio" name="imgsel2" value="" checked="checked" /> E
</td>
</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>
<p>
Question 3: What would your earnings be? </p>
{% formfield player.riskqc_c label = ""%}
<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 %}