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

{% block title %}
    Part 1
{% endblock %}

{% block content %}

<link rel="stylesheet" href='{{ static "style/global_style.css"}}'>
<link rel="stylesheet" href='{{ static "style/cards.css"}}'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    
    show_next = function(){
        document.getElementById("instruction2").style.visibility = "visible";
        document.getElementById("button_next").style.visibility = "hidden";
    }
    show_quiz = function(){
        document.getElementById("quiz").style.visibility = "visible";
        document.getElementById("button_quiz").style.visibility = "hidden";
    }


</script>
<p style="text-align: center;">
    <img src="{% static 'global/path1.png' %}" width="80%"/>
</p>


<p>
    Now we would like to know how you rank the 5 reports from the most preferred one to the least preferred one. That is, we would like you to evaluate how much you think they can help you in the Assessment Task.

</p>

<p>
    You will need to rank <b>5 report cards</b> and <b>20 money cards</b>. 
    Each report card represents one of the 5 reports you may receive in the Assessment Task, respectively; 
    each money card represents no report plus some certain amount of money from $0 to $5.
</p>

<p>
    You will use an interface like the one below. 
    The money cards have already been ranked, from high to low, 
    according to the amount of money on them. 
</p>
<p>
    Click on the report cards to indicate your ranking of all these cards.
</p>

<p>
    If you place the <span class="radio-cards1-checked" >Report X</span> card right above the money card <span class="radio-cards-money">No report + $M</span> ,
    it means you have to be compensated <b>at least $M</b> if we give you no report 
    instead of giving you Report X.
</p>

<p>The following is a shorter demonstration of how card ranking works.</p>
<u>Example:</u>
<div style="border:solid 1px; height:500px;">

    <div class="radio-cards" style="float: left; margin:auto;height:400px;width:50%">
    
        <table>

        <tr> 
        <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_200" value="2.0" onclick="displayRadioValue()" ><label for="form1_200">Report X</label></span></td> 
        <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_200" value="2.0" onclick="displayRadioValue()" ><label for="form2_200">Report Y</label></span></td> 
        <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_200" value="2.0" onclick="displayRadioValue()" ><label for="form3_200">Report Z</label></span></td>
        </tr>
        <tr>
        <td colspan="3" align="center"><p id="money">No report + $5.00</p></td>
        </tr><tr> 
        <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_190" value="1.9" onclick="displayRadioValue()" ><label for="form1_190">Report X</label></span></td> 
        <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_190" value="1.9" onclick="displayRadioValue()" ><label for="form2_190">Report Y</label></span></td> 
        <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_190" value="1.9" onclick="displayRadioValue()" ><label for="form3_190">Report Z</label></span></td> 
        </tr>
        <tr>
        <td colspan="3" align="center"><p id="money">No report + $4.00</p></td>
        </tr><tr> 
        <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_180" value="1.8" onclick="displayRadioValue()" ><label for="form1_180">Report X</label></span></td> 
        <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_180" value="1.8" onclick="displayRadioValue()" ><label for="form2_180">Report Y</label></span></td> 
        <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_180" value="1.8" onclick="displayRadioValue()" ><label for="form3_180">Report Z</label></span></td> 
        </tr>
        <tr>
        <td colspan="3" align="center"><p id="money">No report + $3.00</p></td>
        </tr><tr> 
        <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_170" value="1.7" onclick="displayRadioValue()" ><label for="form1_170">Report X</label></span></td> 
        <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_170" value="1.7" onclick="displayRadioValue()" ><label for="form2_170">Report Y</label></span></td> 
        <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_170" value="1.7" onclick="displayRadioValue()" ><label for="form3_170">Report Z</label></span></td> 
        </tr>
        <tr>
        <td colspan="3" align="center"><p id="money">No report + $2.00</p></td>
        </tr><tr> 
        <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_160" value="1.6" onclick="displayRadioValue()" ><label for="form1_160">Report X</label></span></td> 
        <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_160" value="1.6" onclick="displayRadioValue()" ><label for="form2_160">Report Y</label></span></td> 
        <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_160" value="1.6" onclick="displayRadioValue()" ><label for="form3_160">Report Z</label></span></td> 
        </tr>
        <tr>
        <td colspan="3" align="center"><p id="money">No report + $1.00</p></td>
        </tr><tr> 
        <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_150" value="1.5" onclick="displayRadioValue()" ><label for="form1_150">Report X</label></span></td> 
        <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_150" value="1.5" onclick="displayRadioValue()" ><label for="form2_150">Report Y</label></span></td> 
        <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_150" value="1.5" onclick="displayRadioValue()" ><label for="form3_150">Report Z</label></span></td> 
        </tr>
        <tr>
        <td colspan="3" align="center"><p id="money">No report + $0.00</p></td>
        </tr>
        </table>
    </div>
    <div class="radio-cards" style="float: left;padding:3%; background-color: #eee;text-align: center;height: 400px;width:50%;margin:auto">
        <p style="text-align:center;"><b>Your prefered ranking:</b></p>
        <span id="report200" style="visibility:hidden"></span>
        <span class="radio-cards-money">No report + $5.00</span><br>
        <span id="report190" style="visibility:hidden"></span>
        <span class="radio-cards-money">No report + $4.00</span><br>
        <span id="report180" style="visibility:hidden"></span>
        <span class="radio-cards-money">No report + $3.00</span><br>
        <span id="report170" style="visibility:hidden"></span>
        <span class="radio-cards-money">No report + $2.00</span><br>
        <span id="report160" style="visibility:hidden"></span>
        <span class="radio-cards-money">No report + $1.00</span><br>
        <span id="report150" style="visibility:hidden"></span>
        <span class="radio-cards-money">No report + $0.00</span><br><br>
        
    </div>
