{{ block title }}
    Part 1: Round {{ player.round_number}}: Please rate your fellow group member{{ if treatment == "Three_trans" or treatment == "Three_intrans"}}s{{ endif }}
{{ endblock }}

{{ block content }}


<script>
function sendField(input) {
  liveSend({'field': input.name, 'value': parseFloat(input.value), 'id_in_group': js_vars.id});
}
</script>




<p>

<div class="card bg-light mb-3">
    <div class="card-body">

    <p>In the table below, you see the answers of the other group members for <b>unusual uses of a
        {{ if player.round_number == 1 }}
            {{ C.use_1 }}</b>.
        {{ elif player.round_number == 2 }}
            {{ C.use_2 }}</b>.
        {{ else }}
            {{ C.use_3 }}</b>.
        {{ endif }}</p>
    <p>Please rate the <b>quantity</b> and the <b>quality</b> of the answers of {{ if treatment == "Three_trans" or treatment == "Three_intrans"}}all other group members.
        {{ else}} Participant {{ if player.id_in_group == 1}} 2{{ elif player.id_in_group == 2}} 3{{ else}} 1 {{ endif }}.{{ endif }} </p>
        <ul>
            <li>You rate quantity and quality on a scale from 0 to 10. A rating of 0 is the worst possible rating. A rating of 10 is the best possible rating.
            </li>
            <li>   The quality rating should capture your opinion on how unusual the answers of your group member are (0 not at all unusual, 10 very unusual). The quantity rating should capture the number of answers you count as valid use. </li>
            {{ if treatment == "Three_trans" or treatment == "Three_intrans"}}
                <li>The final rating for each group member is the average of all total ratings given (your rating and two other ratings).</li>
             {{ else}} <li>The total rating is the sum of the quantity and the quality rating.</li>{{ endif }}
            <li>Remember: The participant who receives the highest{{ if treatment == "Three_trans" or treatment == "Three_intrans"}} average {{ endif }} total rating will win the respective round. </li>
        </ul>
     {{ if treatment == "Three_trans" or treatment == "One_trans"}}
      <p>  After all group members have decided on their ratings in the final round, <b>all ratings are made public to the group</b>. <b>Therefore, each group member observes how every participant in the group has been rated and what ratings each group member has given.</b></p>
        {{ else }}
        <p> After all group members have decided on their ratings in the final round, every group member will see the rating each group member has received. <b>However, it will not be revealed which participant gave which rating.</b></p>
        {{ endif }}
    </p>
</div>
    </div>
<center><p><b>Object: {{ if player.round_number == 1}} {{ C.use_1}}{{ elif player.round_number == 2}}{{ C.use_2}}{{ else }}{{ C.use_3}}{{ endif }}</b></p></center>
     <table class= "content-table">
         <thead>
  <tr>
      {{ if player.id_in_group == 1}}
            <th>You</th>
            <th>Participant 2</th>
            <th>Participant 3</th>
      {{ elif player.id_in_group == 2}}
              <th>Participant 1</th>
            <th>You</th>
            <th>Participant 3</th>
      {{ elif player.id_in_group == 3}}
              <th>Participant 1</th>
            <th>Participant 2</th>
            <th>You</th>
      {{ else}}
              <th>Participant 1</th>
            <th>Participant 2</th>
              <th>You</th>
      {{ endif }}
      </thead>
  </tr>
  <tr>
    <td>{{ Unusual_Use_1_player_1 }}</td>
    <td>{{ Unusual_Use_1_player_2 }}</td>
    <td>{{ Unusual_Use_1_player_3 }}</td>
  </tr>
  <tr>
    <td>{{ Unusual_Use_2_player_1 }}</td>
    <td>{{ Unusual_Use_2_player_2 }}</td>
    <td>{{ Unusual_Use_2_player_3 }}</td>
  </tr>
  <tr>
    <td>{{ Unusual_Use_3_player_1 }}</td>
    <td>{{ Unusual_Use_3_player_2 }}</td>
    <td>{{ Unusual_Use_3_player_3 }}</td>
  </tr>
   <tr>
    <td>{{ Unusual_Use_4_player_1 }}</td>
    <td>{{ Unusual_Use_4_player_2 }}</td>
    <td>{{ Unusual_Use_4_player_3 }}</td>
  </tr>
         <tr>
    <td>{{ Unusual_Use_5_player_1 }}</td>
    <td>{{ Unusual_Use_5_player_2 }}</td>
    <td>{{ Unusual_Use_5_player_3 }}</td>
  </tr>
          <tr>
    <td>{{ Unusual_Use_6_player_1 }}</td>
    <td>{{ Unusual_Use_6_player_2 }}</td>
    <td>{{ Unusual_Use_6_player_3 }}</td>
  </tr>
          <tr>
    <td>{{ Unusual_Use_7_player_1 }}</td>
    <td>{{ Unusual_Use_7_player_2 }}</td>
    <td>{{ Unusual_Use_7_player_3 }}</td>
  </tr>
          <tr>
    <td>{{ Unusual_Use_8_player_1 }}</td>
    <td>{{ Unusual_Use_8_player_2 }}</td>
    <td>{{ Unusual_Use_8_player_3 }}</td>
  </tr>
          <tr>
    <td>{{ Unusual_Use_9_player_1 }}</td>
    <td>{{ Unusual_Use_9_player_2 }}</td>
    <td>{{ Unusual_Use_9_player_3 }}</td>
  </tr>
          <tr>
    <td>{{ Unusual_Use_10_player_1 }}</td>
    <td>{{ Unusual_Use_10_player_2 }}</td>
    <td>{{ Unusual_Use_10_player_3 }}</td>
  </tr>
              <tr>


