2312072104
/
dm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: 2312072104:aa49c5dd8f4fa10c70cb87840b597a8f3e20fec4
Branches Tags
2312072104:master
...
compare: 2312072104:5a96dd1c151e6a23579dcf8433c99086115227f3
Branches Tags
2312072104:master

3 Commits
aa49c5dd8f ... 5a96dd1c15

Author SHA1 Message Date
nopy 5a96dd1c15 1 2024-06-25 22:55:50 +08:00
nopy 6907b6de7e 1 2024-06-25 22:47:36 +08:00
nopy 564ab7e4fd 6.25 2024-06-25 22:45:23 +08:00
18 changed files with 1317 additions and 1366 deletions
Show Stats Expand all files Collapse all files

2
app-dm/src/TeacherPages/MarkingPages/Marking.jsx
View File

@ -26,7 +26,7 @@ function Marking(){
{class:'课程2:web前端开发与数据库的结合',time:"关闭时间:2024-4-16 11.46",ImgSrc:Test},
{class:'课程2:web前端开发与数据库的结合',time:"关闭时间:2024-4-16 11.46",ImgSrc:Test},
].map((item) =>
<Link style={{color:'#000',textDecoration:'none'}}>
<Link style={{color:'#000',textDecoration:'none'}} to={'studentlink'}>
<li key={item.class}>
<img src={item.ImgSrc} alt="" width='35px' height='35px'/>
<p>

10
app-dm/src/TeacherPages/MarkingPages/StudentLink.css Normal file
View File

@ -0,0 +1,10 @@
.body-right-studentlink{
width: 1420px;
height: 830px;
position: absolute;
top: 72px;
left: 220px;
border-radius: 10px;
float: right;
background-color: #f7f8fa;
}

28
app-dm/src/TeacherPages/MarkingPages/StudentLink.jsx Normal file
View File

@ -0,0 +1,28 @@
import './StudentLink.css'
function StudentLink(){
return(
<div className='body-right-studentlink'>
<table>
<thead>
<tr>
<th>学生</th>
<th>链接</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
</tbody>
</table>
</div>
)
}
export default StudentLink

74
app-dm/src/TeacherPages/SendTest/trainmanage.css
View File

@ -1,74 +0,0 @@
.body-trainmanage{
width: 1420px;
height: 830px;
position: absolute;
top: 72px;
left: 220px;
border-radius: 10px;
float: right;
background-color: #f7f8fa;
}
.body-trainmanage p{
font-size: 20px;
position: absolute;
left: 50px;
}
.line{
width: 250px;
height: 2px;
position: absolute;
top: 60px;
background-image: linear-gradient(120deg,#ffffff,rgb(223, 223, 223),#fff);
}
.ul1-trainmanage{
width: 650px;
height: 200px;
position: absolute;
top: 50px;
left: 10px;
}
.ul2-trainmanage{
width: 650px;
height: 200px;
position: absolute;
top: 50px;
left: 700px;
}
.train-list-trainmanage li{
width: 650px;
height: 70px;
list-style-type: none;
margin-top: 10px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 2px 2px 2px #d8d9d9;
cursor: pointer;
}
.train-list-trainmanage span {
font-size: 20px;
}
.train-list-trainmanage p{
font-size: 15px;
margin-left: 460px;
margin-top: -40px;
}
.train-list-trainmanage li::before {
content: "▶";
color: rgb(132, 213, 209);
padding-right: 20px;
line-height: 65px;
padding-left: 15px;
font-size: 20px;
display: inline-block;
}
.sendtestpage{
padding: 20px 30px;
font-size: 20px;
text-decoration: none;
color: #000;
position: absolute;
bottom: 50px;
right: 100px;
background-color: rgb(186, 237, 237);
}

44
app-dm/src/TeacherPages/SendTest/trainmanage.jsx
View File

@ -1,44 +0,0 @@
import './trainmanage.css'
import { Link } from 'react-router-dom';
// import React, { useEffect, useState } from 'react';
// import axios from 'axios';
function TrainManage(){
const teacher_ID=localStorage.getItem('islogin')
if(teacher_ID==null){
alert('登录过期，请重新登录')
window.location.href='http://36.138.114.105:30294/'
}
return(
<div className='body-trainmanage'>
<p>已批改试卷</p>
<div className='line'></div>
<div className='train-list-trainmanage'>
<ul className='ul1-trainmanage'>
<li>
<span>111</span>
<p>关闭时间：2024-11-5</p>
</li>
<li>
<span>333</span>
<p>关闭时间：2024-11-5</p>
</li>
</ul>
<ul className='ul2-trainmanage'>
<li>
<span>222</span>
<p>关闭时间：2024-11-5</p>
</li>
<li>
<span>444</span>
<p>关闭时间：2024-11-5</p>
</li>
</ul>
<Link to='/teacher/sendtest' className='sendtestpage'>前往发布试卷</Link>
</div>
</div>
)
}
export default TrainManage

230
app-dm/src/TeacherPages/teachermanagetest/ManageTest.css → app-dm/src/TeacherPages/TestManage/ManageTest.css
View File

@ -1,116 +1,116 @@
/* 页面右边 */
.body-right-manage{
width: 1420px;
height: 820px;
position: absolute;
top: 72px;
left: 220px;
border-radius: 10px;
float: right;
background-color: #f7f8fa;
}
#view_history{
margin-left: 100px;
width: 1200px;
height: 350px;
background-color: aqua;
margin-top: 100px;
}
#view_history_nav{
border-bottom: 1px solid black;
width: 850px;
text-align: center;
}
.view_history_content{
width: 850px;
text-align: center;
}
#class_portrait{
position: absolute;
width: 330px;
height: 300px;
margin-left: 860px;
margin-top: 10px;
background-color: rgb(112, 80, 227);
}
#view_history_box{
overflow-y: scroll;
overflow-x: hidden;
height: 550px;
width: 850px;
background-color: antiquewhite;
}
#class_list{
position: absolute;
margin-left: 975px;
margin-top: -20px;
}
#class_list select{
font-size: 20px;
border: none;
}
#body_bottom{
height: 330px;
width: 850px;
border: 1px solid black;
margin-left: 100px;
margin-top: 20px;
}
#sendtest_btn{
font-size: 30px;
margin-left: 30px;
margin-top: 100px;
}
#body_bottom_right{
width: 350px;
height: 220px;
background-color: darkolivegreen;
position: absolute;
margin-left: 850px;
margin-top:-220px;
}
#view_history_table td{
border-bottom: 1px solid black;
}
#view_history_table tr{
cursor: pointer;
}
#detailed{
margin-left: 390px;
margin-top: 180px;
width: 600px;
height: 400px;
border: 1px solid black;
position: absolute;
background-color: rgb(175, 25, 234);
z-index: 2;
}
#splitter{
width: 590;
border-bottom: 1px solid black;
text-align: center;
}
#return{
position: absolute;
margin-left: 230px;
font-size: 20px;
margin-top: -10px;
cursor: pointer;
}
#detailed span{
text-align: center;
}
#detailed_box_tr{
width: 600px;
text-align: center;
}
#detailed_box{
height: 270px;
width: 600px;
overflow-x: hidden;
overflow-y: scroll;
margin-top: -10px;
margin-left: -3px;
/* 页面右边 */
.body-right-manage{
width: 1420px;
height: 820px;
position: absolute;
top: 72px;
left: 220px;
border-radius: 10px;
float: right;
background-color: #f7f8fa;
}
#view_history{
margin-left: 100px;
width: 1200px;
height: 350px;
background-color: aqua;
margin-top: 100px;
}
#view_history_nav{
border-bottom: 1px solid black;
width: 850px;
text-align: center;
}
.view_history_content{
width: 850px;
text-align: center;
}
#class_portrait{
position: absolute;
width: 330px;
height: 300px;
margin-left: 860px;
margin-top: 10px;
background-color: rgb(112, 80, 227);
}
#view_history_box{
overflow-y: scroll;
overflow-x: hidden;
height: 550px;
width: 850px;
background-color: antiquewhite;
}
#class_list{
position: absolute;
margin-left: 975px;
margin-top: -20px;
}
#class_list select{
font-size: 20px;
border: none;
}
#body_bottom{
height: 330px;
width: 850px;
border: 1px solid black;
margin-left: 100px;
margin-top: 20px;
}
#sendtest_btn{
font-size: 30px;
margin-left: 30px;
margin-top: 100px;
}
#body_bottom_right{
width: 350px;
height: 220px;
background-color: darkolivegreen;
position: absolute;
margin-left: 850px;
margin-top:-220px;
}
#view_history_table td{
border-bottom: 1px solid black;
}
#view_history_table tr{
cursor: pointer;
}
#detailed{
margin-left: 390px;
margin-top: 180px;
width: 600px;
height: 400px;
border: 1px solid black;
position: absolute;
background-color: rgb(175, 25, 234);
z-index: 2;
}
#splitter{
width: 590;
border-bottom: 1px solid black;
text-align: center;
}
#return{
position: absolute;
margin-left: 230px;
font-size: 20px;
margin-top: -10px;
cursor: pointer;
}
#detailed span{
text-align: center;
}
#detailed_box_tr{
width: 600px;
text-align: center;
}
#detailed_box{
height: 270px;
width: 600px;
overflow-x: hidden;
overflow-y: scroll;
margin-top: -10px;
margin-left: -3px;
}

