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

{% block title %}
    Part 2: 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>

<div style="border:1px solid; padding:10px">
  <p>
    <u>Reminder: <br></u>
    
    If Part 2 is selected for payment, and this scenario matches with the actual information you see in the Assessment Task later, <b>your decision HERE for this scenario will be used as your choice in that Task</b>.
  </p>
  <p>
    To maximize your chance of winning $10,
    <b>please make your best assessment.</b>
  </p>
  <p>
    Please take time to make your decisions carefully. 
    There is no need to rush as the experiment session is synchronized for everyone in the same session.
  </p>
</div>
<!-- <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> -->
<p></p>
<div class="info" style="padding:10px">
<p>Suppose the following is the information you see from the report.</p>

<!-- 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 == 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>
        {% 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>
        {% 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> 
        {% 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>
<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: 0;">
        <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>
        <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>

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



</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 %}