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

{% block title %}
The Assessment Task
{% endblock %}


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

    .info {
        width:100%;
        background-color: #eee;
        padding: 20px 0;
        text-align: center
    }

    .input-group {
        width : 100%;
    }

</style>

<p>The two forms of information below are picked by the computer: </p>

<br>

<table>
    <tr>
        <td style="background-color: #eee;text-align:center;width: 45%">
{{ if report_t == 2 }}

<b>N balls are drawn</b>  out of the picked box, of which:
        <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>

{{ elif report_t == 3 }}

<b>N balls are drawn</b> out of the picked box, among which:
         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>

{{ elif report_t == 4 }}

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

{{ elif report_t == 5 }}

<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>
         ... ...

{{ endif }}
</td>

    <td style="width: 10%;text-align: center">
        <p style="text-align: center">and</p>
    </td>
    <td style="background-color: #eee;text-align:center;width:45%">


{{ if report_t == 2 }}

<b>N balls are drawn</b> out of the picked box, of which:
        <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>

{{ elif report_t == 3 }}

<b>N balls are drawn</b> out of the picked box, among which:
         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>

{{ elif report_t == 4 }}

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

{{ elif report_t == 5 }}

<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>
         ... ...

{{ endif }}

    </td>
    </tr>
</table>


<br>



<p> Between them, you stated that

{{ if picked_rank1 == picked_rank2 }}

they are <b>equally</b> useful.
</p>

    <p>Thus, the computer picked the one on the

    {{ if picked_report == card1 }}

        <b>left-hand side</b>

    {{ elif picked_report == card2 }}

        <b>right-hand side</b>

    {{ endif }}
    to present the information implemented by the computer.



{{ elif picked_report == card1 }}

the one on the <b>left-hand side</b> is <b>more</b> useful. </p>

<p>
    Thus, it is used to present the information implemented by the computer.


{{ elif picked_report == card2 }}

the one on the <b>right-hand side</b> is <b>more</b> useful. </p>

<p>
    Thus, it is used to present the information implemented by the computer.

{{ endif }}

</p>



<hr>




<p>Here is the information:</p>

<div class="info" style="font-size:25px;">

<!-- Ratio -->
{% if report_t == 2 %}
  <b>{{ signal_N }}
                {% if signal_N == 1 %} ball is
                {% else %}
                balls are
                {% endif %}
                drawn</b> out of the selected box, of which:<br><br>
  <b>{{signal_ratio2}}%</b> {% if signal_N == 1 %} is
                {% else %}
                 are
                {% endif %} <div style="display: inline-block" id="circle-green"></div> and
  <b>{{signal_ratio1}}%</b> {% if signal_N == 1 %} is
                {% else %}
                 are
                {% endif %} <div style="display: inline-block" id="circle-orange"></div>


      
<!-- Diff -->
{% elif report_t == 3 %}
  <b>{{ signal_N }}
                {% if signal_N == 1 %} ball is
                {% else %}
                balls are
                {% endif %}
                drawn</b> out of the selected box, among which:<br><br>
    {% if signal_diff > 0 %}
      {% if signal_diff_abs == 1 %}
      there is <b>{{signal_diff_abs}} more</b> <div style="display: inline-block" id="circle-orange"></div>
      than <div style="display: inline-block" id="circle-green"></div>
      {% else %}
      there are <b>{{signal_diff_abs}} more</b> <div style="display: inline-block" id="circle-orange"></div>
than <div style="display: inline-block" id="circle-green"></div>
      {% endif %}
    {% else %}
      {%if signal_diff_abs == 1 %}
      there is <b>{{signal_diff_abs}} more</b> <div style="display: inline-block" id="circle-green"></div>
than <div style="display: inline-block" id="circle-orange"></div> 
      {% else %}
      there are <b>{{signal_diff_abs}} more</b> <div style="display: inline-block" id="circle-green"></div>
than <div style="display: inline-block" id="circle-orange"></div> 
      {% endif %}
    {% endif %}

<!-- Counts -->
{% elif report_t == 4 %}
  {{ if signal_N == 1}}
    <b>{{signal_count2}}</b> ball is
        {{ elif signal_count2 == 1 }}
  <b>{{signal_count2}}</b> ball is
      {{ else }}
  <b>{{signal_count2}}</b> balls are
      {{ endif }}
      <div style="display: inline-block" id="circle-green"></div> and

    {{ if signal_N == 1 }}
  <b>{{signal_count1}}</b> ball is
  {{ elif signal_count1 == 1 }}
  <b>{{signal_count1}}</b> ball is
      {{ else }} 
  <b>{{signal_count1}}</b> balls are
      {{ endif }}
      <div style="display: inline-block" id="circle-orange"></div>


<!-- Raw -->
{% elif report_t == 5 %}
<table style="margin-left: auto;margin-right: auto;">
<tr>
    {{ for row in rows }}


      {{ if row.cells == 1 }}
      <td><div style="display: inline-block" id="circle-orange"></div></td>
      {{ elif row.cells == 2 }}
      <td><div style="display: inline-block" id="circle-green"></div></td>
      {{ endif }}
        {{ if row.divisible_by_4 }}</tr><tr>{{ endif }}

    {{ endfor }}
  </tr>
</table>


{% endif %}
  <br>
  <br>
