Compare commits

..

No commits in common. "5a008f33a3c751992c127f07dac1b9589ecc77de" and "9f6f151dcb4defcffca9f384dbab03532adcc742" have entirely different histories.

9 changed files with 193 additions and 234 deletions

View File

@ -10,50 +10,44 @@
background-color: #f7f8fa; background-color: #f7f8fa;
} }
#view_history{ #view_history{
width: 1100px; margin-left: 100px;
height: 520px; width: 1200px;
background-color: rgb(175, 235, 217); height: 350px;
position: absolute; background-color: aqua;
top: 60px; margin-top: 100px;
left: 125px;
padding-left: 60px;
padding-top: 10px;
} }
#view_history_nav{ #view_history_nav{
border-bottom: 1px solid black; border-bottom: 1px solid black;
width: 935px; width: 850px;
font-size: 18px;
text-align: center; text-align: center;
padding-bottom: 5px;
} }
#class_list{
position: absolute;
}
#class_list select{
width: 100px;
height:40px;
font-size: 20px;
position: absolute;
left: 970px;
top: -30px;
border: 3px solid #f6fffd;
}
.view_history_content{ .view_history_content{
width: 940px; width: 850px;
font-size: 17px;
padding: 5px 0;
line-height: 35px;
text-align: center; 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{ #view_history_box{
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
height: 450px; height: 550px;
width: 940px; width: 850px;
/* background-color: antiquewhite; */ background-color: antiquewhite;
background-color: #f6fffc; }
#class_list{
position: absolute;
margin-left: 975px;
margin-top: -20px;
}
#class_list select{
font-size: 20px;
border: none;
} }
#body_bottom{ #body_bottom{
@ -64,11 +58,18 @@
margin-top: 20px; margin-top: 20px;
} }
#sendtest_btn{ #sendtest_btn{
height: 50px; font-size: 30px;
width: 300px; margin-left: 30px;
font-size: 28px;
margin-left: 830px;
margin-top: 100px; 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{ #view_history_table td{
border-bottom: 1px solid black; border-bottom: 1px solid black;

View File

@ -105,7 +105,7 @@ function TeacherPage() {
return ( return (
<div className='body-right-manage'> <div className='body-right-manage'>
{/* 详细信息(弹窗) */} {/* 详细信息 */}
{isDetailedBoxVisible && <div id='detailed'> {isDetailedBoxVisible && <div id='detailed'>
<p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p> <p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p>
<p style={{display:'flex'}}> <p style={{display:'flex'}}>
@ -151,6 +151,11 @@ function TeacherPage() {
<option key={key} value={key}>{key}</option> <option key={key} value={key}>{key}</option>
))} ))}
</select> </select>
</div>
<div id='class_portrait'>
{/* 班级画像 */}
</div> </div>
<div id='view_history_box'> <div id='view_history_box'>
{ defaultclass &&<table id='view_history_table'> { defaultclass &&<table id='view_history_table'>
@ -170,9 +175,11 @@ function TeacherPage() {
</tbody> </tbody>
</table>} </table>}
</div> </div>
<div id='body_bottom_right'>
<Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试</button></Link> <Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试</button></Link>
</div>
</div> </div>
{/* <button onClick={click}>测试</button> */} <button onClick={click}>测试</button>
</div> </div>
); );
} }

View File

