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

<div style="text-align:right; color:#888; font-size:0.85em; margin-bottom:8px;">
{% if player.is_practice %}Practice trial {{ player.round_number }} of 2{% else %}Trial {{ trial_num }} of 8{% endif %}
</div>


<h3>Q3. Now, how many of the 100 balls in Box 1 are red?</h3>

<p>Update your estimate based on everything you have seen.</p>

<div class="source-row">
    <span class="source-label">Report A</span>
    <div class="ball-grid">{% for c in source_a %}<span class="ball {{ c }}"></span>{% endfor %}</div><span class="count-label">{{ k_a }} / 10</span>
</div>
<div class="source-row">
    <span class="source-label">Report B</span>
    <div class="ball-grid">{% for c in source_b %}<span class="ball {{ c }}"></span>{% endfor %}</div><span class="count-label">{{ k_b }} / 10</span>
</div>
<div class="source-row you-row">
    <span class="source-label" style="width: 110px;">Your sample</span>
    <div class="ball-grid">{% for c in sample %}<span class="ball {{ c }}"></span>{% endfor %}</div><span class="count-label">{{ k_i }} / {{ n_i }}</span>
</div>

<p style="color:#888; margin-top:12px;">Your earlier Q1 estimate was: <b>{{ q1 }}</b> red.</p>

<div class="slider-container">
    <input type="range" min="1" max="99" value="{{ q1 }}" id="q3-slider" name="q3_estimate" class="slider-input"
           oninput="document.getElementById('q3-display').innerText = this.value">
    <div style="margin-top: 8px;">Your estimate: <span class="slider-value" id="q3-display">{{ q1 }}</span> / 100 red</div>
</div>

{{ next_button }}
{% endblock %}