{% extends "global/Page.html" %}
{% load otree %}
{% block content %}
{% include "joint_inference/_styles.html" %}

<style>
.diagram-box { display: inline-block; vertical-align: top; padding: 8px;
    border: 2px solid #444; border-radius: 8px; background: #f7f7f7;
    width: 220px; text-align: center; }
.diagram-row { margin: 6px 0; min-height: 24px; }
.diagram-mini-ball { width: 16px; height: 16px; border-radius: 50%;
    display: inline-block; margin: 1px;
    background: radial-gradient(circle at 30% 30%, #fff5 0%, transparent 50%);
    box-shadow: inset -1px -1px 2px #0003; }
.diagram-mini-ball.red { background-color: #d62728; background-image: radial-gradient(circle at 30% 30%, #fff5 0%, transparent 50%); }
.diagram-mini-ball.blue { background-color: #1f77b4; background-image: radial-gradient(circle at 30% 30%, #fff5 0%, transparent 50%); }
.diagram-mini-ball.clear { background: #fff; border: 1px solid #aaa; box-shadow: inset -1px -1px 2px #0002; }
</style>

<h2>The Box Game</h2>

<p>Your goal in each trial: <b>figure out how many of the 100 balls in Box 1 are red.</b> You will play {{ num_practice }} practice trials followed by {{ num_main }} trials for points.</p>

<h3>Box 1 (the box you're trying to learn about)</h3>

<p>Each trial starts with a fresh box of 100 balls. Each ball is either red or blue. <b>The number of red balls is drawn uniformly at random from 1 to 99</b> — every count is equally likely.</p>

<div style="text-align: center; margin: 24px 0;">
    <div class="diagram-box" style="width: auto; display: inline-block;">
        <div class="box-header">Box 1</div>
        <div style="display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; margin: 8px auto;">
            {% for i in "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" %}<span class="diagram-mini-ball clear"></span>{% endfor %}
        </div>
        <div style="font-size: 0.85em; color: #666;">100 balls, unknown red/blue mix</div>
    </div>
</div>

<p>To get information about Box 1, you draw <b>10 or 50 balls</b> (with replacement) and see them. For example:</p>

<div style="text-align: center; margin: 24px 0;">
    <div class="diagram-box">
        <div class="box-header">your sample (10 balls)</div>
        <div class="diagram-row" style="white-space: nowrap;">
            <span class="diagram-mini-ball red"></span><span class="diagram-mini-ball red"></span><span class="diagram-mini-ball blue"></span><span class="diagram-mini-ball red"></span><span class="diagram-mini-ball red"></span><span class="diagram-mini-ball red"></span><span class="diagram-mini-ball blue"></span><span class="diagram-mini-ball red"></span><span class="diagram-mini-ball red"></span><span class="diagram-mini-ball blue"></span>
        </div>
        <div style="font-size: 0.85em; color: #666;">7 red / 10</div>
    </div>
</div>

<p>This gives you a clue about Box 1, but you shouldn't be certain.</p>

{{ next_button }}
{% endblock %}