Implementación CSS de HistoricalData y otros cambios

webapp/src/components/HistoricalData.css

@@ -0,0 +1,50 @@
+.contenedor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+div[title="botones"]{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    grid-gap: 2em;
+}
+
+button{
+    margin: 1em;
+    padding: 0.25em;
+    background-color: rgba(31, 60, 134, 0.764);
+    color: white;
+    font-size: 0.75em;
+}
+
+table {
+    width: 90%;
+    border-collapse: collapse;
+    color: black;
+  }
+
+  th, td {
+    padding: 0.25em;
+    text-align: center;
+    border: 0.1em solid #000;
+  }
+
+  th[title='pregunta'] {
+    background-color: rgba(41, 120, 152, 0.764);
+  }
+
+  th[title='correcta'] {
+    background-color: rgba(79, 141, 18, 0.726);
+  }
+
+  th[title='incorrecta'] {
+    background-color: rgba(230, 72, 72, 0.952);
+  }
+
+  td{
+    background-color: rgba(61, 178, 224, 0.764);
+  }

webapp/src/components/HistoricalData.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 import React, { useState} from 'react';
 import { useNavigate} from 'react-router-dom';
 import { Container, Button} from '@mui/material';
+import './HistoricalData.css';
 
 const HistoricalData = () => {
   const navigate = useNavigate();
@@ -26,9 +27,9 @@ const HistoricalData = () => {
 
   return (
 
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='contenedor' >
 
-      <div>
+      <div title='botones'>
         <Button variant="contained" color="primary" onClick={handlePreviousPage}> 
           Página anterior
         </Button>
@@ -41,11 +42,11 @@ const HistoricalData = () => {
         <table>
           <thead>
             <tr>
-              <th>Pregunta</th>
-              <th>Opción correcta</th>
-              <th>Opción incorrecta 1</th>
-              <th>Opción incorrecta 2</th>
-              <th>Opción incorrecta 3</th>
+              <th title='pregunta'>Pregunta</th>
+              <th title='correcta'>Opción correcta</th>
+              <th title='incorrecta'>Opción incorrecta 1</th>
+              <th title='incorrecta'>Opción incorrecta 2</th>
+              <th title='incorrecta'>Opción incorrecta 3</th>
             </tr>
           </thead>
           <tbody>

webapp/src/components/HistoricalQuestions.js

@@ -0,0 +1,39 @@
+import axios from 'axios';
+import React, { useState} from 'react';
+import { useNavigate} from 'react-router-dom';
+import { Container, Button} from '@mui/material';
+
+const HistoricalQuestions = () => {
+  const navigate = useNavigate();
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  const [questionsHistory, setQuestionsHistory] = useState([]);
+
+  const  handleShowHistory = async () => {
+    try{
+      // It makes a petition to the api and store the response
+      const response = await axios.post(`${apiEndpoint}/getquestionshistory`, { });
+      setQuestionsHistory(response.data);
+    }catch (error){
+      console.error('Error:', error);
+    }    
+  }
+
+  const  handlePreviousPage = async () => {
+    let path= '/MainPage';
+    navigate(path); 
+  }
+
+  return (
+
+    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+
+      <div>
+
+    </div>
+  </Container>
+
+  );
+};
+
+export default HistoricalQuestions;

webapp/src/components/MainPage.js

@@ -16,6 +16,11 @@ const MainPage = () => {
         navigate(path);
     };
 
+    const handleShowHistoricalQuestions = () => {
+        let path= '/HistoricalQuestions';
+        navigate(path);
+    };
+
     return (
         <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
             <div title='main'>
@@ -33,6 +38,9 @@ const MainPage = () => {
                 <Button variant="contained" color="primary" onClick={handleShowHistoricalData}> 
                 Histórico de partidas
                 </Button>
+                <Button variant="contained" color="primary" onClick={handleShowHistoricalQuestions}> 
+                Histórico de preguntas
+                </Button>
             </div>
           </Container>
     )