diff --git a/webapp/src/components/game/Game.js b/webapp/src/components/game/Game.js
new file mode 100644
index 0000000..18acaf4
--- /dev/null
+++ b/webapp/src/components/game/Game.js
@@ -0,0 +1,100 @@
+// Importa React, useState para manejar el estado, axios para hacer solicitudes HTTP, y componentes de Material UI para la interfaz.
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Container, Typography, Button, Box, Paper, Snackbar } from '@mui/material';
+import MuiAlert from '@mui/material/Alert';
+import exampleData from './example_data.js';
+
+// Define el endpoint de la API, utilizando una variable de entorno o un valor predeterminado.
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+const Game = () => {
+
+ const [question, setQuestion] = useState('');
+ const [answers, setAnswers] = useState([]);
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState('');
+ const [snackbarSeverity, setSnackbarSeverity] = useState('success');
+ const handleSnackbarClose = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+ setSnackbarOpen(false);
+ };
+
+ const handleAnswerButtonClick = (correct) => {
+ if (correct) {
+ setSnackbarMessage('Respuesta correcta');
+ setSnackbarSeverity('success');
+ fetchQuestionAndAnswers();
+ } else {
+ setSnackbarMessage('Respuesta incorrecta');
+ setSnackbarSeverity('error');
+ }
+ setSnackbarOpen(true);
+ };
+
+ // Función para llamar al questionservice y obtener la pregunta y las respuestas
+ const fetchQuestionAndAnswers = async () => {
+ try {
+ const response = await axios.get(`${apiEndpoint}/getquestion`);
+ // Almacena la pregunta y las respuestas en los estado.
+ setQuestion(response.data.question);
+ setAnswers(response.data.answers);
+ // setQuestion(exampleData.question);
+ // setAnswers(exampleData.answers);
+ } catch (error) {
+ // Manejo básico de errores: imprime el error en la consola.
+ console.error('Error fetching question and answers', error);
+ }
+ };
+
+ // Renderiza el componente.
+ return (
+
+
+ Generate Question and Answers
+
+
+
+
+ {/* Muestra la pregunta y las respuesta si existen */}
+ {question && (
+
+ Question:
+ {question}
+
+ )}
+ {answers && answers.map((answer, index) => (
+
+
+
+ ))}
+
+
+ {snackbarMessage}
+
+
+
+ );
+};
+
+// Exporta el componente para su uso en otras partes de la aplicación.
+export default Game;
\ No newline at end of file
diff --git a/webapp/src/components/game/example_data.js b/webapp/src/components/game/example_data.js
new file mode 100644
index 0000000..4b5e3ef
--- /dev/null
+++ b/webapp/src/components/game/example_data.js
@@ -0,0 +1,8 @@
+const example_data = {question: 'pregunta ejemplo', answers: [
+ {answer: 'respuesta correcta', correct: true},
+ {answer: 'respuesta incorrecta1', correct: false},
+ {answer: 'respuesta incorrecta2', correct: false},
+ {answer: 'respuesta incorrecta3', correct: false}
+]};
+
+export default example_data;
\ No newline at end of file