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

{% block title %}
What is your assessment under this scenario?
{% 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>

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

    .input-group {
        width : 100%;
    }

    .slidecontainer {
      width: 100%;
    }
    
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 25px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    
    .slider:hover {
      opacity: 1;
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 0px;
      height: 0px;
      background: #4c6baf;
      cursor: pointer;
    }
    
    .slider::-moz-range-thumb {
      width: 0px;
      height: 0px;
      background: #4c6baf;
      cursor: pointer;
    }
    </style>

<style data="after_click" type="text/css"></style>

<h4>Scenario {{player.round_number}} of {{num_rounds}}</h4>
<br>

<!-- <div style="margin-left: auto; margin-right: auto;width:300px;">
<table class="box-graph">
    <tr>
      <th>Box O</th> <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-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>
      <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>
  </table>
</div> -->



            <div class="info" style="padding:10px;font-size:20px;width: 130%; margin-left: -15%;margin-right: -15%">
                <div style="display: inline-block;width: 40%;margin-left: -20%;text-align: center;vertical-align: top;">
<p>Suppose you see the following information about the set of balls drawn out of the selected box:</p>
<!-- Ratio -->
{% if report_t == 2 %}
                     <br><br>
       <b>{{ signal_N }}</b>
                {% if signal_N == 1 %} ball is
                {% else %}
                balls are
                {% endif %}
                drawn 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 %}
                    <br><br>
    <b>{{ signal_N }}</b>
                {% if signal_N == 1 %} ball is
                {% else %}
                balls are
                {% endif %}
                drawn out of the selected box, among which:<br><br>
    {% if signal_diff > 0 %}
        {% if signal_diff == 1 %}
        there is <b>{{signal_diff}} more</b> <div style="display: inline-block" id="circle-orange"></div>
        than <div style="display: inline-block" id="circle-green"></div> <br>
        {% else %}
        there are <b>{{signal_diff}} more</b> <div style="display: inline-block" id="circle-orange"></div>
        than <div style="display: inline-block" id="circle-green"></div> <br>
        {% endif %}
    {% else %}
        {%if signal_diff == -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> <br>
        {% 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> <br>
        {% endif %}
    {% endif %}
<!-- Counts -->
{% elif report_t == 4 %}
                    <br><br>
                    {{ 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 %}
                    <br><br>
<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 %}
            </div>

                <div style="display: inline-block;width: 60%;margin-right: -20%">
                    <u>Test Results</u><br>
                    Histogram of numbers of <div style="display: inline-block" id="circle-orange"></div> in {{ signal_N }} {{ if signal_N == 1}}draw {{ else }} draws {{ endif }} from Box L VS from Box R:

<img src="{{ static image_path }}" width="95%" />
                </div>

  </div>


<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: 0;">
        <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>
        <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>


          {{ if player.round_number == num_rounds }}
          <button class="otree-btn-next btn btn-primary" id="submit_1" disabled><span id = "submit_1text"></span></button>
          <button class="otree-btn-next btn btn-primary" id="submit_2" disabled hidden><span id = "submit_2text" hidden></span></button>
          {{ else }}
          <button class="otree-btn-next btn btn-primary" id="submit_2" disabled><span id = "submit_2text"></span></button>
          <button class="otree-btn-next btn btn-primary" id="submit_1" disabled hidden><span id = "submit_1text" hidden></span></button>
          {{ endif }}
          </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="visibility: hidden;text-align : center;font-size: 24pt;">
                <b><span id = "output_1a"></span>% </b>
              </p>
            </th>
          </tr>
        </table>
      </div>



</div>



<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");
    
    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";
    }

    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;
    }
  //  Countdown
  var submit_1text = document.getElementById("submit_1text");
  var submit_2text = document.getElementById("submit_2text");
  submit_1text.innerHTML = "Submit and proceed to the next part";
  submit_2text.innerHTML = "Submit and show next scenario";
  // var seconds = 5;
  //   function decrementSeconds(){
  //     seconds = seconds-1;
  //     if(seconds>0){
  //     submit_1text.innerHTML = "Wait "+ seconds+ " seconds to proceed";
  //     submit_2text.innerHTML = "Wait "+ seconds+ " seconds to proceed";
  //     }
  //   }
  //   var cancel = setInterval(decrementSeconds,1000);
    setTimeout(function(){
      document.getElementById("submit_1").disabled=false;
      document.getElementById("submit_2").disabled=false;
    },5000)
</script>



{% endblock %}