Skip to content
Snippets Groups Projects
Commit fb09f557 authored by GOEPP THOMAS's avatar GOEPP THOMAS
Browse files

:twisted_rightwards_arrows: merge feat: technical overhaul of playing quiz 

Merge branch 'feature/100-confirm-button-to-pass-question' into 'develop'
parents 1b3390e9 f76cd4bf
Branches feature/101-add-loading-composant
3 merge requests!132V4.0,!108V1,!97feat: technical overhaul of playing quiz
Hide whitespace changes
Inline Side-by-side
screens/PlayingQuiz/PlayingQuizBody.tsx
+ 114
− 84
View file @ fb09f557
......@@ -19,108 +19,116 @@ interface Props {
navigation: NavigationProp<any>;
}
export default function PlayingQuizBody({ quiz, setQuiz, isAlreadyPlayed, setIsAlreadyPlayed, navigation }: Props) {
const [selectedAnswerIndex, setSelectedAnswerIndex] = useState<number | null>(null);
const [isCorrect, setIsCorrect] = useState<boolean | null>(null);
const [correctAnswer, setCorrectAnswer] = useState<AnswerModel | null>(null);
const [isAnswered, setIsAnswered] = useState<boolean>(false);
const [isDisabled, setIsDisabled] = useState<boolean>(true);
const { getAnswerQuiz } = useQuizService();
enum QuizState {
ANSWERING= "Answering",
LOADING= "Loading",
SHOWING_RESULTS= "ShowingResults",
}
useEffect(() => {
if(selectedAnswerIndex !== null) {
setIsDisabled(false);
}
if(selectedAnswerIndex === null) {
setIsDisabled(true);
}
const getStyleOfAnswerButtonText = (answerId: number, selectedAnswerIndex: number | null, correctAnswerId: number | null, quizState: QuizState) => {
if(quizState === QuizState.LOADING)
{
return styles.loadingText;
}
if(quizState === QuizState.ANSWERING)
{
return styles.answerText;
}, [selectedAnswerIndex]);
}
if(quizState === QuizState.SHOWING_RESULTS)
{
if(answerId === correctAnswerId) return styles.correctText;
if(answerId !== correctAnswerId && selectedAnswerIndex === answerId) return styles.incorrectText;
}
return styles.answerText;
}
useEffect(() => {
if (quiz) {
setSelectedAnswerIndex(null);
setIsCorrect(null);
setCorrectAnswer(null);
setIsAnswered(false);
}
}, [quiz?.nbActualQuestion]);
const getStyleOfAnswerButton = (answerId: number, selectedAnswerIndex: number | null, correctAnswerId: number | null, quizState: QuizState) => {
if(quizState === QuizState.LOADING)
{
return styles.loadingAnswer;
}
if(quizState === QuizState.ANSWERING)
{
if(selectedAnswerIndex === null) return styles.answerButton;
if(selectedAnswerIndex === answerId) return styles.selectedAnswer;
if (!quiz) return null;
}
if(quizState === QuizState.SHOWING_RESULTS)
{
if(answerId === correctAnswerId) return styles.correctAnswer;
if(answerId !== correctAnswerId && selectedAnswerIndex === answerId) return styles.incorrectAnswer;
}
return styles.answerButton;
}
const currentQuestion: QuestionModel = quiz.questions[quiz.nbActualQuestion - 1];
export default function APlayingQuizBody({ quiz, setQuiz, isAlreadyPlayed, setIsAlreadyPlayed, navigation }: Props) {
const [currentQuestion, setCurrentQuestion] = useState<QuestionModel>(quiz.questions[quiz.nbActualQuestion - 1]);
const [questionIsFinished, setQuestionIsFinished] = useState(false);
const [selectedAnswerId, setSelectedAnswerId] = useState<number | null>(null);
const [validationButtonIsDisabled, setValidationButtonIsDisabled] = useState(true);
const [quizState, setQuizState] = useState(QuizState.ANSWERING);
const [correctAnswerId, setCorrectAnswerId] = useState<number | null>(null);
const handleConfirmAnswerPressed = async () => {
if(selectedAnswerIndex === null) return;
setIsDisabled(true);
setIsAnswered(true);
const {getAnswerQuiz} = useQuizService();
const answers = await getAnswerQuiz(quiz.code, currentQuestion.id, currentQuestion.answers[selectedAnswerIndex].id);
useEffect(() => {
setCurrentQuestion(quiz.questions[quiz.nbActualQuestion - 1]);
setSelectedAnswerId(null); // Réinitialise la sélection
setQuestionIsFinished(false); // Réinitialise l'état de la question
setCorrectAnswerId(null); // Réinitialise l'id de la bonne réponse
setQuizState(QuizState.ANSWERING)
}, [quiz.nbActualQuestion]);
const getCorrectAnswer = (answers: AnswerModel[]): AnswerModel => {
const correctAnswer = answers.find((answer) => answer.isCorrect);
if (!correctAnswer) throw new Error("No correct answer found");
return correctAnswer;
};
const onValidation = async () => {
setQuizState(QuizState.LOADING);
const answerId = currentQuestion.answers.find((answer) => answer.id === selectedAnswerId)?.id;
if(!answerId) return;
const answers = await getAnswerQuiz(quiz.code, currentQuestion.id, answerId);
if (HttpError.isHttpError(answers)) {
navigation.navigate("TabNavigator");
return;
}
setQuizState(QuizState.SHOWING_RESULTS);
const correctAnswerIdFetched = getCorrectAnswer(answers).id;
if(selectedAnswerId === correctAnswerIdFetched)
setQuiz((prevQuiz) => ({
...prevQuiz,
score: prevQuiz.score + 1,
}));
setCorrectAnswerId(correctAnswerIdFetched);
const correctAnswer = getCorrectAnswer(answers);
const isAnswerCorrect = currentQuestion.answers[selectedAnswerIndex].id === correctAnswer.id;
setSelectedAnswerIndex(selectedAnswerIndex);
setIsCorrect(isAnswerCorrect);
setCorrectAnswer(correctAnswer);
await new Promise((resolve) => setTimeout(resolve, 2000));
};
const onContinue = () => {
if (quiz.nbActualQuestion === quiz.questions.length) {
navigation.navigate("EndQuiz", {quiz: quiz});
return;
}
setQuiz((prevQuiz) => ({
...prevQuiz,
nbActualQuestion: prevQuiz.nbActualQuestion + 1,
score: isAnswerCorrect ? prevQuiz.score + 1 : prevQuiz.score
}));
}
const handleAnswerPress = async (index: number) => {
if (isAnswered) return
setSelectedAnswerIndex(index);
};
const getCorrectAnswer = (answers: AnswerModel[]): AnswerModel => {
const correctAnswer = answers.find((answer) => answer.isCorrect);
if (!correctAnswer) throw new Error("No correct answer found");
return correctAnswer;
};
const getButtonStyle = (index: number) => {
if (selectedAnswerIndex === null) return ButtonsStyles.answerButton;
if(!isAnswered && index === selectedAnswerIndex && !isCorrect) return styles.selectedAnswer;
if (index === selectedAnswerIndex && isCorrect !== null) {
return isCorrect ? styles.correctAnswer : styles.incorrectAnswer;
}
if (currentQuestion.answers[index].id === correctAnswer?.id) {
return styles.correctAnswer;
useEffect(() => {
if(selectedAnswerId !== null) {
setValidationButtonIsDisabled(false)
return;
}
return ButtonsStyles.answerButton;
};
const getTextStyle = (index: number) => {
if (selectedAnswerIndex === null || !isAnswered && index === selectedAnswerIndex) return TextsStyles.defaultText;
setValidationButtonIsDisabled(true)
}, [selectedAnswerId]);
if (index === selectedAnswerIndex && isCorrect !== null) {
return isCorrect ? styles.correctText : styles.incorrectText;
}
if (currentQuestion.answers[index].id === correctAnswer?.id) {
return styles.correctText;
const onAnsweredButtonClicked = (answerId: number) => {
if(quizState === QuizState.SHOWING_RESULTS || quizState === QuizState.LOADING) {
return;
}
return TextsStyles.defaultText;
};
setSelectedAnswerId(answerId);
}
return (
<View style={styles.buttonContainer}>
......@@ -130,14 +138,14 @@ export default function PlayingQuizBody({ quiz, setQuiz, isAlreadyPlayed, setIsA
<DefaultButton
key={index}
text={answer.text}
handleButtonPressed={() => handleAnswerPress(index)}
buttonStyle={getButtonStyle(index)}
buttonText={getTextStyle(index)}
handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
/>
))}
{/* Ajout du PlayButton à la fin */}
<View style={styles.playButtonContainer}>
<BlueButton onPress={handleConfirmAnswerPressed} text="Confirm" buttonStyle={{borderRadius: 50}} isDisabled={isDisabled}/>
<BlueButton onPress={() => quizState === QuizState.ANSWERING ? onValidation() : onContinue()} text={quizState === QuizState.ANSWERING ? "CONFIRM" : "CONTINUE"} buttonStyle={{borderRadius: 50}} isDisabled={false}/>
</View>
</>
) : (
......@@ -147,6 +155,7 @@ export default function PlayingQuizBody({ quiz, setQuiz, isAlreadyPlayed, setIsA
);
}
const styles = StyleSheet.create({
buttonContainer: {
display: 'flex',
......@@ -171,11 +180,20 @@ const styles = StyleSheet.create({
borderColor: 'red',
borderWidth: 2,
},
loadingAnswer: {
...ButtonsStyles.answerButton,
backgroundColor: '#4F6367',
borderWidth: 2,
},
selectedAnswer: {
...ButtonsStyles.answerButton,
borderColor: '#45128c',
borderColor: 'grey',
borderWidth: 2,
},
answerText: {
color: 'black',
textAlign: 'center',
},
correctText: {
fontWeight: 'bold',
color: 'green',
......@@ -185,9 +203,21 @@ const styles = StyleSheet.create({
color: 'red',
},
loadingText: {
fontSize: 18,
color: 'gray',
color: 'black',
textAlign: 'center',
},
answerButton: {
backgroundColor: "#F3F3F3",
height: '15%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
justifyContent: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.5,
elevation: 5,
},
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment