自分用のメモです。
8.間違いがクリックされても4択の数字が更新され、仕様どおりにならなかった。
export const OneQuestionAndAnswer2 = () => {
const [ques_num, ques_numSet] = useState(0);
const [ques_boolean, ques_booleanSet] = useState('');
return (
<>
<p className="text-2xl font-bold text-600">{ques_num + 1} 問目</p>
<div className="FiveTables">
<p className="text-2xl font-bold text-blue-600">No {FiveTables[ques_num].id} : {FiveTables[ques_num].num1} × {FiveTables[ques_num].num2} = </p>
<main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
<FourAnswer_b array_a={Num99s5} num_a={3} num_b={FiveTables[ques_num].answer} ques_num={ques_num} ques_numSet={ques_numSet} ques_booleanSet={ques_booleanSet} />
</main>
</div>
<p className="text-2xl font-bold text-red-600">{ques_boolean}</p>
</>
);
}
//array_aは配列、Num99s5配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_b = (props:any) => {
const list = RandomSelected(props.array_a, props.num_a, props.num_b);
list.push(props.num_b);
const shufflelist = shufflesArray(list);
const handleClick4 = (OneTable:any) => {
if(OneTable === props.num_b){
if(props.ques_num < 8){
console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした');
props.ques_numSet(props.ques_num + 1);
props.ques_booleanSet('正解。' + OneTable + 'がクリックされました。');
} else {
console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした。おしまい');
props.ques_booleanSet('正解。' + OneTable + 'がクリックされました。おしまい');
}
} else {
console.log('間違い。' + OneTable + 'がクリックされました')
props.ques_booleanSet('間違い。' + OneTable + 'がクリックされました');
}
};
return (
<>
{shufflelist.map((OneTable) => {
return (
<button onClick={() => handleClick4(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
);
})}
</>
);
};
9.正解した時だけ、4択も更新されるようになった。想定された仕様どおりになったが、Unhandled Runtime Errorが出る問題が直らない。
export const OneQuestionAndAnswer3 = (props:any) => {
const [ques_num, ques_numSet] = useState(0);
const [ques_boolean, ques_booleanSet] = useState('');
const handleClick4 = (OneTable:any) => {
if (OneTable === props.ShinFiveTables[ques_num].answer){
if (props.ShinFiveTables[ques_num].id < 9){
ques_booleanSet('正解。' + OneTable + 'がクリックされました。');
ques_numSet(ques_num + 1);
} else {
ques_booleanSet('正解。' + OneTable + 'がクリックされました。おしまい');
}
} else {
ques_booleanSet('間違い。' + OneTable + 'がクリックされました。');
}
};
return (
<>
<p className="text-2xl font-bold text-600 mb-8">{props.ShinFiveTables[ques_num].id} 問目</p>
<p className="text-2xl font-bold text-blue-600">{props.ShinFiveTables[ques_num].num1} × {props.ShinFiveTables[ques_num].num2} = </p>
<div className="FiveTables">
<main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
<button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep1)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep1}</div></button>
<button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep2)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep2}</div></button>
<button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep3)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep3}</div></button>
<button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep4)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep4}</div></button>
</main>
</div>
<p className="text-2xl font-bold text-red-600">{ques_boolean}</p>
</>
);
}