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

{% block title %}
Survey
{% endblock %}

{% block content %}
<hr>

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    .otree-title {
      text-align: center;
    }
</style>

{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}

<br>

<p>
    In Part 2, you were shown <b>a score of {{player.participant.score}}</b> based on your Part 1 performance.
  The score you were shown is based on the following formula:
</p>
<center>
    <p>
        <b>score = number of puzzles you solved correctly + a random number X</b>
    </p>
</center>
<p>
    where the random number X can be either -3, -2, -1, 0, 1, 2, or 3.
<br>
<p>
    Given the score that you were shown, how many puzzles do you think you have solved correctly in Part 1,
    and what do you think was the random number X?
</p>
<br>
<table style="text-align: center; font-size: 18px; width: 70%;" align="center">
    <tr>
        <td>score ({{player.participant.score}})</td>
        <td style="font-size: 25px;">&nbsp&nbsp;&nbsp=&nbsp&nbsp;&nbsp&nbsp;&nbsp</td>
        <td style="text-align: left">{{formfield 'noise_guess_performance'}}</td>
        <td style="font-size: 25px;">&nbsp&nbsp&nbsp+&nbsp&nbsp;&nbsp&nbsp;&nbsp</td>
        <td style="text-align: left">{{formfield 'noise_guess_x'}}</td>
    </tr>
</table>
<br>
<br>

{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>The two numbers must add up to your score. </p>
</div>
{% endif %}

<button class="btn btn-primary" style="float: right;">Next</button>

{{ endblock }}