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

{% block title %}
Part 2
{% endblock %}

{% block content %}
<hr>

<style>
    p{
        font-size: 22px;
    }
    .otree-body {
        max-width:1100px
    }
    .tab {
        display: none;
        text-align: justify;
    }
    .otree-title {
        text-align: center
    }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}
<br>

<div class="tab">
    <p>
        The computer will now generate a score based on your Part 1 performance. However, the computer sometimes makes mistakes.
    </p>

    <p>
        The score that the computer report is as follows:
    </p>
    <br>
    <center>
        <p>
            <b>score = number of puzzles you solved correctly + a random number X </b>
        </p>
    </center>
    <br>
    <p>
        where the random number X is a number randomly drawn by the computer.
        <b>X can be either -3, -2, -1, 0, 1, 2, or 3</b>.
        This means that each of these 7 numbers is <b>equally likely to be X</b>.
    </p>
    <p>
        <b>Example</b>: Suppose the number of puzzles you solved correctly is 18, and the computer randomly draws X to be -2.
         In this case, the score revealed to you will be 18 &minus; 2 = 16.
    </p>
    <br><br>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="1" style="float: right">Next</button>
    </p>
</div>

<div class="tab">
    <p>
        Based on the number of puzzles you solved correctly in Part 1, the computer generated a score of:
    </p>
    <br>
    <center>
        <p style="font-size: 52px;">
            <b>{{player.noisy_feedback}}</b>
        </p>
    </center>
    <br><br>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1" style="float: left;">Previous</button>
        <button class="nexttab btn-primary btn next" style="float: right;">Next</button>
    </p>
</div>


<script>
    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

<br>
<br>
<br>


{{ endblock }}