<div>
  {{if played_round == 0}}
  It does not match with any of the scenarios.
  {{else}}
  It matches with Scenario {{played_round}}.
  {{endif}}
</div>

</div>
{{if played_round == 0}}
<div >
  <p style="text-align: center"><b>Given the info, what is the percentage chance that the selected box is Box L vs Box R?</b></p>
  <p style="text-align: center">Click on the slider bar then drag to assess.</p>
</div>

<div style="text-align : center;width:100%" >
  <div style="text-align : center;display:inline-block;margin: auto;">
    <table class="box-graph">
      <tr>
        <th>Box L</th>
      </tr>
      <tr>
          <td>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div><br>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
    </td>
      </tr>
      <tr>
        <th>
          <p id = "output_text_2" style="visibility: hidden;text-align : center; font-size: 24pt;">
                <b><span id = "output_2a"></span>% </b>
          </p>
        </th>
      </tr>
    </table>
  </div>
  <div style="display:inline-block;width:60%">
    <input type="range" id="slider_1" name="belief" min="0" max="100" step="1" class="slider" onclick="show()" value=NaN>
  </div>
  <div style="text-align : center;display:inline-block;margin:0">
    <table class="box-graph">
      <tr>
        <th>Box R</th>
      </tr>
      <tr>
        <td>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div><br>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>


    </td>
      </tr>
      <tr>
        <th>
          <p id = "output_text_1" style="visibility: hidden;text-align : center;font-size: 24pt;">
            <b><span id = "output_1a"></span>% </b>
          </p>
        </th>
      </tr>
    </table>

  </div>
  <p id = "output_text" style="visibility: hidden;text-align : center">
    <b>There is <span id = "output_2"></span>% chance that Box L was selected. </b><br>
      <b>There is <span id = "output_1"></span>% chance that Box R was selected. </b><br>

  </p>
    <button class="otree-btn-next btn btn-primary" id="submit">Submit</button>
    </p>

</div>


{{else}}
<div style="text-align : center;width:100%" >
  <div style="text-align : center;display:inline-block;margin: auto;">
    <table class="box-graph">
      <tr>
        <th>Box L</th>
      </tr>
      <tr>
         <td>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div><br>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
    </td>
      </tr>
      <tr>
        <th>
          <p id = "output_text_2" style="text-align : center; font-size: 24pt;">
                <b>{{belief_dummy2}}% </b>
          </p>
        </th>
      </tr>
    </table>
  </div>
  <div style="display:inline-block;width:60%">
    <!-- This is for sending the real value -->
  <input type="range" id="slider_2" name="belief" min="0" max="100" step="1" class="slider" onclick="show()" value={{belief_dummy}} style="visibility:hidden">  
  <!-- This is for display -->
    <input type="range" id="slider_2_dis" name="belief2" min="0" max="100" step="1" class="slider" onclick="show()" value={{belief_dummy}} disabled> 
    
    <p id = "output_text" style="text-align : center">
        <b>Your guess was: </b><br>
      <b>"There is  {{belief_dummy2}}% chance that Box L is selected."  </b><br>
        <b>"There is  {{belief_dummy}}% chance that Box R is selected."</b><br>

    </p>
  </div>
  <div style="text-align : center;display:inline-block;margin:0">
    <table class="box-graph">
      <tr>
        <th>Box R</th>
      </tr>
      <tr>
        <td>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div><br>
      <div id="circle-orange"></div>
      <div id="circle-orange"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>
      <div id="circle-green"></div>


    </td>
      </tr>
      <tr>
        <th>
          <p id = "output_text_1" style="text-align : center;font-size: 24pt;">
            <b>{{belief_dummy}}% </b>
          </p>
        </th>
      </tr>
    </table>

  </div>

  
</div>
<div style="text-align: center">
<button class="otree-btn-next btn btn-primary" id="button_next" >Next</button>
</div>
{{endif}}


<script>
    var slider_1 = document.getElementById("slider_1");
    var output_1 = document.getElementById("output_1");
    var output_2 = document.getElementById("output_2");
    var output_1a = document.getElementById("output_1a");
    var output_2a = document.getElementById("output_2a");
    // var style = document.querySelector('[data="after_click"]');
    output_1.innerHTML = slider_1.value;
    // /output_1a.innerHTML = slider_1.value;
    output_2.innerHTML = 100-slider_1.value;
    // output_2a.innerHTML = 100-slider_1.value;

    var output_text = document.getElementById("output_text");
    var output_text_1 = document.getElementById("output_text_1");
    var output_text_2 = document.getElementById("output_text_2");
    
    slider_1.oninput = function() {
      output_1.innerHTML = this.value;
      output_2.innerHTML = 100-this.value;
      output_1a.innerHTML = this.value;
      output_2a.innerHTML = 100-this.value;
    }

    show = function(){
      // style.innerHTML=" .slider::-webkit-slider-thumb {  width: 25px; height: 25px; }";
      // style.innerHTML += ".slider::-moz-range-thumb {width: 25px; height: 25px; }";
      output_text.style.visibility = "visible";
      output_text_1.style.visibility = "visible";
      output_text_2.style.visibility = "visible";
      document.getElementById("button_next").style.visibility = "visible";
    }



</script>



{% endblock %}