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

{% block title %}
    Instruction
{% endblock %}

{% block scripts %}

<script src="{% static 'global/prev_next_button.js' %}"></script>

{% endblock %}

{% block styles %}

<link href="{% static 'global/custom.css' %}" rel="stylesheet">

<link href="{% static 'pn_selection/Wheel.css' %}" rel="stylesheet">

<style>
   .otree-title.page-header{
       font-size: 45px;
   }

    /* Create two equal columns that floats next to each other */
    .column {
      float: left;
      width: 50%;
      padding: 10px;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .row{
        position: relative;
        width: 140%;
        left: -10%;
    }

p{
    font-size: 22px;
    text-indent:2em;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}

.range{
  height: 250px;
  width: 1000px;
  background: #fff;
  border-radius: 10px;
  padding: 0px 61px 0 115px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}

.range .seller_range{
    position: absolute;
  width: 100%;
  height: 100px;
  background-color: rgba(255, 253, 253, 0.05);
  outline: none;
  border: none;
  z-index: 1111;
}

.range .buyer_bar{
    position: absolute;
  height: 100px;
  background: #ffffff;
  outline: none;
  border: none;
  z-index: 2222;
}

.range .axis{
  position: absolute;
  width: 100%;
  background: blue;
  transform: translateY(52px);
  z-index: 2;
  height: 3px;
}


.field{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.field .value{
  position: absolute;
  font-size: 18px;
  font-weight: 600;
}
.field .value.left{
  left:-1%;
  transform: translate(0px,70px);
}

.field .value.bstart{
  left: 10%;
  transform: translate(0px,70px);
}

.field .value.right{
  right: -3%;
  transform: translate(-4px,70px);
}

.field .buyer_tick{
    position: absolute;
    background-color: blueviolet;
    height: 100px;
    width: 0.7%;
    z-index: 9999;
}

.field .seller_tick{
    position: absolute;
    background-color: red;
    height: 100px;
    width: 15px;
    z-index: 10000;
    clip-path: polygon(70% 0, 70% 75%, 100% 75%, 50% 100%, 0 75%, 30% 75%, 30% 0);
    transform: translateX(-5px);
}

.field .guess_tick{
    position: absolute;
    height: 150px;
    width: 0.8%;
    z-index: 10000;
}


.seller_offer{
    border: black 2px solid;
    width: 21%;
    color: black;
    transform:  translate(0px,-60px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}

#buyer_value{
    text-align: center;
    border: black 0px solid;
    width: 16%;
    color: #664AFF;
    transform:  translate(0px,107px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}

.sellerValue{
  position: relative;
  width: 100%;
}

.sellerValue span{
  position: absolute;
  {#left: calc(({{ random_initial }}-50) * 87 / 350 + 13) + "%";#}
  transform: translate(-7px,182px); /* -7px is set after careful calibration*/
  font-size: 18px;
  color: red;
  font-weight: 600;
  z-index: 5;
   background-color: white;
}


.lcircle {
    position: absolute;
    background: orange;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
}

.rcircle {
    position: absolute;
    background: #993399;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
}



.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 21px;
}

.expanded, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.expanded:after {
  content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}


</style>
{% endblock %}


{% block content %}

{% if read == 1 %}
  <style>
  .nav{
      visibility: visible;
  }
  </style>

{% endif %}
<style data="test" type="text/css"></style>
<!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">


  <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Part 1
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Part 2</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Part 3</a>
  </li>

  <li class="nav-item">
      <a class="nav-link" id="part4-tab" data-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Part 4</a>
  </li>

    <li class="nav-item">
      <a class="nav-link" id="part5-tab" data-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Part 5</a>
  </li>

{#    <li class="nav-item">#}
{#      <a class="nav-link" id="part6-tab" data-toggle="tab" href="#part6" role="tab" aria-controls="part6" onclick="topFunction()">Quiz</a>#}
{#  </li>#}

</ul>
<br>
<br>

<body>

<!-- Tab content -->
<div class="tab-content" id="myTabContent">

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


{#<div class="card-header bg-transparent mainheader" >#}
{# <h3 class="card-title font-weight-bold"> Tab 1#}
{# </h3>#}
{#  </div>#}
{#<br>#}

      <h2><u>Comprehension Check</u></h2>
      <p>To ensure your comprehension of the instructions, you will answer four multiple-choice questions.
        You can proceed only with all correct answers. Afterwards, you will participate in a practice match.
      </p>
      <br>

          <h5 class=" font-weight-bold mt-3 mb-3" style="font-size: 24px">Question 1</h5>
            <div class="mb-3 _formfield" style="font-size: 22px">

                    <label class="col-form-label" for="id_q1">QUESTION 1: Which of the followings is NOT TRUE?</label>
                    <div class="controls">
                        <div id="id_q1" required=""><div class="form-check"><input class="form-check-input" type="radio" id="id_q1-0" name="q1" required="" value="1"> <label for="id_q1-0">Option A</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q1-1" name="q1" required="" value="2"> <label for="id_q1-1">Option B (ans)</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q1-2" name="q1" required="" value="3"> <label for="id_q1-2">Option C</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q1-3" name="q1" required="" value="4"> <label for="id_q1-3">Option D</label></div></div>
                    </div>
            </div>

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>blank</li>
                    <li>blank</li>
                </ul>
            </div>

          <h5 class=" font-weight-bold mt-3 mb-3" style="font-size: 24px">Question 2</h5>
            <div class="mb-3 _formfield" style="font-size: 22px;">
            <label class="col-form-label" for="id_q2">QUESTION 2: Which of the followings is TRUE?</label>
            <div class="controls">
                <div id="id_q2" required=""><div class="form-check"><input class="form-check-input" type="radio" id="id_q2-0" name="q2" required="" value="1"> <label for="id_q2-0">Option A</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q2-1" name="q2" required="" value="2"> <label for="id_q2-1">Option B</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q2-2" name="q2" required="" value="3"> <label for="id_q2-2">Option C (ans)</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q2-3" name="q2" required="" value="4"> <label for="id_q2-3">Option D</label></div></div>
            </div>
            </div>

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>blank</li>
                    <li>blank</li>
                </ul>
            </div>


          <h5 class=" font-weight-bold mt-3 mb-3" style="font-size: 24px">Question 3</h5>
            <div class="mb-3 _formfield" style="font-size: 22px;">
            <label class="col-form-label" for="id_q3">QUESTION 3:  Which of the followings CAN HAPPEN?</label>
            <div class="controls">
                <div id="id_q3" required=""><div class="form-check"><input class="form-check-input" type="radio" id="id_q3-0" name="q3" required="" value="1"> <label for="id_q3-0">Option A (ans)</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q3-1" name="q3" required="" value="2"> <label for="id_q3-1">Option B</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q3-2" name="q3" required="" value="3"> <label for="id_q3-2">Option C</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q3-3" name="q3" required="" value="4"> <label for="id_q3-3">Option D</label></div></div>
            </div>
            </div>

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>BLANK</li>
                    <li>BLANK</li>
                </ul>
            </div>

          <h5 class=" font-weight-bold mt-3 mb-3" style="font-size: 24px">Question 4</h5>
             <div class="mb-3 _formfield" style="font-size: 22px">
            <label class="col-form-label" for="id_q4">QUESTION 4:  Which of the followings is TRUE?</label>
            <div class="controls">
                <div id="id_q4" required=""><div class="form-check"><input class="form-check-input" type="radio" id="id_q4-0" name="q4" required="" value="1"> <label for="id_q4-0">Option A</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q4-1" name="q4" required="" value="2"> <label for="id_q4-1">Option B</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q4-2" name="q4" required="" value="3"> <label for="id_q4-2">Option C</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_q4-3" name="q4" required="" value="4"> <label for="id_q4-3">Option D (ans)</label></div></div>
            </div>
            </div>

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>BLANK</li>
                    <li>BLANK</li>
                </ul>
            </div>

          <button class="nexttab btn-primary btn next">SUBMIT</button>
  </div>

</div>

</body>


<script>
   function mtopFunction(){
      topFunction();
      liveSend({"read": 1})
    }

    function liveRecv(data) {
      if (data.read ==1){
              var style = document.querySelector('[data="test"]');
              style.innerHTML =".nav{ visibility: visible;}";
      }
    }



    function nextpage(){
       var i, items = $('.nav-link'), pane = $('.tab-pane');

      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i < items.length - 1){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i+1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i+1]).addClass('show active');
      }
    }

    if ({{ read }} == 1){
        nextpage();
        nextpage();
        nextpage();
        nextpage();
}


var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("expanded");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}




if(3 > 0)
   {
       /*console.log( $("label[for='id_q1_1']").html());*/
       $("label[for='id_q1_1']").html("<input type='radio' name='q1' value='2'  required id='id_q1_1' class='form-check-input'>  " +
           "If the buyer takes an outside option, I earn 3 tokens");
   } else{
           $("label[for='id_q1_1']").html("<input type='radio' name='q1' value='2'  required id='id_q1_1' class='form-check-input'>  " +
               "If the buyer rejects my offer, I earn the half of my offer.");
           $("label[for='id_q2_1']").html("<input type='radio' name='q2' value='2' required id='id_q2_1' class='form-check-input'>  " +
              "If I rejects an offer, I cam make a counteroffer.");
   }
</script>



{% endblock %}