From fbeab07f7cea586298b3794bb5f8fba627c4f5a4 Mon Sep 17 00:00:00 2001 From: Fernando Jose Gonzalez Sierra Date: Sun, 3 Mar 2024 15:04:34 +0100 Subject: [PATCH] Conectar generador preguntas con front --- questionService/package-lock.json | 35 +++++++++++ questionService/package.json | 7 ++- questionService/server.js | 86 +++++++++++++++++----------- questionService/serverSPARQL.js | 55 ------------------ webapp/package-lock.json | 1 + webapp/src/components/Pages/Juego.js | 70 +++++++++++++++++----- 6 files changed, 150 insertions(+), 104 deletions(-) delete mode 100644 questionService/serverSPARQL.js diff --git a/questionService/package-lock.json b/questionService/package-lock.json index 8e034d5..e260180 100644 --- a/questionService/package-lock.json +++ b/questionService/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "axios": "^1.6.7", + "cors": "^2.8.5", "express": "^4.18.2" } }, @@ -137,6 +138,18 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -521,6 +534,14 @@ "node": ">= 0.6" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", @@ -860,6 +881,15 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -1127,6 +1157,11 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==" }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + }, "object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", diff --git a/questionService/package.json b/questionService/package.json index 9e9ef55..bedb9b2 100644 --- a/questionService/package.json +++ b/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" } - } diff --git a/questionService/server.js b/questionService/server.js index bfc2dc5..f0fe6c0 100644 --- a/questionService/server.js +++ b/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 \ No newline at end of file diff --git a/questionService/serverSPARQL.js b/questionService/serverSPARQL.js deleted file mode 100644 index 76e04fb..0000000 --- a/questionService/serverSPARQL.js +++ /dev/null @@ -1,55 +0,0 @@ -// 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'); - -// Creamos una nueva aplicación Express -const app = express(); - -// 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 answers = [correctAnswer.capitalLabel.value]; - // 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, answers }); -}); - -// Iniciamos el servidor en el puerto 3000 -app.listen(2500, () => console.log('El servidor está escuchando en el puerto 2500')); diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 0cac471..a564081 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "webapp", "version": "0.1.0", "dependencies": { "@emotion/react": "^11.11.3", diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js index 5d2632b..029e87d 100644 --- a/webapp/src/components/Pages/Juego.js +++ b/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 ( - -

PREGUNTA

-
- - - - -
- + <> + {respondido ? ( + <> + {victoria ? ( +

ACERTASTE

+ ) : ( +

FALLASTE

+ )} + + ) : ( + +

{pregunta}

+
+ + + + +
+ + )} + ); };