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') ?
+
+ : 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') ?
+
+ : answer
+ }
)
))}