Frontend: Add student score overview container and analysis

DeepChirp · Dec 4, 2023 · bb9e5b3 · bb9e5b3
1 parent 3923149
commit bb9e5b3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/frontend/css/person.css b/frontend/css/person.css
@@ -105,6 +105,7 @@ tbody tr:nth-child(odd) {
     background-color: #ffffff;
 }
 
+#student-score-overview-container,
 #student-score-chart-container,
 #student-score-overview-chart-container {
     display: none;
@@ -117,6 +118,7 @@ tbody tr:nth-child(odd) {
     margin-bottom: 20px;
 }
 
+#overview-container-title,
 #chart-container-title {
     color: #262729;
     font-size: 1.25em;
@@ -129,6 +131,18 @@ tbody tr:nth-child(odd) {
     overflow: hidden;
 }
 
+#student-score-overview-analysis {
+    font-size: 16px;
+    color: #333;
+    line-height: 1.5;
+    margin: 10px 0;
+}
+
+#student-score-overview-analysis span {
+    font-weight: bold;
+    color: #007bff;
+}
+
 .chart-note {
     font-size: 14px;
     color: #666;
@@ -183,4 +197,4 @@ tbody tr:nth-child(odd) {
 
 #worse-div {
     display: none;
-}
+}
diff --git a/frontend/js/person.js b/frontend/js/person.js
@@ -227,6 +227,7 @@ class PersonPage {
             const chartSelectDiv = document.querySelector("#student-score-chart-select-div");
 
             // Show the chart select div
+            document.getElementById('student-score-overview-container').style.display = 'block';
             document.getElementById('student-score-overview-chart-container').style.display = 'block';
             document.getElementById('student-score-chart-container').style.display = 'block';
 
@@ -270,7 +271,7 @@ class PersonPage {
                             "rank": gradeRank / scoresList[subjectId][8]
                         });
                     }
-                    
+
                     if (lastExamId != -1) {
                         let lastClassRank = this.examDetailByPerson[lastExamId][subjectId][1];
                         let lastGradeRank = this.examDetailByPerson[lastExamId][subjectId][2];
@@ -284,7 +285,7 @@ class PersonPage {
                                 "deltaRank": deltaGradeRank / scoresList[subjectId][8]
                             });
                         }
-                        
+
                     }
                     else {
                         classRankTd.textContent = classRank;
@@ -307,7 +308,7 @@ class PersonPage {
                     });
                     chartSelectDiv.appendChild(thisBtn);
                 }
-                
+
             }
             subjectArray.sort(this.subjectCmp);
             deltaSubjectArray.sort(this.deltaSubjectCmp);
@@ -332,7 +333,7 @@ class PersonPage {
                 let worseCount = 0;
                 let betterList = [];
                 let worseList = [];
-                
+
                 for (const deltaSubject of deltaSubjectArray) {
                     if (deltaSubject["deltaRank"] > 0.05) {
                         betterList.push(deltaSubject["name"]);

diff --git a/frontend/person.html b/frontend/person.html
@@ -96,6 +96,21 @@ <h1>个人成绩分析</h1>
                 </table>
             </div>
 
+            <div id="student-score-overview-container">
+                <div id="overview-container-title">
+                    <span>总体评价</span>
+                </div>
+                <div id="student-score-overview-analysis">
+                    本次考试的优势学科为<span id="student-score-overview-analysis-best-subject"></span>，劣势学科为<span
+                        id="student-score-overview-analysis-worst-subject"></span>。
+                    <div id="better-div">
+                        本次<span id="student-score-overview-analysis-better-subject"></span>有进步，请继续保持；
+                    </div>
+                    <div id="worse-div">
+                        本次<span id="student-score-overview-analysis-worse-subject"></span>有退步，请多加留意。
+                    </div>
+                </div>
+            </div>
             <div id="student-score-chart-container">
                 <div id="chart-container-title">
                     <span>各科分数及排名</span>
@@ -111,16 +126,6 @@ <h1>个人成绩分析</h1>
                     <div id="student-score-overview-chart-div"></div>
                     <p class="chart-note">注：数据由班级排名得到，表示超过班级学生的百分比</p>
                 </div>
-                <div id="student-score-overview-analysis">
-                    本次考试的优势学科为<span id="student-score-overview-analysis-best-subject"></span>，劣势学科为<span
-                        id="student-score-overview-analysis-worst-subject"></span>。
-                    <div id="better-div">
-                        本次<span id="student-score-overview-analysis-better-subject"></span>有进步，请继续保持；
-                    </div>
-                    <div id="worse-div">
-                        本次<span id="student-score-overview-analysis-worse-subject"></span>有退步，请多加留意。
-                    </div>
-                </div>
             </div>
         </div>
     </div>