{% 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"}}'>
<style>
    .collapsible {
        background-color: #eee;
        color: black;
        cursor: pointer;
        padding: 20px 0;
        border: none;
        text-align: center;
        outline: none;
        font-size: 15px;
        text-decoration: none;
    }
    .active, .collapsible:hover {
        background-color: white;
    }

    .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #f1f1f1;
    }

</style>

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

<div class="content" style="display: none">
<ul>
    <li>
        After you state the usefulness, the computer will randomly select two out of the four forms of information.

    </li>
    <li>
        Then, the computer will use the form that you deem more useful to present the information in the Assessment Task.
    </li>

    <li>
        If you indicate that the two selected forms are equally useful, the computer will randomly choose one for use in the Assessment Task.

    </li>
    </ul>

</div>
<hr>

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

   <tr>
      <th>Form of 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 balls are drawn</b>  out of the picked box, of which:<br>
        <b>P%</b> are <div style="display: inline-block" id="circle-green"></div> and
        <b>Q%</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 balls are drawn</b> 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 easier to tell whether it strongly or weakly supports one box versus the other? Did you consider information that doesn't involve complex math or counting more useful? etc.)</p>

{{ formfield 'criteria' }}

{{next_button}}


<script>
    var coll = document.getElementsByClassName("collapsible")
  var i;

  for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function () {
          this.classList.toggle("active");
          var content = this.nextElementSibling;
          if (content.style.display == "block") {
              content.style.display = "none";
          } else {
              content.style.display = "block";
          }

      });
  }

</script>

{% endblock %}