Compare commits
4 Commits
f13582ce03
...
231606adff
Author | SHA1 | Date |
---|---|---|
nopy | 231606adff | |
nopy | b94b8f52b9 | |
nopy | 2510e9d8c8 | |
nopy | eab8154b0e |
|
@ -0,0 +1,95 @@
|
||||||
|
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 arrowleft from '../img/arrowleft.jpg'
|
||||||
|
import arrowright from '../img/arrowright.jpg'
|
||||||
|
import bottom from '../img/bottom.jpg'
|
||||||
|
import top from '../img/top.jpg'
|
||||||
|
|
||||||
|
function Operation3() {
|
||||||
|
const { operateID } = useParams();
|
||||||
|
|
||||||
|
//倒计时
|
||||||
|
// const { OperationId } = useParams();
|
||||||
|
const [test_data, setTestData] = useState('');
|
||||||
|
const [countdown, setCountdown] = useState(0);
|
||||||
|
|
||||||
|
// 倒计时初始化
|
||||||
|
useEffect(() => {
|
||||||
|
const examDuration = 60 * 60; // 假设考试时长为1小时
|
||||||
|
setCountdown(examDuration);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 倒计时更新
|
||||||
|
useEffect(() => {
|
||||||
|
let interval = setInterval(() => {
|
||||||
|
if (countdown > 0) {
|
||||||
|
setCountdown(countdown - 1);
|
||||||
|
} else {
|
||||||
|
clearInterval(interval);
|
||||||
|
alert('考试时间到!');
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [countdown]);
|
||||||
|
|
||||||
|
// 转换秒数为时分秒格式
|
||||||
|
const formatTime = (seconds) => {
|
||||||
|
const hours = Math.floor(seconds / 3600);
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
const secs = seconds % 60;
|
||||||
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下拉菜单
|
||||||
|
const [isSubjectDropdownOpen, setIsSubjectDropdownOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className='nav-operation2'>
|
||||||
|
{/* 导航 */}
|
||||||
|
{/* <h1>{OperationId}</h1> */}
|
||||||
|
<p>剩余时间:{formatTime(countdown)}</p>
|
||||||
|
</div>
|
||||||
|
<div className='body-operation2'>
|
||||||
|
<div className='nav-left-operation2'>
|
||||||
|
{/* 左边导航 */}
|
||||||
|
<p>题目</p>
|
||||||
|
<ul className='nav-left-ul2'>
|
||||||
|
<Link to='/operation1/实训一:数据库的安装' style={{color:'#000',textDecoration:'none'}}>
|
||||||
|
<li className='subject-dropdown2' onClick={() => setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}>
|
||||||
|
主观题
|
||||||
|
{isSubjectDropdownOpen ? <span className='list-img2'><img src={bottom} alt="" width='20px' height='20px'/></span> : <span><img src={top} alt="" width='20px' height='20px'/></span>}
|
||||||
|
{isSubjectDropdownOpen && (
|
||||||
|
<ul className='dropdown-menu2'>
|
||||||
|
<li>判断题</li>
|
||||||
|
<li>选择题</li>
|
||||||
|
<li>简答题</li>
|
||||||
|
{/* 子菜单项 */}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
</Link>
|
||||||
|
<li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className='body-right2'>
|
||||||
|
第三页(实训题:)的右边页面
|
||||||
|
</div>
|
||||||
|
<Link className='btn-back2' to={`/operation1/${operateID}`} style={{color:'#000',textDecoration:'none'}}>
|
||||||
|
<p>上一页</p>
|
||||||
|
<img src={arrowleft} alt="" width='40px' height='40px' />
|
||||||
|
</Link>
|
||||||
|
<Link className='btn-out2' to='/train' style={{color:'#000',textDecoration:'none'}}>
|
||||||
|
<img src={arrowright} alt="" width='40px' height='40px' />
|
||||||
|
<p>完成</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Operation3;
|
|
@ -16,6 +16,7 @@ import AnalysePage from '../pages/ListPages/Analyse/AnalysePages';
|
||||||
import Exam from '../pages/ListPages/Subject/Exam';
|
import Exam from '../pages/ListPages/Subject/Exam';
|
||||||
import Operation1 from '../pages/ListPages/Training/Operation1';
|
import Operation1 from '../pages/ListPages/Training/Operation1';
|
||||||
import Operation2 from '../pages/ListPages/Training/Operation2';
|
import Operation2 from '../pages/ListPages/Training/Operation2';
|
||||||
|
import Operation3 from '../pages/ListPages/Training/Operation3';
|
||||||
|
|
||||||
// 教师页面
|
// 教师页面
|
||||||
import TeacherPage from '../TeacherPages/TeacherPage';
|
import TeacherPage from '../TeacherPages/TeacherPage';
|
||||||
|
@ -23,8 +24,8 @@ import ClassID from '../TeacherPages/classlistpages/classId';
|
||||||
import ManageTest from '../TeacherPages/TestManage/ManageTest';
|
import ManageTest from '../TeacherPages/TestManage/ManageTest';
|
||||||
import SendTest from '../TeacherPages/TestManage/SendTest';
|
import SendTest from '../TeacherPages/TestManage/SendTest';
|
||||||
import Marking from '../TeacherPages/MarkingPages/Marking';
|
import Marking from '../TeacherPages/MarkingPages/Marking';
|
||||||
import SendTrain from '../TeacherPages/Trainmanage/SendTrain';
|
import SendTrain from '../TeacherPages/TrainManage/SendTrain';
|
||||||
import TrainManage from '../TeacherPages/Trainmanage/Trainmanage';
|
import TrainManage from '../TeacherPages/TrainManage/Trainmanage';
|
||||||
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
|
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
|
||||||
import List_pods from '../TeacherPages/list_pods/list_pods';
|
import List_pods from '../TeacherPages/list_pods/list_pods';
|
||||||
|
|
||||||
|
@ -75,8 +76,9 @@ function App() {
|
||||||
<Route path="exam/:examId" element={<Exam />} />{/* 练习-考试页面 */}
|
<Route path="exam/:examId" element={<Exam />} />{/* 练习-考试页面 */}
|
||||||
<Route path='/teacher/sendtest' element={<SendTest />}/> {/* 考试管理-发布试卷 */}
|
<Route path='/teacher/sendtest' element={<SendTest />}/> {/* 考试管理-发布试卷 */}
|
||||||
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
|
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
|
||||||
<Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1 */}
|
<Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1:理论 */}
|
||||||
<Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2 */}
|
<Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2:数据库 */}
|
||||||
|
<Route path='operation3/:operateID' element={<Operation3/>}/> {/* 实训页面3:web前端 */}
|
||||||
<Route path='teacher/list_pods' element={<List_pods/>}/>
|
<Route path='teacher/list_pods' element={<List_pods/>}/>
|
||||||
<Route path='/refresh' element={<Refresh/>}/>
|
<Route path='/refresh' element={<Refresh/>}/>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue