{{ block title }}
   Practice Round: Overview of Reviews
{{ endblock }}

{{ block content }}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div class="card bg-light mb-3">
    <div class="card-body">
<b>
Your rank is {{ rank }}.

{{ if rank == 1}}
    You won the practice round.
{{ else}}
    You did not win the practice round.
{{ endif }}

    <br>
    <br>
</b>
<ul>
    <li> For this practice round, the ratings you received were randomly determined. In the subsequent rounds,{{ if treatment == "Three_trans" or treatment == "Three_intrans"}} your group members will evaluate your performance.{{ else }} another group member will rate your performance.{{ endif }}</b> </li>
{{ if treatment == "Three_trans" or treatment == "One_trans"}} <li> On the left, you see the ratings each participant gave. On the right, you see the ratings received by each participant. </li>{{ endif }}
   <li>You can move the mouse over the graphs below to see the exact ratings. </li>
    <li> The quantity rating is <b><span style="color:blue"> blue</span></b>. The quality rating is <b> <span style="color:red">red</span></b>. </li>
</ul>
    </div>
</div>
{{ if treatment == "Three_trans"}}
 <div class="container my-3">
        <div class="card-group">
              <div class="card border-dark ">
                <div class="card-header">
                    Total rating given <b>by</b> Participant 1.
                  </div>
                <div id="player_1_referee" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Referee for', 'Quantity Rating', 'Quality Rating'],
                      ['for Participant 2', {{review_on_player_2_from_player_1_quan}}, {{review_on_player_2_from_player_1_qual}}],
                      ['for you',{{review_on_player_3_from_player_1_quan}}, {{review_on_player_3_from_player_1_qual}}],
                      ]);

                    var options = {
                        chartArea: {width: '60%', height: '50%'},
                        legend: { position: 'none'},
                        hAxis: {
                          title: 'Rating',
                            viewWindow: {
                            min: 0,
                            max: 20
                          },
                        },
                        isStacked: true
                    };

                    var chart = new google.visualization.BarChart(document.getElementById('player_1_referee'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>

            <div class="card border-dark ">
                <div class="card-header">
                    Average total rating Participant 1 received: {{ total_review_on_player_1 }} (Rank: {{ rank_player_1 }}).
                  </div>
                <div id="player_1_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                   var data = google.visualization.arrayToDataTable([
                      ['Refereed by', 'Quantity Rating', 'Quality Rating'],
                      ['by Participant 2', {{review_on_player_1_from_player_2_quan}}, {{review_on_player_1_from_player_2_qual}}],
                      ['by you',{{review_on_player_1_from_player_3_quan}}, {{review_on_player_1_from_player_3_qual}}],
                   ]);

                    var options = {
                            chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                    var chart = new google.visualization.BarChart(document.getElementById('player_1_refereed'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>
            </div>

        <div class="card-group mt-3">
              <div class="card border-dark ">
                  <div class="card-header">
                    Total rating given <b>by</b> Participant 2.
                  </div>
                <div id="player_2_referee" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                   var data = google.visualization.arrayToDataTable([
                      ['Referee for', 'Quantity Rating', 'Quality Rating'],
                      ['for Participant 1', {{review_on_player_1_from_player_2_quan}}, {{review_on_player_1_from_player_2_qual}}],
                      ['for you',{{review_on_player_3_from_player_2_quan}}, {{review_on_player_3_from_player_2_qual}}],
                    ]);

                    var options = {
                        chartArea: {width: '60%', height: '50%'},
                        legend: { position: 'none'},
                        hAxis: {
                          title: 'Rating',
                            viewWindow: {
                            min: 0,
                            max: 20
                          },
                        },
                        isStacked: true
                    };

                    var chart = new google.visualization.BarChart(document.getElementById('player_2_referee'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>

            <div class="card border-dark ">
                <div class="card-header">
                    Average total rating Participant 2 received: {{ total_review_on_player_2 }} (Rank: {{ rank_player_2 }}).
                  </div>
                <div id="player_2_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Refereed by', 'Quantity Rating', 'Quality Rating'],
                      ['by Participant 1', {{review_on_player_2_from_player_1_quan}}, {{review_on_player_2_from_player_1_qual}}],
                      ['by you',{{review_on_player_2_from_player_3_quan}}, {{review_on_player_2_from_player_3_qual}}],
                    ]);

                    var options = {
                            chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                    var chart = new google.visualization.BarChart(document.getElementById('player_2_refereed'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>
            </div>

        <div class="card-group mt-3">
              <div class="card border-dark">
                <div class="card-header bg-info">
                    Total rating given <b>by</b> you.
                  </div>
                <div id="player_3_referee" style="width:100%; max-width:400px; height:120px;margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Referee for', 'Quantity Rating', 'Quality Rating'],
                      ['for Participant 1', {{review_on_player_1_from_player_3_quan}}, {{review_on_player_1_from_player_3_qual}}],
                      ['for Participant 2',{{review_on_player_2_from_player_3_quan}}, {{review_on_player_2_from_player_3_qual}}],
                    ]);

                    var options = {
                        chartArea: {width: '60%', height: '50%'},
                        legend: { position: 'none'},
                        hAxis: {
                          title: 'Rating',
                            viewWindow: {
                            min: 0,
                            max: 20
                          },
                        },
                        isStacked: true
                    };

                    var chart = new google.visualization.BarChart(document.getElementById('player_3_referee'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>

            <div class="card border-dark">
                <div class="card-header bg-info">
                    Average total rating you received: {{ total_review_on_player_3 }} (Rank: {{ rank_player_3 }}).
                  </div>
                <div id="player_3_refereed" style="width:100%; max-width:400px; height:120px;margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Refereed by', 'Quantity Rating', 'Quality Rating'],
                      ['by Participant 1', {{review_on_player_3_from_player_1_quan}}, {{review_on_player_3_from_player_1_qual}}],
                      ['by Participant 2',{{review_on_player_3_from_player_2_quan}}, {{review_on_player_3_from_player_2_qual}}],
                    ]);

                    var options = {
                            chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                    var chart = new google.visualization.BarChart(document.getElementById('player_3_refereed'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>
            </div>

 </div>

{{ elif treatment == "One_trans" }}

        <div class="card-group mt-3">
            <div class="card border-dark">
                <div class="card-header">
            Total rating given <b>by</b> Participant 1.
          </div>
        <div id="player_1_referee" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

            <script>
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Referee for', 'Quantity Rating', 'Quality Rating'],
              ['for Participant 2', {{review_on_player_2_from_player_1_quan}}, {{review_on_player_2_from_player_1_qual}}],
              ]);

            var options = {
                chartArea: {width: '60%', height: '50%'},
                legend: { position: 'none'},
                hAxis: {
                    title: 'Rating',
                    viewWindow: {
                    min: 0,
                    max: 20
                  },
                },
                isStacked: true
            };

            var chart = new google.visualization.BarChart(document.getElementById('player_1_referee'));
              chart.draw(data, options);
            }
            </script>

          </div>
         <div class="card border-dark">
        <div class="card-header">
            Total rating Participant 1 received: {{ total_review_on_player_1 }} (Rank: {{ rank_player_1 }}).
          </div>
        <div id="player_1_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

            <script>
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Refereed by', 'Quantity Rating', 'Quality Rating'],
              ['by You',{{review_on_player_1_from_player_3_quan}}, {{review_on_player_1_from_player_3_qual}}],
            ]);

            var options = {
                    chartArea: {width: '60%', height: '50%'},
                    legend: { position: 'none'},
                    hAxis: {
                      title: 'Rating',
                        viewWindow: {
                        min: 0,
                        max: 20
                      },
                    },
                    isStacked: true
                };

            var chart = new google.visualization.BarChart(document.getElementById('player_1_refereed'));
              chart.draw(data, options);
            }
            </script>

           </div>
        </div>

        <div class="card-group mt-3">
              <div class="card border-dark">
                <div class="card-header">
                    Total rating given <b>by</b> Participant 2.
                  </div>
                <div id="player_2_referee" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Referee for', 'Quantity Rating', 'Quality Rating'],
                      ['for you', {{review_on_player_3_from_player_2_quan}}, {{review_on_player_3_from_player_2_qual}}],
                      ]);

                    var options = {
                        chartArea: {width: '60%', height: '50%'},
                        legend: { position: 'none'},
                        hAxis: {
                          title: 'Rating',
                            viewWindow: {
                            min: 0,
                            max: 20
                          },
                        },
                        isStacked: true
                    };

                    var chart = new google.visualization.BarChart(document.getElementById('player_2_referee'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>

            <div class="card border-dark">
                <div class="card-header">
                    Total rating Participant 2 received: {{ total_review_on_player_2 }} (Rank: {{ rank_player_2 }}).
                  </div>
                <div id="player_2_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Refereed by', 'Quantity Rating', 'Quality Rating'],
                      ['by Participant 1',{{review_on_player_2_from_player_1_quan}}, {{review_on_player_2_from_player_1_qual}}],
                    ]);

                    var options = {
                            chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                    var chart = new google.visualization.BarChart(document.getElementById('player_2_refereed'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>
            </div>

        <div class="card-group mt-3">
              <div class="card border-dark">
                 <div class="card-header bg-info">
                    Total rating given <b>by</b> you.
                  </div>
                <div id="player_3_referee" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Referee for', 'Quantity Rating', 'Quality Rating'],
                      ['for Participant 1', {{review_on_player_1_from_player_3_quan}}, {{review_on_player_1_from_player_3_qual}}],
                      ]);

                    var options = {
                        chartArea: {width: '60%', height: '50%'},
                        legend: { position: 'none'},
                        hAxis: {
                          title: 'Rating',
                            viewWindow: {
                            min: 0,
                            max: 20
                          },
                        },
                        isStacked: true
                    };

                    var chart = new google.visualization.BarChart(document.getElementById('player_3_referee'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>

            <div class="card border-dark">
                <div class="card-header bg-info">
                    Total rating you received: {{ total_review_on_player_3 }} (Rank: {{ rank_player_3 }}).
                  </div>
                <div id="player_3_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                    <script>
                    google.charts.load('current', {'packages':['corechart']});
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Refereed by', 'Quantity Rating', 'Quality Rating'],
                      ['by Participant 2',{{review_on_player_3_from_player_2_quan}}, {{review_on_player_3_from_player_2_qual}}],
                    ]);

                    var options = {
                            chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                    var chart = new google.visualization.BarChart(document.getElementById('player_3_refereed'));
                      chart.draw(data, options);
                    }
                    </script>

              </div>
            </div>

{{ elif treatment == "One_intrans" }}

        <div  class="card-group mt-3 w-50">

              <div class="card border-dark">
                <div class="card-header">
                Total rating Participant 1 received: {{ total_review_on_player_1 }} (Rank: {{ rank_player_1 }}).
                </div>
                <div id="player_1_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                <script>
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                 function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                          ['Rating of Participant 1', 'Quantity Rating', 'Quality Rating'],
                          ['',{{total_review_on_player_1_quan}}, {{total_review_on_player_1_qual}}],
                        ]);

                    var options = {
                         chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                var chart = new google.visualization.BarChart(document.getElementById('player_1_refereed'));
                  chart.draw(data, options);
                }
                </script>

              </div>
        </div>

        <div  class="card-group mt-3 w-50">

                <div class="card border-dark mx-1 ">
                <div class="card-header">
                Total rating Participant 2 received: {{ total_review_on_player_2 }} (Rank: {{ rank_player_2 }}).
                </div>
                <div id="player_2_refereed" style="width:100%; max-width:400px; height:120px;margin: auto;"></div>

                <script>
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                 function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                          ['Rating of Participant 2', 'Quantity Rating', 'Quality Rating'],
                          ['',{{total_review_on_player_2_quan}}, {{total_review_on_player_2_qual}}],
                        ]);

                    var options = {
                       chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                var chart = new google.visualization.BarChart(document.getElementById('player_2_refereed'));
                  chart.draw(data, options);
                }
                </script>

              </div>
        </div>

        <div  class="card-group mt-3 w-50">

                <div class="card border-dark mx-1">
                <div class="card-header bg-info">
                    Total rating you received: {{ total_review_on_player_3 }} (Rank: {{ rank_player_3 }}).
                    </div>
                    <div id="player_3_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                <script>
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

               function drawChart() {
                var data = google.visualization.arrayToDataTable([
                  ['Rating of Participant 3', 'Quantity Rating', 'Quality Rating'],
                  ['',{{total_review_on_player_3_quan}}, {{total_review_on_player_3_qual}}],
                ]);

                var options = {
                    chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                var chart = new google.visualization.BarChart(document.getElementById('player_3_refereed'));
                  chart.draw(data, options);
                }
                </script>

              </div>
        </div>

{{ elif treatment == "Three_intrans"}}

        <div  class="card-group mt-3 w-50">

              <div class="card border-dark">
                <div class="card-header">
                Average total rating Participant 1 received: {{ total_review_on_player_1 }} (Rank: {{ rank_player_1 }}).
                </div>
                <div id="player_1_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                <script>
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                 function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                          ['Rating of Participant 1', 'Quantity Rating', 'Quality Rating'],
                          ['',{{total_review_on_player_1_quan}}, {{total_review_on_player_1_qual}}],
                        ]);

                    var options = {
                         chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                var chart = new google.visualization.BarChart(document.getElementById('player_1_refereed'));
                  chart.draw(data, options);
                }
                </script>

              </div>
        </div>

        <div  class="card-group mt-3 w-50">

                <div class="card border-dark mx-1">
                <div class="card-header">
                Average total rating Participant 2 received: {{ total_review_on_player_2 }} (Rank: {{ rank_player_2 }}).
                </div>
                <div id="player_2_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                <script>
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                 function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                          ['Rating of Participant 2', 'Quantity Rating', 'Quality Rating'],
                          ['',{{total_review_on_player_2_quan}}, {{total_review_on_player_2_qual}}],
                        ]);

                    var options = {
                       chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                var chart = new google.visualization.BarChart(document.getElementById('player_2_refereed'));
                  chart.draw(data, options);
                }
                </script>

              </div>
        </div>

        <div  class="card-group mt-3 w-50">

                <div class="card border-dark mx-1">
                <div class="card-header bg-info">
                    Average total rating you received: {{ total_review_on_player_3 }} (Rank: {{ rank_player_3 }}).
                    </div>
                    <div id="player_3_refereed" style="width:100%; max-width:400px; height:120px; margin: auto;"></div>

                <script>
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

               function drawChart() {
                var data = google.visualization.arrayToDataTable([
                  ['Rating of Participant 3', 'Quantity Rating', 'Quality Rating'],
                  ['',{{total_review_on_player_3_quan}}, {{total_review_on_player_3_qual}}],
                ]);

                var options = {
                    chartArea: {width: '60%', height: '50%'},
                            legend: { position: 'none'},
                            hAxis: {
                              title: 'Rating',
                                viewWindow: {
                                min: 0,
                                max: 20
                              },
                            },
                            isStacked: true
                        };

                var chart = new google.visualization.BarChart(document.getElementById('player_3_refereed'));
                  chart.draw(data, options);
                }
                </script>

              </div>
        </div>

{{ endif }}

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

</div>

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