{{ block title }}Task 2{{ endblock }}

{{ block content }}
<style>
    .transition-container {
        max-width: 680px;
        margin: 0 auto;
        font-family: Georgia, 'Times New Roman', serif;
        line-height: 1.7;
        color: #2c3e50;
    }
    .transition-container h2 {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #1a1a2e;
        font-weight: 600;
    }
    .key-point {
        background: #fdebd0;
        border-left: 4px solid #e67e22;
        padding: 1em 1.2em;
        margin: 1.5em 0;
        border-radius: 0 4px 4px 0;
    }
    .highlight-box {
        background: #f0f4f8;
        border-left: 4px solid #3498db;
        padding: 1em 1.2em;
        margin: 1.5em 0;
        border-radius: 0 4px 4px 0;
    }
</style>

<div class="transition-container">

    <p>
        In the previous trials, you were always told
        exactly how many balls were used for the second signal.
    </p>

    <p>
        In the next set of trials, the second signal will work differently:
    </p>

    <div class="key-point">
        You will <strong>not</strong> be told how many balls were used for the second signal.
        The computer randomly chooses either <strong>{{ N_J_LO }}</strong> or
        <strong>{{ N_J_HI }}</strong> balls with a 50/50 coin flip.
    </div>

    <p>
        Everything else stays the same. You still see the average landing position
        of the first signal and the average landing position of the second signal.
        Your job is still to estimate the drop position as accurately as possible.
    </p>

    <div class="highlight-box">
        <strong>Scoring reminder:</strong> Each trial is worth {{ PER_TRIAL }} &minus; (error)<sup>2</sup> / 4 points.
        Off by 10 columns costs you 25 points. Off by 20 columns costs you all 100 points.
    </div>

    <p>When you are ready, click Next to begin.</p>

</div>

{{ next_button }}
{{ endblock }}