</div> 

<div style="float:none">
<p id="button_next"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="show_next()" >Continue...</button></p>
</div>

<div id = "instruction2" style = "visibility:hidden">
<hr>
    <h3>
        If Part 1 is selected for payment...
    </h3>

    <p>
    At the end of the experiment, 
    if Part 1 is selected for payment, we will let you play the Assessment Task.
    </p>
    <p>
    Before the task, the computer will randomly draw 2 cards from the whole deck of 25 cards you have already ranked.
    The one you ranked higher will be implemented in the Assessment Task. 
    If you have ranked the two drawn cards that are placed at the same position, 
    the computer will randomly pick one to implement, with each card equally likely to be picked.
    </p>

    <p>
        The important thing to remember is that it's always in your best interest to rank the cards honestly. 
        That is,<b> for any 2 cards, Card A and Card B, if you prefer Card A to Card B, you should always place Card A above Card B.</b>
    </p>

    <!-- <p>
        Let's walk through a hypothetical example:
    </p>
    <div style="height: 300px;">
        <div style="text-align:center;float: left; background-color: #eee; width: 40%;">
            <p >Example: Suppose this is how you rank cards.    </p>
            <span class="radio-cards-money">No report + $2.00</span><br>
            <span class="radio-cards1-checked" >Report X</span>
            <span class="radio-cards2-checked">Report Y</span><br>
            <span class="radio-cards-money">No report + $1.50</span><br>
            <span class="radio-cards3-checked">Report Z</span><br>
            <span class="radio-cards-money">No report + $1.00</span><br>
            <span class="radio-cards-money">No report + $0.50</span><br>
            ...
        </div>
        <div class="radio-cards" style="float: left;  width: 60%;">
            <ul>
                <li>
                    <b>If <span class="radio-cards1-checked" >Report X</span> and 
                    <span class="radio-cards3-checked">Report Z</span> are drawn... </b><br>
                    Because you rank <span class="radio-cards1-checked" >Report X</span> higher,
                        you will play the Assessment task with Report X and no additional compensation.
                </li>
                <li>
                    <b>If <span class="radio-cards-money">No report + $2.00</span> and 
                    <span class="radio-cards3-checked">Report Z</span> are drawn... </b><br>
                    Because you rank <span class="radio-cards-money">No report + $2.00</span> higher,
                        you play the Assessment task with no report and $2.00 compensation.
                </li>
                <li>
                    <b>If <span class="radio-cards1-checked" >Report X</span> and 
                    <span class="radio-cards2-checked">Report Y</span> are drawn... </b><br>
                    Because you rank <span class="radio-cards1-checked" >Report X</span> and 
                        <span class="radio-cards2-checked">Report Y</span> equally,
                        the computer  will randomly pick Report X or Report Y, and 
                        you play the Assessment task with the picked report and no additional compensation.
                </li>
            </ul>
        </div>
    </div> -->
    <br>
    <div>
        <p id="button_quiz"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="show_quiz()" >Continue...</button></p>
    </div>
