{% 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"}}'>
<link rel="stylesheet" href='{{ static "style/cards.css"}}'>
<style>  
  .info {
    width:100%;
    background-color: #eee;
    padding: 20px 0;
    text-align: center
  }

  .input-group {
    width : 100%;
  }


</style>




<div>

<p>Part 1 is selected.</p>

</div>

<div>
<p>The cards 

{{if card1_money > 0}}
<span class="radio-cards-money"> No report + ${{ card1_money }}</span>

{{else}}

    {{ if card1 == 21 }}
    <span class="radio-cards1-checked">Report 1</span>

    {{ elif card1 == 22 }}
    <span class="radio-cards2-checked">Report 2</span>

    {{ elif card1 == 23 }}
    <span class="radio-cards3-checked">Report 3</span>

    {{ elif card1 == 24 }}
    <span class="radio-cards4-checked">Report 4</span>

    {{ elif card1 == 25 }}
    <span class="radio-cards5-checked">Report 5</span>

    {{ endif }}

{{endif}}

and

{{if card2_money > 0}}
<span class="radio-cards-money"> No report + ${{ card2_money }}</span>

{{else}}

    {{ if card2 == 21 }}
    <span class="radio-cards1-checked">Report 1</span>

    {{ elif card2 == 22 }}
    <span class="radio-cards2-checked">Report 2</span>

    {{ elif card2 == 23 }}
    <span class="radio-cards3-checked">Report 3</span>

    {{ elif card2 == 24 }}
    <span class="radio-cards4-checked">Report 4</span>

    {{ elif card2 == 25 }}
    <span class="radio-cards5-checked">Report 5</span>

    {{ endif }}

{{endif}}
are drawn,
</p> 
<p>where
{{if winning_card > 20}}


    {{ if winning_card == 21 }}
    <span class="radio-cards1-checked">Report 1</span>

    {{ elif winning_card == 22 }}
    <span class="radio-cards2-checked">Report 2</span>

    {{ elif winning_card == 23 }}
    <span class="radio-cards3-checked">Report 3</span>

    {{ elif winning_card == 24 }}
    <span class="radio-cards4-checked">Report 4</span>

    {{ elif winning_card == 25 }}
    <span class="radio-cards5-checked">Report 5</span>

    {{ endif }}

    {{else}}
    <span class="radio-cards-money"> No report + ${{ payoff_from_card}}</span>

{{endif}}


was ranked higher.
</p>

</div>



{{if report_wins == 0}}

<div class="info">  
  <p>Because <span class="radio-cards-money"> No report + ${{ payoff_from_card}}</span> is ranked higher, you do not receive any report.</p>
</div>
{{else}}
<div class="info">

{{if winning_card == 21 }}
<p>Therefore you get <span class="radio-cards1-checked">Report 1</span>   
  and receive the following information.</p>
{{elif winning_card == 22}}
<p>Therefore you get <span class="radio-cards2-checked">Report 2</span>   
  and receive the following information.</p>
{{elif winning_card == 23}}
<p>Therefore you get <span class="radio-cards3-checked">Report 3</span>   
  and receive the following information.</p>
{{elif winning_card == 24}}
<p>Therefore you get <span class="radio-cards4-checked">Report 4</span>   
  and receive the following information.</p>
{{elif winning_card == 25}}
<p>Therefore you get <span class="radio-cards5-checked">Report 5</span>   
  and receive the following information.</p>
{{ endif }}
    
    <!-- Majority -->
    {% if winning_report == 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 winning_report == 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 winning_report == 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 winning_report == 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 winning_report == 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>

{{endif}}


<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>
    
      <button class="otree-btn-next btn btn-primary" id="submit">Submit</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;
    }



</script>

{% endblock %}