Hi,
I built a QuestionsCell.js where I list all questions and their answers per each row. For every question I gave a radio button in UI so the user can click on the answers and I need to evaluate the answer.
Everything ok so far. I am able to define the Radio Field and have it’s name dynamicaly generated. E.g.
<td>
<label
name={'label' + question.id}
className={`label ${isCorrect ? 'correct' : 'wrong'}`}
>
{question.q_option_a}
<br />
<RadioField
name={'radio' + question.id}
value={question.q_option_a}
onClick={(e) =>
validateAnswer(
e.target.name,
e.target.value,
question.q_correct_option
)
}
/>
</label>
</td>
I am able to validate for each question the correct answer vs the option chosen. I am raising an alert showing if the option chosen is correct or wrong per question. But I want also to change the color of the label of the respective RadioField to say green or red depending if the answer was correct or not.
So I tried the following:
Under Success:
const [isCorrect, setCorrect] = useState(‘false’)
if (qOptionSelected === qOptionExpected) {
swal('Correct Answer !' + qId)
setCorrect(!isCorrect)
} else {
swal('Wrong Answer !!!', ' The correct answer is: ' + qOptionExpected)
setCorrect(isCorrect)
}
}
My problems are that when I select the answer for one question (row) it aplies it on all rows. See picture bellow
Any suggestions how should I handle this in Cell ?
Thanks for your help !