- )}
-
- );
+
+ );
};
export default Login;
diff --git a/webapp/src/components/QuestionArea.jsx b/webapp/src/components/QuestionArea.jsx
new file mode 100644
index 00000000..526a20ae
--- /dev/null
+++ b/webapp/src/components/QuestionArea.jsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Box} from "@chakra-ui/react";
+import { AnswersBlock } from './AnswersBlock.jsx';
+import { EnunciadoBlock } from './EnunciadoBlock.jsx';
+
+export function QuestionArea(){
+
+ const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+ // Estado para almacenar los datos de la pregunta
+ const [questionJson, setQuestionData] = useState(null);
+ // Estado para almacenar las respuestas
+ const [respuestas, setRespuestas] = useState([]);
+
+ // Función para llamar al servicio y obtener los datos de la pregunta
+ const fetchQuestionData = async () => {
+ try {
+ // Llamada al servicio para obtener los datos de la pregunta (aquí asumiendo que el servicio devuelve un JSON)
+ const response = await axios.get(`${apiEndpoint}/getQuestion`);
+ const data = response.data;
+ setQuestionData(data); // Actualizar el estado con los datos de la pregunta obtenidos del servicio
+
+ //calcular respuestas
+ const respuestasArray = [data.correcta, data.respuestasIncorrecta1, data.respuestasIncorrecta2, data.respuestasIncorrecta3];
+ setRespuestas(respuestasArray);
+
+ } catch (error) {
+ console.error('Error fetching question data:', error);
+ }
+ };
+
+ // Llamar al servicio al cargar el componente (equivalente a componentDidMount)
+ useEffect(() => {
+ fetchQuestionData();
+ }, []); // El array vacío asegura que esto solo se ejecute una vez al montar el componente
+
+ /*
+ const questionJson = {
+ "pregunta": "What is the capital of France?",
+ "correcta": "Paris",
+ "respuestasIncorrecta1": "London",
+ "respuestasIncorrecta2": "Berlin",
+ "respuestasIncorrecta3": "Madrid"
+ }
+ */
+
+ //const respuestas = [questionJson.correcta,questionJson.respuestasIncorrecta1,questionJson.respuestasIncorrecta2,questionJson.respuestasIncorrecta3];
+
+
+ return(
+
+ {questionJson ? ( // Verificar si se han obtenido los datos de la pregunta
+ <>
+ {/* Renderizar el enunciado de la pregunta */}
+ {/* Renderizar las respuestas de la pregunta */}
+
+ ) : (
+ <>
+
Cargando...
{/* Mensaje de carga mientras se obtienen los datos */}
+
+ )}
+
+ )
+}
\ No newline at end of file
diff --git a/webapp/src/index.js b/webapp/src/index.js
index d563c0fb..68fce632 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import { ChakraProvider } from '@chakra-ui/react'
+
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
);