Merge pull request #89 from Arquisoft/quizGame

Issue #87. Manejo de imagenes como respuesta
Arquisoft · Mar 29, 2024 · b6fe130 · b6fe130
2 parents 703b297 + a6b3bed
commit b6fe130
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 10 deletions.
diff --git 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;
 }
diff --git 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;
 }
diff --git 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') ? 
+                                                <img src={answer} alt="imagen" style={{ height: '110px' }} />  
+                                            : answer
+                                        }
                                     </Button>
                                 )
                             ))}
@@ -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') ? 
+                                            <img src={answer} alt="imagen" style={{ height: '110px' }} /> 
+                                            : answer
+                                        }
                                     </Button>
                                 )
                             ))}