{{ block title }}实验得分{{ endblock }}
{{ block content }}
    

    <div style = "display: flex;">
        <div>
            <p>实验结束！计算机为您随机抽中第<var id = "task_number"></var>轮任务进行支付。</p>
            <p>计算机在第<var id = "task_number_1"></var>轮任务开始时选中了<b id = "choice"></b>.</p>
            <p>您在第<var id = "task_number_2"></var>轮任务中的得分为：<var id = "score"></var> </p>
        </div>

        <!-- <div id = "figure_container">
            <figure id="figure">
                <canvas id="myCanvas"></canvas>
                <figcaption id="caption"></figcaption>
            </figure>
        </div> -->
        <p id="info_structureLeft">以<var id = "p"></var>的概率选中左边箱子，</p>
        <p id="info_structureRight">以<var id="pR"></var>的概率选中右边箱子。</p>
        <style>
            #info_structureLeft {
                position: absolute;
                top: 16%;
                left: 52%;
            } 
            #info_structureRight {
                position: absolute;
                top: 20%;
                left: 52%;
            }
        </style>
        <div id = "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>
    <div>
        <h4>您的历史预测：</h4>
        <table id="ReportTable">
            <thead></thead>
            <tbody></tbody>
        </table>
    </div>
    <h2>分数计算</h2>
    <div id = "score_calculation"></div>
    <p>您在第<var id = "task_number_3"></var>轮任务中的分数为<i id = "calculation"></i></p>
        
    <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 table_display(my_id) {            
            let C = js_vars.round
            var tableHead = document.querySelector('#ReportTable thead');
            
            var headrow = document.createElement('tr');
            var cell_h1 = document.createElement('td');
            cell_h1.textContent = '阶段';
            headrow.appendChild(cell_h1);
            var cell_h2 = document.createElement('td');
            cell_h2.textContent = '预测';
            headrow.appendChild(cell_h2);
            tableHead.appendChild(headrow);

            var tableBody = document.querySelector('#ReportTable tbody'); // Get the table body element        
            for (var j = 1; j <= C; j++) {
                var row = document.createElement('tr');
                
                var cell_t = document.createElement('td');
                cell_t.textContent = j;
                row.appendChild(cell_t);

                var cell_r = document.createElement('td');
                cell_name = '#cell_' + j + '_' + my_id; 
                cell_r.textContent = js_vars.table_content[cell_name]; 
                row.appendChild(cell_r);

                tableBody.appendChild(row);
            }
            // let C = js_vars.round
            // var tableHead = document.querySelector('#ReportTable thead');
            // var tableBody = document.querySelector('#ReportTable tbody'); // Get the table body element
            
            // var headrow = document.createElement('tr');
            // for (var j = 1; j <= C; j++) {
            //     var cell = document.createElement('td');
            //     cell.textContent = '阶段'+j;
            //     headrow.appendChild(cell);
            // }
            // tableHead.appendChild(headrow);

            // var row = document.createElement('tr'); // Create a new row element
            // for (var j = 1; j <= C; j++) { // Loop through each column in the row
            //     var cell = document.createElement('td'); // Create a new cell element
            //     cell_name = '#cell_' + j + '_' + my_id; 
            //     cell.textContent = js_vars.table_content[cell_name]; // Add content to the cell 
            //     row.appendChild(cell); // Append the cell to the row
            // }
            // tableBody.appendChild(row); // Append the row to the table body
        }

        function calculation_display(my_id) {
            let C = js_vars.round;
            var calcDiv = document.getElementById("score_calculation");

            for (var i = 1; i <= C; i++) {
                var newPara = document.createElement("p");
                newPara.appendChild(document.createTextNode("您在阶段"));
                var round_num = document.createElement("var");
                round_num.textContent = i;
                newPara.appendChild(round_num);
                newPara.appendChild(document.createTextNode("的分数为"));
                var areaFormula = document.createElement("i");
                
                var scoreFormula = "1 - {fst_loss}<sup>2</sup> = {score_i}."
                cell_name = '#cell_' + i + '_' + my_id; 
                if (js_vars.computer_choice == "left") 
                    scoreFormula = scoreFormula.replace("{fst_loss}", "(1 - " + js_vars.table_content[cell_name] + ")");
                else //right
                    scoreFormula = scoreFormula.replace("{fst_loss}", js_vars.table_content[cell_name]);

                scoreFormula = scoreFormula.replace("{score_i}", js_vars.score["score_" + i]);
                areaFormula.innerHTML = scoreFormula;
                newPara.appendChild(areaFormula);
                calcDiv.appendChild(newPara);
            }

            var str = js_vars.score["score_1"];
            for (var i = 2; i <= C; ++i)
                str = str + "+" + js_vars.score["score_" + i];
            if (C > 1) str = str + "=" + js_vars.total_score;
            str = str + ".";
            document.getElementById("calculation").textContent = str;
        }

        function main() {
            draw_urns("Left");
            draw_urns("Right");
            document.getElementById("p").textContent = js_vars.p;
            document.getElementById("pR").textContent = js_vars.pR;

            table_display(js_vars.my_id);
            calculation_display(js_vars.my_id);

            document.getElementById("task_number").textContent = js_vars.task_number;
            document.getElementById("task_number_1").textContent = js_vars.task_number;
            document.getElementById("task_number_2").textContent = js_vars.task_number;
            document.getElementById("task_number_3").textContent = js_vars.task_number;
            document.getElementById("score").textContent = js_vars.total_score.toFixed(2);
            if (js_vars.computer_choice == "left") {
                document.getElementById("choice").textContent = "左边箱子";
            }
            else {
                document.getElementById("choice").textContent = "右边箱子";
            }
        }
        main();
    </script>

<style>
    #figure_container {
        display: flex; 
        gap: 5%;
        position: absolute;
        top: 25%;
        left: 50%;
    }
    #figure_container figure{
        align-items: center;
    }
    figcaption {
      font-size: 8px;
    }  
    canvas {
        border: 1px solid black;
    }
    #ReportTable td { /* Add border styling to the table cells */
        border: 1px solid black;
        padding: 5px;
        width: 20%;
        border-collapse: collapse;
    }
    #ReportTable {
        position: relative;
        left: 5%;
    }
{{ endblock }}