</div>

<div id="quiz" style="visibility:hidden">
    <hr>
    <h3>Comprehension Questions</h3>
    <p>You have to get all questions correct to proceed.</p>
    <p>
        <b>Question 1</b><br>
        For your best interest, you should:<br>
    <input type='radio' class='quiz' name='quiz1' value=1>Randomly rank the cards<br>
    <input type='radio' class='quiz' name='quiz1' value=2>Rank the cards following exactly your preference. That is, if you prefer Card A to Card B, you should always place Card A above Card B.<br>

    </p>
    <!-- <p>
        <b>Question 2</b><br>
        Let's walk through a hypothetical example.
        <div style=" background-color: #eee; ">
            <p><u>Example:</u></p>
            <p >Suppose, hypothetically, your preference is as below.    </p>
            <p>You have to be compensated with at least $4.00 for not receiving <span class="radio-cards1-checked" >Report X</span> and seeing no report.</p>
            <p>You have to be compensated with at least $4.00 for not receiving <span class="radio-cards2-checked" >Report Y</span> and seeing no report.</p>
            <p>You have to be compensated with at least $3.00 for not receiving <span class="radio-cards3-checked" >Report Z</span> and seeing no report.</p>
        </div>
        <p>
            Express your hypothetical preference shown above.
            </p>        
        <div class="radio-cards" style="height:500px;text-align: center;">

            <table style="margin:auto">
    
            <tr> 
            <td><span class="radio-cards1"><input type="radio" class='quiz' name="form1_quiz" id="form1_200_quiz" value="2.0" ><label for="form1_200_quiz">Report X</label></span></td> 
            <td><span class="radio-cards2"><input type="radio" class='quiz' name="form2_quiz" id="form2_200_quiz" value="2.0" ><label for="form2_200_quiz">Report Y</label></span></td> 
            <td><span class="radio-cards3"><input type="radio" class='quiz' name="form3_quiz" id="form3_200_quiz" value="2.0" ><label for="form3_200_quiz">Report Z</label></span></td>
            </tr>
            <tr>
            <td colspan="3" align="center"><p id="money">No report + $5.00</p></td>
            </tr><tr> 
            <td><span class="radio-cards1"><input type="radio" class='quiz' name="form1_quiz" id="form1_190_quiz" value="1.9" ><label for="form1_190_quiz">Report X</label></span></td> 
            <td><span class="radio-cards2"><input type="radio" class='quiz' name="form2_quiz" id="form2_190_quiz" value="1.9" ><label for="form2_190_quiz">Report Y</label></span></td> 
            <td><span class="radio-cards3"><input type="radio" class='quiz' name="form3_quiz" id="form3_190_quiz" value="1.9" ><label for="form3_190_quiz">Report Z</label></span></td> 
            </tr>
            <tr>
            <td colspan="3" align="center"><p id="money">No report + $4.00</p></td>
            </tr><tr> 
            <td><span class="radio-cards1"><input type="radio" class='quiz' name="form1_quiz" id="form1_180_quiz" value="1.8" ><label for="form1_180_quiz">Report X</label></span></td> 
            <td><span class="radio-cards2"><input type="radio" class='quiz' name="form2_quiz" id="form2_180_quiz" value="1.8" ><label for="form2_180_quiz">Report Y</label></span></td> 
            <td><span class="radio-cards3"><input type="radio" class='quiz' name="form3_quiz" id="form3_180_quiz" value="1.8" ><label for="form3_180_quiz">Report Z</label></span></td> 
            </tr>
            <tr>
            <td colspan="3" align="center"><p id="money">No report + $3.00</p></td>
            </tr><tr> 
            <td><span class="radio-cards1"><input type="radio" class='quiz' name="form1_quiz" id="form1_170_quiz" value="1.7" ><label for="form1_170_quiz">Report X</label></span></td> 
            <td><span class="radio-cards2"><input type="radio" class='quiz' name="form2_quiz" id="form2_170_quiz" value="1.7" ><label for="form2_170_quiz">Report Y</label></span></td> 
            <td><span class="radio-cards3"><input type="radio" class='quiz' name="form3_quiz" id="form3_170_quiz" value="1.7" ><label for="form3_170_quiz">Report Z</label></span></td> 
            </tr>
            <tr>
            <td colspan="3" align="center"><p id="money">No report + $2.00</p></td>
            </tr><tr> 
            <td><span class="radio-cards1"><input type="radio" class='quiz' name="form1_quiz" id="form1_160_quiz" value="1.6" ><label for="form1_160_quiz">Report X</label></span></td> 
            <td><span class="radio-cards2"><input type="radio" class='quiz' name="form2_quiz" id="form2_160_quiz" value="1.6" ><label for="form2_160_quiz">Report Y</label></span></td> 
            <td><span class="radio-cards3"><input type="radio" class='quiz' name="form3_quiz" id="form3_160_quiz" value="1.6" ><label for="form3_160_quiz">Report Z</label></span></td> 
            </tr>
            <tr>
            <td colspan="3" align="center"><p id="money">No report + $1.00</p></td>
            </tr><tr> 
            <td><span class="radio-cards1"><input type="radio" class='quiz' name="form1_quiz" id="form1_150_quiz" value="1.5" ><label for="form1_150_quiz">Report X</label></span></td> 
            <td><span class="radio-cards2"><input type="radio" class='quiz' name="form2_quiz" id="form2_150_quiz" value="1.5" ><label for="form2_150_quiz">Report Y</label></span></td> 
            <td><span class="radio-cards3"><input type="radio" class='quiz' name="form3_quiz" id="form3_150_quiz" value="1.5" ><label for="form3_150_quiz">Report Z</label></span></td> 
            </tr>
            <tr>
            <td colspan="3" align="center"><p id="money">No report + $0.00</p></td>
            </tr>
            </table>
        </div>       
    </p> -->
