diff --git a/docs/images/05_nivel_2.png b/docs/images/05_nivel_2.png
index 76028af..2f6812c 100644
Binary files a/docs/images/05_nivel_2.png and b/docs/images/05_nivel_2.png differ
diff --git a/webapp/src/components/Estilos/juego.css b/webapp/src/components/Estilos/juego.css
index 28f2529..2aa49a0 100644
--- a/webapp/src/components/Estilos/juego.css
+++ b/webapp/src/components/Estilos/juego.css
@@ -1,31 +1,43 @@
-
+#botonSiguiente{
+ width: 200px;
+ padding: 10px 20px;
+ color: #ffffff; /* Color del texto */
+ background-color: #4CAF50; /* Color de fondo verde */
+ border: 2px solid #4CAF50; /* Borde verde */
+ }
.button {
-
padding: 20px 20px 20px 20px ; /* espacio entre borde y el texto dentro del boton */
- border: 2px solid black; /* Color del borde */
+ border: 2px solid; /* Color del borde */
font-weight: bold;
border-radius: 5px; /* Borde redondeado */
background-color: #613FBB; /* Color de fondo */
margin-bottom: 10px;
margin-left:-48px;
- width: 500px; /* Ajusta el valor segĂșn el ancho deseado */
+ background-color: white;
+ width: 500px;
+ }
+
+ .button:disabled {
+ color:black;
}
+
+
#boton1{
- background-color: #E14E4E; /* Color de fondo */
+ border: 6px solid #E14E4E;
}
#boton2{
- background-color: #E1CB4E; /* Color de fondo */
+ border: 6px solid #CBBA2A;
}
#boton3{
- background-color: #4EE15E; /* Color de fondo */
+ border: 6px solid #05B92B;
}
#boton4{
- background-color: #4E8DE1; /* Color de fondo */
+ border: 6px solid #1948D9;
}
body h2 {
diff --git a/webapp/src/components/Pages/Home.js b/webapp/src/components/Pages/Home.js
index 9293b37..e8fcb19 100644
--- a/webapp/src/components/Pages/Home.js
+++ b/webapp/src/components/Pages/Home.js
@@ -1,5 +1,28 @@
+// src/components/Login.js
+import React, { useState, useEffect } from 'react';
+import '../Estilos/juego.css';
+import { Container } from '@mui/material';
+
+function clickJugar() {
+ window.location.href = "game";
+}
+
+function clickEstadisticas() {
+ window.location.href = "stats";
+}
+
const Home = () => {
- return
Home
;
+ return (
+ <>
+
+ WIQ_es05
+
+
+
+
+
+ >
+ );
};
export default Home;
\ No newline at end of file
diff --git a/webapp/src/components/Pages/Juego.js b/webapp/src/components/Pages/Juego.js
index 029e87d..e30ce60 100644
--- a/webapp/src/components/Pages/Juego.js
+++ b/webapp/src/components/Pages/Juego.js
@@ -6,6 +6,7 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
const Juego = ({isLogged}) => {
const [pregunta, setPregunta] = useState("")
+ //Respuesta correcta
const [resCorr, setResCorr] = useState("")
const [resFalse, setResFalse] = useState([])
const [respondido, setRespodido] = useState(false)
@@ -15,12 +16,30 @@ const Juego = ({isLogged}) => {
//comprobara si la respuesta es correcta o no
setRespodido(true)
if(respuesta == resCorr){
- console.log("entro a respuesat correcta")
+ console.log("entro a respuesta correcta")
setVictoria(true)
}
else{
setVictoria(false)
}
+
+ //Cambiar color de botones
+ const buttonContainer = document.querySelector('.button-container');
+ const buttons = buttonContainer.querySelectorAll('.button');
+ const botonEncontrado = Array.from(buttons).find((button) => {
+ button.disabled=true; //desactivamos todos los botones
+ if(button.textContent.trim()==respuesta.trim()){
+ //Si era la cambiamos color fondo a verde, si no a rojo
+ if(button.textContent.trim() == resCorr) {
+ button.style.backgroundColor = "#05B92B";
+ button.style.border = "6px solid #05B92B";
+ } else {
+ button.style.backgroundColor = "#E14E4E";
+ button.style.border = "6px solid #E14E4E";
+ }
+ }
+ });
+
};
async function CargarPregunta(pregunta, resCorr, resFalse){
@@ -33,9 +52,15 @@ const Juego = ({isLogged}) => {
setResFalse(todo.answers)
});
}, []);
- console.log(pregunta);
- console.log(resCorr);
- console.log(resFalse)
+ //console.log(pregunta);
+ //console.log(resCorr);
+ //console.log(resFalse)
+
+
+ }
+
+ function clickSiguiente() {
+ window.location.href = "game";
}
CargarPregunta(pregunta, resCorr, resFalse);
@@ -43,25 +68,16 @@ const Juego = ({isLogged}) => {
return (
<>
- {respondido ? (
- <>
- {victoria ? (
- ACERTASTE
- ) : (
- FALLASTE
- )}
- >
- ) : (
{pregunta}
-
-
-
-
+
+
+
+
+
- )}
>
);
};
diff --git a/webapp/src/index.css b/webapp/src/index.css
index 49e8693..0ddb49c 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -22,3 +22,8 @@ body{
background-color: #8A6FD6 ;
}
+body h1{
+ font-family: 'Verdana';
+ text-align: center; /* Centra el texto */
+ margin-bottom: 30px;
+}