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

{% block title %}
    Practice: 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>
td{
    width:15%
  }
/* 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>
<p>
  Here we will provide you 2 practice rounds for you to see how the interface will look.
</p>
<p>
  Please notice that: in the actual task, 
  there will be at most one of the following 5 reports.
</p>
<h4>Practice Round 1 of 2</h4>

<div style="border:1px solid; padding:10px">
  <p>
    To maximize your chance of winning $10,
    <b>please make your best assessment.</b>
  </p>
</div>

<div class="info" style="padding:10px">
<p>This is the information you see from the report.</p>
  <table style="border: 1px solid black; text-align: center;margin-left: auto;margin-right: auto;">
    <tr>
      {% for i in report_order %}
      {% if i == 1 %}
      <td style="border: 1px solid black;">
        There are more <div style="display: inline-block" id="circle-orange"></div> than 
        <div style="display: inline-block" id="circle-green"></div> 
      </td>
      {% elif i == 2 %}
      <td style="border: 1px solid black;">
        71% are <div style="display: inline-block" id="circle-orange"></div><br>
        29% are <div style="display: inline-block" id="circle-green"></div> 
      </td>
      {% elif i == 3 %}
      <td style="border: 1px solid black;">
        There are <b>3 more</b> <div style="display: inline-block" id="circle-orange"></div>
        than <div style="display: inline-block" id="circle-green"></div>
      </td>
      {% elif i == 4 %}
      <td style="border: 1px solid black;">
        5 are <div style="display: inline-block" id="circle-orange"></div> <br>
        2 are <div style="display: inline-block" id="circle-green"></div>
      </td>
      {% elif i == 5 %}
      <td style="border: 1px solid black;">
        <table>
          <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-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>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
        </table>
      </td>
      {% endif %}
    {% endfor %}
    </tr>
  </table>
</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="practice_belief_1" 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>
          
      
          <button class="otree-btn-next btn btn-primary" id="submit_1" disabled><span id = "submit_1text"></span></button>
          </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");
    submit_1text.innerHTML = "Submit and show the next practice";
    // var seconds = 15;
    // function decrementSeconds(){
    //   seconds = seconds-1;
    //   if(seconds>1){
    //   submit_1text.innerHTML = "Wait "+ seconds+ " seconds to proceed";
    //   }else if(seconds==1){
    //   submit_1text.innerHTML = "Wait "+ seconds+ " second to proceed";
    //   }
    // }
    // var cancel = setInterval(decrementSeconds,1000);
    setTimeout(function(){
      document.getElementById("submit_1").disabled=false;

    },5000)
</script>



{% endblock %}