实训第一页ok

This commit is contained in:
30404 2024-06-23 14:23:35 +08:00
parent 84e144b469
commit b89a311592
4 changed files with 115 additions and 39 deletions

View File

@ -111,9 +111,6 @@ function Exam(){
for(let i of item){ for(let i of item){
if(i[2]===completion_answer[sum]){ if(i[2]===completion_answer[sum]){
setscore(prevscore => prevscore + 2); setscore(prevscore => prevscore + 2);
}else{
} }
} }
} }

View File

@ -83,16 +83,7 @@
/* 前进按钮 */ /* 前进按钮 */
.btn-back1{ .btn-back1{
height: 50px;
position: absolute;
bottom: 50px;
right: 80px;
padding: 0 20px;
display: flex;
align-items: center;
/* border: 1px solid #000; */
box-shadow: 1px 2px 5px gray;
background-color: #efefef;
} }
.btn-back1 p{ .btn-back1 p{
font-size: 20px; font-size: 20px;
@ -113,4 +104,11 @@
.optionBox label{ .optionBox label{
margin-left: 10px; margin-left: 10px;
} }
.body-right1-comple{
border-collapse: separate;
border-spacing: 10px; /* 设置行和列之间的间距 */
}
.body-right1-comple tr{
background-color: rgb(110, 130, 130);
}

View File

@ -11,10 +11,13 @@ import axios from 'axios';
function Operation1() { function Operation1() {
const click=()=>{ const click=()=>{
console.log(choice_answer); console.log(score);
} }
const clear=()=>{ const clear=()=>{
localStorage.clear('choice_answers');
setchoice_answer({}) setchoice_answer({})
localStorage.clear('completion_answer')
setcompletion_answer({})
} }
const { operateID } = useParams(); const { operateID } = useParams();
@ -81,22 +84,77 @@ function Operation1() {
const key = parseInt(event.target.name.replace('group', '')); const key = parseInt(event.target.name.replace('group', ''));
const updatedChoiceAnswer = { ...choice_answer, [key]: selectedValue }; const updatedChoiceAnswer = { ...choice_answer, [key]: selectedValue };
setchoice_answer(updatedChoiceAnswer); setchoice_answer(updatedChoiceAnswer);
}; };
//
const handleInputChange = (event) => {
const { name, value } = event.target;
setcompletion_answer({
...completion_answer,
[name]: value
});
};
//
const handleJudgeOption=(event)=>{
const judgeoption=event.target.value;
const key=parseInt(event.target.name.replace('judge',''))
const updatedJudgeAnswer={ ...judge_answer,[key]:judgeoption}
setjudge_answer(updatedJudgeAnswer)
}
// localStorage // localStorage
const saveAnswers = () => { const saveAnswers = () => {
localStorage.setItem('choice_answers', JSON.stringify(choice_answer)); localStorage.setItem('choice_answers', JSON.stringify(choice_answer));
localStorage.setItem('completion_answer', JSON.stringify(completion_answer));
localStorage.setItem('judge_answer',JSON.stringify(judge_answer))
}; };
// localStorage // localStorage
useEffect(() => { useEffect(() => {
const storedAnswers = localStorage.getItem('choice_answers'); const storedChoiceAnswers = localStorage.getItem('choice_answers');
if (storedAnswers) { const storedCompleAnswers = localStorage.getItem('completion_answer');
const parsedAnswers = JSON.parse(storedAnswers); const storedJudgeAnswers = localStorage.getItem('judge_answer')
if (storedChoiceAnswers) {
const parsedAnswers = JSON.parse(storedChoiceAnswers);
setchoice_answer(parsedAnswers); setchoice_answer(parsedAnswers);
} }
if (storedCompleAnswers) {
const parsedAnswers = JSON.parse(storedCompleAnswers);
setcompletion_answer(parsedAnswers);
}
if(storedJudgeAnswers){
const parsedAnswers = JSON.parse(storedJudgeAnswers);
setjudge_answer(parsedAnswers);
}
}, []); }, []);
//
const [score,setscore]=useState(0)
//
const submit=()=>{
let CHO_sum=0;
let COM_sum=0;
let JUD_sum=0;
for(let item of TrainData['operateID'][0]){
if(item[0][6]===choice_answer[CHO_sum]){
setscore(prevscore=>prevscore+5)
}
CHO_sum++
}
for(let item of TrainData['operateID'][1]){
if (item[0][2]===completion_answer[COM_sum]) {
setscore(prevscore=>prevscore+5)
}
COM_sum++
}
for(let item of TrainData['operateID'][2]){
if (item[0][2]===judge_answer[JUD_sum]) {
setscore(prevscore=>prevscore+5)
}
JUD_sum++
}
}
return ( return (
<div> <div>
<div className='nav-operation1'> <div className='nav-operation1'>
@ -128,12 +186,12 @@ function Operation1() {
</div> </div>
<div className='body-right1'> <div className='body-right1'>
{TrainData && ( {TrainData && (
<table> <table className='body-right1-choice'>
<p>选择题:</p> <p>选择题:</p>
<tbody> <tbody>
{Object.keys(TrainData['operateID'][0]).map((key) => ( {Object.keys(TrainData['operateID'][0]).map((key) => (
<tr key={key}> <tr key={key}>
<tr>{TrainData['operateID'][0][key][0][1]}</tr> <tr style={{fontSize:'18px'}}>{TrainData['operateID'][0][key][0][1]}</tr>
<div className='optionBox'> <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> <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 /> <br />
@ -148,14 +206,39 @@ function Operation1() {
</tbody> </tbody>
</table> </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&&(
<table>
<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>
</tr>
))}
</tbody>
<button onClick={click}>测试</button><button onClick={clear}>清除测试</button> </table>
)}
<button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
<Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
</div> </div>
<Link className='btn-back1' to={`/operation2/${operateID}`} style={{color:'#000',textDecoration:'none'}} onClick={saveAnswers}>
<img src={arrow} alt="" width='40px' height='40px' />
<p>下一页</p>
</Link>
</div> </div>
</div> </div>
) )

View File

@ -266,8 +266,6 @@ def FetchTrainTestFunc(operateID):
return dic return dic
# FetchTrainTestFunc('3') # FetchTrainTestFunc('3')