@ -18,9 +18,29 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
/* 选择题 */ /* 选择题 */
.Testbox_xz{ .Trainbox_xz{
background-color: #fff; background-color: #fff;
} }
.chapter{
color: #5cc1b9;
font-size: 18px;
font-weight: 550;
float: right;
padding-right: 10px;
padding-top: 5px;
}
.questiontitle_xz{
padding-top: 15px;
padding-left: 10px;
font-size: 17px;
}
.Test_answer_box{
padding-top: 5px;
padding-left: 27px;
}
.Test_answer_box tr{
line-height: 40px;
}
.check_box_xz{ .check_box_xz{
width: 100px; width: 100px;
height: 30px; height: 30px;
@ -184,7 +204,6 @@
text-align: center; text-align: center;
margin-left: 7px; margin-left: 7px;
border-radius: 20px; border-radius: 20px;
margin-top: 20px;
} }
.TestSelectTime p{ .TestSelectTime p{
padding-top: 25px; padding-top: 25px;

View File

@ -116,40 +116,35 @@ function SendTest(){
return( return(
<div className='SendTrain_body'> <div className='SendTrain_body'>
<div className='SendTrain_body_left'> <div className='SendTrain_body_left'>
<h3>题目集</h3> <h3>题目集</h3>
<ul className='SendTrain_body_left_ul'> <ul className='SendTrain_body_left_ul'>
<li> <li>
<button>基础题</button> <button>基础题</button>
<ul style={{all:'unset'}} className='left-list-ul'> <ul style={{all:'unset'}} className='left-list-ul'>
<li>第一章</li> <li>第一章</li>
<li>第二章</li> <li>第二章</li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<div className='SendTest_body_right'> <div className='SendTest_body'>
<p>题目选择</p> <p>题目选择</p>
{question&&<table> {question&&<table>
<span className='title'>选择题</span> <span className='title'>选择题</span>
<tbody> {Object.keys(question['choice']).map((key)=>(
{Object.keys(question['choice']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<td className='Testbox_xz'> <div>{question['choice'][key][8]}</div>
<div className='chapter'>{question['choice'][key][8]}</div> <tr>
<tr> <td className='questiontitle'>.{question['choice'][key][1]}</td>
<td className='Train_answer_box'>{index+1}.{question['choice'][key][1]}</td> </tr>
</tr> <div className='Train_answer_box'>
<tr> <tr>A:{question['choice'][key][2]}</tr>
<div className='Train_answer_box'> <tr>B:{question['choice'][key][3]}</tr>
<tr>A.{question['choice'][key][2]}</tr> <tr>C:{question['choice'][key][4]}</tr>
<tr>B.{question['choice'][key][3]}</tr> <tr>D:{question['choice'][key][5]}</tr>
<tr>C.{question['choice'][key][4]}</tr> </div>
<tr>D.{question['choice'][key][5]}</tr> <input type="checkbox" className='check_box' onClick={(event)=>{
</div>
</tr>
<div className='check_box_xz'>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setChoice(items=>([ setChoice(items=>([
@ -161,21 +156,17 @@ function SendTest(){
items.filter((item)=>item!==question['choice'][key][7]) items.filter((item)=>item!==question['choice'][key][7])
) )
} }
}} /> }} /><span>是否选择</span>
<span>是否选择</span>
</div>
</td>
</tr> </tr>
))} ))}
<span className='title'>填空题</span> <span className='title'>填空题</span>
{Object.keys(question['completion']).map((key,index)=>( {Object.keys(question['completion']).map((key)=>(
<tr key={key}> <tr key={key}>
<td className='Testbox_tk'> <td className='Testbox'>
<div className='chapter_tk'>{question['completion'][key][4]}</div> {question['completion'][key][4]}
<td className='questiontitle_tk'> <td className='questiontitle'>
{index+1}.{question['completion'][key][1]} .{question['completion'][key][1]}
</td> </td>
<div className='check_box_tk'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
@ -188,20 +179,17 @@ function SendTest(){
items.filter((item)=>item!==question['completion'][key][3]) items.filter((item)=>item!==question['completion'][key][3])
) )
} }
}} /> }} /><span>是否选择</span>
<span>是否选择</span> </td>
</div> </tr>
</td> ))}
</tr> <span className='title'>判断题</span>
))} {Object.keys(question['judge']).map((key)=>(
<span className='title'>判断题</span>
{Object.keys(question['judge']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<td className='Testbox_pd'> <td className='Testbox'>
<div className='chapter_pd'>{question['judge'][key][4]}</div> {question['judge'][key][4]}
<td className='judgetitle'>{index+1}.{question['judge'][key][1]}</td> <td className='judgetitletd'>:{question['judge'][key][1]}</td>
<div className='check_box_pd'> <input type="checkbox" className='check_box' onClick={(event)=>{
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
setJudge(items=>([ setJudge(items=>([
...items, ...items,
@ -212,51 +200,50 @@ function SendTest(){
items.filter((item)=>item!==question['judge'][key][3]) items.filter((item)=>item!==question['judge'][key][3])
) )
} }
}} /> }} /><span>是否选择</span>
<span>是否选择</span>
</div>
</td> </td>
</tr> </tr>
))} ))}
</tbody> </table>}
</table>}
<button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
</div> <button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
{/* 右边的内容 */} </div>
<div className='right_right'> {/* 右边的内容 */}
<div className='OptionBox'> <div className='right_right'>
<div className='TestSelectClass'> <div className='OptionBox'>
<p className='TestSelectClassP'>请选择发布班级</p> <div className='TrainSelectClass'>
{ ClassData &&<ul id='Test_class_ul'> <p className='TrainSelectClassP'>请选择发布班级</p>
{ ClassData &&<ul id='Train_class_ul'>
{Object.keys(ClassData).map((key)=>( {Object.keys(ClassData).map((key)=>(
<li key={key}> <li key={key}>
<div className={getClassNames(key)} onClick={() => click_div(key)}> <div className={getClassNames(key)} onClick={() => click_div(key)}>
{key} {key}
</div> </div>
</li> </li>
))} ))}
</ul>} </ul>}
</div> </div>
<div className='TestSelectTime'> <div className='TrainSelectTime'>
{/* <button onClick={()=>{ <button onClick={()=>{
console.log(Choice); console.log(Choice);
}}></button> */} }}></button>
<p>请填写考试时间</p> <p>请填写考试时间</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}> <select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>( {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> <option value={num} key={num}>{num}</option>
))} ))}
</select>分钟 </select>小时
<p>请填写截至时间</p> <select name="" id="" alue={MinValue} onChange={getminvalue}>
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后 {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> </div>
</div>
</div> </div>
) )
} }

