Lógica de respuesta correcta implementada

webapp/links.txt

@@ -0,0 +1,7 @@
+Paleta de colores-->
+    fondo: https://www.canva.com/colors/color-palettes/northern-lights-4/ 
+    botones: https://www.canva.com/colors/color-palettes/arts-and-crafts/
+Generador css-->https://front-end-tools.com/en/generateButton/
+Chakra UI-->https://chakra-ui.com/docs/styled-system/style-props
+
+Para empezar en local: npm start

webapp/src/components/AnswerButton.jsx

@@ -1,6 +1,6 @@
 import {Button} from '@chakra-ui/react'
 
-export function AnswerButton({text, colorFondo}){
+export function AnswerButton({text, colorFondo, onClick}){
 
     return(
         <Button 
@@ -14,6 +14,7 @@ export function AnswerButton({text, colorFondo}){
         _hover={{
             transform:"scale(1.05)",
         }}
+        onClick = {onClick}
         >
         {text}</Button>    
     )

webapp/src/components/AnswersBlock.jsx

@@ -1,25 +1,37 @@
 import { Box } from "@chakra-ui/react";
+import React, { useEffect, useState } from 'react';
 import { AnswerButton } from './AnswerButton.jsx';
 
-export function AnswersBlock({ respuestas }){
+export function AnswersBlock({ respuestas, correcta }){
 
-    const correcta = respuestas[0];
-    //Ordenar random
-    //Intercambiar el primer elemento con otro elemento aleatorio del array
-    const indiceAleatorio = Math.floor(Math.random() * (respuestas.length - 1));
-    const save = respuestas[0];
-    respuestas[0] = respuestas[indiceAleatorio];
-    respuestas[indiceAleatorio] = save;
+    const [respuestasAleatorizadas, setRespuestasAleatorizadas] = useState([]);
 
-    console.log(correcta);
+    let respuestasCopy = respuestas;
 
-    return(
-        <Box display="grid" flex="1" gridTemplateColumns="repeat(2,1fr)" 
-        gridColumnGap="2em" padding="4em" alignItems="center">
-            <AnswerButton text={respuestas[0]} colorFondo={"#A06AB4"}/>
-            <AnswerButton text={respuestas[1]} colorFondo={"#B5EECB"}/>
-            <AnswerButton text={respuestas[2]} colorFondo={"#FFD743"}/>
-            <AnswerButton text={respuestas[3]} colorFondo={"#D773A2"}/>
+    useEffect(() => {
+        //Baraja con algoritmo de Fisher-Yates
+        for (let i = respuestasCopy.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [respuestasCopy[i], respuestasCopy[j]] = [respuestasCopy[j], respuestasCopy[i]];
+        }
+
+        setRespuestasAleatorizadas(respuestasCopy);
+    }, [respuestasCopy]);
+
+    const handleButtonClick = (respuesta) => {
+        if (respuesta === correcta) {
+            alert("¡Respuesta correcta!");
+        } else {
+            alert("Respuesta incorrecta.");
+        }
+        console.log("owimawe");
+    };
+
+    return (
+        <Box display="grid" flex="1" gridTemplateColumns="repeat(2,1fr)" gridColumnGap="2em" padding="4em" alignItems="center">
+            {respuestasAleatorizadas.map((respuesta, index) => (
+                <AnswerButton key={index} text={respuesta} colorFondo={"#A06AB4"} onClick={() => handleButtonClick(respuesta)} />
+            ))}
         </Box>
-    )
-}
+    );
+}

webapp/src/components/QuestionArea.jsx

@@ -11,7 +11,9 @@ export function QuestionArea(){
   const [questionJson, setQuestionData] = useState(null);
     // Estado para almacenar las respuestas
   const [respuestas, setRespuestas] = useState([]);
-
+  // Estado que almacena la correcta
+  const [correcta, setCorrecta] = useState();
+/**
     // Función para llamar al servicio y obtener los datos de la pregunta
   const fetchQuestionData = async () => {
       try {          
@@ -33,16 +35,27 @@ export function QuestionArea(){
       useEffect(() => {
         fetchQuestionData();
     }, []); // El array vacío asegura que esto solo se ejecute una vez al montar el componente
+*/
+
+useEffect(() => {
+  const dataDev = {
+    "pregunta": "What is the capital of France?",
+    "correcta": "Paris",
+    "respuestasIncorrecta1": "London",
+    "respuestasIncorrecta2": "Berlin",
+    "respuestasIncorrecta3": "Madrid"
+  };
+
+  // Simulación de la obtención de datos de pregunta
+  const enunciadoDev = dataDev;
+  const respuestasDev = [dataDev.correcta, dataDev.respuestasIncorrecta1, dataDev.respuestasIncorrecta2, dataDev.respuestasIncorrecta3];
+  const correctaDev = dataDev.correcta;
 
-    /*
-    const questionJson = {
-      "pregunta": "What is the capital of France?",
-      "correcta": "Paris",
-      "respuestasIncorrecta1": "London",
-      "respuestasIncorrecta2": "Berlin",
-      "respuestasIncorrecta3": "Madrid"
-    }
-    */
+  // Establecer los datos de pregunta y respuestas
+  setQuestionData(enunciadoDev);
+  setRespuestas(respuestasDev);
+  setCorrecta(correctaDev);
+}, []);
 
     //const respuestas = [questionJson.correcta,questionJson.respuestasIncorrecta1,questionJson.respuestasIncorrecta2,questionJson.respuestasIncorrecta3];
 
@@ -53,7 +66,8 @@ export function QuestionArea(){
           {questionJson ? ( // Verificar si se han obtenido los datos de la pregunta
                 <>
                     <EnunciadoBlock pregunta={questionJson.pregunta}/> {/* Renderizar el enunciado de la pregunta */}
-                    <AnswersBlock respuestas={respuestas}/> {/* Renderizar las respuestas de la pregunta */}
+                    <AnswersBlock correcta={correcta} respuestas={respuestas}/> {/* Renderizar las respuestas de la pregunta */}
+                    <p>Hola</p>
                 </>
             ) : (
               <>