Conectar generador preguntas con front

questionService/package.json

@@ -2,16 +2,17 @@
   "name": "rest",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node server.js",
+    "test": "jest"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "axios": "^1.6.7",
+    "cors": "^2.8.5",
     "express": "^4.18.2"
   }
-
 }

questionService/server.js

@@ -1,40 +1,60 @@
-// Importa Express.js
+// Importamos el módulo Express para crear un servidor web
 const express = require('express');
+// Importamos el módulo Axios para realizar solicitudes HTTP
+const axios = require('axios');
+const cors = require('cors');
 
-// Crea una instancia de Express
+// Creamos una nueva aplicación Express
 const app = express();
-const PORT = 3001;
+app.use(cors());
 
-// Ruta de ejemplo
-app.get('/', (req, res) => {
-  res.send('¡Hola, mundo!');
+// Definimos una ruta GET en '/pregunta'
+app.get('/pregunta', async (req, res) => {
+    // URL del endpoint SPARQL de Wikidata
+    const url = "https://query.wikidata.org/sparql";
+    // Consulta SPARQL para obtener países y sus capitales
+    const query = `
+    SELECT ?country ?countryLabel ?capital ?capitalLabel WHERE {
+      ?country wdt:P31 wd:Q6256;
+               wdt:P36 ?capital.
+      SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es". }
+    }
+    LIMIT 50
+    `;
+    // Realizamos la solicitud HTTP GET al endpoint SPARQL con la consulta
+    const response = await axios.get(url, { params: { format: 'json', query } });
+    // Extraemos los resultados de la consulta
+    const bindings = response.data.results.bindings;
+    // Seleccionamos un índice aleatorio para la respuesta correcta
+    const correctAnswerIndex = Math.floor(Math.random() * bindings.length);
+    // Obtenemos la respuesta correcta
+    const correctAnswer = bindings[correctAnswerIndex];
+    // Creamos la pregunta
+    const question = `¿Cuál es la capital de ${correctAnswer.countryLabel.value}?`;
+    // Inicializamos las respuestas con la respuesta correcta
+    const answerGood = correctAnswer.capitalLabel.value;
+    const answers = [answerGood];
+    // Añadimos tres respuestas incorrectas
+    for (let i = 0; i < 3; i++) {
+        let randomIndex;
+        do {
+            // Seleccionamos un índice aleatorio distinto al de la respuesta correcta
+            randomIndex = Math.floor(Math.random() * bindings.length);
+        } while (randomIndex === correctAnswerIndex);
+        // Añadimos la capital del país seleccionado aleatoriamente a las respuestas
+        answers.push(bindings[randomIndex].capitalLabel.value);
+    }
+    // Mezclamos las respuestas
+    for (let i = answers.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        // Intercambiamos las respuestas en los índices i y j
+        [answers[i], answers[j]] = [answers[j], answers[i]];
+    }
+    // Enviamos la pregunta y las respuestas como respuesta a la solicitud HTTP
+    res.json({ question, answerGood, answers });
 });
 
-// Inicia el servidor
-app.listen(PORT, () => {
-  console.log(`Servidor escuchando en el puerto ${PORT}`);
-});
-
-// Definimos la URL de la API de Wikidata para buscar información sobre un tema específico
-const searchUrl = 'https://www.wikidata.org/w/rest.php/wikibase/v0/entities/items/';
-
-// Función para obtener información sobre un tema específico
-function buscarInformacion(tema) {
-    // Construimos la URL de búsqueda concatenando el tema a la URL base
-    const url = searchUrl + tema
-    console.log(url)
-
-    // Realizamos la solicitud GET a la API de Wikidata
-    fetch(url)
-        .then(response => response.json())
-        .then(data => {
-            console.log(data)
-        })
-        .catch(error => console.error('Error al buscar información:', error));
-}
+// Iniciamos el servidor en el puerto 3000
+const server = app.listen(2500, () => console.log('El servidor está escuchando en el puerto 2500'));
 
-// Ejemplo de uso: buscar información sobre el tema "JavaScript"
-app.get('/search', (req, res) => {
-    res.send('¡Hola, mundo!');
-    buscarInformacion("Q42");
-  });
+module.exports = server

webapp/src/components/Pages/Juego.js

@@ -1,24 +1,68 @@
 // src/components/Login.js
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import '../Estilos/juego.css';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 
-const botonRespuesta = (event) => { 
-  //comprobara si la respuesta es correcta o no 
+const Juego = ({isLogged}) => {
+  const [pregunta, setPregunta] = useState("")
+  const [resCorr, setResCorr] = useState("")
+  const [resFalse, setResFalse] = useState([])
+  const [respondido, setRespodido] = useState(false)
+  const [victoria, setVictoria] = useState(false)
+
+  const botonRespuesta = (respuesta) => { 
+    //comprobara si la respuesta es correcta o no 
+    setRespodido(true)
+    if(respuesta == resCorr){
+      console.log("entro a respuesat correcta")
+      setVictoria(true)
+    }
+    else{
+      setVictoria(false)
+    }
+  };
+
+  async function CargarPregunta(pregunta, resCorr, resFalse){
+    useEffect(() => {
+      fetch("http://localhost:2500/pregunta")
+        .then((res) => res.json())
+        .then((todo) => {
+          setPregunta(todo.question)
+          setResCorr(todo.answerGood)
+          setResFalse(todo.answers)
+        });
+    }, []);
+    console.log(pregunta);
+    console.log(resCorr);
+    console.log(resFalse)
   }
 
-const Juego = ({isLogged}) => {
+  CargarPregunta(pregunta, resCorr, resFalse);
+
+
   return (
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <h2> PREGUNTA </h2>
-      <div className="button-container">
-        <button id="boton1" className="button" onClick={botonRespuesta}>RESPUESTA PRUEBA PARA VER CUANTO OCUPA 1</button>
-        <button id="boton2" className="button" onClick={botonRespuesta}>RESPUESTA PRUEBA PARA VER UNA RESPUESTA LARGA</button>
-        <button id="boton3" className="button" onClick={botonRespuesta}>RESPUESTA PRUEBA JEJE</button>
-        <button id="boton4" className="button" onClick={botonRespuesta}>RESPUESTA PRUEBA PARA VER QUE TAL</button>
-      </div>
-    </Container>
+    <>
+    {respondido ? (
+      <>
+      {victoria ? (
+        <h2> ACERTASTE </h2>
+      ) : (
+        <h2> FALLASTE </h2>
+      )}
+      </>
+      ) : (
+      <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+        <h2> {pregunta} </h2>
+        <div className="button-container">
+          <button id="boton1" className="button" onClick={() => botonRespuesta(resFalse[1])}>{resFalse[1]}</button>
+          <button id="boton2" className="button" onClick={() => botonRespuesta(resFalse[2])}>{resFalse[2]}</button>
+          <button id="boton3" className="button" onClick={() => botonRespuesta(resFalse[0])}>{resFalse[0]}</button>
+          <button id="boton4" className="button" onClick={() => botonRespuesta(resFalse[3])}>{resFalse[3]}</button>
+        </div>
+      </Container>
+      )}
+      </>
   );
 };