{% 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: 910px;
  background: #fff;
  border-radius: 10px;
  padding: 0px 65px 0 45px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}

.range .seller_range{
    position: absolute;
  width: 100%;
  height: 100px;
  background-color: #E7E7E7;
  outline: none;
  border: none;
  z-index: 1111;
}

.range .buyer_bar{
    position: absolute;
  height: 100px;
  background: #6DAAE7;
  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: 12.5%;
  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: 18%;
    color: red;
    transform:  translate(0px,-60px);
    background-color: white;
    z-index: 2;
    margin: 0px;
    padding: 0px;
}

#buyer_value{
    text-align: center;
    border: black 2px 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;
}

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

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

.expended: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>


<!-- 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>#}
    <br>
    <p>   Welcome to the experiment. Please read these instructions carefully. There will be a quiz around
        the end of the instructions, to make sure you understand this experiment. The payment you will
        receive from this experiment depends on your decisions.
    </p>

    <h2><u>Your Role and Match</u></h2>
    <br>
    <p>
          At the beginning of the experiment, one-half of the participants will be randomly assigned to the
        role of a <b>seller</b> and the other half the role of a <b>buyer</b>. Your role will remain fixed throughout the
        experiment.
    </p>

    <p>
          The experiment consists of {{ tot_matches }} <b> matches</b>. At the beginning of each match, one seller participant
        and one buyer participant are randomly paired. The pair is fixed <b>within the match</b>. After each
       match, participants will be reshuffled to form new pairs. You will not learn the identity of the
       participant you are paired with, nor will that participant learn your identity even after the end of
       the experiment.
    </p>

    <p>
          In each match, the seller holds an asset. The value of the asset is 0 for the seller. However, the
        buyer has a strictly positive value of the asset. Let <i>B</i> denote the buyer's value of the asset. At the
        beginning of a match, a computer randomly and independently draws <i>B</i> between 50 and 400. Every
        integer in [50, 400] has an equal chance to be drawn. The value <i>B</i> is fixed within each match, and a
        new B is independently drawn for a new match. <b>The buyer knows the value <i>B</i>, but the seller does not.</b>
    </p>

    <br>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
  </div>





  <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">


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


    <br>
      <h2><u>Your Decisions in Each Match</u></h2>
      <br>
      <p>
          Each match consists of at least one round of bargaining. In a round, a seller offers a price to sell
       the asset, and the buyer responds. If the offer is rejected, the match may move on to the next round
       of bargaining. The details follow.
      </p>

      <h3><u>Your Task as a Buyer:</u></h3>
      <p>    Suppose your role is a buyer. At the beginning of Round 1, you will see
          the following figure. The horizontal position of the dark blue line represents <i>B</i>, your value of the
          asset. (<i>B</i> is 330 in this example, but your value will vary.) Once the seller in your pair makes a price
          offer, <i>p</i>, a red vertical arrow will appear on the figure. The position of the red arrow represents p.
          After that, decide whether to
          <ul>
             <li> <b>accept</b> the offer and earn (<i>B − p</i>),</li>
             <li> <b>reject</b> it and move on to the next round with an 80% chance, or</li>
      {% if outside_option > 0 %}
             <li>  <b>take an outside option</b> to earn {{ outside_option }} tokens.</li>
      {% endif %}
          </ul>
      </p>

      <div class="range">
        <div class="field">

                  <div class="value left">  0</div>
                  <div class="value bstart">  50</div>
            <div class="seller_tick">  </div>
            <div class="buyer_tick" style="  left: 82.5%;">  </div>

            <div class="seller_range">
                <div class="value seller_offer" style="text-align: center; left: 42%;">
                    Seller's Offer: <br> <i>p</i>
                </div>
            </div>

            <div class="buyer_bar" style="  width: 87.5%;   left: 12.5%;">
                <div class="value" id="buyer_value" style=" left: 74.5%">  Value B: <br> 330 </div>
            </div>

            <div class="value right"> 400</div>
          <div class="axis"> </div>
        </div>
        </div>

      <p style="text-align: center;">Figure 1: Buyer's Screen in Each Round</p>
      <p>
            Your task is the same for every round. It is important to understand that when you reject the
          offer, <b>there is a 20% chance that the match is terminated, and both of you and the seller
          in your pair earn 0 tokens.</b>
      </p>
      <p>
          Beware that you cannot accept the offered price p if it is strictly greater than your value B, otherwise
          your payoff becomes negative.
      </p>
      <br>
      <h3><u>Your Task as a Seller:</u></h3>
      <p>  Suppose your role is a seller. At the beginning of Round 1, you will see the following figure.
          The blue shaded area between 50 and 400 represents the range of all possible buyer's values.
      </p>

        <div class="range">
            <div class="sellerValue">
                  <span class="sellerBubble" style="left: 50%;"> <i>p</i> </span>
            </div>
        <div class="field">
                  <div class="value left">  0</div>
                  <div class="value bstart">  50</div>
            <div class="seller_tick">  </div>

            <div class="seller_range">
                <div class="value seller_offer" style="text-align: center; left: 42%;">
                    Your Price Offer in this Round
                </div>
            </div>

            <div class="buyer_bar" style="  width: 87.5%;   left: 12.5%;">
            </div>

            <div class="value right"> 400</div>
          <div class="axis"> </div>
        </div>
        </div>

      <p style="text-align: center;">Figure 2: Seller's Screen: Round 1</p>
      <p>   Choose your price offer by clicking on the line. A red vertical arrow, whose position represents
          your price offer, p, will move to the point you click. You are free to choose any point in the range
          <b>[0, 400]</b> for your price offer, and you can adjust it as much as you wish. After that, click the submit
           button, and wait for the buyer's decision. You expect one of {% if outside_option > 0 %}three {% endif %}{% if outside_option == 0 %}two {% endif %}
          possible outcomes.
      </p>

      <ul>
             <li> If the buyer <b>accepts</b> the offer, you earn <i>p</i> tokens. </li>
          {% if outside_option > 0 %}
             <li> If the buyer <b>takes an outside option</b>, you earn 0 tokens.</li>
          {% endif %}
          <li>  If the buyer <b>rejects</b> the offer, then the match moves to Round 2 with an 80% chance. Note
             that if the match is terminated with a 20% chance, both you and the buyer earn 0 tokens.</li>
      </ul>

      <p>If the match moves to Round 2 and beyond, then you will see the following figure below. The red
         vertical arrow represents your (rejected) previous offer.
      </p>

      <p>
            Before submitting a new offer price, adjust  an orange slider and a purple slider to indicate the updated range of
          possible values B in your mind. <b>The reported range will appear in your decision screen but
          will not be shared with the buyer.</b> Its sole objective is to help you think about an appropriate
          price offer. There is nothing to gain by indicating a range that differs from what you actually believe,
          so please report your belief as accurately as possible. To indicate the range, move the orange and purple sliders.
      </p>
