diff --git a/preguntas/generatorservice/question-service.js b/preguntas/generatorservice/question-service.js index e71d648b..5ef8624e 100644 --- a/preguntas/generatorservice/question-service.js +++ b/preguntas/generatorservice/question-service.js @@ -10,6 +10,9 @@ const templateData = require('./data/data.json'); const app = express(); const port = 8003; +//Constante para el tamaño de imagenes +const widthSize = 140; + // Connect to MongoDB const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/questiondb'; @@ -76,6 +79,14 @@ app.get('/generate-question', async (req, res) => { const wrongAnswer2 = formattedResults[randomIndex2]; const wrongAnswer3 = formattedResults[randomIndex3]; + //Cambio de URL. Imagen redimensionada + if (correctAnswer.rLabel.includes('upload.wikimedia.org')) { + correctAnswer.rLabel = getThumbUrl(correctAnswer.rLabel, widthSize); + wrongAnswer1.rLabel = getThumbUrl(wrongAnswer1.rLabel, widthSize); + wrongAnswer2.rLabel = getThumbUrl(wrongAnswer2.rLabel, widthSize); + wrongAnswer3.rLabel = getThumbUrl(wrongAnswer3.rLabel, widthSize); + } + //Creación de array desordenado con todas las respuestas const allAnswersSorted = [correctAnswer.rLabel, wrongAnswer1.rLabel, wrongAnswer2.rLabel, wrongAnswer3.rLabel]; const allAnswers = shuffleArray(allAnswersSorted); @@ -120,4 +131,18 @@ function shuffleArray(array) { [array[i], array[j]] = [array[j], array[i]]; } return array; +} + +function getThumbUrl(originalUrl, width) { + // Verifica si la URL es de Wikipedia + if (!originalUrl.includes('upload.wikimedia.org/wikipedia/commons/')) { + return "URL no válida"; + } + + // Reemplaza la parte de la URL para obtener la versión miniatura + let filename = originalUrl.split('/').pop(); + let thumbnailUrl = originalUrl.replace( + "/commons/", "/commons/thumb/").replace(".svg", ".png") + "/"+ width +"px-" + filename; + + return thumbnailUrl; } \ No newline at end of file diff --git a/webapp/src/components/QuizGame.css b/webapp/src/components/QuizGame.css index 7786454f..80189812 100644 --- a/webapp/src/components/QuizGame.css +++ b/webapp/src/components/QuizGame.css @@ -69,4 +69,11 @@ p { color: #666; +} + +button{ + background: fixed; + background-size: cover; + background-repeat: no-repeat; + background-position: center; } \ No newline at end of file diff --git a/webapp/src/components/QuizGame.js b/webapp/src/components/QuizGame.js index afa244e8..4416155f 100644 --- a/webapp/src/components/QuizGame.js +++ b/webapp/src/components/QuizGame.js @@ -53,13 +53,11 @@ const QuizGame = () => { setAnswerSelected(true); setButtonsDisabled(true); - if(isCorrect) { toast.success('¡Respuesta correcta!', { position: toast.POSITION.TOP_CENTER, onClose: () => setIsToastVisible(false) }); - console.log(answeredQuestions) } else { toast.error('Respuesta incorrecta', { position: toast.POSITION.TOP_CENTER, @@ -110,14 +108,24 @@ const QuizGame = () => { disabled={buttonsDisabled} onClick={() => handleAnswer(answer)} style={{ - backgroundColor: answerSelected && selectedAnswer && selectedAnswer.answer === answer - ? selectedAnswer.isCorrect + backgroundColor: answerSelected && selectedAnswer + ? answer === currentQuestion.correctAnswer ? 'green' : 'red' - : '#EE0E51' + : '#EE0E51', + + color: answer.startsWith('http') && answerSelected && selectedAnswer + ? answer === currentQuestion.correctAnswer + ? 'green' + : 'red' + : undefined }} > - {answer} + { + answer.startsWith('http') ? + imagen + : answer + } ) ))} @@ -130,14 +138,24 @@ const QuizGame = () => { disabled={buttonsDisabled} onClick={() => handleAnswer(answer)} style={{ - backgroundColor: answerSelected && selectedAnswer && selectedAnswer.answer === answer - ? selectedAnswer.isCorrect + backgroundColor: answerSelected && selectedAnswer + ? answer === currentQuestion.correctAnswer ? 'green' : 'red' - : '#EE0E51' + : '#EE0E51', + + color: answer.startsWith('http') && answerSelected && selectedAnswer + ? answer === currentQuestion.correctAnswer + ? 'green' + : 'red' + : undefined }} > - {answer} + { + answer.startsWith('http') ? + imagen + : answer + } ) ))}