{{ 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>

        <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 tableBody = document.querySelector('#ReportTable tbody'); // Get the table body element
            
            var headrow = document.createElement('tr');
            var t_cell = document.createElement('td');
            t_cell.textContent = "阶段";
            headrow.appendChild(t_cell);
            var fst_cell = document.createElement('td');
            fst_cell.textContent = "一阶预测";
            headrow.appendChild(fst_cell);
            var sec_cell = document.createElement('td');
            sec_cell.textContent = "二阶预测";
            headrow.appendChild(sec_cell);
            var ave_cell = document.createElement('td');
            ave_cell.style = "word-wrap: break-word; width: 60px;";
            ave_cell.textContent = "其他成员一阶预测的平均值";
            headrow.appendChild(ave_cell);
            tableHead.appendChild(headrow);
            
            var cell_name = "";
            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_fst = document.createElement('td'); // Create a new cell element
                cell_name = '#cell_' + j + '_' + my_id; 
                cell_fst.textContent = js_vars.table_content[cell_name].x; // Add content to the cell 
                row.appendChild(cell_fst); // Append the cell to the row

                var cell_sec = document.createElement('td'); // Create a new cell element
                cell_name = '#cell_' + j + '_' + my_id; 
                cell_sec.textContent = js_vars.table_content[cell_name].y; // Add content to the cell 
                row.appendChild(cell_sec); // Append the cell to the row    
                
                var cell_ave = document.createElement('td'); // Create a new cell element
                cell_name = '#aveCell_' + j + '_' + my_id; 
                cell_ave.textContent = js_vars.ave_dict[cell_name]; // Add content to the cell 
                row.appendChild(cell_ave); // Append the cell to the row
                
                tableBody.appendChild(row);
            }
        }

        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 = "{paraAlpha} * {fst_score} + {paraBeta} * [1 - {sec_loss}<sup>2</sup>] = {score_i}."
                cell_name = '#cell_' + i + '_' + my_id; 
                ave_name = '#aveCell_' + i + '_' + my_id; 
                if (js_vars.computer_choice == "left") {
                    scoreFormula = scoreFormula.replace("{fst_score}", "[1 - {fst_loss}<sup>2</sup>]");
                    scoreFormula = scoreFormula.replace("{fst_loss}", "(1 - " + js_vars.table_content[cell_name].x + ")");
                }
                else {//right
                    scoreFormula = scoreFormula.replace("{fst_score}", "(1 - {fst_loss}<sup>2</sup>)");
                    scoreFormula = scoreFormula.replace("{fst_loss}", js_vars.table_content[cell_name].x);
                }

                scoreFormula = scoreFormula.replace("{sec_loss}", "(" + js_vars.table_content[cell_name].y + " - " + js_vars.ave_dict[ave_name] + ")" );
                scoreFormula = scoreFormula.replace("{paraAlpha}", js_vars.paraAlpha);
                scoreFormula = scoreFormula.replace("{paraBeta}", js_vars.paraBeta);
                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 }}