I’m building a quiz app in react, I have created the quiz card with 4 answers for each question, the question and the answers in the card change everytime you click on Submit.
Here is my code:
const handleSubmit = (event) => {
setValue(true);
let updatedAnswers = [...givenAnswer, event.target.value];
setGivenAnswer(updatedAnswers);
};
console.log(givenAnswer)
const handleSelectedItem = (index) => {
setClickedIndex(index);
};
const goToNext = () => {
setCurrentQuestionIndex((prevState) => prevState + 1);
setValue(false);
setClickedIndex(null);
};
useEffect(() => {
const transformQuestions = (questionObj) => {
const loadedQuestions = [];
for (const questionKey in questionObj) {
loadedQuestions.push({
id: questionKey,
id_test: questionObj[questionKey].id_test,
tipologia_domanda: questionObj[questionKey].tipologia_domanda,
testo: questionObj[questionKey].testo,
immagine: questionObj[questionKey].immagine,
eliminata: questionObj[questionKey].eliminata,
});
}
setQuestions(loadedQuestions);
};
getQuestions(
{
method: 'GET',
url: baseURL_Q,
},
transformQuestions
);
}, [getQuestions]);
useEffect(() => {
const transformAnswers = (answerObj) => {
const loadedAnswers = [];
for (const answerKey in answerObj) {
loadedAnswers.push({
id: answerKey,
domanda_id: answerObj[answerKey].domanda_id,
corretta: answerObj[answerKey].corretta,
testo: answerObj[answerKey].testo,
immagine: answerObj[answerKey].immagine,
});
}
setAnswers(loadedAnswers);
};
getAnswers(
{
method: 'GET',
url: baseURL_A,
},
transformAnswers
);
}, [getAnswers]);
let questionsTitle = questions.map((element) => `${element.testo}`);
let questionIndicator = (currentQuestionIndex * 100) / questionsTitle.length;
let answerQuestionId = questions.map((q) => {
let temp = answers.filter(
(element) => `${element.domanda_id}` === `${q.id}`
);
return temp;
});
let sortedAnswers = answerQuestionId.map((item) =>
item.map((innerItem) => `${innerItem.testo}`)
);
return (
<Grid container spacing={1}>
<Grid item xs={12} sm={8} md={4}>
<Box
sx={{
minWidth: 275,
display: 'flex',
alignItems: 'center',
paddingLeft: '100%',
position: 'center',
}}
>
<Card
variant='outlined'
sx={{
minWidth: 400,
}}
>
{onTime ? (
<>
<CardContent>
<Grid container spacing={0}>
<Grid item xs={8}>
<Typography
variant='h5'
component='div'
fontFamily={'Roboto'}
>
Nome Test
</Typography>
</Grid>
<Grid item xs={4}>
<CountDown setOnTime={setOnTime} seconds={1000} />
</Grid>
</Grid>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box sx={{ width: '100%', mr: 1 }}>
<LinearProgress
variant='determinate'
value={questionIndicator}
/>
</Box>
<Box sx={{ minWidth: 35 }}>
<Typography variant='body2' color='text.secondary'>
{currentQuestionIndex + 1}/{questionsTitle.length + 1}
</Typography>
</Box>
</Box>
<Typography
sx={{ mb: 1.5, mt: 1.5, textAlign: 'center' }}
fontFamily={'Roboto'}
fontWeight={'bold'}
>
{questionsTitle[currentQuestionIndex]}
</Typography>
{sortedAnswers.length > 0 && (
<ButtonGroup
fullWidth
orientation='vertical'
onClick={handleSubmit}
>
{sortedAnswers[currentQuestionIndex].map(
(answer, index) => (
<ListItemButton
selected={clickedIndex === index}
onClick={() => handleSelectedItem(index)}
key={index}
>
{answer}
</ListItemButton>
)
)}
</ButtonGroup>
)}
</CardContent>
<CardActions>
<Button
onClick={goToNext}
disabled={!value}
variant='contained'
size='small'
>
Avanti
</Button>
</CardActions>
</>
) : (
<>
<Typography
sx={{ mb: 1.5, mt: 1.5 }}
fontFamily={'Roboto'}
fontWeight={'bold'}
align={'center'}
>
TEMPO ESAURITO
</Typography>
<NavLink> Torna ai Test</NavLink>
</>
)}
</Card>
</Box>
</Grid>
</Grid>
);
}
I wanto to store the given answers in an array so i can store them in an array and check later of they are correct. I’ve tried to do this:
const [givenAnswer, setGivenAnswer] = useState([]);
const handleSubmit = (event) => {
setValue(true);
let updatedAnswers = [...givenAnswer, event.target.value];
setGivenAnswer(updatedAnswers);
};
console.log(givenAnswer)
but in the console it returns an array of undefined, while i Want an array with the text of the answers. Can anyone help me, please?
