{% 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>Part 2 is selected.</p>

<p>Here is the report you receive:</p>

<div class="info">
<!-- Majority -->
{% if report_t == 1 %} 


    {% if signal_majority == 1 %}
    There are more <div style="display: inline-block" id="circle-orange"></div> than 
      <div style="display: inline-block" id="circle-green"></div> 
    {% else %}
    There are more <div style="display: inline-block" id="circle-green"></div> than 
      <div style="display: inline-block" id="circle-orange"></div> 
    {% endif %}
<!-- Ratio -->
{% elif report_t == 2 %}
    {{signal_ratio1}}% are <div style="display: inline-block" id="circle-orange"></div><br>
    {{signal_ratio2}}% are <div style="display: inline-block" id="circle-green"></div>

      
<!-- Diff -->
{% elif report_t == 3 %}
    {% 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_count1 == 1 }}
        {{signal_count1}} ball is 
      {{ else }} 
        {{signal_count1}} balls are
      {{ endif }}
      <div style="display: inline-block" id="circle-orange"></div> <br>
      {{ if signal_count2 == 1 }}
        {{signal_count2}} ball is 
      {{ else }} 
        {{signal_count2}} balls are
      {{ endif }}
      <div style="display: inline-block" id="circle-green"></div>

<!-- Raw -->
{% elif report_t == 5 %}
  <table style="margin-left: auto;margin-right: auto;">
    <tr>
      {% for i in signal %}
        {% if i == 1 %}
        <td><div style="display: inline-block" id="circle-orange"></div></td>
        {% elif i == 2 %}
        <td><div style="display: inline-block" id="circle-green"></div></td>
        {% endif %}
      {% endfor %}
    </tr>
    <tr>
      {% for i in signal %}
        {% if i == 1 or i == 2 %}<td> {{forloop.counter}} </td>{% endif %}
      {% endfor %}
    </tr>
  </table>

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

</div>
{{if played_round == 0}}
<div >
  <p style="text-align: center"><b>What is the percentage chance that the picked box is Box G vs Box O?</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 G</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 O</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_1"></span>% chance that Box O was picked. </b><br>
      <b>There is <span id = "output_2"></span>% chance that Box G was picked. </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 G</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_dummy}}% chance that Box O is picked."</b><br>     
        <b>"There is  {{belief_dummy2}}% chance that Box G is picked."  </b><br>      
    </p>
  </div>
  <div style="text-align : center;display:inline-block;margin:0">
    <table class="box-graph">
      <tr>
        <th>Box O</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 %}

<!-- ref: https://www.accountingexperiments.com/post/sliders/ -->