<div class="row">
      <div class="column" style="width: 49%" >
            <div class="range" style="width: 100%;">
                  <div class="sellerValue">
                       <span class="sellerBubble" style="left: 50%;"> <i>p</i> </span>
                  </div>
            <div class="field">
                  <div class="value left">  0</div>
                  <div class="value bstart">  50</div>
                  <div class="value" style =" left: 12%;   transform: translate(-20px,85px);">  Min: 50</div>
                  <div class="value" style =" width: 100%; left: 95%;   transform: translate(-20px,85px);">  Max: 400</div>
            <div class="seller_tick" style="background-color: #AD5CAD;">  </div>

            <div class="guess_tick" style="background-color: orange; left: 12.5%">
                  <div class="lcircle" style=" top: 0px; transform: translateX(-2.5px);"></div>
                  <div class="lcircle" style="bottom: 0px; transform: translateX(-2.5px);"></div>
            </div>
            <div class="guess_tick" style="background-color: #993399; left: 100%">
                  <div class="rcircle" style=" top: 0px; transform: translateX(-2.5px);"></div>
                  <div class="rcircle" style="bottom: 0px; transform: translateX(-2.5px);"></div>
            </div>
            <div class="seller_range">
                <div class="value seller_offer" style="text-align: center; left: 35%; font-size: 16px; width: 30%; transform: translateY(-30px);">
                    Your previous offer
                </div>
            </div>

            <div class="buyer_bar" style="  width: 87.5%;   left: 12.5%;">
            </div>

            <div class="value right"> 400</div>
          <div class="axis"> </div>
        </div>
        </div>
          <p style="text-align: center;">(a) Before</p>
      </div>

            <div class="column" style="width: 49%" >
                          <div class="range" style="width: 100%;">
            <div class="sellerValue">
                  <span class="sellerBubble" style="left: 50%;"> <i>p</i> </span>
            </div>
        <div class="field">
                  <div class="value left">  0</div>
                  <div class="value bstart">  50</div>
                  <div class="value" style =" left: 22%;   transform: translate(-20px,85px);">  Min: 90</div>
                  <div class="value" style =" left: 81%;   transform: translate(-20px,85px);">  Max: 330</div>
            <div class="seller_tick" style="background-color: #AD5CAD;">  </div>

            <div class="guess_tick" style="background-color: orange; left: 22.5%">
                  <div class="lcircle" style="top: 0px; transform: translateX(-2.5px);"></div>
                  <div class="lcircle" style=" bottom: 0px; transform: translateX(-2.5px);"></div>
            </div>
            <div class="guess_tick" style="background-color: #993399; left: 82.5%">
                  <div class="rcircle" style=" top: 0px; transform: translateX(-2.5px);"></div>
                  <div class="rcircle" style="bottom: 0px; transform: translateX(-2.5px);"></div>
            </div>

            <div class="seller_range">
                <div class="value seller_offer" style="text-align: center; left: 35%; font-size: 16px; width: 30%; transform: translateY(-30px);">
                    Your previous offer
                </div>
            </div>

            <div class="buyer_bar" style="  width: 60%;   left: 22.5%;">
            </div>

            <div class="value right"> 400</div>
          <div class="axis"> </div>
        </div>
        </div>
                <p style="text-align: center;">(b) After</p>
            </div>