{{ if treatment == "Three_trans" or treatment == "Three_intrans" }}
     {{ if player.id_in_group == 1 }}
            <td> </td>

            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_2_quan" min="0" max="10" step=1 required>
             <br><br> Quality Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_2_qual" min="0" max="10" step=1 required>
              <br><br>   <button id="averageButton_2" type="button"> Calculate total rating</button>
               <br>  <p id="result_2"></p>  </td>

            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_3_quan" min="0" max="10" step=1 required>
             <br><br> Quality Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_3_qual" min="0" max="10" step=1 required>
               <br><br> <button id="averageButton_3" type="button"> Calculate total rating</button>
               <br>  <p id="result_3"></p>  </td>


     {{ elif player.id_in_group == 2 }}

            <td> Quantity Rating: <br>  <input type="number" onchange="sendField(this)" name="review_on_player_1_quan" min="0" max="10" step=1 required>
             <br><br> Quality Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_1_qual" min="0" max="10" step=1 required>
               <br><br> <button id="averageButton_2" type="button"> Calculate total rating</button>
               <br>  <p id="result_2"></p>  </td>

            <td></td>

            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_3_quan" min="0" max="10" step=1 required>
             <br><br> Quality Rating: <br><input type="number" onchange="sendField(this)" name="review_on_player_3_qual" min="0" max="10" step=1 required>
               <br><br> <button id="averageButton_3" type="button"> Calculate total rating</button>
                <br> <p id="result_3"></p>  </td>



     {{ elif player.id_in_group == 3 }}

            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_1_quan" min="0" max="10" step=1 required>
             <br><br> Quality Rating: <br><input type="number" onchange="sendField(this)" name="review_on_player_1_qual" min="0" max="10" step=1 required>
                <br><br><button id="averageButton_2" type="button"> Calculate total rating</button>
                <br> <p id="result_2"></p>  </td>

            <td> Quantity Rating: <br>  <input type="number" onchange="sendField(this)" name="review_on_player_2_quan" min="0" max="10" step=1 required>
             <br><br> Quality Rating: <br><input type="number" onchange="sendField(this)" name="review_on_player_2_qual" min="0" max="10" step=1 required>
               <br><br> <button id="averageButton_3" type="button"> Calculate total rating</button>
                 <br><p id="result_3"></p>  </td>

            <td></td>


{{ endif }}

 {{ else }}
   {{ if player.id_in_group == 1 }}
            <td> </td>

            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_2_quan" min="0" max="10" step=1 required > <br>
             <br><br> Quality Rating: <br><input type="number" onchange="sendField(this)" name="review_on_player_2_qual" min="0" max="10" step=1 required><br>
                <br><br> <button id="averageButton_2" type="button"> Calculate total rating</button>
                <br>  <p id="result_2"></p>  </td>

            <td> </td>



     {{ elif player.id_in_group == 2 }}
            <td>  </td>
            <td> </td>
            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_3_quan" min="0" max="10" step=1 required><br>
             <br><br> Quality Rating: <br><input type="number" onchange="sendField(this)" name="review_on_player_3_qual" min="0" max="10" step=1 required><br>
               <br><br> <button id="averageButton_2" type="button"> Calculate total rating</button>
               <br>  <p id="result_2"></p>  </td>



     {{ elif player.id_in_group == 3 }}

            <td> Quantity Rating: <br> <input type="number" onchange="sendField(this)" name="review_on_player_1_quan" min="0" max="10" step=1 required><br>
             <br><br> Quality Rating: <br><input type="number" onchange="sendField(this)" name="review_on_player_1_qual" min="0" max="10" step=1 required><br>
                <br><br><button id="averageButton_2" type="button"> Calculate total rating</button>
                <br> <p id="result_2"></p>  </td>

            <td>  </td>

            <td></td>



{{ endif }}
{{ endif }}

</table>