<div>
<p id="button_check"><button class="otree-btn-next btn btn-primary" type = "button"  onclick="check_quiz()" >Check Answer</button></p>
</div>
</div>

<div id="next_part" style="visibility:hidden">
    
    {% next_button %}
</div>

<script>

    // Functions: displayRadioValueX()
    // Respond the checked item
    // items in div class "sidenav" are hidden until one of the cards is checked. The value will also show immediately.
    
      function displayRadioValue() {
          var card1 = document.getElementsByName('form1');
          var card2 = document.getElementsByName('form2');
          var card3 = document.getElementsByName('form3');
        //   document.getElementById('show1').style.visibility = "visible";
          var layout_report1 = '<span class="radio-cards1-checked" >Report X</span>';
          var layout_report2 = '<span class="radio-cards2-checked" >Report Y</span>';
          var layout_report3 = '<span class="radio-cards3-checked" >Report Z</span>';
          
          
          for(i = 0; i < card1.length; i++) {
                var checking = card1[i].value*100;
                var dispointer = "report"+String(checking);
                document.getElementById(dispointer).innerHTML="";
                document.getElementById(dispointer).style.visibility="hidden";

                var layout = "";
                if(card1[i].checked){
                    layout += layout_report1;
                    document.getElementById(dispointer).style.visibility="visible";
                    
                }
                if(card2[i].checked){
                    layout += layout_report2;
                    document.getElementById(dispointer).style.visibility="visible";
                }
                if(card3[i].checked){
                    layout += layout_report3;
                    document.getElementById(dispointer).style.visibility="visible";
                }
                if(card1[i].checked|card2[i].checked|card3[i].checked){
                    layout += "<br>";
                    document.getElementById(dispointer).innerHTML = layout;
                }

          }
      }
    
    
    function check_quiz(){
        var radio1 = document.querySelector('input[name="quiz1"]:checked');
        
        // var card1 = document.querySelector('input[name="form1_quiz"]:checked');
        // var card2 = document.querySelector('input[name="form2_quiz"]:checked');
        // var card3 = document.querySelector('input[name="form3_quiz"]:checked');
        if (radio1==null){
            alert("Please finish question 1!")
        // }else if(card1==null|card2==null|card3==null){
            // alert("Please finish question 2!")
        }else{
            var answer1 = radio1.value;
            // if (answer1!=2|card1.value!=1.9|card2.value!=1.9|card3.value!=1.8){
            if (answer1!=2){
                alert("Please check your answer!")
            }else{
                alert("Correct!")
                $('.quiz').attr('disabled', true);
                document.getElementById("button_check").style.visibility="hidden";
                document.getElementById("next_part").style.visibility="visible";
            }
        }
    }
    </script>



{% endblock %}