</div>
      <p style="text-align: center;">Figure 3: Reporting Beliefs in Round n</p>
      <p>
          The horizontal positions of the sliders respectively represent the minimum and the maximum
       of the range in your mind. The minimum can't exceed the maximum.
      </p>

      <p>
          Note that the buyer's value of the asset (<i>B</i>)
          {% if outside_option > 0 %}
          and the value of the outside option ({{ outside_option }} tokens)
          {% endif %}
          will
      remain the same across rounds within a match.
      </p>

    <br>
    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
  </div>


 <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">

     <br>
      <h2><u>Probability of Match Termination</u></h2>
      <p>
          As described, after a buyer rejected a price offer, the match continues to the next round with 80%
      chance. Your screen presents a spinning wheel that consists of red area (20%) and green area (80%)
      as illustrated below. Once you click the "Spin" button, the wheel starts spinning. If the spinning
      wheel stops at the green area, the match continues. Otherwise, the match terminates. Note that <b>the
      seller and buyer in the same match always see the same outcome</b> from the wheel for each
      round.
      </p>
      <div id="wrapper">
          <div id="wheel">
            <div id="inner-wheel">
              <div class="sec">
              </div>
              <div class="sec">
              </div>
              <div class="sec">
              </div>
              <div class="sec">
              </div>
              <div class="sec">
              </div>
        <!--      <div class="sec">-->
        <!--        <span class="fa fa-lightbulb-o"></span>-->
        <!--      </div>-->
            </div>

            <div id="spin">
              <div id="inner-spin"></div>
            </div>

            <div id="shine"></div>
          </div>
          <div id="txt"></div>
        </div>
     <br>
