Fixed problem with a part of css and the navigation

Arquisoft · Mar 14, 2024 · 92e4b34 · 92e4b34
1 parent 4a51ee8
commit 92e4b34
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/webapp/src/components/FirstGame.css b/webapp/src/components/FirstGame.css
@@ -21,16 +21,10 @@ button {
 .asnwers {
     width:100%;
 }
-.progressBar {
-    height: 100%; 
-    margin-top: 10;
-    width:10%;
-    display: inline-block;
-}  
 
-.question {
+
+.questionFirstGame {
     height: 100%;
-    width: 90%;
     display: inline-block;
 }
 

diff --git a/webapp/src/components/FirstGame.js b/webapp/src/components/FirstGame.js
@@ -5,10 +5,15 @@ import { CircularProgressbar } from 'react-circular-progressbar';
 import 'react-circular-progressbar/dist/styles.css';
 import axios from 'axios';
 import { json } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+
 
 const apiEndpoint = 'http://localhost:8007';
 const Quiz = () => {
+
+  const navigation = useNavigate(); // Añade esto
+
+
   var questions = useLocation().state.questions;
 
   const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
@@ -91,18 +96,18 @@ const Quiz = () => {
 
   };
 
+  const goBack = async () => {
+    navigation('/menu')
+  }
+
   return (
     <Container component="main" maxWidth="xl" sx={{ marginTop: 4 }}>
       <div className="questionStructure">
-        <div class="question">
+        <div class="questionFirstGame">
         <Typography class="questionText" component="h1" variant="h5" sx={{ textAlign: 'center' }}>
           {questions[currentQuestionIndex].question}
         </Typography>
         </div>
-
-        <div class="progressBar">
-          {/* {MiCircularProgressbar} */}
-        </div>
         <div class="allAnswers">
         {questions[currentQuestionIndex].options.map((option, index) => (
           <div key={index} className="answers">
@@ -119,7 +124,15 @@ const Quiz = () => {
         )
         )}
         </div>
+        <button
+              name="openStoredQuestions"
+              onClick={() => goBack()}
+              style={{backgroundColor: 'lightgrey'}}
+            >
+              Volver al menu
+            </button>
       </div>
+
       {/* {isCorrect !== null && (
         <p>{isCorrect ? '¡Respuesta correcta!' : 'Respuesta incorrecta.'}</p>
       )} */}

diff --git a/webapp/src/components/Menu.js b/webapp/src/components/Menu.js
@@ -91,6 +91,8 @@ const Menu = () => {
       navigation("/appQuestion")
     }
 
+
+
     return (
         <Container component="main" maxWidth="xl" sx={{ marginTop: 4 }}>
             <p>Bienvenido a wiq_06c por favor seleccione un modo de juego para comenzar partida:</p>
@@ -108,6 +110,8 @@ const Menu = () => {
             >
               Preguntas guardadas
             </button>
+
+
 
         </Container>
     );

diff --git a/webapp/src/storeQuestion/App.jsx b/webapp/src/storeQuestion/App.jsx
@@ -2,6 +2,7 @@ import Question from './components/Question';
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import './css/questions.css';
+import { useNavigate } from 'react-router-dom'; // Importa useHistory
 
 function App(){
     /*const newQuestion = {
@@ -28,6 +29,7 @@ function App(){
 
       const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
+      const navigation = useNavigate();
 
       useEffect(() => {
 
@@ -44,9 +46,20 @@ function App(){
         //eslint-disable-next-line
       }, []);
 
+      const goBack = async () => {
+        navigation('/menu')
+      }
+
     return (
       <>
         <h2>Almacén de preguntas</h2>
+        <button
+              name="openStoredQuestions"
+              onClick={() => goBack()}
+              style={{backgroundColor: 'lightgrey'}}
+            >
+              Volver al menu
+            </button>
         <main className='grid'>
           {preguntas.map(question => (
             <Question key={question._id} newQuestion={question} />