在作答时显示作答提示

Super12138 · Sep 22, 2024 · 63066f3 · 63066f3
1 parent b7b930e
commit 63066f3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/index.css b/src/index.css
@@ -77,7 +77,7 @@ strong {
 }
 
 #controlArea {
-    margin: 5% 2% 26% 2%;
+    margin: 5% 2% 22% 2%;
 }
 
 #loadingTip {
@@ -160,13 +160,20 @@ strong {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 2%;
+    margin-bottom: 10px;
 }
 
 .progress-bar {
     margin-left: 10px;
 }
 
+.tip-card {
+    margin-bottom: 15px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+}
+
 .center {
     text-align: center;
 }

diff --git a/src/test/index.ts b/src/test/index.ts
@@ -1,4 +1,5 @@
 import 'mdui/components/button.js';
+import 'mdui/components/card.js';
 import 'mdui/components/circular-progress.js';
 import 'mdui/components/linear-progress.js';
 import 'mdui/components/radio-group.js';
@@ -12,6 +13,7 @@ import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';
 import '@mdui/icons/arrow-back--outlined.js';
 import '@mdui/icons/arrow-forward--outlined.js';
 import '@mdui/icons/check--outlined.js';
+import '@mdui/icons/tips-and-updates--outlined.js';
 
 import { RadioGroup } from 'mdui/components/radio-group.js';
 import { BasicScoreResult, ButtonType, Criterion, GroupedData, QuestionnaireFile, QuestionResult, Ranges, ScoreResult, Scoring } from '../interfaces';
@@ -108,7 +110,10 @@ document.addEventListener('testPageLoaded', async () => {
             }
 
             document.querySelector<HTMLParagraphElement>('#questionnaireDescription')!.textContent = json.description; // 将问卷描述设置为问卷描述
-            document.querySelector<HTMLElement>('#questionnaireTips')!.textContent = json.answerTips; // 将提示设置为问卷提示
+            document.querySelectorAll<HTMLElement>('#questionnaireTips')!.forEach((element: HTMLElement) => {
+                element.textContent = json.answerTips; // 将提示设置为问卷提示
+            });
+
             for (const link of json.references) { // 将引用内容上屏
                 if (link.includes("http")) { // 判断是不是URL
                     const a: HTMLAnchorElement = document.createElement('a');

diff --git a/test.html b/test.html
@@ -18,6 +18,10 @@ <h5 style="margin: 0 0 20px 0;">参考信息</h5>
     </div>
 
     <div id="testArea">
+        <mdui-card variant="filled" class="tip-card">
+            <mdui-icon-tips-and-updates--outlined style="font-size: 27px; min-width: 30px;"></mdui-icon-tips-and-updates--outlined>
+            <p id="questionnaireTips" style="margin: 0; margin-left: 8px;"></p>
+        </mdui-card>
         <div class="progress-tip">
             <span id="progressText"></span>
             <mdui-linear-progress class="progress-bar"></mdui-linear-progress>
@@ -48,6 +52,6 @@ <h5 style="margin-bottom: 15px;">测试结果</h5>
             </thead>
             <tbody id="resultTbody"></tbody>
         </table>
-        <div id="resultChart"></div>
+        <!-- <div id="resultChart"></div> -->
     </div>
 </div>