{{ block title }}
    Part 1: Review of Practice Round
{{ endblock }}

{{ block content }}
<div class="card bg-light mb-3">
    <div class="card-body">

    <p>In the table below, you see exemplary answers of the other group members for unusual uses of a <b>{{ C.practice_use }}</b>. </p>
    <p>Please rate the <b>quantity</b> and the <b>quality</b> of the answers of <b>{{ if treatment == "Three_trans" or treatment == "Three_intrans"}}all other group members.
        {{ else}} Participant 1.{{ endif }}</b> </p>
        <ul>
            <li>You rate the quantity and the quality from <b> 0 to 10</b>. A rating of 0 is the worst possible rating. A rating of 10 is the best possible rating.
             <li> <b> 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). </b> </li>
            <li> <b> For the quantity rating you count the number of answers of your group member that you consider valid uses.    </b> </li>
            </li>
            <li>The total rating is the sum of the quantity and the quality rating.</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 by you and the other group member.</li>
             {{ endif }}

            <li> You will have <b>90 seconds</b> for each round to make your rating decision.</li>
            <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 }}


    <h3>Example (only shown in the practice round)</h3>
    <p>
    Other group members could give the following rating and explanation:
        <ul>
            <li> "I give Participant 2 a quantity rating of 2 as he/she came up with three answers, but I consider "bottle" not as a valid answer. I give a quality rating of 2 as I consider his/her answers as not very unusual." (Total rating = 4)</li>
        </ul>
     </p>
</div>
    </div>
<center><p><b>Object: car tire</b></p></center>
<p>

<table class= "content-table">
  <thead>
    <tr>
            <th>Participant 1</th>
            <th>Participant 2</th>
              <th>You</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td> Garden Beds  </td>
        <td> Chair </td>
        <td>{{ PracticeUse1 }}</td>
    </tr>
    <tr>
        <td> Flip Flops </td>
        <td> Boat </td>
        <td>{{ PracticeUse2 }}</td>
    </tr>
    <tr>
        <td> </td>
        <td> Bottle </td>
        <td>{{ PracticeUse3 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse4 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse5 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse6 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse7 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse8 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse9 }}</td>
    </tr>
    <tr>
        <td>  </td>
        <td>  </td>
        <td>{{ PracticeUse10 }}</td>
    </tr>



{{ if treatment == "Three_trans" or treatment == "Three_intrans" }}


            <td>{{ formfield 'practice_review_on_player_1_quan' }}
            {{ formfield 'practice_review_on_player_1_qual' }}
                <button id="averageButton_2" type="button"> Calculate total rating</button>
                 <p id="result_2"></p>  </td>

            <td>{{ formfield 'practice_review_on_player_2_quan' }}
            {{ formfield 'practice_review_on_player_2_qual' }}
                <button id="averageButton_3" type="button"> Calculate total rating</button>
                 <p id="result_3"></p>  </td>

            <td></td>

 {{ else }}
            <td>{{ formfield 'practice_review_on_player_1_quan' }}
            {{ formfield 'practice_review_on_player_1_qual' }}
                <button id="averageButton_2" type="button"> Calculate total rating</button>
                 <p id="result_2"></p>  </td>

            <td> </td>

            <td></td>

{{ endif }}
  </tbody>
</table>

<script type="text/javascript">
    	function sum(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") {
                var a = parseInt(forminputs.practice_review_on_player_1_quan.value);
                var b = parseFloat(forminputs.practice_review_on_player_1_qual.value);
            }
            else {
                   var a = parseInt(forminputs.practice_review_on_player_1_quan.value);
                   var b = parseFloat(forminputs.practice_review_on_player_1_qual.value);
            }
    		// pass the numbers to the average function!
            var c = sum(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 is: " + c ;
		    }
		}

        document.getElementById("averageButton_3").onclick = function (){
            var a = parseInt(forminputs.practice_review_on_player_2_quan.value);
			var b = parseFloat(forminputs.practice_review_on_player_2_qual.value);

    		// pass the numbers to the average function!
            var c = sum(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 is: " + c ;
		    }
		}

        document.getElementById("averageButton_4").onclick = function (){
            var a = parseInt(forminputs.practice_review_on_player_3_quan.value);
            var b = parseFloat(forminputs.practice_review_on_player_3_qual.value);

    		// pass the numbers to the average function!
            var c = sum(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 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;
    }

    .div1 {
        width: 600px;
        margin: auto;
        border: 3px solid #009879;
        position: absolute;
        top: 125px;
        right: 100px;

    }

    .div2 {
        width: 600px;
        margin: auto;
        border: 3px solid black;
        position: absolute;
        top: 310px;
        right: 100px;

    }
</style>


<style>
 table, th, td {
  border: 1px solid black;
}
</style>

<div style="text-align:center;">
{{ next_button }}
</div>
{{ endblock }}