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

{% block title %}
   How useful is the information?
{% endblock %}

{% block content %}
<link rel="stylesheet" href='{{ static "style/global_style.css"}}'>
<link rel="stylesheet" href='{{ static "style/cards.css"}}'>
<link rel="stylesheet" href='{{ static "style/boxgraph.css"}}'>

<h4 style="text-decoration: underline">Question 1</h4>
<p>
   Choose the point on the scale that represents how useful you think each information about drawn balls is for making the guess: (e.g., which one helps you the most, which one helps you the least, etc.)
</p>


<hr>

<table class="table" style="text-align: center">

   <tr>
      <th>Information</th><th>Extremely Useful</th> <th>Useful</th> <th>Somewhat Useful</th> <th>Neither Useful Nor Useless</th><th>Somewhat Useless</th><th>Useless</th><th>Extremely Useless</th>
     </tr>
   <tr>
      <td>
         <b>N</b> balls are drawn out of the picked box, of which:<br>
          <b>P in every W balls</b>
 are <div style="display: inline-block" id="circle-green"></div>
   and
                <b>Q in every W balls</b>
 are <div style="display: inline-block" id="circle-orange"></div>


                </td>
      {{ for choice in form.ratio_rank }}
      <td> {{ choice }} </td>
      {{ endfor }}

   </tr>
   <tr>
      <td>
         <b>N</b> balls are drawn out of the picked box, among which:<br>
         There are <b>A more</b> <div style="display: inline-block" id="circle-orange"></div>
                    than <div style="display: inline-block" id="circle-green"></div>
      </td>
      {{ for choice in form.difference_rank }}
      <td> {{ choice }} </td>
      {{ endfor }}


   </tr>
   <tr>
      <td>
          <br>
         <b>B</b> balls are <div style="display: inline-block" id="circle-green"></div> and
         <b>C</b> balls are <div style="display: inline-block" id="circle-orange"></div>
          <br>
          <br>

      </td>
      {{ for choice in form.count_rank }}
      <td> {{ choice }} </td>
      {{ endfor }}

   </tr>

   <tr>
            <td>
         <table style="text-align: center">
                      <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                          <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

                      </tr>
                      <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                          <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

                      </tr>
            <tr>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>

                      </tr>
            <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

            </tr>
<tr> ... ...</tr>

                    </table>
         ... ...
      </td>
       {{ for choice in form.sequence_rank }}
      <td> {{ choice }} </td>
      {{ endfor }}

   </tr>

</table>

<br>

<h4 style="text-decoration: underline">Question 2</h4>

<p>What criteria or factors did you use to determine whether the information listed above is useful? (For example, did you favor information that is easy to interpret and understand? Did you consider information that doesn't involve complex math or counting more useful? etc.)</p>

{{ formfield 'criteria' }}

{{next_button}}

{% endblock %}