选择题恢复上次选择完成

app-dm/src/pages/ListPages/Training/Operation1.css

@@ -99,3 +99,18 @@
     margin-left: 5px;
 }
 
+.body-right1 table{
+    width: 100%;
+}
+.optionBox{
+    width: 100%;
+    background-color: rgb(110, 130, 130);
+}
+.body-right1 p{
+    margin: 0px;
+    font-size: 20px;
+}
+.optionBox label{
+    margin-left: 10px;
+}
+

app-dm/src/pages/ListPages/Training/Operation1.jsx

@@ -2,21 +2,47 @@ import './Operation1.css'
 import { Terminal } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css"
 import  React,{ MouseEvent, useEffect, useRef, useState } from "react";
+import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import arrow from '../img/arrow.jpg'
 import bottom from '../img/bottom.jpg'
 import top from '../img/top.jpg'
+import axios from 'axios';
 
 function Operation1() {
+    const click=()=>{
+        console.log(choice_answer);
+    }
+    const clear=()=>{
+        setchoice_answer({})
+    }
 
+    const { operateID } = useParams();
+
+    //获取试卷
+    const [TrainData,setTrainData]=useState()
+    const TrainDataFunc=async()=>{
+        try{
+            const TrainDataSrc=await axios.post('/api/student/TrainData',{
+                operateID
+            })
+            const returnData=TrainDataSrc.data
+            setTrainData(returnData)
+        }catch{
+            alert('TrainDataFunc出错')
+        }
+    }
+
+    useEffect(()=>{
+        TrainDataFunc()
+    },[])
     //倒计时
-    // const { OperationId } = useParams();
     const [test_data, setTestData] = useState('');
     const [countdown, setCountdown] = useState(0);
 
     // 倒计时初始化
     useEffect(() => {
-    const examDuration = 60 * 60; // 假设考试时长为1小时
+    const examDuration = 60 * 90; // 假设考试时长为1小时
     setCountdown(examDuration);
     }, []);
 
@@ -44,6 +70,33 @@ function Operation1() {
     // 下拉菜单
     const [isSubjectDropdownOpen, setIsSubjectDropdownOpen] = useState(false);
 
+    //创建答案字典，将用户填入的答案添加到答案字典
+    const [choice_answer,setchoice_answer]=useState({})
+    const [completion_answer,setcompletion_answer]=useState({})
+    const [judge_answer,setjudge_answer]=useState({})
+
+    //给选择题添加事件监听器
+    const handleOptionChange = (event) => {
+        const selectedValue = event.target.value;
+        const key = parseInt(event.target.name.replace('group', ''));
+        const updatedChoiceAnswer = { ...choice_answer, [key]: selectedValue };
+        setchoice_answer(updatedChoiceAnswer);
+        
+      };
+    
+      //保存答案到 localStorage
+      const saveAnswers = () => {
+          localStorage.setItem('choice_answers', JSON.stringify(choice_answer));
+      };
+  
+      // 在组件加载时从 localStorage 中恢复答案
+      useEffect(() => {
+          const storedAnswers = localStorage.getItem('choice_answers');
+          if (storedAnswers) {
+              const parsedAnswers = JSON.parse(storedAnswers);
+              setchoice_answer(parsedAnswers);
+          }
+      }, []);
   return (
     <div>
         <div className='nav-operation1'>
@@ -74,9 +127,32 @@ function Operation1() {
                 </ul>
             </div>
             <div className='body-right1'>
-                第一页（主观题）的右边页面
+            {TrainData && (
+            <table>
+                <p>选择题:</p>
+                <tbody> 
+                    {Object.keys(TrainData['operateID'][0]).map((key) => (
+                        <tr key={key}>
+                            <tr>{TrainData['operateID'][0][key][0][1]}</tr>
+                            <div className='optionBox'>
+                                <label><input type="radio" value={TrainData['operateID'][0][key][0][2]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][2]} onChange={handleOptionChange} name={`group${key}`}/><span>A:{TrainData['operateID'][0][key][0][2]}</span></label>
+                                <br />
+                                <label><input type="radio" value={TrainData['operateID'][0][key][0][3]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][3]} onChange={handleOptionChange} name={`group${key}`}/><span>B:{TrainData['operateID'][0][key][0][3]}</span></label>
+                                <br />
+                                <label><input type="radio" value={TrainData['operateID'][0][key][0][4]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][4]} onChange={handleOptionChange} name={`group${key}`}/><span>C:{TrainData['operateID'][0][key][0][4]}</span></label>
+                                <br />
+                                <label><input type="radio" value={TrainData['operateID'][0][key][0][5]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][5]} onChange={handleOptionChange} name={`group${key}`}/><span>D:{TrainData['operateID'][0][key][0][5]}</span></label>
                             </div>
-            <Link className='btn-back1' to={`/operation2/1`} style={{color:'#000',textDecoration:'none'}}>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        )}
+            
+
+                <button onClick={click}>测试</button><button onClick={clear}>清除测试</button>
+            </div>
+            <Link className='btn-back1' to={`/operation2/${operateID}`} style={{color:'#000',textDecoration:'none'}} onClick={saveAnswers}>
                 <img src={arrow} alt="" width='40px' height='40px' />
                 <p>下一页</p>
             </Link>

app-dm/src/pages/ListPages/Training/Operation2.jsx

@@ -2,6 +2,7 @@ import './Operation2.css'
 import { Terminal } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css"
 import  React,{ MouseEvent, useEffect, useRef, useState } from "react";
+import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import arrow from '../img/arrow.jpg'
 import arrow1 from '../img/left.jpg'
@@ -9,6 +10,7 @@ import bottom from '../img/bottom.jpg'
 import top from '../img/top.jpg'
 
 function Operation2() {
+    const { operateID } = useParams();
     //终端
     const terminalObj = useRef(null);
     let sock = null;
@@ -122,7 +124,7 @@ function Operation2() {
                 第二页（实训题）的右边页面
                 <div style={{width: "1430px",position:'absolute',right:'0'}} ref={terminalObj} onContextMenu={pasteContent}></div>
             </div>
-            <Link className='btn-back2' to='/operation1/实训一：数据库的安装' style={{color:'#000',textDecoration:'none'}}>
+            <Link className='btn-back2' to={`/operation1/${operateID}`} style={{color:'#000',textDecoration:'none'}}>
                 <p>上一页</p>
                 <img src={arrow1} alt="" width='40px' height='40px' />
             </Link>

python/app.py

@@ -134,6 +134,13 @@ def FetchTrainTitle():
     return jsonify({'title': title})
 
 
+@app.route('/api/student/TrainData',methods=['POST'])
+def TrainData():
+    examID=request.json['operateID']
+    result=FetchTrainTestFunc(examID)
+    return result
+
+
 
 # 以下为教师功能—————————————————————————————————————————————————————————————————————
 @app.route('/api/teacher/return_question', methods=['POST'])

python/student_func.py

@@ -221,5 +221,56 @@ def FetchTrainTitleFunc(ID):
 
 
 
+def FetchTrainTestFunc(operateID):
+    cursor = db.cursor()
+    cursor.execute("SELECT * FROM TRAINTEST WHERE ID=?",(operateID))
+    TrainID=cursor.fetchall()[0]
+    #获取题目
+    CHOICEID=json.loads(TrainID[0])
+    COMPLEID=json.loads(TrainID[1])
+    JUDGEID=json.loads(TrainID[2])
+    Train=json.loads(TrainID[11])
+
+    CHOICELIST=[]
+    COMPLELIST=[]
+    JUDGELIST=[]
+
+    CHOICE=[str(x) for x in CHOICEID]
+    COMPLE=[str(x) for x in COMPLEID]
+    JUDGE=[str(x) for x in JUDGEID]
+
+    for i in CHOICE:
+        cursor.execute('SELECT * FROM CHOICE_QUESTION_BANK WHERE ID=(?)',(i))
+        CHOICELIST.append(cursor.fetchall())
+
+    for i in COMPLE:
+        cursor.execute('SELECT * FROM COMPLETION_QUESTION_BANK WHERE ID=(?)',(i))
+        COMPLELIST.append(cursor.fetchall())
+
+    for i in JUDGE:
+        cursor.execute('SELECT * FROM T_OR_F_QUESTION_BANK WHERE ID=(?)',(i))
+        JUDGELIST.append(cursor.fetchall())
+
+    HOUR=TrainID[3]
+    MIN=TrainID[4]
+    if int(HOUR)==0:
+        time=int(MIN)
+    elif int(MIN)==0:
+        time=int(HOUR)*60
+    else:
+        time=int(HOUR)*60+int(MIN)
+
+
+    dic={'operateID':[CHOICELIST,COMPLELIST,JUDGELIST,Train,time]}
+
+    return dic
+
+
+
+
+# FetchTrainTestFunc('3')
+
+
+