{{ block title }}
信息聚合任务：示例轮
{{ endblock }}
{{ block content }}
    <div class="container">
    <p>如下图，计算机将为您所在的<b>小组</b>随机选中一个箱子（以<var id = "p"></var>的概率选中左边箱子，以<var id="1-p"></var>的概率选中右边箱子），并在选中的箱子中有放回地抽球。</p>
        <div class="figure_container">
            <figure id="figureLeft">
                <canvas id="myCanvasLeft"></canvas>
                <figcaption id="captionLeft"></figcaption>
            </figure>
            <figure id="figureRight">
                <canvas id="myCanvasRight"></canvas>
                <figcaption id="captionRight"></figcaption>
            </figure>
        </div>
    </div>
    <p>计算机将为每名小组成员随机抽一个球，并告知该名小组成员抽中球的颜色。</p>
    <p>您需要预测球来自左边箱子的概率。</p>

{{ next_button }}

<style>
    .figure_container {
        display: flex;
        justify-content: center;
        gap: 5%;
    }
    .figure_container figure {
        display: flex; 
        flex-direction: column; 
        justify-content: center;
    }
    .figure_container figure figcaption {
        font-size: 8px;
    } 
    canvas {
        border: 1px solid black;
    }
</style>

<script>
    function draw_urns(label) {
        let canvas_name = "myCanvas" + label, caption_name = "caption" + label;
        let black_num = js_vars.black_num[label];
        let balls = js_vars.urn_balls[label];
        let caption_content = String(black_num) + "个黑球," + String(100 - black_num) + "个红球.";
        var canvas = document.getElementById(canvas_name);
        var ctx = canvas.getContext("2d");
        let n = 10, m = 10, r = 6, interspace = 1;
        let H = r * 2 + interspace, W = r * 2;

        canvas.width = W * n;
        canvas.height = H * m;
        
        for (var i = 0; i < n; ++i) 
            for (var j = 0; j < m; ++j) {
                ctx.beginPath();
                ctx.arc(i * W + r, j * H + r + interspace/2, r - 0.08 * r, 0, 2 * Math.PI);
                ctx.fillStyle = balls[i * m + j];
                ctx.fill();
            }
            
        document.getElementById(caption_name).innerHTML = caption_content;
    }

    function main() {
        draw_urns("Left"); 
        draw_urns("Right");
        // document.getElementById("task_number").textContent = js_vars.task_number;
        document.getElementById("p").textContent = js_vars.p
        document.getElementById("1-p").textContent = js_vars.pR
    }

    main()
</script>

{{ endblock }}