378
app-dm/src/TeacherPages/teachermanagetest/ManageTest.jsx → app-dm/src/TeacherPages/TestManage/ManageTest.jsx
View File

@ -1,191 +1,187 @@
import { Link } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
// import { useParams } from 'react-router-dom';
import './ManageTest.css'
function TeacherPage() {
const teacher_ID=localStorage.getItem('islogin')
if(teacher_ID==null){
alert('登录过期，请重新登录')
window.location.href='http://36.138.114.105:30294/'
}
const [classData, setClassData] = useState({});
const [classtest,setClassTest]=useState()
const [defaultclass,setDefaultClass]=useState()
const [selectedValue, setSelectedValue] = useState('');
const [isChecked,setisChecked]=useState(false)
const [isDetailedBoxVisible, setIsDetailedBoxVisible] = useState(false);
const select_class = async () => {
try {
const select_class_src = await axios.post('/api/teacher/select_class',{
teacher_ID
});
setClassData(select_class_src.data['Class']);
setDefaultClass(select_class_src.data['default'])
const list = Object.keys(select_class_src.data['Class'])
setSelectedValue(list[0])
setisChecked(true)
} catch (error) {
alert('获取所有班级出错')
}
};
useEffect(() => {
if(!isChecked){
select_class();
}
}, []);
//选中当前班级
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
useEffect(()=>{
const change_class = async () => {
try {
const change_class_src = await axios.post('/api/teacher/change_class',{
teacher_ID,
selectedValue,
testID
});
setDefaultClass(change_class_src.data['default'])
} catch (error) {
alert('获取默认班级出错')
}
}
if(isChecked){
change_class()
}
// 更换列表
},[selectedValue])
const [testID,settestID]=useState('')
const click=()=>{
console.log(isDetailedBoxVisible);
console.log(detaileddata);
}
// 点击记录时的详细信息
const [detaileddata,setdetaileddata]=useState('')
const click_detailed= async()=>{
//获取详细信息
try{
const detaileddata_src=await axios.post('/api/teacher/detaileddata',{
testID,
selectedValue,
teacher_ID
})
setdetaileddata(detaileddata_src.data['data'])
}catch(error){
alert('获取小框信息出错')
}
}
useEffect(()=>{
click_detailed()
},[testID])
const return_detailed=()=>{
setIsDetailedBoxVisible(false)
}
//获取随机进退步
const [numbers] = useState([...Array(61).keys()].map(num => num - 30));
const getRandomNumber = () => {
const randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
};
return (
<div className='body-right-manage'>
{/* 详细信息 */}
{isDetailedBoxVisible && <div id='detailed'>
<p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p>
<p style={{display:'flex'}}>
<span style={{ flex: 1}}>详情</span>
<span style={{ flex: 1}}>分数</span>
<span style={{ flex: 1}}>与上次相比</span>
<span style={{ flex: 1}}>总评</span>
</p>
<div>
<p>--------------------------------------------------------------------------------------</p>
{detaileddata&&<table>
<tbody>
<div id='detailed_box'>
{Object.keys(detaileddata).map((key)=>(
<tr style={{display:'flex'}} id='detailed_box_tr'>
<td style={{ flex: 1 }}>{detaileddata[key][6]}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] ? detaileddata[key][5] : "未完成"}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] ? `${getRandomNumber()}%` : "未完成"}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] && parseInt(detaileddata[key][5]) >= 60 ? "及格" : (detaileddata[key][5] ? "不及格" : "未完成")}</td>
</tr>
))}
</div>
</tbody>
</table>}
</div>
</div>}
{/* 总体信息 */}
<div id='view_history' style={{display:'block'}}>
<table>
<tbody>
<tr id='view_history_nav' style={{ display: 'flex', justifyContent: 'space-between' }}>
<td style={{ flex: 1 }}>试卷ID</td>
<td style={{ flex: 1 }}>发布时间</td>
<td style={{ flex: 1 }}>截止时间</td>
<td style={{ flex: 1 }}>提交人数</td>
<td style={{ flex: 1 }}>平均分</td>
</tr>
</tbody>
</table>
<div id='class_list'>
<select name="class_id" onChange={handleChange}>
{Object.keys(classData).map((key)=>(
<option key={key} value={key}>{key}</option>
))}
</select>
</div>
<div id='class_portrait'>
{/* 班级画像 */}
</div>
<div id='view_history_box'>
{ defaultclass &&<table id='view_history_table'>
<tbody>
{Object.keys(defaultclass).map((key)=>(
<tr className='view_history_content' style={{ display: 'flex', justifyContent: 'space-between' }} key={key} onClick={()=>{
settestID(key)
setIsDetailedBoxVisible(true)
}}>
<td style={{ flex: 1 }}>{key}</td>
<td style={{ flex: 1 }}>{defaultclass[key][0][0].slice(0, 10)}</td>
<td style={{ flex: 1 }}>{defaultclass[key][0][1].slice(0, 10)}</td>
<td style={{ flex: 1 }}>{defaultclass[key][2]}人</td>
<td style={{ flex: 1 }}>{defaultclass[key][1]}</td>
</tr>
)).reverse()}
</tbody>
</table>}
</div>
<div id='body_bottom_right'>
<Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试➡</button></Link>
</div>
</div>
<button onClick={click}>测试</button>
</div>
);
}
export default TeacherPage;
import { Link } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
// import { useParams } from 'react-router-dom';
import './ManageTest.css'
function TeacherPage() {
const teacher_ID = localStorage.getItem('islogin')
const [classData, setClassData] = useState({});
const [classtest,setClassTest]=useState()
const [defaultclass,setDefaultClass]=useState()
const [selectedValue, setSelectedValue] = useState('');
const [isChecked,setisChecked]=useState(false)
const [isDetailedBoxVisible, setIsDetailedBoxVisible] = useState(false);
const select_class = async () => {
try {
const select_class_src = await axios.post('/api/teacher/select_class',{
teacher_ID
});
setClassData(select_class_src.data['Class']);
setDefaultClass(select_class_src.data['default'])
const list = Object.keys(select_class_src.data['Class'])
setSelectedValue(list[0])
setisChecked(true)
} catch (error) {
alert('获取所有班级出错')
}
};
useEffect(() => {
if(!isChecked){
select_class();
}
}, []);
//选中当前班级
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
useEffect(()=>{
const change_class = async () => {
try {
const change_class_src = await axios.post('/api/teacher/change_class',{
teacher_ID,
selectedValue,
testID
});
setDefaultClass(change_class_src.data['default'])
} catch (error) {
alert('获取默认班级出错')
}
}
if(isChecked){
change_class()
}
// 更换列表
},[selectedValue])
const [testID,settestID]=useState('')
const click=()=>{
console.log(isDetailedBoxVisible);
console.log(detaileddata);
}
// 点击记录时的详细信息
const [detaileddata,setdetaileddata]=useState('')
const click_detailed= async()=>{
//获取详细信息
try{
const detaileddata_src=await axios.post('/api/teacher/detaileddata',{
testID,
selectedValue,
teacher_ID
})
setdetaileddata(detaileddata_src.data['data'])
}catch(error){
alert('获取小框信息出错')
}
}
useEffect(()=>{
click_detailed()
},[testID])
const return_detailed=()=>{
setIsDetailedBoxVisible(false)
}
//获取随机进退步
const [numbers] = useState([...Array(61).keys()].map(num => num - 30));
const getRandomNumber = () => {
const randomIndex = Math.floor(Math.random() * numbers.length);
return numbers[randomIndex];
};
return (
<div className='body-right-manage'>
{/* 详细信息 */}
{isDetailedBoxVisible && <div id='detailed'>
<p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p>
<p style={{display:'flex'}}>
<span style={{ flex: 1}}>详情</span>
<span style={{ flex: 1}}>分数</span>
<span style={{ flex: 1}}>与上次相比</span>
<span style={{ flex: 1}}>总评</span>
</p>
<div>
<p>--------------------------------------------------------------------------------------</p>
{detaileddata&&<table>
<tbody>
<div id='detailed_box'>
{Object.keys(detaileddata).map((key)=>(
<tr style={{display:'flex'}} id='detailed_box_tr'>
<td style={{ flex: 1 }}>{detaileddata[key][6]}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] ? detaileddata[key][5] : "未完成"}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] ? `${getRandomNumber()}%` : "未完成"}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] && parseInt(detaileddata[key][5]) >= 60 ? "及格" : (detaileddata[key][5] ? "不及格" : "未完成")}</td>
</tr>
))}
</div>
</tbody>
</table>}
</div>
</div>}
{/* 总体信息 */}
<div id='view_history' style={{display:'block'}}>
<table>
<tbody>
<tr id='view_history_nav' style={{ display: 'flex', justifyContent: 'space-between' }}>
<td style={{ flex: 1 }}>试卷ID</td>
<td style={{ flex: 1 }}>发布时间</td>
<td style={{ flex: 1 }}>截止时间</td>
<td style={{ flex: 1 }}>提交人数</td>
<td style={{ flex: 1 }}>平均分</td>
</tr>
</tbody>
</table>
<div id='class_list'>
<select name="class_id" onChange={handleChange}>
{Object.keys(classData).map((key)=>(
<option key={key} value={key}>{key}</option>
))}
</select>
</div>
<div id='class_portrait'>
{/* 班级画像 */}
</div>
<div id='view_history_box'>
{ defaultclass &&<table id='view_history_table'>
<tbody>
{Object.keys(defaultclass).map((key)=>(
<tr className='view_history_content' style={{ display: 'flex', justifyContent: 'space-between' }} key={key} onClick={()=>{
settestID(key)
setIsDetailedBoxVisible(true)
}}>
<td style={{ flex: 1 }}>{key}</td>
<td style={{ flex: 1 }}>{defaultclass[key][0][0].slice(0, 10)}</td>
<td style={{ flex: 1 }}>{defaultclass[key][0][1].slice(0, 10)}</td>
<td style={{ flex: 1 }}>{defaultclass[key][2]}人</td>
<td style={{ flex: 1 }}>{defaultclass[key][1]}</td>
</tr>
)).reverse()}
</tbody>
</table>}
</div>
<div id='body_bottom_right'>
<Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试➡</button></Link>
</div>
</div>
<button onClick={click}>测试</button>
</div>
);
}
export default TeacherPage;

