{{ block title }}
    Instructions: Page 1 of 5
{{ endblock }}
{{ block content }}
<ul>
    <li>Thanks for your participation!</li>
    <li>We are considering hiring students, and for that purpose, we need your help to evaluate 30 resumes.</li>
    <li>All the applicants are OSU undergraduate students who are Native English speakers.</li>
    <li>We are hiring students for three jobs. One requires cognitive skills, one requires social skills, and one requires a combination of both.</li>
    <ul>
        <li>Your job is to guess their scores on tests that are designed to measure those skills .</li>
        <li>Details of your tasks will be given in the next instruction pages.</li>
<!--        <li>You will see the scores of the cognitive skill and social skill tests.</li>-->
<!--        <li>Based on those scores, you will evaluate their ability and give a guess of their scores for similar tasks.</li>-->
<!--        <li>You will guess the score for the third test that requires both cognitive skills and social skills,-->
<!--            based on their task scores in the cognitive skill and social skill tasks.</li>-->
        <li>Your payoff is decided by one randomly selected resume plus the participation fee $5.
<!--            <ul>-->
<!--                <li>For the randomly selected evaluation payoff, one applicant (resume) is randomly selected, and one of your guesses is randomly selected for the selected candidate.</li>-->
<!--                <li>Then your payment for the randomly selected evaluation will be, $(2.5- 0.2 x |your guess-actual score|)</li>-->
<!--                <li>If $(2.5- 0.2 x |your guess-actual score|) is less than 0, you will get only the participation fee $5.</li>-->
<!--                <li>Thus, your goal is to guess all the scores as precisely as possible to maximize your payoff.</li>-->
<!--            </ul>-->

        </li>
    </ul>

    {{ if player.participant.id_in_session < 319 }}
    <li>You will evaluate the following students:</li>
<style>
table, th, td {
  border:1px solid black;
}
</style>

<style>
* {
  box-sizing: border-box;
}

.row {
  margin-left:-5px;
  margin-right:-5px;
}

.column {
  float: left;
  width: 33.3%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 60%;
  border: 1px solid black #ddd;
  float:left;
}

th, td {
  text-align: left;
  padding: 6px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

<div class="main">
    <div class="column", id="table1">
    <table style="float:left; font-size:90%;">
      <tr>
        <th>FirstName LastName</th>
      </tr>
      <tr>
        <td>{{n1}}</td>
      </tr>
      <tr>
        <td>{{n2}}</td>
      </tr>
      <tr>
        <td>{{n3}}</td>
      </tr>
        <tr>
        <td>{{n4}}</td>
      </tr>
        <tr>
        <td>{{n5}}</td>
      </tr>
        <tr>
        <td>{{n6}}</td>
      </tr>
          <tr>
        <td>{{n7}}</td>
      </tr>
          <tr>
        <td>{{n8}}</td>
      </tr>
          <tr>
        <td>{{n9}}</td>
      </tr>
          <tr>
        <td>{{n10}}</td>
      </tr>
    </table>
  </div>
  <div class="column", id="table2">
    <table style="float:left; font-size:90%;">
      <tr>
        <th>FirstName LastName</th>
      </tr>
      <tr>
        <td>{{n11}}</td>
      </tr>
      <tr>
        <td>{{n12}}</td>
      </tr>
      <tr>
        <td>{{n13}}</td>
      </tr>
        <tr>
        <td>{{n14}}</td>
      </tr>
        <tr>
        <td>{{n15}}</td>
      </tr>
        <tr>
        <td>{{n16}}</td>
      </tr>
        <tr>
        <td>{{n17}}</td>
      </tr>
          <tr>
        <td>{{n18}}</td>
      </tr>
          <tr>
        <td>{{n19}}</td>
      </tr>
          <tr>
        <td>{{n20}}</td>
      </tr>
    </table>
  </div>
  <div class="column", id="table3">
    <table style="float:left; font-size:90%;">
      <tr>
        <th>FirstName LastName</th>
      </tr>
      <tr>
        <td>{{n21}}</td>
      </tr>
      <tr>
        <td>{{n22}}</td>
      </tr>
      <tr>
        <td>{{n23}}</td>
      </tr>
        <tr>
        <td>{{n24}}</td>
      </tr>
        <tr>
        <td>{{n25}}</td>
      </tr>
        <tr>
        <td>{{n26}}</td>
      </tr>
       <tr>
        <td>{{n27}}</td>
      </tr>
          <tr>
        <td>{{n28}}</td>
      </tr>
          <tr>
        <td>{{n29}}</td>
      </tr>
          <tr>
        <td>{{n30}}</td>
      </tr>
    </table>
  </div>
</div>
{{ endif }}
</ul>

    {{ next_button }}



{{ endblock }}