Merge pull request #90 from Arquisoft/quizGame

Generación síncrona de preguntas V.1 #60
Arquisoft · Mar 30, 2024 · 874fe63 · 874fe63
2 parents b6fe130 + dc7a620
commit 874fe63
Showing 1 changed file with 31 additions and 8 deletions.
diff --git a/webapp/src/components/QuizGame.js b/webapp/src/components/QuizGame.js
@@ -18,6 +18,8 @@ const QuizGame = () => {
     const [isFinished, setIsFinished] = useState(false);
     const [buttonsDisabled, setButtonsDisabled] = useState(false);
 
+    const [auxQuestion, setAuxQuestion] = useState(null);
+
 
     //const image = 'https://img.freepik.com/vector-gratis/fondo-signos-interrogacion_78370-2896.jpg';
     const image1 = 'https://t3.ftcdn.net/jpg/05/60/26/26/360_F_560262652_SMg7tie3Zii0zFT9LYkKMqrNrPcU5owB.jpg';
@@ -29,13 +31,18 @@ const QuizGame = () => {
     const wrongImage = 'https://img.freepik.com/foto-gratis/signo-cruzado-incorrecto-o-negativo-negativo-eleccion-icono-simbolo-icono-ilustracion-aislado-sobre-fondo-rojo-3d-rendering_56104-1219.jpg?t=st=1710078617~exp=1710082217~hmac=a9dc243dfad6f2c548c66d6748c5aae79b5039b1b5763e34bce3e787114bc329&w=1380';
 
     useEffect(() => {
-        const generateQuestion = async () => {
-            try {
-                const response = await axios.get(`${apiEndpoint}/generate-question`);
-                setCurrentQuestion(response.data);
-                setError(null);
-            } catch (error) {
-                setError('Ha habido un error cargando las preguntas');
+        const generateQuestion =  async () => {
+            if (questionsNumber < 1){
+                try {
+                    const response = await axios.get(`${apiEndpoint}/generate-question`);
+                    setCurrentQuestion(response.data);
+                    setError(null);
+                } catch (error) {
+                    setError('Ha habido un error cargando las preguntas');
+                }
+            }
+            else{
+                setCurrentQuestion(auxQuestion);
             }
         };
 
@@ -44,15 +51,17 @@ const QuizGame = () => {
             setAnswerSelected(false);
             setButtonsDisabled(false);
         }
-    }, [questionsNumber, isToastVisible, apiEndpoint]);
+    }, [questionsNumber, isToastVisible, apiEndpoint, auxQuestion]);
 
     const handleAnswer = (answer) => {
+        //Comprueba si la respuesta es correcta
         const isCorrect = answer === currentQuestion.correctAnswer;
         setAnsweredQuestions(prev => [...prev, { question: currentQuestion, isCorrect }]);
         setSelectedAnswer({ answer, isCorrect });
         setAnswerSelected(true);
         setButtonsDisabled(true);
 
+        //Muestra un toast con el resultado de la respuesta
         if(isCorrect) {
             toast.success('¡Respuesta correcta!', { 
                 position: toast.POSITION.TOP_CENTER, 
@@ -64,7 +73,11 @@ const QuizGame = () => {
                 onClose: () => setIsToastVisible(false) 
             }); 
         }
+
+        //Rellena la pregunta auxiliar de cara a la siguiente pregunta
+        generateAuxQuestion();
 
+        //Incrementa el número de preguntas.
         setIsToastVisible(true);
         setQuestionsNumber(prev => prev + 1);
 
@@ -78,6 +91,16 @@ const QuizGame = () => {
 
     };
 
+    const generateAuxQuestion = async () => {
+        try {
+            const response = await axios.get(`${apiEndpoint}/generate-question`);
+            setAuxQuestion(response.data);
+            setError(null);
+        } catch (error) {
+            setError('Ha habido un error cargando las preguntas');
+        }
+    }
+
     return (
         <div id="mainContainer" 
         style={{