178
app-dm/src/TeacherPages/SendTest/SendTest.css → app-dm/src/TeacherPages/TestManage/SendTest.css
View File

@ -1,89 +1,89 @@
#body_left{
flex: 20%;
}
#body_right{
border-left: 1px solid black;
height: 100%;
flex:80%
}
.check_box{
margin-left: 800px;
}
.single{
margin-left: 100px;
}
.choice_answer{
display: flex;
width: 800px;
background-color: aqua;
}
.choice_answer span{
flex: 1;
}
.line{
border-bottom: 1px solid black;
}
#body_top{
border-bottom: 1px solid black;
width: 100%;
}
#body_left input {
margin-top: 30px;
margin-left: 30px;
}
#next{
margin-left:1450px;
margin-top: 30px;
}
/* 选择班级界面 */
#background{
width: 400px;
height: 550px;
background-color: rgb(149, 224, 224);
position: absolute;
margin-left: 650px;
margin-top: 150px;
}
#class_ul{
width: 200px;
height: 300px;
margin-left: 80px;
background-color: rgb(198, 155, 238);
overflow: auto;
list-style-type: none;
}
.class_div {
/* 普通状态下的样式 */
width: 130px;
height: 30px;
border: 1px solid #ccc;
cursor: pointer;
background-color: bisque;
margin-top: 10px;
margin-left: 15px;
text-align: center;
}
.selected {
/* 选中状态下的样式 */
background-color: lightblue;
border-color: blue;
}
#send_box{
width: 400px;
height: 550px;
background-color: rgb(149, 224, 224);
position: absolute;
margin-left: 650px;
margin-top: 150px;
}
#body_left{
flex: 20%;
}
#body_right{
border-left: 1px solid black;
height: 100%;
flex:80%
}
.check_box{
margin-left: 800px;
}
.single{
margin-left: 100px;
}
.choice_answer{
display: flex;
width: 800px;
background-color: aqua;
}
.choice_answer span{
flex: 1;
}
.line{
border-bottom: 1px solid black;
}
#body_top{
border-bottom: 1px solid black;
width: 100%;
}
#body_left input {
margin-top: 30px;
margin-left: 30px;
}
#next{
margin-left:1450px;
margin-top: 30px;
}
/* 选择班级界面 */
#background{
width: 400px;
height: 550px;
background-color: rgb(149, 224, 224);
position: absolute;
margin-left: 650px;
margin-top: 150px;
}
#class_ul{
width: 200px;
height: 300px;
margin-left: 80px;
background-color: rgb(198, 155, 238);
overflow: auto;
list-style-type: none;
}
.class_div {
/* 普通状态下的样式 */
width: 130px;
height: 30px;
border: 1px solid #ccc;
cursor: pointer;
background-color: bisque;
margin-top: 10px;
margin-left: 15px;
text-align: center;
}
.selected {
/* 选中状态下的样式 */
background-color: lightblue;
border-color: blue;
}
#send_box{
width: 400px;
height: 550px;
background-color: rgb(149, 224, 224);
position: absolute;
margin-left: 650px;
margin-top: 150px;
}

560
app-dm/src/TeacherPages/SendTest/SendTest.jsx → app-dm/src/TeacherPages/TestManage/SendTest.jsx
View File