<p style="text-align: center;"> &nbsp;&nbsp;Figure 4: Spinning Wheel</p>
{#     <table style="font-size: 24px; text-align: center; width: 90%">#}
{#         <tr style="border-top: black 1px solid;  border-bottom: black 1px solid;">#}
{#              <td>Round </td> <td>> 1</td> <td>> 2</td> <td>> 3</td> <td>> 4</td> <td>> 5</td>#}
{#             <td>> 6</td> <td>> 7</td> <td>> 8</td>#}
{#         </tr>#}
{#         <tr style="border-bottom: black 1px solid;">#}
{#             <td> Probability </td> <td>80%</td> <td>64%</td> <td>51%</td> <td>41%</td> <td>33%</td>#}
{#             <td>26%</td> <td>21%</td> <td>< 20%</td>#}
{#         </tr>#}
{#     </table>#}
     <br>
{#     <p>#}
{#         The table reads, for example, that the probability that the match goes beyond round 2 is 64%, while#}
{#     the probability that the match goes beyond round 8 is less than 20%.#}
{#     </p>#}

     <br>

     <h2><u>Information Feedback</u></h2>
        <ul>
            <li>
                At the end of each <b>round</b>, you will know the seller's price offer and the buyer's decision. If
              the buyer rejects the offer, you will know whether the match is continued to the next round or terminated.
            </li>
            <li>
                At the end of each <b>match</b>, you will know how many tokens you receive from the match.
            </li>
        </ul>

     <br>


    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
 </div>

    <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">

       <br>
          <h2><u>Your Monetary Payments</u></h2>
       <br>
       <p>
           At the end of the experiment, a computer will randomly select one match out of {{ tot_matches }} for your
       payment. Every match has an equal chance to be selected for your payment, so it is in your best
       interest to take each match equally seriously. Participants will receive the amounts of tokens according
       to the outcome from the selected match with the exchange rate of 1 token = 1 HKD. Also, every
       participant will receive a <b>show-up fee of HKD 40</b>.
       </p>
         <br>

{#        <h2><u>A Practice Match</u></h2>#}
{#      <p>#}
{#          The practice match is part of the instructions and is not relevant to your payment. Its objective#}
{#      is to get you familiar with the computer interface and the flow of the decisions in each round of a#}
{#      match. Once the practice match is over, the computer will tell you, "The official matches begin now!"#}
{#      </p>#}

    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
      <button onclick="mtopFunction();" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
{#    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>#}
{#    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>#}
    </div>





{#  <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab">#}
{#   <br>#}
{#      <h2><u>Completion of the Experiment</u></h2>#}
{#   <br>#}
{#   <p>#}
{#       After the 10th match, the experiment will be over. You will be instructed to fill in the receipt for your#}
{#       payment. The amount you earn will be paid <b>electronically via the HKUST Autopay System to the bank account#}
{#       you provide to the Student Information System (SIS)</b>. The Finance Office of HKUST will arrange the auto-payment.#}
{#       An email notification will be sent to your HKUST email address on the pay date under the name of the sender "FOPSAP"#}
{#       (Finance Ofiice Payment System Auto Payment).#}
{#   </p>#}
{#   <br>#}
{##}
{##}
{##}
{#    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>#}
{#      <button onclick="mtopFunction();" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>#}
{##}
{#  </div>#}

  <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab" style="font-size: 21px;">
      <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">Question 1</h5>
          {% formfield player.q1  label = "Suppose you are a seller. Which of the followings is NOT TRUE?"%}

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>In each match, the buyer’s value of the asset is the private information of the buyer.</li>
                    {% if outside_option > 0 %}
                    <li>If the buyer takes the outside option, the buyer receives {{ outside_option }} tokens, and the seller receives 0 tokens.</li>
                    {% endif %}
                    <li>If the buyer accepts the offer <i>p</i> from the seller, the seller receives <i>p</i> tokens.</li>
                    <li>If the buyer rejects the seller’s offer, with a 20% chance the match terminates, and with an 80% chance the match moves on to the next round.</li>
                    {% if outside_option == 0 %}
                    <li>In case that the match moves on to the next round, the seller makes a new offer.</li>
                    {% endif %}
                </ul>
            </div>

          <h5 class=" font-weight-bold mt-3 mb-3">Question 2</h5>
          {% formfield player.q2 label = "Suppose you are a buyer, and the value of the asset is 300. Which of the followings is TRUE?" %}

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>If the buyer whose asset value is <i>B</i> accepts a price offer <i>p</i>, he earns (<i>B-p</i>) tokens.</li>
                    {% if outside_option > 0 %}
                    <li>If the buyer takes the outside option, the buyer receives {{ outside_option }} tokens, and the seller receives 0 tokens.</li>
                    {% endif %}
                    <li>The buyer’s value of the asset is fixed within each match and does not vary across rounds.</li>
                    {% if outside_option == 0 %}
                     <li>If the buyer rejects the seller’s offer, with a 20% chance the match terminates, and with an 80% chance the match moves on to the next round.</li>
                     <li>In case that the match moves on to the next round, the seller makes a new offer.</li>
                    {% endif %}
                </ul>
            </div>


          <h5 class=" font-weight-bold mt-3 mb-3">Question 3</h5>
          {% formfield player.q3 label = "Suppose the price offer in Round 1 is rejected. Which of the followings CAN HAPPEN?"%}

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li> If the buyer rejects the seller’s offer, with a 20% chance the match terminates, and with an 80% chance the match moves on to the next round.</li>
                    <li>When the match terminates, both the seller and the buyer receive 0 tokens.</li>
                </ul>
            </div>

          <h5 class=" font-weight-bold mt-3 mb-3">Question 4</h5>
          {% formfield player.q4 label = "Suppose the first match is done. Which of the followings is TRUE?"%}

            <button type="button" class="collapsible">Instruction reminder</button>
            <div class="content">
                <ul>
                    <li>Your role is randomly determined at the beginning of the experiment and fixed throughout the experiment.</li>
                    <li>In each match, one seller participant and one receiver participant are randomly paired. After each match, participants are reshuffled to form new pairs.</li>
                    <li>For each match, the buyer’s value of the asset is randomly determined, but the value is fixed within the match.</li>
                </ul>
            </div>

          <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
          <button class="nexttab btn-primary btn next">NEXT</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({{ outside_option }} > 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 {{outside_option}} 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 %}