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

{% block title %}Most Likely Score{% endblock %}

{% block content %}
<style>
    .container { margin: 0 auto; padding: 2rem; text-align: center; }
    .quiz { font-size: 120px; line-height: 1; margin: 0.5rem 0; }
    .question { font-size: 14pt; margin-top: 1.5rem; }
</style>

<div class="container">

    <div class="quiz">&#x1F4DD;</div>

    <div class="question">
        <div>If we randomly select someone who took this quiz, what score do you think is most likely?</div>
        <div style="margin-top: 0.5rem;">
            Please enter a number between
            <span id="minValDisplay"></span> and <span id="maxValDisplay"></span>:
            <input type="text" id="q0" name="mode_belief" size="3" value=""
                   onchange="validateq0();" tabindex="1" style="font-size: 16px;">
        </div>
    </div>
    {% formfield_errors 'mode_belief' %}

    <div style="margin-top: 1rem; font-size: 11pt; color: #555;">
        (<span id="paymentText"></span>)
    </div>

    <div style="margin-top: 1.5rem;">{% next_button %}</div>

</div>

<script>
    var MIN_SCORE       = js_vars.MIN_SCORE;
    var MAX_SCORE       = js_vars.MAX_SCORE;
    var SCORE_TOLERANCE = js_vars.SCORE_TOLERANCE;
    var PAYMENT_AMOUNT  = js_vars.PAYMENT_AMOUNT;

    function validateq0() {
        var raw = document.getElementById('q0').value;
        var myval = Number(raw);
        if (raw.trim() === '') return;
        if (isNaN(myval)) {
            document.getElementById('q0').value = '';
            alert('Please enter a number between ' + MIN_SCORE + ' and ' + MAX_SCORE + '.');
            return;
        }
        if (myval < MIN_SCORE) {
            document.getElementById('q0').value = MIN_SCORE;
            alert('Your response was below ' + MIN_SCORE + ' and has been adjusted to ' + MIN_SCORE + '.');
        }
        if (myval > MAX_SCORE) {
            document.getElementById('q0').value = MAX_SCORE;
            alert('Your response was above ' + MAX_SCORE + ' and has been adjusted to ' + MAX_SCORE + '.');
        }
    }

    window.addEventListener('DOMContentLoaded', function () {
        document.getElementById('minValDisplay').textContent = MIN_SCORE;
        document.getElementById('maxValDisplay').textContent = MAX_SCORE;
        var paymentText = (SCORE_TOLERANCE === 0)
            ? 'You will be paid $' + PAYMENT_AMOUNT + ' if your guess exactly matches their actual score.'
            : 'You will be paid $' + PAYMENT_AMOUNT + ' if your guess is within ' + SCORE_TOLERANCE +
              ' points of their actual score.';
        document.getElementById('paymentText').textContent = paymentText;
    });
</script>
{% endblock %}