View File

@ -118,10 +118,10 @@
padding-top: 5px; padding-top: 5px;
} }
.questiontitle_tk{ .questiontitle_tk{
padding-top: 18px; padding-top: 15px;
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 25px;
} }
.check_box_tk{ .check_box_tk{
width: 100px; width: 100px;
@ -153,13 +153,10 @@
font-weight: 550; font-weight: 550;
float: right; float: right;
padding-right: 10px; padding-right: 10px;
padding-top: 5px; margin-top: -10px;
} }
.judgetitle{ .judgetitle{
padding-top: 8px;
padding-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 10px;
} }
.check_box_pd{ .check_box_pd{
width: 100px; width: 100px;
@ -183,64 +180,43 @@
/* 以下为为实训 */ /* 以下为为实训 */
.Train_div{ .Train_div{
width: 100%-1px; width: 100%-1px;
height:690px; height:700px;
border-top: 1px solid black; border: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: none; border-top: none;
} }
#Train_1{ #Train_1{
width: 100%; width: 100%;
height: 280px; height: 350px;
display: flex; display: flex;
} }
.Train_1_left{ .Train_1_left{
flex: 60%; flex: 60%;
background-color: rgb(250, 250, 220); background-color: beige;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding-top: 120px; padding-top: 120px;
} }
.Train_1_right{ .Train_1_right{
flex: 40%; flex: 40%;
/* background-color: rgb(143, 230, 250); */ background-color: rgb(111, 200, 241);
background-color: #befdee;
display: flex;
align-items: center;
} }
.Train_1_right span{
padding-bottom: 130px;
}
.Train_1_right input{
height: 15px;
width: 15px;
}
.Train_1_right p{
font-size: 20px;
border: none;
padding-left: 20px;
margin-top: -28px;
margin-left: 5px;
}
#Train_2{ #Train_2{
width: 100%; width: 100%;
height: 280px; height: 350px;
display: flex; display: flex;
} }
.Train_2_left{ .Train_2_left{
flex: 60%; flex: 60%;
background-color: rgb(173, 246, 169); background-color: rgb(97, 237, 92);
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding-top: 120px; padding-top: 120px;
} }
.Train_2_right{ .Train_2_right{
flex: 40%; flex: 40%;
/* background-color: rgb(254, 175, 243); */ background-color: rgb(248, 127, 231);
background-color: #fcefcf;
} }
.Train_1_right span{ .Train_1_right span{
font-size: 20px; font-size: 20px;
@ -260,7 +236,7 @@
height: 40px; height: 40px;
width: 130px; width: 130px;
font-size: 25px; font-size: 25px;
margin-top: 60px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
margin-left: 900px; margin-left: 900px;
background-color: #9acec2; background-color: #9acec2;

View File

@ -139,9 +139,24 @@ function SendTrain(){
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date());
const [duration, setDuration] = useState(null); const [duration, setDuration] = useState(null);
const [scrollPosition, setScrollPosition] = useState(0);
// //
const handleStartDateChange = (date) => { const handleStartDateChange = (date) => {
setStartDate(date); setStartDate(date);
//
if (startDate && date) {
const diffInMilliseconds = date - startDate;
const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
const diffInHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const diffInMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
let durationText = '';
if (diffInDays > 0) durationText += `${diffInDays}`;
if (diffInHours > 0 || diffInDays > 0) durationText += `${diffInHours}小时`;
durationText += `${diffInMinutes}分钟`;
setDuration(durationText);
} else {
setDuration('请选择考试结束日期');
}
}; };
// //
const handleEndDateChange = (date) => { const handleEndDateChange = (date) => {
@ -189,7 +204,7 @@ function SendTrain(){
</div> </div>
</tr> </tr>
<div className='check_box_xz'> <div className='check_box_xz'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setTrainChoice(items=>([ setTrainChoice(items=>([
@ -216,7 +231,7 @@ function SendTrain(){
{index+1}.{Trainquestion['completion'][key][1]} {index+1}.{Trainquestion['completion'][key][1]}
</td> </td>
<div className='check_box_tk'> <div className='check_box_tk'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setTrainCompletion(items=>([ setTrainCompletion(items=>([
@ -241,7 +256,7 @@ function SendTrain(){
<div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div> <div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div>
<td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td> <td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td>
<div className='check_box_pd'> <div className='check_box_pd'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
setTrainJudge(items=>([ setTrainJudge(items=>([
...items, ...items,
@ -278,8 +293,7 @@ function SendTrain(){
setTrain((items)=> setTrain((items)=>
items.filter((item)=>item!==event.target.value)) items.filter((item)=>item!==event.target.value))
} }
}}/> }}/>是否选择
<p>是否选择</p>
</span> </span>
</div> </div>
</div> </div>
@ -361,16 +375,7 @@ function SendTrain(){
</div> </div>
</div> </div>
<p>考试总时长</p> <p>考试总时长</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}> {duration || '请选择考试结束日期'}
{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>分钟
</div> </div>
</div> </div>
</div> </div>

View File

@ -63,24 +63,24 @@
} }
.sendtestpage{ .sendtestpage{
padding: 10px 30px; padding: 20px 30px;
font-size: 20px; font-size: 20px;
text-decoration: none; text-decoration: none;
color: #000; color: #000;
position: absolute; position: absolute;
bottom: 100px; bottom: 170px;
right: 50px; right: 100px;
background-color: rgb(186, 237, 237); background-color: rgb(186, 237, 237);
border-radius: 20px; border-radius: 20px;
} }
.ManagePods{ .ManagePods{
border-radius: 20px; border-radius: 20px;
position: absolute; position: absolute;
padding: 10px 30px; padding: 20px 30px;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
color: #000; color: #000;
right: 220px; right: 300px;
bottom: 100px; bottom: 170px;
background-color: rgb(186, 237, 237); background-color: rgb(186, 237, 237);
} }

View File

@ -113,41 +113,6 @@ function TeacherPage() {
}; };
const CustomTooltip = ({ active, payload }) => {
if (active && payload && payload.length) {
// payload[0]
const data = payload[0].payload; // payload
return (
<div className="custom-tooltip" style={{ backgroundColor: '#fff', padding: '10px', border: '1px solid #ccc',width:'200px',height:'100px' }}>
<p className="label" style={labelStyle}>{`试卷ID: ${data.name}`}</p>
<p className="intro" style={introStyle}>{`分数: ${payload[0].value}`}</p>
</div>
);
}
return null;
};
const labelStyle = {
margin: '0', //
color: '#333', //
fontSize: '18px', //
width:'100px',
height:'40px',
marginLeft:'50px',
lineheight:'40px'
};
const introStyle = {
margin: '0', //
color: '#333', //
fontSize: '18px', //
width:'100px',
height:'40px',
marginLeft:'50px',
};
return( return(
<div className='body-right-classId'> <div className='body-right-classId'>
<div id='body-right-bottom'> <div id='body-right-bottom'>
@ -191,9 +156,9 @@ function TeacherPage() {
{studentScores.length > 0 ? ( {studentScores.length > 0 ? (
<BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' > <BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' >
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" tickFormatter={(value) => `试卷ID: ${value}`} /> <XAxis dataKey="name" />
<YAxis dataKey="score" /> <YAxis dataKey="score" />
<Tooltip content={<CustomTooltip />} /> <Tooltip active='false'/>
<Bar dataKey="score" fill="#fdf0d3" /> <Bar dataKey="score" fill="#fdf0d3" />
</BarChart> </BarChart>
):( ):(

View File

@ -89,7 +89,7 @@
height: 390px; height: 390px;
position: absolute; position: absolute;
top: 390px; top: 390px;
left: 200px; left: 150px;
background-color: #bfd1f6; background-color: #bfd1f6;
border-radius: 10px; border-radius: 10px;
} }
@ -110,12 +110,13 @@
} }
/* 学生详情 */ /* 学生详情 */
.choice-box{ .choice-box{
height: 200px; height: 300px;
width: 300px; width: 400px;
background-color: #cddbf3; background-color: #cddbf3;
/* background-color: #a4cdf8; */
position: absolute; position: absolute;
top: 80px; top: 30px;
left: 730px; left: 720px;
box-shadow: box-shadow:
inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */ inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */
inset 0 0 0 6px #ffffff; inset 0 0 0 6px #ffffff;
@ -152,6 +153,4 @@
} }
.studentName{ .studentName{
font-size: 18px; font-size: 18px;
padding-top: 20px;
padding-left: 10px;
} }