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

{% block title %}
    Part 1: Rank The 5 Reports
{% endblock %}


{% block content %}

<link rel="stylesheet" href='{{ static "style/cards.css"}}'>
<link rel="stylesheet" href='{{ static "style/boxgraph.css"}}'>
<link rel="stylesheet" href='{{ static "style/global_style.css"}}'>
<style>
.sidenav {
  text-align: center;
  width: 370pt;
  height: 90%;
  position: fixed;
  z-index: 1;
  top: 20px;
  right: 10px;
  background: #eee;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0;
}

.fixed-table {
    width: 50%pt;
    height: 35%;
    top: 10px;
    position: -webkit-sticky;
    position: sticky;
  background: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<div>
<table style="text-align: center;border: 1px solid black;">
  <tr >
    <td>

    </td>
    <td>

    </td>
    <td>
      <u>Example</u>
    </td>
  </tr>
  {% for i in report_order %}
  {% if i == 1 %}
  <tr style="border: 1px solid black; text-align: center;height: 40px;">
    
    <th>Report {{forloop.counter}}:</th>
      
      <td style="text-align:left">
        which color is in the majority
      </td>
      <td style="border: 1px solid black;">
        There are more <div style="display: inline-block" id="circle-orange"></div> than <div style="display: inline-block" id="circle-green"></div>
      </td>
      
      
  </tr>
  {% elif i == 2 %}
  <tr style="border: 1px solid black; text-align: center;height: 40px;">
    <th>Report {{forloop.counter}}:</th>
    <td style="text-align:left">
      the ratio of each color to the total number of balls
    </td>
    <td style="border: 1px solid black;">
      71% are <div style="display: inline-block" id="circle-orange"></div><br>
      29% are <div style="display: inline-block" id="circle-green"></div>
    </td>
  </tr>
  {% elif i == 3 %}
  <tr style="border: 1px solid black; text-align: center;height: 40px;">
    <th>Report {{forloop.counter}}:</th>
    <td style="text-align:left">
      which ball is in the majority and by how many more
    </td>
    <td style="border: 1px solid black;">
      <b>3 more</b> <div style="display: inline-block" id="circle-orange"></div>
      than <div style="display: inline-block" id="circle-green"></div>
    </td>
  </tr>
  {% elif i == 4 %}
  <tr style="border: 1px solid black; text-align: center;height: 40px;">
    <th>Report {{forloop.counter}}:</th>
    <td style="text-align:left">
      the count for each color of balls
    </td>
    <td style="border: 1px solid black;">
      5 balls are <div style="display: inline-block" id="circle-orange"></div> <br>
      2 balls are <div style="display: inline-block" id="circle-green"></div>
    </td>
  </tr>
  {% elif i == 5 %}
  <tr style="border: 1px solid black; text-align: center;height: 40px;">
    <th>Report {{forloop.counter}}:</th>
    <td style="text-align:left">
      the sequence of the balls in the order drawn
    </td>
    <td style="border: 1px solid black;">
      <table style="margin-left: auto;margin-right: auto;">
        <tr>
          <td>
            <div style="display: inline-block" id="circle-green"></div>
          </td>
          <td>
            <div style="display: inline-block" id="circle-orange"></div>
          </td>
          <td>
            <div style="display: inline-block" id="circle-orange"></div>
          </td>
          <td>
            <div style="display: inline-block" id="circle-orange"></div>
          </td>
          <td>
            <div style="display: inline-block" id="circle-orange"></div>
          </td>
          <td>
            <div style="display: inline-block" id="circle-green"></div>
          </td>
          <td>
            <div style="display: inline-block" id="circle-orange"></div>
          </td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
        </tr>
      </table>
    </td>
  </tr>
  {% endif %}
  {% endfor %}
</table>
</div>

<div id="card_buttons" class="radio-cards" style="overflow-y: scroll; width: 650px;height: 40vh;">

<table>
  <tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_500" value="5.0" onclick="displayRadioValue()" required><label for="form1_500">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_500" value="5.0" onclick="displayRadioValue()" required><label for="form2_500">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_500" value="5.0" onclick="displayRadioValue()" required><label for="form3_500">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_500" value="5.0" onclick="displayRadioValue()" required><label for="form4_500">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_500" value="5.0" onclick="displayRadioValue()" required><label for="form5_500">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" 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_475" value="4.75" onclick="displayRadioValue()" required><label for="form1_475">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_475" value="4.75" onclick="displayRadioValue()" required><label for="form2_475">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_475" value="4.75" onclick="displayRadioValue()" required><label for="form3_475">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_475" value="4.75" onclick="displayRadioValue()" required><label for="form4_475">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_475" value="4.75" onclick="displayRadioValue()" required><label for="form5_475">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $4.75</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_450" value="4.5" onclick="displayRadioValue()" required><label for="form1_450">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_450" value="4.5" onclick="displayRadioValue()" required><label for="form2_450">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_450" value="4.5" onclick="displayRadioValue()" required><label for="form3_450">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_450" value="4.5" onclick="displayRadioValue()" required><label for="form4_450">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_450" value="4.5" onclick="displayRadioValue()" required><label for="form5_450">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $4.50</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_425" value="4.25" onclick="displayRadioValue()" required><label for="form1_425">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_425" value="4.25" onclick="displayRadioValue()" required><label for="form2_425">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_425" value="4.25" onclick="displayRadioValue()" required><label for="form3_425">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_425" value="4.25" onclick="displayRadioValue()" required><label for="form4_425">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_425" value="4.25" onclick="displayRadioValue()" required><label for="form5_425">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $4.25</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_400" value="4.0" onclick="displayRadioValue()" required><label for="form1_400">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_400" value="4.0" onclick="displayRadioValue()" required><label for="form2_400">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_400" value="4.0" onclick="displayRadioValue()" required><label for="form3_400">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_400" value="4.0" onclick="displayRadioValue()" required><label for="form4_400">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_400" value="4.0" onclick="displayRadioValue()" required><label for="form5_400">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" 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_375" value="3.75" onclick="displayRadioValue()" required><label for="form1_375">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_375" value="3.75" onclick="displayRadioValue()" required><label for="form2_375">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_375" value="3.75" onclick="displayRadioValue()" required><label for="form3_375">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_375" value="3.75" onclick="displayRadioValue()" required><label for="form4_375">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_375" value="3.75" onclick="displayRadioValue()" required><label for="form5_375">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $3.75</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_350" value="3.5" onclick="displayRadioValue()" required><label for="form1_350">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_350" value="3.5" onclick="displayRadioValue()" required><label for="form2_350">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_350" value="3.5" onclick="displayRadioValue()" required><label for="form3_350">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_350" value="3.5" onclick="displayRadioValue()" required><label for="form4_350">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_350" value="3.5" onclick="displayRadioValue()" required><label for="form5_350">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $3.50</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_325" value="3.25" onclick="displayRadioValue()" required><label for="form1_325">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_325" value="3.25" onclick="displayRadioValue()" required><label for="form2_325">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_325" value="3.25" onclick="displayRadioValue()" required><label for="form3_325">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_325" value="3.25" onclick="displayRadioValue()" required><label for="form4_325">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_325" value="3.25" onclick="displayRadioValue()" required><label for="form5_325">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $3.25</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_300" value="3.0" onclick="displayRadioValue()" required><label for="form1_300">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_300" value="3.0" onclick="displayRadioValue()" required><label for="form2_300">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_300" value="3.0" onclick="displayRadioValue()" required><label for="form3_300">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_300" value="3.0" onclick="displayRadioValue()" required><label for="form4_300">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_300" value="3.0" onclick="displayRadioValue()" required><label for="form5_300">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" 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_275" value="2.75" onclick="displayRadioValue()" required><label for="form1_275">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_275" value="2.75" onclick="displayRadioValue()" required><label for="form2_275">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_275" value="2.75" onclick="displayRadioValue()" required><label for="form3_275">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_275" value="2.75" onclick="displayRadioValue()" required><label for="form4_275">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_275" value="2.75" onclick="displayRadioValue()" required><label for="form5_275">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $2.75</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_250" value="2.5" onclick="displayRadioValue()" required><label for="form1_250">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_250" value="2.5" onclick="displayRadioValue()" required><label for="form2_250">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_250" value="2.5" onclick="displayRadioValue()" required><label for="form3_250">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_250" value="2.5" onclick="displayRadioValue()" required><label for="form4_250">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_250" value="2.5" onclick="displayRadioValue()" required><label for="form5_250">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $2.50</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_225" value="2.25" onclick="displayRadioValue()" required><label for="form1_225">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_225" value="2.25" onclick="displayRadioValue()" required><label for="form2_225">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_225" value="2.25" onclick="displayRadioValue()" required><label for="form3_225">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_225" value="2.25" onclick="displayRadioValue()" required><label for="form4_225">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_225" value="2.25" onclick="displayRadioValue()" required><label for="form5_225">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $2.25</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_200" value="2.0" onclick="displayRadioValue()" required><label for="form1_200">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_200" value="2.0" onclick="displayRadioValue()" required><label for="form2_200">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_200" value="2.0" onclick="displayRadioValue()" required><label for="form3_200">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_200" value="2.0" onclick="displayRadioValue()" required><label for="form4_200">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_200" value="2.0" onclick="displayRadioValue()" required><label for="form5_200">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" 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_175" value="1.75" onclick="displayRadioValue()" required><label for="form1_175">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_175" value="1.75" onclick="displayRadioValue()" required><label for="form2_175">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_175" value="1.75" onclick="displayRadioValue()" required><label for="form3_175">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_175" value="1.75" onclick="displayRadioValue()" required><label for="form4_175">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_175" value="1.75" onclick="displayRadioValue()" required><label for="form5_175">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $1.75</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_150" value="1.5" onclick="displayRadioValue()" required><label for="form1_150">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_150" value="1.5" onclick="displayRadioValue()" required><label for="form2_150">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_150" value="1.5" onclick="displayRadioValue()" required><label for="form3_150">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_150" value="1.5" onclick="displayRadioValue()" required><label for="form4_150">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_150" value="1.5" onclick="displayRadioValue()" required><label for="form5_150">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $1.50</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_125" value="1.25" onclick="displayRadioValue()" required><label for="form1_125">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_125" value="1.25" onclick="displayRadioValue()" required><label for="form2_125">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_125" value="1.25" onclick="displayRadioValue()" required><label for="form3_125">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_125" value="1.25" onclick="displayRadioValue()" required><label for="form4_125">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_125" value="1.25" onclick="displayRadioValue()" required><label for="form5_125">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $1.25</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_100" value="1.0" onclick="displayRadioValue()" required><label for="form1_100">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_100" value="1.0" onclick="displayRadioValue()" required><label for="form2_100">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_100" value="1.0" onclick="displayRadioValue()" required><label for="form3_100">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_100" value="1.0" onclick="displayRadioValue()" required><label for="form4_100">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_100" value="1.0" onclick="displayRadioValue()" required><label for="form5_100">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" 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_75" value="0.75" onclick="displayRadioValue()" required><label for="form1_75">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_75" value="0.75" onclick="displayRadioValue()" required><label for="form2_75">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_75" value="0.75" onclick="displayRadioValue()" required><label for="form3_75">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_75" value="0.75" onclick="displayRadioValue()" required><label for="form4_75">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_75" value="0.75" onclick="displayRadioValue()" required><label for="form5_75">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $0.75</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_50" value="0.5" onclick="displayRadioValue()" required><label for="form1_50">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_50" value="0.5" onclick="displayRadioValue()" required><label for="form2_50">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_50" value="0.5" onclick="displayRadioValue()" required><label for="form3_50">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_50" value="0.5" onclick="displayRadioValue()" required><label for="form4_50">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_50" value="0.5" onclick="displayRadioValue()" required><label for="form5_50">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $0.50</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_25" value="0.25" onclick="displayRadioValue()" required><label for="form1_25">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_25" value="0.25" onclick="displayRadioValue()" required><label for="form2_25">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_25" value="0.25" onclick="displayRadioValue()" required><label for="form3_25">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_25" value="0.25" onclick="displayRadioValue()" required><label for="form4_25">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_25" value="0.25" onclick="displayRadioValue()" required><label for="form5_25">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $0.25</p></td>
    </tr><tr> 
    <td><span class="radio-cards1"><input type="radio" name="form1" id="form1_0" value="0.0" onclick="displayRadioValue()" required><label for="form1_0">Report 1</label></span></td> 
    <td><span class="radio-cards2"><input type="radio" name="form2" id="form2_0" value="0.0" onclick="displayRadioValue()" required><label for="form2_0">Report 2</label></span></td> 
    <td><span class="radio-cards3"><input type="radio" name="form3" id="form3_0" value="0.0" onclick="displayRadioValue()" required><label for="form3_0">Report 3</label></span></td> 
    <td><span class="radio-cards4"><input type="radio" name="form4" id="form4_0" value="0.0" onclick="displayRadioValue()" required><label for="form4_0">Report 4</label></span></td> 
    <td><span class="radio-cards5"><input type="radio" name="form5" id="form5_0" value="0.0" onclick="displayRadioValue()" required><label for="form5_0">Report 5</label></span></td> 
    </tr>
    <tr>
    <td colspan="5" align="center"><p id="money">No report + $0.00</p></td>
    </tr>
    <tr>
      <td colspan="5" align="center">Submit your choices on the right panel...</td>
    </tr>
</table>



</div>


<div class="sidenav">
  <div style="border:1px solid;">
    <p style="font-size: 12pt;">
      <u>Reminder: </u>
      <ul style="text-align: left; font-size:12pt">
        <li style="text-align: left; font-size:12pt">
          The reports may help you increase the chance of getting $10 in the Assessment Task.  
        </li>
        <li style="text-align: left; font-size:12pt">
          In the Assessment Task, you will assess the chance that the picked box is Box G vs Box O.
        </li>
        <li style="text-align: left; font-size:12pt">
          The card you rank higher will be more likely to be assigned in the Assessment Task if Part 1 is selected for payment.
        </li>
      </ul>
    </p>
  </div>
  <br>

   <p style="text-align:center;"><b>Your prefered ranking:</b></p>
   <p style="text-align:center;font-size: 14px;">Scroll to the bottom to submit your ranking when you finish.</p>
   <span id="report500" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$5.00</span><br>
   <span id="report475" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$4.75</span><br>
   <span id="report450" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$4.50</span><br>
   <span id="report425" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$4.25</span><br>
   <span id="report400" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$4.00</span><br>
   <span id="report375" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$3.75</span><br>
   <span id="report350" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$3.50</span><br>
   <span id="report325" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$3.25</span><br>
   <span id="report300" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$3.00</span><br>
   <span id="report275" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$2.75</span><br>
   <span id="report250" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$2.50</span><br>
   <span id="report225" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$2.25</span><br>
   <span id="report200" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$2.00</span><br>
   <span id="report175" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$1.75</span><br>
   <span id="report150" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$1.50</span><br>
   <span id="report125" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$1.25</span><br>
   <span id="report100" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$1.00</span><br>
   <span id="report75" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$0.75</span><br>
   <span id="report50" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$0.50</span><br>
   <span id="report25" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$0.25</span><br>
   <span id="report0" style="visibility:hidden"></span>
   <span class="radio-cards-money" style="width: 70pt;">No report+$0.00</span><br>
  <br>

  <button class="otree-btn-next btn btn-primary" onclick="CheckCards()">Submit your ranking</button>
</div>

<script>
// document.getElementById('card_buttons').scrollTo(0,200);

// 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');
          var card4 = document.getElementsByName('form4');
          var card5 = document.getElementsByName('form5');
        //   document.getElementById('show1').style.visibility = "visible";
          var layout_report1 = '<span class="radio-cards1-checked" style="width: 70pt;">Report 1</span>';
          var layout_report2 = '<span class="radio-cards2-checked" style="width: 70pt;">Report 2</span>';
          var layout_report3 = '<span class="radio-cards3-checked" style="width: 70pt;">Report 3</span>';
          var layout_report4 = '<span class="radio-cards4-checked" style="width: 70pt;">Report 4</span>';
          var layout_report5 = '<span class="radio-cards5-checked" style="width: 70pt;">Report 5</span>';
          
          
          for(i = 0; i < card1.length; i++) {
                var checking = Math.round(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(card4[i].checked){
                    layout += layout_report4;
                    document.getElementById(dispointer).style.visibility="visible";
                }
                if(card5[i].checked){
                    layout += layout_report5;
                    document.getElementById(dispointer).style.visibility="visible";
                }
                if(card1[i].checked|card2[i].checked|card3[i].checked|card4[i].checked|card5[i].checked){
                    layout += "<br>";
                    document.getElementById(dispointer).innerHTML = layout;
                }

          }
      }

// Function: CheckCards() 
// Make sure the cards of all 5 forms are checked
  function CheckCards() {
    var card1 = document.querySelector('input[name="form1"]:checked');
    var card2 = document.querySelector('input[name="form2"]:checked');
    var card3 = document.querySelector('input[name="form3"]:checked');
    var card4 = document.querySelector('input[name="form4"]:checked');
    var card5 = document.querySelector('input[name="form5"]:checked');
    if (card1==null|card2==null|card3==null|card4==null|card5==null){
      alert("Please make sure you have inserted the cards for all forms.");
    }
  }

</script>

{% endblock %}