Compare commits

..

5 Commits

Author SHA1 Message Date
nopy 950f670f85 6.29 2024-06-29 13:06:28 +08:00
nopy ee1c6935e0 1 2024-06-29 12:52:17 +08:00
nopy 43bf9d2dc7 1 2024-06-29 12:51:26 +08:00
nopy 0d813ceaf9 1 2024-06-29 12:51:21 +08:00
nopy 812e94b48a 1 2024-06-27 13:44:10 +08:00
6 changed files with 388 additions and 187 deletions

View File

@ -1,61 +1,43 @@
/* 导航 */
.nav-test{
width: 100%;
height: 52px;
/* 上面导航 */
.nav-exam{
height: 50px;
width: 1630px;
margin-bottom: 5px;
box-shadow: 1px 1px 6px #d4d4d4;
}
.nav-exam p{
width: 200px;
height: 40px;
font-size: 20px;
background-color: rgb(255, 255, 255);
box-shadow: 3px 2px 2px #d4d4d4;
line-height: 10px;
padding-right: 10px;
float: right;
}
.nav1{
line-height:15px;
font-size: 20px;
margin-left: 100px;
font-weight: 500;
font-family: '微软雅黑';
}
.nav1 p{
font-size: 15px;
margin-top: 15px;
}
.nav1 h1{
font-size: 20px;
margin-top: 15px;
}
.time{
position: absolute;
right: 50px;
top: 8px;
}
/* 主体 */
.body-box{
.body-exam{
display: flex;
align-content: center;
flex-direction: column;
}
/* 左侧 */
.body-left-test{
/* 第二页(实训题)的左边导航 */
.nav-left-exam{
width: 215px;
height: 840px;
height: 1540px;
position: absolute;
box-shadow: 2px 2px 6px #d4d4d4;
}
.body-left-test p{
font-size: 16px;
.nav-left-exam p{
height: 10px;
font-size: 15px;
padding: 0 10px;
margin-top: 6px;
}
.body-left-test ul{
.nav-left-ul1-exam{
width: 175px;
height: 240px;
border-top: 1px solid #7f7f7f;
position: relative;
border-top: 2px solid rgb(212, 212, 212);
}
.body-left-test li{
width: 75px;
.nav-left-ul1-exam li{
width: 65px;
height: 40px;
font-size: 18px;
list-style-type: none;
@ -64,42 +46,77 @@
line-height: 40px;
display: block;
cursor: pointer;
border-bottom: 1px solid #7f7f7f;
/* background-color:aliceblue; */
}
/* 右侧 */
.body-right-test{
width: 1403px;
height: 828px;
margin-top: 10px;
margin-left: 5px;
background-color: #fff;
/* border-bottom: 1px solid #7f7f7f; */
background-color: #f5f5f5;
border-bottom: 2px solid rgb(212, 212, 212);
}
/* 提交按钮 */
#submit{
/* 下拉菜单 */
.dropdown-menu1-exam {
height: auto;
position: absolute;
top: 62px;
left: 0px;
z-index: 1000;
}
.dropdown-menu1-exam li{
background-color: rgb(236, 232, 232);
border-bottom: 2px solid rgb(213, 208, 208);
}
/* 显示下拉菜单 */
.subject-dropdown.open1-exam + .dropdown-menu1-exam {
display: block;
}
.subject-dropdown1-exam span{
position: absolute;
top: 15px;
left: 180px;
}
#choice_box input{
margin-top: 20px;
margin-left: 20px;
/* 题目预览框 */
.countBox-exam{
height: 280px;
padding: 7px;
position: fixed;
right: 0px;
top: 65px;
background-color:#e8f7f0;
box-shadow: 0px 0px 6px #aacbae;
z-index: 1000;
transition: top 0.3s; /* 平滑过渡效果 */
}
#choice_box td{
border-bottom: 2px solid rgb(111, 203, 242);
width: 2000px;
.fixed-count-box-exam {
position: fixed;
top: 0;
right: 0;
width: auto;
z-index: 1000;
}
#comple_box td{
border-bottom: 2px solid rgb(111, 203, 242);
width: 2000px;
.countBox-exam div{
display: flex;
flex-wrap:wrap;
width: 200px;
}
.input_txt{
border: none;
border-bottom: 1px solid black;
font-size: 16px;
font-family: 'heiti';
.countBox-exam td{
width: 40px;
height: 30px;
border: 1px solid black;
text-align: center;
margin-left: 5px;
margin-top: 5px;
cursor: pointer;
}
.countBox-exam tr{
font-size: 18px;
font-weight: 550;
color: #364a38;
}
.answered-exam {
/* 例如,改变题目的背景色 */
width: 40px;
height: 30px;
background-color: rgb(149, 223, 187);
text-align: center;
margin-left: 5px;
margin-top: 5px;
cursor: pointer;
}

View File

@ -1,13 +1,112 @@
import './Exam.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 arrowright from '../img/arrowright.jpg'
import bottom from '../img/bottom.jpg'
import top from '../img/top.jpg'
import axios from 'axios';
import { useEffect, useState } from 'react';
//
function Exam(){
return(
<div></div>
)
function Exam() {
//
const [countdown, setCountdown] = useState(null);
//
useEffect(() => {
let interval = setInterval(() => {
if (countdown !== 0 ) {
setCountdown(countdown - 1);
localStorage.setItem('time',countdown-1)
} else {
clearInterval(interval);
alert('考试时间到!');
}
}, 1000);
return () => clearInterval(interval);
}, [countdown]);
// useEffect(()=>{
// if(countdown<0){
// console.log('c');
// setCountdown(60 * parseInt(TrainData['operateID'][4]))
// localStorage.removeItem('time')
// }
// },[TrainData])
//
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-exam'>
{/* 导航 */}
{/* <h1>{OperationId}</h1> */}
<p>剩余时间{countdown >=0 && formatTime(countdown)}</p>
</div>
<div className='body-exam'>
<div className='nav-left-exam'>
{/* 左边导航 */}
<p>题目</p>
<ul className='nav-left-ul1-exam'>
<li className='subject-dropdown1-exam' onClick={() => setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}>
主观题
{isSubjectDropdownOpen ? <span className='list-img1-exam'><img src={bottom} alt="" width='20px' height='20px'/></span> : <span><img src={top} alt="" width='20px' height='20px'/></span>}
{isSubjectDropdownOpen && (
<ul className='dropdown-menu1-exam'>
<li>判断题</li>
<li>选择题</li>
<li>简答题</li>
{/* 子菜单项 */}
</ul>
)}
</li>
<Link to={`/operation2/1`} style={{color:'#000',textDecoration:'none'}}>
<li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
</Link>
</ul>
{/* 题目预览框 */}
{/* 根据isFixed状态来设置countBox的类 */}
{/* <div className={`countBox ${isFixed ? 'fixed-count-box' : ''}`}>
{TrainData&&<table>
<tr>选择题:</tr>
<div>
{Object.keys(TrainData['operateID'][0]).map((key,index)=>(
<td key={key} className={answeredChoice.includes(index) ? 'answered' : ''}>{index+1}</td>
))}
</div>
<tr>填空题</tr>
<div>
{Object.keys(TrainData['operateID'][1]).map((key,index)=>(
<td key={key} className={answeredComple.includes(index) ? 'answered' : ''}>{index+1}</td>
))}
</div>
<tr>判断题</tr>
<div>
{Object.keys(TrainData['operateID'][2]).map((key,index)=>(
<td key={key} className={answeredJudge.includes(index) ? 'answered' : ''}>{index+1}</td>
))}
</div>
</table>}
</div> */}
</div>
{/* <div className='body-right1-exam'>
</div> */}
</div>
</div>
)
}
export default Exam
export default Exam;

View File

@ -1,6 +1,7 @@
/* 上面导航 */
.nav-operation1{
height: 50px;
width: 99.5%;
width: 1630px;
margin-bottom: 5px;
box-shadow: 1px 1px 6px #d4d4d4;
}
@ -20,17 +21,18 @@
/* 第二页(实训题)的左边导航 */
.nav-left-operation1{
width: 215px;
height: 100%;
height: 1540px;
position: absolute;
box-shadow: 2px 2px 6px #d4d4d4;
}
.nav-left-operation1 p{
font-size: 16px;
height: 10px;
font-size: 15px;
padding: 0 10px;
margin-top: 6px;
}
.nav-left-ul1{
width: 175px;
/* border-top: 1px solid #7f7f7f; */
position: relative;
border-top: 2px solid rgb(212, 212, 212);
}
@ -57,8 +59,8 @@
z-index: 1000;
}
.dropdown-menu1 li{
background-color: rgb(255, 239, 239);
border-bottom: 2px solid rgb(253, 210, 210);
background-color: rgb(236, 232, 232);
border-bottom: 2px solid rgb(213, 208, 208);
}
/* 显示下拉菜单 */
.subject-dropdown.open1 + .dropdown-menu1 {
@ -69,49 +71,25 @@
top: 15px;
left: 180px;
}
/* 第二页(实训题)的右边页面 */
.body-right1{
width: 1415px;
height: 845px;
position: absolute;
top: 64px;
left: 230px;
border-radius: 10px;
background-color: #f7f8fa;
}
/* 前进按钮 */
.btn-back1{
}
.btn-back1 p{
font-size: 20px;
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;
}
.body-right1-comple{
border-collapse: separate;
border-spacing: 10px; /* 设置行和列之间的间距 */
}
.body-right1-comple tr{
background-color: rgb(110, 130, 130);
}
/* 题目预览框 */
.countBox{
margin-top: 10px;
height: 280px;
padding: 7px;
position: fixed;
right: 0px;
top: 65px;
background-color:#e8f7f0;
box-shadow: 0px 0px 6px #aacbae;
z-index: 1000;
transition: top 0.3s; /* 平滑过渡效果 */
}
.fixed-count-box {
position: fixed;
top: 0;
right: 0;
width: auto;
z-index: 1000;
}
.countBox div{
display: flex;
@ -121,21 +99,90 @@
.countBox td{
width: 40px;
height: 30px;
/* background-color: rgb(136, 243, 209); */
border: 1px solid black;
text-align: center;
margin-left: 5px;
margin-top: 5px;
cursor: pointer;
}
.countBox tr{
font-size: 18px;
font-weight: 550;
color: #364a38;
}
.answered {
/* 例如,改变题目的背景色 */
width: 40px;
height: 30px;
background-color: rgb(136, 243, 209);
background-color: rgb(149, 223, 187);
text-align: center;
margin-left: 5px;
margin-top: 5px;
cursor: pointer;
}
}
/* 第二页(实训题)的右边页面 */
.body-right1{
width: 1414px;
height: 1540px;
position: absolute;
top: 64px;
left: 230px;
border-radius: 10px;
background-color: #f7f8fa;
}
.body-right1 p{
width: 80px;
height: 30px;
margin: 0px;
padding-left: 10px;
margin-left: -10px;
font-size: 20px;
color: #273128;
background-image: linear-gradient(#c7e0ca,#a7daa3);
border-radius: 0 10px 10px 0;
}
.body-right1 table{
width: 100%;
border-spacing: 10px;
}
.test-title{
font-size: 17px;
text-indent: 1em;
}
.optionBox{
width: 100%;
height: 160px;
font-size: 16px;
margin-top: 5px;
margin-bottom: 5px;
background-color: rgb(255, 255, 255);
}
.optionBox label{
margin-left: 40px;
line-height: 40px;
}
.body-right1-comple{
border-collapse: separate;
text-indent: initial;
border-spacing: 10px; /* 设置行和列之间的间距 */
}
.body-right1-comple tr{
height: 25px;
background-color: #fff;
}
.test-title1{
font-size: 17px;
}
.input-box{
margin-bottom: 10px;
}
.body-right1-comple span{
margin-left: 30px;
}
/* 前进按钮 */
.btn-back1 p{
font-size: 20px;
margin-left: 5px;
}

View File

@ -216,9 +216,29 @@ function Operation1() {
}
JUD_sum++
}
}
//
const [isFixed,setIsFixed]=useState(false)
//
const handleScroll = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
const fixedThreshold = 100; // 100px
if (scrollTop > fixedThreshold) {
setIsFixed(true);
} else {
setIsFixed(false);
}
};
//
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
@ -244,12 +264,13 @@ function Operation1() {
{/* 子菜单项 */}
</ul>
)}
</li>
</li>
<Link to={`/operation2/1`} style={{color:'#000',textDecoration:'none'}}>
<li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
</Link>
</ul>
<div className='countBox'>
{/* 题目预览框 */}
<div className={`countBox ${isFixed ? 'fixed-count-box' : ''}`}> {/* 根据isFixed状态来设置countBox的类 */}
{TrainData&&<table>
<tr>选择题:</tr>
<div>
@ -273,59 +294,74 @@ function Operation1() {
</div>
</div>
<div className='body-right1'>
{TrainData && (
<table className='body-right1-choice'>
<p>选择题:</p>
<tbody>
{Object.keys(TrainData['operateID'][0]).map((key,index) => (
<tr key={key}>
<tr style={{fontSize:'18px'}}>({index+1}.){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>
</tr>
))}
</tbody>
</table>
)}
{TrainData&&(
<table className='body-right1-comple'>
<tbody>
<p>填空题:</p>
{Object.keys(TrainData['operateID'][1]).map((key)=>(
<tr key={key}>{TrainData['operateID'][1][key][0][1]}
<br />
<span>请填入你的答案:</span>
<input type="text" onChange={handleInputChange} name={key} value={completion_answer[key]||''}/>
</tr>
))}
</tbody>
</table>
)}
{TrainData&&(
{TrainData && (
<table>
<p>选择题</p>
<tbody>
<p>判断题:</p>
{Object.keys(TrainData['operateID'][2]).map((key)=>(
<tr key={key}>{TrainData['operateID'][2][key][0][1]}
<tr>
<label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'true'} onChange={handleJudgeOption} value={true} />T</label>
<label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'false'} onChange={handleJudgeOption} value={false} />F</label>
</tr>
{Object.keys(TrainData['operateID'][0]).map((key,index) => (
<tr key={key}>
<tr className='test-title'>{index+1}.{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>
</tr>
))}
</tbody>
</table>
)}
<button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
<Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
)}
{TrainData&&(
<table className='body-right1-comple'>
<tbody>
<p>填空题</p>
{Object.keys(TrainData['operateID'][1]).map((key,index)=>(
<tr key={key}>
<tr className='test-title1'>{index+1}.{TrainData['operateID'][1][key][0][1]}</tr>
{/* <br /> */}
<div className='input-box'>
<span>请填入你的答案</span>
<input type="text" onChange={handleInputChange} name={key} value={completion_answer[key]||''}/>
</div>
</tr>
))}
</tbody>
</table>
)}
{TrainData&&(
<table>
<tbody>
<p>判断题</p>
{Object.keys(TrainData['operateID'][2]).map((key,index)=>(
<tr key={key}>
<tr>{index+1}.{TrainData['operateID'][2][key][0][1]}</tr>
<tr>
<label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'true'} onChange={handleJudgeOption} value={true} />T</label>
<label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'false'} onChange={handleJudgeOption} value={false} />F</label>
</tr>
</tr>
))}
</tbody>
</table>
)}
<button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
<Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
</div>
</div>
</div>

View File

@ -25,8 +25,10 @@
box-shadow: 2px 2px 6px #d4d4d4;
}
.nav-left-operation2 p{
font-size: 16px;
height: 10px;
font-size: 15px;
padding: 0 10px;
margin-top: 6px;
}
.nav-left-ul2{
width: 175px;

View File

@ -23,8 +23,8 @@ import ClassID from '../TeacherPages/classlistpages/classId';
import ManageTest from '../TeacherPages/TestManage/ManageTest';
import SendTest from '../TeacherPages/TestManage/SendTest';
import Marking from '../TeacherPages/MarkingPages/Marking';
import SendTrain from '../TeacherPages/Trainmanage/SendTrain'
import TrainManage from '../TeacherPages/Trainmanage/Trainmanage'
import SendTrain from '../TeacherPages/TrainManage/SendTrain'
import TrainManage from '../TeacherPages/TrainManage/Trainmanage'
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';