Hi everybody
For my internship, I have to do a function who selects an answer among several anwsers and replace the empty question part with the selected anwser.
For example :
How old ____you ?
a) are b) is c) have d)nothing
If the user clicks on a) answer, its replaces « ____ » in the question.
So final result would be like this :
How old are you ?
a) are b) is c) have d)nothing
But after thinking about it for several days, unfortunatly, I am still stuck so I am here to ask some kind people a bit of help.
So, here is the component I want to work with :
DisplayQuizz.jsx
const DisplayQuizz = ({test}) => {
const questions = test.questionElements.map(questionElement => <span key={questionElement.id}>{questionElement.questionElement} </span> )
const displayReponses = test.reponses.map(reponse => <MDBBtn className='response' key={reponse.id}>{reponse.reponse} </MDBBtn>)
return (
<div className="DisplayTest">
<MDBCardTitle className= 'super'>{test.appInstruction}</MDBCardTitle>
<MDBCardTitle className= 'superclasse'>
{test.constat}
</MDBCardTitle>
<MDBCardTitle className= 'super'>{test.instruction}</MDBCardTitle>
<MDBCardText className='question'>{questions}</MDBCardText>
<MDBCardText className='reponse' onClick={() => getAnswer()} >{displayReponses}</MDBCardText>
</div>
);
}
export default DisplayQuizz;
Firstly, I want the question and answers to interact with eachother so I was thinking I need a state in my component. So, I think I can choose between two answers :
A) I create a class component instead of my functional component. However, what I need to use to make my function will be in the render and I need it before the render.
B) I add Hooks to my component. But as Hooks is a new thing, there are not that much documentations to help me yet. Moreover, as I have been coding for less than a year with and without React, I am not a master of React yet and Hooks uses a different king of writing, so I am a bit confused. But I think, for this case, it is better to use Hooks. What do you think ?
Secondly, I think to be able to do my function, I need first to be able to select the choosen answer and then to replace the empty question space with it. I am right ?
So, I tried several things with not sucess. In addition, I think the biggest problem is how to trigger or get just one answer and not all from the map function.
Here is what I have done until now :
import React, { useState, useEffect } from 'react';
const DisplayQuizz = ({test}) => {
const questions = test.questionElements.map(questionElement => <span key={questionElement.id}>{questionElement.questionElement} </span> )
const displayReponses = test.reponses.map(reponse => <MDBBtn className='response' key={reponse.id}>{reponse.reponse} </MDBBtn>)
const [isSelected, setSelected] = useState(true);
function useAnswerSelected() {
setSelected(prevState => ({
isSelected: !prevState.isSelected,
}));
getAnswer()
console.log("Bien joué", isSelected);
}
function getAnswer() {
if(isSelected === true) {
const selectedAnswer = test.reponses.map((reponse, id) => {
return (
<li key={id} onClick={() => useAnswerSelected(reponse.reponse)}>
</li>,
console.log(reponse.reponse, id)
);
});
}
}
return (
<div className="DisplayTest">
<MDBCardTitle className= 'super'>{test.appInstruction}</MDBCardTitle>
<MDBCardTitle className= 'superclasse'>
{test.constat}
</MDBCardTitle>
<MDBCardTitle className= 'super'>{test.instruction}</MDBCardTitle>
<MDBCardText className='question'>{questions}</MDBCardText>
<MDBCardText className='reponse' onClick={() => getAnswer()} >{displayReponses}</MDBCardText>
</div>
);
}
export default DisplayQuizz;
Not very good in my opinion. But I admit that I am thinking so much about it that I am very confused and lost now. If someone could tell me by which thing I need to begin with, I would be very grateful.
Lastly, when I was searching for some solution on internet to help me, I did not see any React quiz app who would be replacing an empty space question by a choosen answer. So I came to think maybe is it not possible ? What do you think ?
I thank all of you to have read my post until here and I hope some people could help me a bit with my problem.