<script type="text/javascript">
    	function average(a, b) {
    		// force the input as numbers *1
        return (a*1 + b*1);
    	}

    	document.getElementById("averageButton_2").onclick = function (){
            if(js_vars.treatment == "One_trans") {
                if(js_vars.id == 1) {
                   var a = parseInt(forminputs.review_on_player_2_quan.value);
                   var b = parseFloat(forminputs.review_on_player_2_qual.value);
                }
                else if(js_vars.id == 2) {
                   var a = parseInt(forminputs.review_on_player_3_quan.value);
                   var b = parseFloat(forminputs.review_on_player_3_qual.value);
                }
                else if(js_vars.id == 3) {
                   var a = parseInt(forminputs.review_on_player_4_quan.value);
                   var b = parseFloat(forminputs.review_on_player_4_qual.value);
                }
                else if(js_vars.id == 4) {
                   var a = parseInt(forminputs.review_on_player_1_quan.value);
                   var b = parseFloat(forminputs.review_on_player_1_qual.value);
                }
            }
            else {
                if(js_vars.id == 1) {
                   var a = parseInt(forminputs.review_on_player_2_quan.value);
                   var b = parseFloat(forminputs.review_on_player_2_qual.value);
                }
                else if(js_vars.id == 2) {
                   var a = parseInt(forminputs.review_on_player_3_quan.value);
                   var b = parseFloat(forminputs.review_on_player_3_qual.value);
                }
                else if(js_vars.id == 3) {
                   var a = parseInt(forminputs.review_on_player_1_quan.value);
                   var b = parseFloat(forminputs.review_on_player_1_qual.value);
                }
                else if(js_vars.id == 4) {
                   var a = parseInt(forminputs.review_on_player_1_quan.value);
                   var b = parseFloat(forminputs.review_on_player_1_qual.value);
                }
            }
    		// pass the numbers to the average function!
            var c = average(a,b);
        // check if c is NA
            if(c !== c ){
                document.getElementById("result_2").innerHTML="Please fill out both fields! " ;
            }
            else{
                document.getElementById("result_2").innerHTML="The total rating (sum) is: " + c ;
		    }
		}

        document.getElementById("averageButton_3").onclick = function (){
            if(js_vars.id == 1) {
               var a = parseInt(forminputs.review_on_player_3_quan.value);
			   var b = parseFloat(forminputs.review_on_player_3_qual.value);
            }
            else if(js_vars.id == 2) {
               var a = parseInt(forminputs.review_on_player_3_quan.value);
			   var b = parseFloat(forminputs.review_on_player_3_qual.value);
            }
            else if(js_vars.id == 3) {
               var a = parseInt(forminputs.review_on_player_2_quan.value);
			   var b = parseFloat(forminputs.review_on_player_2_qual.value);
            }
            else if(js_vars.id == 4) {
               var a = parseInt(forminputs.review_on_player_2_quan.value);
			   var b = parseFloat(forminputs.review_on_player_2_qual.value);
            }
    		// pass the numbers to the average function!
            var c = average(a,b);
        // check if c is NA
            if(c !== c ){
                document.getElementById("result_3").innerHTML="Please fill out both fields! " ;
            }
            else{
                document.getElementById("result_3").innerHTML="The total rating (sum) is: " + c ;
		    }
		}

        document.getElementById("averageButton_4").onclick = function (){
            if(js_vars.id == 1) {
               var a = parseInt(forminputs.review_on_player_4_quan.value);
			   var b = parseFloat(forminputs.review_on_player_4_qual.value);
            }
            else if(js_vars.id == 2) {
               var a = parseInt(forminputs.review_on_player_4_quan.value);
			   var b = parseFloat(forminputs.review_on_player_4_qual.value);
            }
            else if(js_vars.id == 3) {
               var a = parseInt(forminputs.review_on_player_4_quan.value);
			   var b = parseFloat(forminputs.review_on_player_4_qual.value);
            }
            else if(js_vars.id == 4) {
               var a = parseInt(forminputs.review_on_player_3_quan.value);
			   var b = parseFloat(forminputs.review_on_player_3_qual.value);
            }
    		// pass the numbers to the average function!
            var c = average(a,b);
        // check if c is NA
            if(c !== c ){
                document.getElementById("result_4").innerHTML="Please fill out both fields! " ;
            }
            else{
                document.getElementById("result_4").innerHTML="The total rating (sum) is: " + c ;
		    }
		}
	</script>



<style>
    .content-table {
        border-collapse: collapse;
        border: solid black;
        margin: 25px 0;
        font-size: 0.9em;
        font-family: sans-serif;
        min-width: 400px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        margin-left: auto;
        margin-right: auto;
    }

    .content-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    }

    .content-table th,
    .content-table td {
        padding: 12px 15px;
    }

    .content-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }

    .content-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    .content-table tbody tr:last-of-type {
        border-bottom: 2px solid #009879;
    }
 table, th, td {
  border: 1px solid black;
}
</style>

<div style="text-align:center;">


<style>
    .otree-timer {
         position: fixed;
        bottom: 0;
        right: 0;
        width: 18%;
        border: 3px solid #FF0000;
    }
    .content-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    }
</style>
</div>
</center>

<center>
{{ next_button }}
    </center>
</div>
{{ endblock }}