@ -1,283 +1,279 @@
import { useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
import './SendTest.css'
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function SendTest(){
// const { key } = useParams();
const teacher_ID=localStorage.getItem('islogin')
if(teacher_ID==null){
alert('登录过期，请重新登录')
window.location.href='http://36.138.114.105:30294/'
}
//获取题目
const [ChoiceQuestion,SetChoiceQuestion]=useState()
const [Completion,SetCompletion]=useState()
const [Judge,SetJudge]=useState()
const subject = async ()=>{
try{
const subject_src=await axios.post('/api/teacher/return_question',{
teacher_ID})
SetChoiceQuestion(subject_src.data['选择'])
SetCompletion(subject_src.data['填空'])
SetJudge(subject_src.data['判断'])
}catch(error){
console.log(error);
}
}
useEffect(()=>{
subject()
},[])
//当选择题目时，自动将题目ID填入题目集当中
const [ChoiceQuestionSet,SetChoiceQuestionSet]=useState([])
const [CompletionQuestionSet,SetCompletionQuestionSet]=useState([])
const [JudgeQuestionSet,SetJudgeQuestionSet]=useState([])
//下一步的操作
const body=document.getElementById('body')
const background=document.getElementById('background')
const send_box=document.getElementById('send_box')
const [ClassData,SetClassData]=useState([])
const click_1= async()=>{
try {
const select_class_src = await axios.post('/api/teacher/select_class', {
teacher_ID
});
background.style.display='block'
body.style.display='none'
send_box.display='none'
SetClassData(select_class_src.data);
} catch (error) {
console.log(error);
}
}
//下下一步操作
const click_2=()=>{
background.style.display='none'
body.style.display='none'
send_box.style.display='block'
}
//上一步的操作
const last_1=()=>{
background.style.display='none'
body.style.display='block'
send_box.display='none'
}
//上上一步操作
const last_2=()=>{
background.style.display='block'
body.style.display='none'
send_box.style.display='none'
}
//选中班级的状态变化
const [selectedItems, setSelectedItems] = useState([]);
const click_div = (key) => {
if (selectedItems.includes(key)) {
setSelectedItems(prevItems => prevItems.filter(item => item !== key));
} else {
setSelectedItems(prevItems => [...prevItems, key]);
}
};
const getClassNames = (key) => {
if (selectedItems.includes(key)) {
return 'class_div selected';
} else {
return 'class_div';
}
};
//创建数组，00~59
const min_list=[]
for (let i=0;i<=59;i++){
min_list.push(i)
}
//0~12
const hour_list=[]
for (let i=0;i<=12;i++){
hour_list.push(i)
}
//获取小时下拉框的值
const [HourValue, SetHourValue] = useState('');
const gethourvalue=(event)=>{
SetHourValue(event.target.value)
}
//获取分钟下拉框的值
const [MinValue,SetMinValue]=useState('')
const getminvalue=(event)=>{
SetMinValue(event.target.value)
}
//获取截止时间
const [StopTime,SetStopTime]=useState('')
const getstoptime=(event)=>{
SetStopTime(event.target.value)
}
// 发布按钮
const release= async()=>{
try{
const release_src=await axios.post('/api/teacher/accept_test',{
teacher_ID,
ChoiceQuestionSet,//选择题
CompletionQuestionSet,//填空题
JudgeQuestionSet,//判断题
selectedItems,//选择发布班级，为列表
HourValue,//小时
MinValue,//分钟
StopTime,//停止时间？天
}
)
alert('发布成功')
window.location.href='http://36.138.114.105:30294/teacher/managetest'
}catch{
alert('发布失败')
}
}
return(
<div id='big_body'>
<div id='background' style={{display:'none'}}>
<p style={{marginLeft:'30px'}}>请选择发布班级</p>
{ ClassData &&<ul style={{marginTop:'70px'}} id='class_ul'>
{Object.keys(ClassData).map((key)=>(
<li key={key}>
<div className={getClassNames(key)} onClick={() => click_div(key)}>
{key}
</div>
</li>
))}
</ul>}
<button style={{marginLeft:'110px'}} onClick={last_1}>上一步</button>
<button style={{marginLeft:'80px'}} onClick={click_2}>下一步</button>
</div>
<div id='send_box' style={{display:'none'}}>
<p>请填写考试时间</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>小时
<select name="" id="" alue={MinValue} onChange={getminvalue}>
{min_list.map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>分钟
<p>请填写截至时间</p>
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
<button onClick={last_2}>上一步</button>
<button onClick={release}>发布</button>
</div>
<div id='body' >
<div id='body_top' style={{display:'flex'}}>
<div id='body_left'>
<input type="checkbox" id='choice'/><span>选择题</span><br />
<input type="checkbox" id='fill'/><span>填空</span><br />
<input type="checkbox" id='judge'/><span>判断</span><br />
</div>
<div id='body_right'>
<div id='choice_box'>
<span style={{color:'red'}}>选择题</span>
{ChoiceQuestion && <table>
<thead>
{Object.keys(ChoiceQuestion).map((key)=>(
<tr className='line' key={key}>
<td className='line'>
<p>问题:{ChoiceQuestion[key][1]}</p>
<p className='choice_answer'>
<span>A:{ChoiceQuestion[key][2]}</span>
<span>B:{ChoiceQuestion[key][3]}</span>
<span>C:{ChoiceQuestion[key][4]}</span>
<span>D:{ChoiceQuestion[key][5]}</span>
</p>
{/* 获取题目ID */}
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//在选择题目集中添加选择题的ID
SetChoiceQuestionSet(items=>([
...items,
ChoiceQuestion[key][7]
]))
}else{
SetChoiceQuestionSet((items)=>
items.filter((item)=>item!==ChoiceQuestion[key][7])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
</thead>
</table>}
</div>
<div id='fill_box'>
<span style={{color:'red'}}>填空题：</span>
{ Completion &&<table>
<thead>
{Object.keys(Completion).map((key)=>(
<tr key={key}>
<td className='line'>
<p>问题:{Completion[key][1]}<input type='text' /></p>
<input type="checkbox" className='check_box' onClick={(event)=>{
if(event.target.checked){
SetCompletionQuestionSet(items=>([
...items,
Completion[key][3]
]))
}else{
SetCompletionQuestionSet((items)=>
items.filter((item)=>item!==Completion[key][3]))
}
}}/><span>是否选择</span>
</td>
</tr>
))}
</thead>
</table>}
</div>
<div id='judge_box'>
<span style={{color:'red'}}>判断题：</span>
{ Judge &&<table>
<thead>
{Object.keys(Judge).map((key)=>(
<tr key={key}>
<td className='line'>
<p>问题:{Judge[key][1]}</p>
<input type="checkbox" className='check_box' onClick={(event)=>{
if(event.target.checked){
SetJudgeQuestionSet(items=>([
...items,
Judge[key][3]
]))
}else{
SetJudgeQuestionSet((items)=>
items.filter((item)=>item!==Judge[key][3]))
}
}}/><span>是否选择</span>
</td>
</tr>
))}
</thead>
</table>}
</div>
</div>
</div>
<div id='body_btm'>
<button id='next' onClick={click_1}>下一步</button>
</div>
</div>
</div>
)
}
import { useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
import './SendTest.css'
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function SendTest(){
// const { key } = useParams();
const teacher_ID=localStorage.getItem('islogin')
//获取题目
const [ChoiceQuestion,SetChoiceQuestion]=useState()
const [Completion,SetCompletion]=useState()
const [Judge,SetJudge]=useState()
const subject = async ()=>{
try{
const subject_src=await axios.post('/api/teacher/return_question',{
teacher_ID})
SetChoiceQuestion(subject_src.data['选择'])
SetCompletion(subject_src.data['填空'])
SetJudge(subject_src.data['判断'])
}catch(error){
console.log(error);
}
}
useEffect(()=>{
subject()
},[])
//当选择题目时，自动将题目ID填入题目集当中
const [ChoiceQuestionSet,SetChoiceQuestionSet]=useState([])
const [CompletionQuestionSet,SetCompletionQuestionSet]=useState([])
const [JudgeQuestionSet,SetJudgeQuestionSet]=useState([])
//下一步的操作
const body=document.getElementById('body')
const background=document.getElementById('background')
const send_box=document.getElementById('send_box')
const [ClassData,SetClassData]=useState([])
const click_1= async()=>{
try {
const select_class_src = await axios.post('/api/teacher/select_class', {
teacher_ID
});
background.style.display='block'
body.style.display='none'
send_box.display='none'
SetClassData(select_class_src.data);
} catch (error) {
console.log(error);
}
}
//下下一步操作
const click_2=()=>{
background.style.display='none'
body.style.display='none'
send_box.style.display='block'
}
//上一步的操作
const last_1=()=>{
background.style.display='none'
body.style.display='block'
send_box.display='none'
}
//上上一步操作
const last_2=()=>{
background.style.display='block'
body.style.display='none'
send_box.style.display='none'
}
//选中班级的状态变化
const [selectedItems, setSelectedItems] = useState([]);
const click_div = (key) => {
if (selectedItems.includes(key)) {
setSelectedItems(prevItems => prevItems.filter(item => item !== key));
} else {
setSelectedItems(prevItems => [...prevItems, key]);
}
};
const getClassNames = (key) => {
if (selectedItems.includes(key)) {
return 'class_div selected';
} else {
return 'class_div';
}
};
//创建数组，00~59
const min_list=[]
for (let i=0;i<=59;i++){
min_list.push(i)
}
//0~12
const hour_list=[]
for (let i=0;i<=12;i++){
hour_list.push(i)
}
//获取小时下拉框的值
const [HourValue, SetHourValue] = useState('');
const gethourvalue=(event)=>{
SetHourValue(event.target.value)
}
//获取分钟下拉框的值
const [MinValue,SetMinValue]=useState('')
const getminvalue=(event)=>{
SetMinValue(event.target.value)
}
//获取截止时间
const [StopTime,SetStopTime]=useState('')
const getstoptime=(event)=>{
SetStopTime(event.target.value)
}
// 发布按钮
const release= async()=>{
try{
const release_src=await axios.post('/api/teacher/accept_test',{
teacher_ID,
ChoiceQuestionSet,//选择题
CompletionQuestionSet,//填空题
JudgeQuestionSet,//判断题
selectedItems,//选择发布班级，为列表
HourValue,//小时
MinValue,//分钟
StopTime,//停止时间？天
}
)
alert('发布成功')
window.location.href='http://36.138.114.105:30294/teacher/managetest'
}catch{
alert('发布失败')
}
}
return(
<div id='big_body'>
<div id='background' style={{display:'none'}}>
<p style={{marginLeft:'30px'}}>请选择发布班级</p>
{ ClassData &&<ul style={{marginTop:'70px'}} id='class_ul'>
{Object.keys(ClassData).map((key)=>(
<li key={key}>
<div className={getClassNames(key)} onClick={() => click_div(key)}>
{key}
</div>
</li>
))}
</ul>}
<button style={{marginLeft:'110px'}} onClick={last_1}>上一步</button>
<button style={{marginLeft:'80px'}} onClick={click_2}>下一步</button>
</div>
<div id='send_box' style={{display:'none'}}>
<p>请填写考试时间</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>小时
<select name="" id="" alue={MinValue} onChange={getminvalue}>
{min_list.map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>分钟
<p>请填写截至时间</p>
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
<button onClick={last_2}>上一步</button>
<button onClick={release}>发布</button>
</div>
<div id='body' >
<div id='body_top' style={{display:'flex'}}>
<div id='body_left'>
<input type="checkbox" id='choice'/><span>选择题</span><br />
<input type="checkbox" id='fill'/><span>填空</span><br />
<input type="checkbox" id='judge'/><span>判断</span><br />
</div>
<div id='body_right'>
<div id='choice_box'>
<span style={{color:'red'}}>选择题</span>
{ChoiceQuestion && <table>
<thead>
{Object.keys(ChoiceQuestion).map((key)=>(
<tr className='line' key={key}>
<td className='line'>
<p>问题:{ChoiceQuestion[key][1]}</p>
<p className='choice_answer'>
<span>A:{ChoiceQuestion[key][2]}</span>
<span>B:{ChoiceQuestion[key][3]}</span>
<span>C:{ChoiceQuestion[key][4]}</span>
<span>D:{ChoiceQuestion[key][5]}</span>
</p>
{/* 获取题目ID */}
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//在选择题目集中添加选择题的ID
SetChoiceQuestionSet(items=>([
...items,
ChoiceQuestion[key][7]
]))
}else{
SetChoiceQuestionSet((items)=>
items.filter((item)=>item!==ChoiceQuestion[key][7])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
</thead>
</table>}
</div>
<div id='fill_box'>
<span style={{color:'red'}}>填空题：</span>
{ Completion &&<table>
<thead>
{Object.keys(Completion).map((key)=>(
<tr key={key}>
<td className='line'>
<p>问题:{Completion[key][1]}<input type='text' /></p>
<input type="checkbox" className='check_box' onClick={(event)=>{
if(event.target.checked){
SetCompletionQuestionSet(items=>([
...items,
Completion[key][3]
]))
}else{
SetCompletionQuestionSet((items)=>
items.filter((item)=>item!==Completion[key][3]))
}
}}/><span>是否选择</span>
</td>
</tr>
))}
</thead>
</table>}
</div>
<div id='judge_box'>
<span style={{color:'red'}}>判断题：</span>
{ Judge &&<table>
<thead>
{Object.keys(Judge).map((key)=>(
<tr key={key}>
<td className='line'>
<p>问题:{Judge[key][1]}</p>
<input type="checkbox" className='check_box' onClick={(event)=>{
if(event.target.checked){
SetJudgeQuestionSet(items=>([
...items,
Judge[key][3]
]))
}else{
SetJudgeQuestionSet((items)=>
items.filter((item)=>item!==Judge[key][3]))
}
}}/><span>是否选择</span>
</td>
</tr>
))}
</thead>
</table>}
</div>
</div>
</div>
<div id='body_btm'>
<button id='next' onClick={click_1}>下一步</button>
</div>
</div>
</div>
)
}
export default SendTest

362
app-dm/src/TeacherPages/SendTrain/SendTrain.css → app-dm/src/TeacherPages/Trainmanage/SendTrain.css
View File

@ -1,182 +1,182 @@
.SendTrain_body{
width: 100%;
display: flex;
}
.SendTrain_body_left{
flex: 20%;
}
.SendTrain_body_right{
flex: 60%;
}
.SendTrain_body_left_ul{
all: unset;
}
.SendTrain_body_left_ul li{
text-align: center;
}
.SendTrain_body_left_ul button{
background-color: rgb(114, 134, 232);
border: none;
width: 100%;
margin-top: 20px;
font-size: 28px;
}
.SendTrain_body_left_ul_div{
background-color: aqua;
font-size: 36px;
margin-top: 43px;
}
.SendTrain_body_right p{
font-size: 32px;
border: 1px solid black;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.SendTrain_body_right table{
width: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
}
.title{
font-size: 26px;
margin-bottom: 0px;
}
.questiontitle{
font-size: 20px;
}
.Trainbox{
background-color: rgb(166, 161, 161);
}
.judgetitle{
font-size: 20px;
background-color: rgb(166, 161, 161);
}
/* 以下为为实训 */
.Train_div{
width: 100%-1px;
height:700px;
border: 1px solid black;
border-top: none;
}
#Train_1{
width: 100%;
height: 350px;
display: flex;
}
.Train_1_left{
flex: 60%;
background-color: beige;
font-size: 20px;
text-align: center;
padding-top: 120px;
}
.Train_1_right{
flex: 40%;
background-color: rgb(111, 200, 241);
}
#Train_2{
width: 100%;
height: 350px;
display: flex;
}
.Train_2_left{
flex: 60%;
background-color: rgb(97, 237, 92);
font-size: 20px;
text-align: center;
padding-top: 120px;
}
.Train_2_right{
flex: 40%;
background-color: rgb(248, 127, 231);
}
.Train_1_right span{
font-size: 20px;
position: absolute;
margin-left: 150px;
margin-top: 140px;
}
.Train_2_right span{
font-size: 20px;
position: absolute;
margin-left: 150px;
margin-top: 140px;
}
/* 按钮 */
#SendTrainBtn{
font-size: 32px;
margin-top: 40px;
margin-bottom: 40px;
margin-left: 830px;
}
/* 右边的内容 */
.right_right{
flex: 20%;
}
.OptionBox{
width: 90%;
height: 500px;
margin-top: 30px;
margin-left: 15px;
border-radius: 20px;
background-color: rgb(173, 255, 251);
}
.TrainSelectClass{
width: 95%;
height: 200px;
background-color: bisque;
border-radius: 20px;
margin-left: 7px;
padding-top: 20;
}
.TrainSelectClassP{
font-size: 20px;
margin-left: 80px;
padding-top: 10px;
}
#Train_class_ul{
margin-left: 30px;
}
#Train_class_ul li{
list-style-type: none;
}
.Train_class_div {
/* 普通状态下的样式 */
width: 120px;
height: 30px;
border: 1px solid #5086eb;
cursor: pointer;
margin-top: 10px;
margin-left: 15px;
text-align: center;
}
.Trainselected {
/* 选中状态下的样式 */
background-color: rgb(148, 246, 186);
border-color: rgb(250, 200, 140);
}
.TrainSelectTime{
width: 95%;
height: 200px;
background-color: beige;
text-align: center;
margin-left: 7px;
border-radius: 20px;
.SendTrain_body{
width: 100%;
display: flex;
}
.SendTrain_body_left{
flex: 20%;
}
.SendTrain_body_right{
flex: 60%;
}
.SendTrain_body_left_ul{
all: unset;
}
.SendTrain_body_left_ul li{
text-align: center;
}
.SendTrain_body_left_ul button{
background-color: rgb(114, 134, 232);
border: none;
width: 100%;
margin-top: 20px;
font-size: 28px;
}
.SendTrain_body_left_ul_div{
background-color: aqua;
font-size: 36px;
margin-top: 43px;
}
.SendTrain_body_right p{
font-size: 32px;
border: 1px solid black;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.SendTrain_body_right table{
width: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
}
.title{
font-size: 26px;
margin-bottom: 0px;
}
.questiontitle{
font-size: 20px;
}
.Trainbox{
background-color: rgb(166, 161, 161);
}
.judgetitle{
font-size: 20px;
background-color: rgb(166, 161, 161);
}
/* 以下为为实训 */
.Train_div{
width: 100%-1px;
height:700px;
border: 1px solid black;
border-top: none;
}
#Train_1{
width: 100%;
height: 350px;
display: flex;
}
.Train_1_left{
flex: 60%;
background-color: beige;
font-size: 20px;
text-align: center;
padding-top: 120px;
}
.Train_1_right{
flex: 40%;
background-color: rgb(111, 200, 241);
}
#Train_2{
width: 100%;
height: 350px;
display: flex;
}
.Train_2_left{
flex: 60%;
background-color: rgb(97, 237, 92);
font-size: 20px;
text-align: center;
padding-top: 120px;
}
.Train_2_right{
flex: 40%;
background-color: rgb(248, 127, 231);
}
.Train_1_right span{
font-size: 20px;
position: absolute;
margin-left: 150px;
margin-top: 140px;
}
.Train_2_right span{
font-size: 20px;
position: absolute;
margin-left: 150px;
margin-top: 140px;
}
/* 按钮 */
#SendTrainBtn{
font-size: 32px;
margin-top: 40px;
margin-bottom: 40px;
margin-left: 830px;
}
/* 右边的内容 */
.right_right{
flex: 20%;
}
.OptionBox{
width: 90%;
height: 500px;
margin-top: 30px;
margin-left: 15px;
border-radius: 20px;
background-color: rgb(173, 255, 251);
}
.TrainSelectClass{
width: 95%;
height: 200px;
background-color: bisque;
border-radius: 20px;
margin-left: 7px;
padding-top: 20;
}
.TrainSelectClassP{
font-size: 20px;
margin-left: 80px;
padding-top: 10px;
}
#Train_class_ul{
margin-left: 30px;
}
#Train_class_ul li{
list-style-type: none;
}
.Train_class_div {
/* 普通状态下的样式 */
width: 120px;
height: 30px;
border: 1px solid #5086eb;
cursor: pointer;
margin-top: 10px;
margin-left: 15px;
text-align: center;
}
.Trainselected {
/* 选中状态下的样式 */
background-color: rgb(148, 246, 186);
border-color: rgb(250, 200, 140);
}
.TrainSelectTime{
width: 95%;
height: 200px;
background-color: beige;
text-align: center;
margin-left: 7px;
border-radius: 20px;
}

624
app-dm/src/TeacherPages/SendTrain/SendTrain.jsx → app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx
View File

@ -1,315 +1,311 @@
import React,{ useState ,useEffect} from 'react';
import { Link } from 'react-router-dom';
import './SendTrain.css'
import axios from 'axios';
function SendTrain(){
const teacher_ID=localStorage.getItem('islogin')
if(teacher_ID==null){
alert('登录过期，请重新登录')
window.location.href='http://36.138.114.105:30294/'
}
//获取所有基础题的所有题目
const [Trainquestion,SetTrainquestion]=useState()
//章节内容
const [isTrain,setisTrain]=useState(false)
//得到题目
const [TrainChoice,setTrainChoice]=useState([])
const [TrainCompletion,setTrainCompletion]=useState([])
const [TrainJudge,setTrainJudge]=useState([])
//获取实训
const [Train,setTrain]=useState([])
//得到班级
const [ClassData,SetClassData]=useState([])
const Train_question_func=async()=>{
try{
const Train_question_src=await axios.post('/api/teacher/fetch_train_question')
SetTrainquestion(Train_question_src.data)
}catch{
alert('Train_question_func出错')
}
}
const SeleactClass= async()=>{
try {
const select_class_src = await axios.post('/api/teacher/select_class', {
teacher_ID
});
SetClassData(select_class_src.data['Class']);
} catch (error) {
console.log(error);
}
}
useEffect(()=>{
Train_question_func()
SeleactClass()
},[])
//选中班级的状态变化
const [selectedItems, setSelectedItems] = useState([]);
const click_div = (key) => {
if (selectedItems.includes(key)) {
setSelectedItems(prevItems => prevItems.filter(item => item !== key));
} else {
setSelectedItems(prevItems => [...prevItems, key]);
}
};
const getClassNames = (key) => {
if (selectedItems.includes(key)) {
return 'Train_class_div Trainselected';
} else {
return 'Train_class_div';
}
};
//发送题目
const SendTrainTest=async ()=>{
try{
const SendTrainSrc=await axios.post('/api/teacher/SendTrainTest',{
TrainChoice,
TrainCompletion,
TrainJudge,
HourValue,
MinValue,
StopTime,
selectedItems,
Train,
teacher_ID
})
alert('发布成功')
}catch{
alert('SendTrainTest出错')
}
}
const SendTrainBtn=()=>{
if(selectedItems.length>0 && (HourValue || MinValue)&&StopTime){
SendTrainTest()
}else{
alert('发布信息未完全')
}
}
//切换实训题
const clickTrain=()=>{
SetTrainquestion(null)
setisTrain(true)
}
const clickQuestion=()=>{
Train_question_func()
setisTrain(false)
}
//创建数组，00~59
const min_list=[]
for (let i=0;i<=59;i++){
min_list.push(i)
}
//0~12
const hour_list=[]
for (let i=0;i<=12;i++){
hour_list.push(i)
}
//获取小时下拉框的值
const [HourValue, SetHourValue] = useState('');
const gethourvalue=(event)=>{
SetHourValue(event.target.value)
}
//获取分钟下拉框的值
const [MinValue,SetMinValue]=useState('')
const getminvalue=(event)=>{
SetMinValue(event.target.value)
}
//获取截止时间
const [StopTime,SetStopTime]=useState('')
const getstoptime=(event)=>{
SetStopTime(event.target.value)
}
return(
<div className='SendTrain_body'>
<div className='SendTrain_body_left'>
<ul className='SendTrain_body_left_ul'>
<li><div className='SendTrain_body_left_ul_div'>题目集</div></li>
<li>
<button onClick={clickQuestion}>基础题</button>
<ul style={{all:'unset'}}>
<li>第一章</li>
<li>第二章</li>
</ul>
</li>
<li><button onClick={clickTrain}>实训题</button></li>
</ul>
</div>
<div className='SendTrain_body_right'>
<p>题目选择</p>
{/* 实训题 */}
{isTrain&&<div className='Train_div'>
<div id='Train_1'>
<div className='Train_1_left'>
设计达梦数据库课程实验实训，按照提供的达梦数据库安装文档，在系统中实现达梦数据库安装、连接及使用
</div>
<div className='Train_1_right'>
<span>
<input type="checkbox" value={'达梦数据库连接'} onClick={(event)=>{
if(event.target.checked){
setTrain(items=>([
...items,
event.target.value
]))
}else{
setTrain((items)=>
items.filter((item)=>item!==event.target.value))
}
}}/>是否选择
</span>
</div>
</div>
<div id='Train_2'>
<div className='Train_2_left'>
设计和实现一个Web前端开发和DM8数据库后端结合的项目实训。
</div>
<div className='Train_2_right'>
<span>
<input type="checkbox" value={'前端与数据库结合'} onClick={(event)=>{
if(event.target.checked){
setTrain(items=>([
...items,
event.target.value
]))
}else{
setTrain((items)=>
items.filter((item)=>item!==event.target.value))
}
}}/>是否选择
</span>
</div>
</div>
</div>}
{/* 基础题 */}
{Trainquestion &&<table>
<span className='title'>选择题</span>
<tbody>
{Object.keys(Trainquestion['choice']).map((key)=>(
<tr key={key}>
{/* 章节切换⬇ */}
<td className='Trainbox'>
<div>{Trainquestion['choice'][key][8]}</div>
<tr>
<td className='questiontitle'>问.{Trainquestion['choice'][key][1]}</td>
</tr>
<tr>
<div className='Train_answer_box'>
<tr>A:{Trainquestion['choice'][key][2]}</tr>
<tr>B:{Trainquestion['choice'][key][3]}</tr>
<tr>C:{Trainquestion['choice'][key][4]}</tr>
<tr>D:{Trainquestion['choice'][key][5]}</tr>
</div>
</tr>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//在选择题目集中添加选择题的ID
setTrainChoice(items=>([
...items,
Trainquestion['choice'][key][7]
]))
}else{
setTrainChoice((items)=>
items.filter((item)=>item!==Trainquestion['choice'][key][7])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
<span className='title'>填空题</span>
{Object.keys(Trainquestion['completion']).map((key)=>(
<tr key={key}>
<td className='Trainbox'>
{Trainquestion['completion'][key][4]}
<td className='questiontitle'>
问.{Trainquestion['completion'][key][1]}
</td>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//在选择题目集中添加选择题的ID
setTrainCompletion(items=>([
...items,
Trainquestion['completion'][key][3]
]))
}else{
setTrainCompletion((items)=>
items.filter((item)=>item!==Trainquestion['completion'][key][3])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
<span className='title'>判断题</span>
{Object.keys(Trainquestion['judge']).map((key)=>(
<tr key={key}>
<td className='Trainbox'>
{Trainquestion['judge'][key][4]}
<td className='judgetitle'>问:{Trainquestion['judge'][key][1]}</td>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
setTrainJudge(items=>([
...items,
Trainquestion['judge'][key][3]
]))
}else{
setTrainJudge((items)=>
items.filter((item)=>item!==Trainquestion['judge'][key][3])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
</tbody>
</table>}
<button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
</div>
{/* 右边的内容 */}
<div className='right_right'>
<div className='OptionBox'>
<div className='TrainSelectClass'>
<p className='TrainSelectClassP'>请选择发布班级</p>
{ ClassData &&<ul id='Train_class_ul'>
{Object.keys(ClassData).map((key)=>(
<li key={key}>
<div className={getClassNames(key)} onClick={() => click_div(key)}>
{key}
</div>
</li>
))}
</ul>}
</div>
<div className='TrainSelectTime'>
<p>请填写考试时间</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>小时
<select name="" id="" alue={MinValue} onChange={getminvalue}>
{min_list.map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>分钟
<p>请填写截至时间</p>
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
</div>
</div>
</div>
</div>
)
}
import React,{ useState ,useEffect} from 'react';
import { Link } from 'react-router-dom';
import './SendTrain.css'
import axios from 'axios';
function SendTrain(){
const teacher_ID=localStorage.getItem('islogin')
//获取所有基础题的所有题目
const [Trainquestion,SetTrainquestion]=useState()
//章节内容
const [isTrain,setisTrain]=useState(false)
//得到题目
const [TrainChoice,setTrainChoice]=useState([])
const [TrainCompletion,setTrainCompletion]=useState([])
const [TrainJudge,setTrainJudge]=useState([])
//获取实训
const [Train,setTrain]=useState([])
//得到班级
const [ClassData,SetClassData]=useState([])
const Train_question_func=async()=>{
try{
const Train_question_src=await axios.post('/api/teacher/fetch_train_question')
SetTrainquestion(Train_question_src.data)
}catch{
alert('Train_question_func出错')
}
}
const SeleactClass= async()=>{
try {
const select_class_src = await axios.post('/api/teacher/select_class', {
teacher_ID
});
SetClassData(select_class_src.data['Class']);
} catch (error) {
console.log(error);
}
}
useEffect(()=>{
Train_question_func()
SeleactClass()
},[])
//选中班级的状态变化
const [selectedItems, setSelectedItems] = useState([]);
const click_div = (key) => {
if (selectedItems.includes(key)) {
setSelectedItems(prevItems => prevItems.filter(item => item !== key));
} else {
setSelectedItems(prevItems => [...prevItems, key]);
}
};
const getClassNames = (key) => {
if (selectedItems.includes(key)) {
return 'Train_class_div Trainselected';
} else {
return 'Train_class_div';
}
};
//发送题目
const SendTrainTest=async ()=>{
try{
const SendTrainSrc=await axios.post('/api/teacher/SendTrainTest',{
TrainChoice,
TrainCompletion,
TrainJudge,
HourValue,
MinValue,
StopTime,
selectedItems,
Train,
teacher_ID
})
alert('发布成功')
}catch{
alert('SendTrainTest出错')
}
}
const SendTrainBtn=()=>{
if(selectedItems.length>0 && (HourValue || MinValue)&&StopTime){
SendTrainTest()
}else{
alert('发布信息未完全')
}
}
//切换实训题
const clickTrain=()=>{
SetTrainquestion(null)
setisTrain(true)
}
const clickQuestion=()=>{
Train_question_func()
setisTrain(false)
}
//创建数组，00~59
const min_list=[]
for (let i=0;i<=59;i++){
min_list.push(i)
}
//0~12
const hour_list=[]
for (let i=0;i<=12;i++){
hour_list.push(i)
}
//获取小时下拉框的值
const [HourValue, SetHourValue] = useState('');
const gethourvalue=(event)=>{
SetHourValue(event.target.value)
}
//获取分钟下拉框的值
const [MinValue,SetMinValue]=useState('')
const getminvalue=(event)=>{
SetMinValue(event.target.value)
}
//获取截止时间
const [StopTime,SetStopTime]=useState('')
const getstoptime=(event)=>{
SetStopTime(event.target.value)
}
return(
<div className='SendTrain_body'>
<div className='SendTrain_body_left'>
<ul className='SendTrain_body_left_ul'>
<li><div className='SendTrain_body_left_ul_div'>题目集</div></li>
<li>
<button onClick={clickQuestion}>基础题</button>
<ul style={{all:'unset'}}>
<li>第一章</li>
<li>第二章</li>
</ul>
</li>
<li><button onClick={clickTrain}>实训题</button></li>
</ul>
</div>
<div className='SendTrain_body_right'>
<p>题目选择</p>
{/* 实训题 */}
{isTrain&&<div className='Train_div'>
<div id='Train_1'>
<div className='Train_1_left'>
设计达梦数据库课程实验实训，按照提供的达梦数据库安装文档，在系统中实现达梦数据库安装、连接及使用
</div>
<div className='Train_1_right'>
<span>
<input type="checkbox" value={'达梦数据库连接'} onClick={(event)=>{
if(event.target.checked){
setTrain(items=>([
...items,
event.target.value
]))
}else{
setTrain((items)=>
items.filter((item)=>item!==event.target.value))
}
}}/>是否选择
</span>
</div>
</div>
<div id='Train_2'>
<div className='Train_2_left'>
设计和实现一个Web前端开发和DM8数据库后端结合的项目实训。
</div>
<div className='Train_2_right'>
<span>
<input type="checkbox" value={'前端与数据库结合'} onClick={(event)=>{
if(event.target.checked){
setTrain(items=>([
...items,
event.target.value
]))
}else{
setTrain((items)=>
items.filter((item)=>item!==event.target.value))
}
}}/>是否选择
</span>
</div>
</div>
</div>}
{/* 基础题 */}
{Trainquestion &&<table>
<span className='title'>选择题</span>
<tbody>
{Object.keys(Trainquestion['choice']).map((key)=>(
<tr key={key}>
{/* 章节切换⬇ */}
<td className='Trainbox'>
<div>{Trainquestion['choice'][key][8]}</div>
<tr>
<td className='questiontitle'>问.{Trainquestion['choice'][key][1]}</td>
</tr>
<tr>
<div className='Train_answer_box'>
<tr>A:{Trainquestion['choice'][key][2]}</tr>
<tr>B:{Trainquestion['choice'][key][3]}</tr>
<tr>C:{Trainquestion['choice'][key][4]}</tr>
<tr>D:{Trainquestion['choice'][key][5]}</tr>
</div>
</tr>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//在选择题目集中添加选择题的ID
setTrainChoice(items=>([
...items,
Trainquestion['choice'][key][7]
]))
}else{
setTrainChoice((items)=>
items.filter((item)=>item!==Trainquestion['choice'][key][7])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
<span className='title'>填空题</span>
{Object.keys(Trainquestion['completion']).map((key)=>(
<tr key={key}>
<td className='Trainbox'>
{Trainquestion['completion'][key][4]}
<td className='questiontitle'>
问.{Trainquestion['completion'][key][1]}
</td>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//在选择题目集中添加选择题的ID
setTrainCompletion(items=>([
...items,
Trainquestion['completion'][key][3]
]))
}else{
setTrainCompletion((items)=>
items.filter((item)=>item!==Trainquestion['completion'][key][3])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
<span className='title'>判断题</span>
{Object.keys(Trainquestion['judge']).map((key)=>(
<tr key={key}>
<td className='Trainbox'>
{Trainquestion['judge'][key][4]}
<td className='judgetitle'>问:{Trainquestion['judge'][key][1]}</td>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
setTrainJudge(items=>([
...items,
Trainquestion['judge'][key][3]
]))
}else{
setTrainJudge((items)=>
items.filter((item)=>item!==Trainquestion['judge'][key][3])
)
}
}} /><span>是否选择</span>
</td>
</tr>
))}
</tbody>
</table>}
<button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
</div>
{/* 右边的内容 */}
<div className='right_right'>
<div className='OptionBox'>
<div className='TrainSelectClass'>
<p className='TrainSelectClassP'>请选择发布班级</p>
{ ClassData &&<ul id='Train_class_ul'>
{Object.keys(ClassData).map((key)=>(
<li key={key}>
<div className={getClassNames(key)} onClick={() => click_div(key)}>
{key}
</div>
</li>
))}
</ul>}
</div>
<div className='TrainSelectTime'>
<p>请填写考试时间</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>小时
<select name="" id="" alue={MinValue} onChange={getminvalue}>
{min_list.map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>分钟
<p>请填写截至时间</p>
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
</div>
</div>
</div>
</div>
)
}
export default SendTrain

84
app-dm/src/TeacherPages/Trainmanage/Trainmanage.css
View File

@ -1,32 +1,74 @@
.body-TrainManage{
.body-trainmanage{
width: 1420px;
height: 830px;
position: absolute;
top: 72px;
left: 220px;
border-radius: 10px;
float: right;
background-color: #f7f8fa;
}
.body-right-Train h3{
margin-left: 60px;
.body-trainmanage p{
font-size: 20px;
margin-bottom: -5px;
position: absolute;
left: 50px;
}
.line{
width: 250px;
height: 2px;
position: absolute;
top: 60px;
background-image: linear-gradient(120deg,#ffffff,rgb(223, 223, 223),#fff);
}
.ul1-trainmanage{
width: 650px;
height: 200px;
position: absolute;
top: 50px;
left: 10px;
}
.ul2-trainmanage{
width: 650px;
height: 200px;
position: absolute;
top: 50px;
left: 700px;
}
.train-list-trainmanage li{
width: 650px;
height: 70px;
list-style-type: none;
margin-top: 10px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 2px 2px 2px #d8d9d9;
cursor: pointer;
}
.train-list-trainmanage span {
font-size: 20px;
}
.train-list-trainmanage p{
font-size: 15px;
margin-left: 460px;
margin-top: -40px;
}
.train-list-trainmanage li::before {
content: "▶";
color: rgb(132, 213, 209);
padding-right: 20px;
line-height: 65px;
padding-left: 15px;
font-size: 20px;
display: inline-block;
}
.test-Train{
display:flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: 40px;
margin-bottom: 60px;
}
.Train-box{
flex-basis: calc(30.00% - 10PX);
box-sizing: border-box;
margin: 20px;
height: 210px;
background-image: linear-gradient(190deg,rgba(157, 246, 252, 0.7),rgba(198, 212, 255, 0.7));
border-radius: 15px;
line-height: 35px;
}
.sendtestpage{
padding: 20px 30px;
font-size: 20px;
text-decoration: none;
color: #000;
position: absolute;
bottom: 50px;
right: 100px;
background-color: rgb(186, 237, 237);
}

62
app-dm/src/TeacherPages/Trainmanage/Trainmanage.jsx
View File

@ -1,37 +1,39 @@
import './Trainmanage.css'
import axios from 'axios';
import React,{ useState,useEffect } from 'react';
import './trainmanage.css'
import { Link } from 'react-router-dom';
// import React, { useEffect, useState } from 'react';
// import axios from 'axios';
function TeacherTrainManage(){
const click=()=>{
console.log('a');
}
function TrainManage(){
return(
<div className="body-TrainManage">
<div className="body-right-Train">
<h3>正在进行的考试与练习</h3>
<div className='test-Train'>
<div className='Train-box'>
<p>试卷ID:</p>
<span>发布者:</span>
<div>发布时间:</div>
<div>截至时间:</div>
</div>
</div>
<button onClick={click}>测试按钮</button>
<h3>已结束或完成的试卷与练习</h3>
<div className='test-subject'>
<div className='test-box'>
<p>试卷ID:</p>
<span>发布者:</span>
<div>发布时间:</div>
<div>截至时间:</div>
</div>
</div>
<div className='body-trainmanage'>
<p>已批改试卷</p>
<div className='line'></div>
<div className='train-list-trainmanage'>
<ul className='ul1-trainmanage'>
<li>
<span>111</span>
<p>关闭时间：2024-11-5</p>
</li>
<li>
<span>333</span>
<p>关闭时间：2024-11-5</p>
</li>
</ul>
<ul className='ul2-trainmanage'>
<li>
<span>222</span>
<p>关闭时间：2024-11-5</p>
</li>
<li>
<span>444</span>
<p>关闭时间：2024-11-5</p>
</li>
</ul>
<Link to='/teacher/SendTrain' className='sendtestpage'>前往发布实训</Link>
</div>
</div>
)
}
export default TeacherTrainManage
export default TrainManage

2
app-dm/src/pages/ListPages/Analyse/AnalysePages.css
View File

@ -110,6 +110,8 @@
height: 30px;
background-color: #b4c7c0;
border: none;
position: absolute;
left: 840px;
}
.btn-test:hover{

3
app-dm/src/pages/ListPages/Training/TrainingPage.jsx
View File

@ -48,9 +48,6 @@ function SubjectPage(){
</div>
))}
</div>}
<button onClick={()=>{
console.log(title[0][0][11]);
}}></button>
<p className='bottomP'>提醒:请及时完成实训内容！！！</p>
</div>
)};

42
app-dm/src/router/index.jsx
View File

@ -9,8 +9,8 @@ import HeaderNavTeacher from '../nav/teacherIndex';
// 用户页面
import Home from '../pages/Home/Home';
import SubjectPage from '../pages/ListPages/Subject/SubjectPage';
import AnalysePage from '../pages/ListPages/Analyse/AnalysePages';
import Training from '../pages/ListPages/Training/TrainingPage';
import AnalysePage from '../pages/ListPages/Analyse/AnalysePages';
import Exam from '../pages/ListPages/Subject/Exam';
import Operation1 from '../pages/ListPages/Training/Operation1';
import Operation2 from '../pages/ListPages/Training/Operation2';
@ -18,11 +18,12 @@ import Operation2 from '../pages/ListPages/Training/Operation2';
// 教师页面
import TeacherPage from '../TeacherPages/TeacherPage';
import ClassID from '../TeacherPages/classlistpages/classId';
import ManageTest from '../TeacherPages/teachermanagetest/ManageTest';
import SendTest from '../TeacherPages/SendTest/SendTest';
import ManageTest from '../TeacherPages/TestManage/ManageTest';
import SendTest from '../TeacherPages/TestManage/SendTest';
import Marking from '../TeacherPages/MarkingPages/Marking';
import SendTrain from '../TeacherPages/SendTrain/SendTrain';
import TrainManage from '../TeacherPages/SendTest/trainmanage';
import SendTrain from '../TeacherPages/TrainManage/SendTrain';
import TrainManage from '../TeacherPages/TrainManage/trainmanage';
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
// 定义一个组件来包裹除了特定页面(exam)外的所有页面使其有导航
const MainLayout = ({ headerNav:HeaderNav }) => {
@ -44,22 +45,21 @@ function App() {
<Routes>
{/* 使用 HeaderNav 的用户页面 */}
<Route path="/" element={<MainLayout headerNav={HeaderNav} />}>
<Route index element={<Home />} />
<Route path="analyse" element={<AnalysePage />} />
<Route path='subject' element={<SubjectPage/>} />
<Route path='train' element={<Training/>}/>
<Route index element={<Home />} /> {/* 主页 */}
<Route path='subject' element={<SubjectPage/>} /> {/* 练习 */}
<Route path='train' element={<Training/>}/> {/* 实训 */}
<Route path="analyse" element={<AnalysePage />} /> {/* 学习分析 */}
{/* 其他需要HeaderNav的页面 */}
</Route>
{/* 使用 HeaderNavTeacher 的教师页面 */}
<Route path="/teacher" element={<MainLayout headerNav={HeaderNavTeacher} />}>
<Route index element={<TeacherPage/>} />
<Route path='managetest' element={<ManageTest />}/>
{/* <Route path='managetest/:ClassID' element={<ManageTest />}/> */}
<Route path="classID/:key" element={<ClassID />} />
<Route path='mark' element={<Marking/>}/>
<Route path='trainmanage' element={<TrainManage/>}/>
<Route index element={<TeacherPage/>} /> {/* 班级管理 */}
<Route path='trainmanage' element={<TrainManage/>}/> {/* 实训管理 */}
<Route path='mark' element={<Marking/>}/> {/* 批改 */}
<Route path='managetest' element={<ManageTest />}/> {/* 考试管理 */}
<Route path="classID/:key" element={<ClassID />} /> {/* 班级管理1 */}
<Route path='mark/studentlink' element={<StudentLink/>}/> {/* 批改1 */}
{/* 其他需要HeaderNavTeacher的页面 */}
</Route>
@ -68,11 +68,11 @@ function App() {
</Route>
{/* 页面使用单独的布局，不包含HeaderNav和HeaderNavTeacher */}
<Route path="exam/:examId" element={<Exam />} />
<Route path='/teacher/sendtest' element={<SendTest />}/>
<Route path='operation1/:operateID' element={<Operation1/>}/>
<Route path='operation2/:operateID' element={<Operation2/>}/>
<Route path='teacher/SendTrain' element={<SendTrain/>}/>
<Route path="exam/:examId" element={<Exam />} />{/* 练习-考试页面 */}
<Route path='/teacher/sendtest' element={<SendTest />}/> {/* 考试管理-发布试卷 */}
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/* 实训管理-发布实训 */}
<Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1 */}
<Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2 */}
{/* 独立的顶级路由，如登录页面，也不包含HeaderNav */}
{/* 登录页面 */}
<Route path="signin" element={<SignInPage />} />

0
app-dm/src/utils/refresh.css Normal file
View File

0
app-dm/src/utils/refresh.jsx Normal file
View File