@@ -37,15 +69,6 @@ const Login = () => {
);
};
-function ButtonMenu() {
- const { t } = useTranslation("global");
- return (
-
-
-
- );
-}
-
function LinkRegister() {
const { t } = useTranslation("global");
return (
@@ -136,4 +159,4 @@ export default Login;
// );
// };
-// export default Login;
+// export default Login;
\ No newline at end of file
diff --git a/webapp/src/components/loginAndRegistration/UserContext.js b/webapp/src/components/loginAndRegistration/UserContext.js
new file mode 100644
index 00000000..f551b9c8
--- /dev/null
+++ b/webapp/src/components/loginAndRegistration/UserContext.js
@@ -0,0 +1,19 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const UserContext = createContext();
+
+export function UserContextProvider({ children }) {
+ const [user, setUser] = useState(null);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useUserContext() {
+ return useContext(UserContext);
+}
+
+
diff --git a/webapp/src/components/questionView/CreationHistoricalRecord.js b/webapp/src/components/questionView/CreationHistoricalRecord.js
index e7c6903e..d1c4e36d 100644
--- a/webapp/src/components/questionView/CreationHistoricalRecord.js
+++ b/webapp/src/components/questionView/CreationHistoricalRecord.js
@@ -2,7 +2,6 @@ class CreationHistoricalRecord{
constructor() {
this.record = {
- user: "a",
game: {
questions: []
}
@@ -32,5 +31,34 @@ class CreationHistoricalRecord{
return this.record;
}
+
+ async sendRecord(user) {
+ const apiUrl = (process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000') + "/record";
+
+ const body = {
+ user:user,
+ game:this.record.game
+ }
+ console.log(body)
+ try {
+ const response = await fetch(apiUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(body)
+ });
+
+ if (!response.ok) {
+ throw new Error('Error al enviar el registro');
+ }
+
+ const data = await response.json();
+ console.log(data);
+ } catch (error) {
+ console.error('Error:', error);
+ }
+ }
+
}
export default CreationHistoricalRecord;
diff --git a/webapp/src/components/questionView/Question.js b/webapp/src/components/questionView/Question.js
index 37a6d6f3..b79c53f4 100644
--- a/webapp/src/components/questionView/Question.js
+++ b/webapp/src/components/questionView/Question.js
@@ -3,8 +3,9 @@ import "../../custom.css";
class Question{
constructor(json){
this.question = json.question;
- this.answers = json.answers;
this.correctAnswer = json.answers[0];
+ this.answers = this.shuffleArray(json.answers);
+
}
getQuestion(){
@@ -20,6 +21,17 @@ class Question{
isCorrect(answer){
return answer===this.correctAnswer;
}
+
+ shuffleArray(array) {
+ let innerArray = [...array]; // Copies array
+ for (let i = innerArray.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1)); // Generate a random index between 0 and i
+ const temp = innerArray[i]; // Swap innerArray[i] and innerArray[j]
+ innerArray[i] = innerArray[j];
+ innerArray[j] = temp;
+ }
+ return innerArray;
+ }
}
diff --git a/webapp/src/components/questionView/QuestionGenerator.js b/webapp/src/components/questionView/QuestionGenerator.js
index e225c73a..b139c517 100644
--- a/webapp/src/components/questionView/QuestionGenerator.js
+++ b/webapp/src/components/questionView/QuestionGenerator.js
@@ -6,33 +6,16 @@ class QuestionGenerator{
}
- async generateQuestions() {
+ async generateQuestions(lang) {
try {
- //const response = await fetch(this.apiUrl);
- //const receivedQuestions = await response.json();
-
- //Mockup
- const receivedQuestions = JSON.parse('{"0":{"question":"¿Cuál es la población de Oviedo?","answers":["225089","191325","220587","121548"]},'+
- '"1":{"question":"¿Cuál es la población de Gijón?","answers":["275274","159658","233982","305554"]},'+
- '"2":{"question":"¿Cuál es la población de Avilés?","answers":["82568","115595","41284","122200"]},'+
- '"3":{"question":"¿Cuál es la capital de Asturias?","answers":["Ciudad de Oviedo","a","b","c"]},'+
- '"4":{"question":"¿Cuál es la capital de España?","answers":["Madrid","a","b","c"]},'+
- '"5":{"question":"¿Cuál es la capital de Turquía?","answers":["Ankara","a","b","c"]},'+
- '"6":{"question":"¿Cuál es el área (km cuadrados) de España?","answers":["505990","a","b","c"]},'+
- '"7":{"question":"¿Cuál es el área (km cuadrados) de Gijón?","answers":["184.31","a","b","c"]},'+
- '"8":{"question":"¿Cuál es el área (km cuadrados) de Asturias?","answers":["10603.57","a","b","c"]},'+
- '"9":{"question":"¿Cuál es el idioma oficial de España?","answers":["español","a","b","c"]},'+
- '"10":{"question":"¿Cuál es el idioma oficial de Turquía?","answers":["turco","a","b","c"]},'+
- '"11":{"question":"¿Cuál es el idioma oficial de Asturias?","answers":["español","a","b","c"]},'+
- '"12":{"question":"Whats the population of Oviedo?","answers":["225089","216085","285863","243096"]}}')
-
+ const response = await fetch(this.apiUrl + '/' + lang);
+ const receivedQuestions = await response.json();
let i = 0;
var questions = [];
for (const key in receivedQuestions) {
questions[i] = new Question(receivedQuestions[key]);
i += 1;
}
- console.log(questions);
return questions;
} catch (error) {
throw new Error(error);
diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js
index 26c2f590..66c7c3a0 100644
--- a/webapp/src/components/questionView/QuestionView.js
+++ b/webapp/src/components/questionView/QuestionView.js
@@ -8,6 +8,7 @@ import {useTranslation} from "react-i18next";
import $ from 'jquery';
import RecordList from '../HistoricalData/RecordList';
import ButtonHistoricalData from "../HistoricalData/ButtonHistoricalData";
+import { useUserContext } from '../loginAndRegistration/UserContext';
const creationHistoricalRecord = new CreationHistoricalRecord();
const questionGenerator = new QuestionGenerator();
@@ -15,13 +16,13 @@ var points = 0;
function QuestionView(){
const [numQuestion, setnumQuestion] = useState(-1);
const [questions, setQuestions] = useState([]);
- const[t] = useTranslation("global");
-
+ const[t, i18n] = useTranslation("global");
+ const {user} = useUserContext();
const generateQuestions = async (numQuestion) => {
if (numQuestion < 0) {
try {
- var generatedQuestions = await questionGenerator.generateQuestions();
+ var generatedQuestions = await questionGenerator.generateQuestions(i18n.language);
setQuestions(generatedQuestions);
setnumQuestion(0);
} catch (error) {
@@ -79,7 +80,6 @@ function QuestionView(){
//compute the points for the answer given
computePointsForQuestion(questions[numQuestion].getCorrectAnswer(), text);
- console.log(creationHistoricalRecord.getRecord());
//reveal answer to user for 1 sec
revealColorsForAnswers();
setTimeout(function() {
@@ -87,6 +87,13 @@ function QuestionView(){
setColorsBackToNormal();
//sum one to the number of questions
setnumQuestion(numQuestion + 1);
+
+ //Last question sends the record
+ if(!(numQuestion < questions.length - 1)){
+ creationHistoricalRecord.setDate(Date.now());
+ creationHistoricalRecord.setPoints(points);
+ creationHistoricalRecord.sendRecord(user.username);
+ }
}, 1000);
}
@@ -97,12 +104,13 @@ function QuestionView(){
{numQuestion >= 0 ?
:
- Please Wait a bit...
}
+ {t("questionView.no_questions_message")}
}
);
}
function QuestionComponent({questions, numQuestion, handleClick, t, points}){
+
const renderer = ({seconds, completed }) => {
if (completed) {
return
{t("questionView.end_countdown")}; // Rendered when countdown completes
@@ -119,7 +127,7 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){
{questions[numQuestion].getQuestion()}
-
+
@@ -135,8 +143,6 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){
) : (
<>
- {creationHistoricalRecord.setDate(Date.now())}
- {creationHistoricalRecord.setPoints(points)}
{t("questionView.finished_game")}
{points} {t("questionView.point")}
< RecordList record={creationHistoricalRecord.getRecord().game}/>
diff --git a/webapp/src/custom.css b/webapp/src/custom.css
index 94426fb0..daa780fd 100644
--- a/webapp/src/custom.css
+++ b/webapp/src/custom.css
@@ -85,7 +85,7 @@
.form {
display: flex;
flex-direction: column;
- gap: 50px;
+ gap: 20px;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 0.4em;
@@ -116,31 +116,75 @@
}
+ .input-box {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ .input-box p {
+ font-weight: bold;
+ margin-right: 10%;
+ width: 150px;
+ text-align: right;
+ }
+
.input-box input {
- width: 100%;
- height: 100%;
- background: rgb(177, 233, 188);
- border: none;
- outline: none;
+ flex: 1;
+ height: 40px;
+ background: rgb(255, 255, 255);
border: 2px solid gray;
- border-radius: 40px;
- font-size: 18px;
+ border-radius: 10px;
+ font-size: 18px;
color: black;
+ padding: 10px;
}
- .input-box input::placeholder {
- background-color: rgb(255, 255, 255);
- font-size: 18px; /* Ajustar el tamaño de la fuente del marcador de posición */
- }
+
+ .button-register, .button-login {
+ appearance: none;
+ background-color: transparent;
+ border: 0.125em solid #00fff2;
+ border-radius: 0.9375em;
+ box-sizing: border-box;
+ color: #ffffffbf;
+ cursor: pointer;
+ display: inline-block;
+ font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+ font-size: 16px;
+ font-weight: 600;
+ line-height: normal;
+ margin: 0;
+ min-height: 3.75em;
+ min-width: 0;
+ outline: none;
+ padding: 1em 2.3em;
+ text-align: center;
+ text-decoration: none;
+ transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ will-change: transform;
+ }
+
+ .button-register:disabled, .button-login:disabled {
+ pointer-events: none;
+ }
+
+ .button-register:hover, .button-login:hover {
+ color: #fff;
+ background-color: #1A1A1A;
+ box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
+ transform: translateY(-2px);
+ }
+
+ .button-register:active, .button-login:active {
+ box-shadow: none;
+ transform: translateY(0);
+ }
-
-
-.remember-forgot {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
-}
button[type="submit"] {
@@ -247,7 +291,6 @@ button[type="submit"]:hover {
height: 100vh; /* Toma el 100% del alto de la ventana */
}
-
:root {
--gradient: conic-gradient(
from 240deg at 50% 50%,
@@ -268,6 +311,27 @@ button[type="submit"]:hover {
}
+.text-container{
+ position: absolute;
+ top: 15%;
+ width: 300%; /* Ajusta el ancho al 100% de la pantalla */
+ text-align: center; /* Centra el texto horizontalmente */
+ z-index: 2; /* Asegura que el texto esté encima del mensaje de bienvenida */
+
+}
+
+.text-container p {
+ font-size: 1.5rem; /* Ajusta el tamaño del texto según sea necesario */
+}
+
+
+.text-container.hidden {
+ opacity: 0;
+ height: 0;
+}
+
+
+
*
, *::before
, *::after {
@@ -303,8 +367,10 @@ body {
}
#welcomeMessage {
+ position: relative; /* Cambia a posición relativa para que el z-index funcione correctamente */
width: 100%;
max-width: 600px;
+ z-index: 1; /* Asegura que el mensaje de bienvenida esté detrás del texto */
}
#welcomeMessage
@@ -380,23 +446,22 @@ h1::before
transition: all 0.7s ease-in-out;
}
-#welcomeMessage
-figcaption
-h1::before {
- top: -4.3em;
- right: 2em;
- content: "Click to close";
- font-weight: 400;
- color: #666;
- opacity: 0;
+@keyframes moveUpDown {
+ 0% { transform: translateY(0); }
+ 50% { transform: translateY(10px); } /* Mover hacia abajo */
+ 100% { transform: translateY(0); } /* Volver a la posición inicial */
}
-#welcomeMessage
-figcaption
-h1::after {
+#welcomeMessage figcaption h1::after {
bottom: -3em;
- content: "Click to continue";
+ content: url('../public/click2.png');
transition: all 0.3s ease-in-out;
+ animation: moveUpDown 1s infinite alternate; /* Alternar entre mover hacia arriba y hacia abajo cada 2 segundos */
+}
+
+
+#welcomeMessage figcaption h1:hover::after {
+ transform: translate(5px, 5px);
}
#welcomeMessage
diff --git a/webapp/src/translations/en/global.json b/webapp/src/translations/en/global.json
index c60f92a7..1deefdd4 100644
--- a/webapp/src/translations/en/global.json
+++ b/webapp/src/translations/en/global.json
@@ -1,11 +1,14 @@
{
- "home": {
- "welcome": "Welcome to WIQ!",
- "how_to_play": "How to play?",
- "login": "Login",
- "register": "Don't have an account? Register here.",
- "language": "The language has been changed to English"
- },
+ "home": {
+ "welcome": "Welcome to WIQ!",
+ "how_to_play": "How to Play?",
+ "login": "Log In",
+ "register": "Don't have an account? Sign up here.",
+ "language": "The language has been changed to English",
+ "msg1": "Welcome to the knowledge challenge! Get ready to test your mind and demonstrate your skills. In this exciting game, you will face a series of questions that will test your knowledge on a variety of topics.",
+ "msg2": "So go ahead, prove that you are the master of questions! Are you ready to accept the challenge?"
+},
+
"navBar": {
"title": "Know and win!",
"en": "English",
@@ -57,7 +60,8 @@
"question_counter":"Question number ",
"end_countdown":"Time's up!",
"finished_game":"The game has finished!",
- "point":"Points"
+ "point":"Points",
+ "no_questions_message":"Please wait a bit"
},
"historicalView":{
"game":"Game",
diff --git a/webapp/src/translations/es/global.json b/webapp/src/translations/es/global.json
index 661e4ff8..6a034a05 100644
--- a/webapp/src/translations/es/global.json
+++ b/webapp/src/translations/es/global.json
@@ -4,7 +4,9 @@
"how_to_play": "¿Cómo jugar?",
"login": "Iniciar sesión",
"register": "¿No tienes una cuenta? Regístrate aquí.",
- "language": "El idioma ha sido cambiado a español"
+ "language": "El idioma ha sido cambiado a español",
+ "msg1": "Bienvenido al desafío de conocimientos! Prepárate para poner a prueba tu mente y demostrar tus habilidades. En este emocionante juego, te enfrentarás a una serie de preguntas que pondrán a prueba tu conocimiento en una variedad de temas.",
+ "msg2": "¡Así que adelante, demuestra que eres el maestro de las preguntas! ¿Estás listo para aceptar el desafío?"
},
@@ -61,7 +63,8 @@
"question_counter":"Pregunta nº ",
"end_countdown":"¡Se acabó el tiempo!",
"finished_game":"¡El juego se ha terminado!",
- "point":"Puntos"
+ "point":"Puntos",
+ "no_questions_message":"Please wait a bit"
},
"historicalView":{
"game":"Partida",
diff --git a/webapp/src/translations/tk/global.json b/webapp/src/translations/tk/global.json
index 9d1982a6..7e7c89d6 100644
--- a/webapp/src/translations/tk/global.json
+++ b/webapp/src/translations/tk/global.json
@@ -1,70 +1,69 @@
{
- "home": {
- "welcome": "WIQ'e hoş geldiniz!",
- "how_to_play": "Nasıl oynanır?",
+ "home": {
+ "welcome": "WIQ'a hoş geldiniz!",
+ "how_to_play": "Nasıl Oynanır?",
"login": "Giriş yap",
"register": "Hesabınız yok mu? Buradan kaydolun.",
- "language": "Dilin Türkçe olduğu değiştirilmiştir"
-
- },
-
- "navBar": {
+ "language": "Dil İspanyolca olarak değiştirildi",
+ "msg1": "Bilgi meydan okumasına hoş geldiniz! Zihninizin becerilerini ve bilginizi test etmeye hazırlanın. Bu heyecan verici oyununuzda, çeşitli konulardaki bilginizi sınayacak bir dizi soruyla karşılaşacaksınız.",
+ "msg2": "Öyleyse, kendinizi soruların efendisi olarak kanıtlamaya hazır mısınız? Meydan okumayı kabul etmeye hazır mısınız?"
+ },
+ "navBar": {
"title": "Bil ve Kazan!",
"en": "İngilizce",
"es": "İspanyolca",
"tk": "Türkçe",
"language": "Dil"
- },
-
- "instructions": {
+ },
+ "instructions": {
"title": "WIQ Talimatları",
"objective": "Amaç:",
"objective_p1": "Oyunun amacı mümkün olduğunca çok soruyu doğru cevaplamaktır.",
"how_to_play": "Nasıl Oynanır:",
"how_to_play_p1": "Oyun bir dizi sorudan oluşur.",
- "how_to_play_p2": "Her soruyu dikkatlice oku.",
- "how_to_play_p3": "Verilen seçeneklerden doğru cevabı seç.",
- "how_to_play_p4": "Seçtiğin cevabı göndermek için tıkla veya dokun.",
-
-
+ "how_to_play_p2": "Her soruyu dikkatlice okuyun.",
+ "how_to_play_p3": "Sağlanan seçeneklerden doğru cevabı seçin.",
+ "how_to_play_p4": "Seçtiğiniz cevabı göndermek için tıklayın veya dokunun.",
"scoring": "Puanlama:",
- "scoring_p1": "Her doğru cevap x puan kazandırır.",
- "scoring_p2": "Yanlış cevaplar puanları düşürmez.",
- "time_limit": "Zaman Sınırlaması:",
- "time_limit_p1": "Bazı oyun modları her soruya cevap verme için bir zaman sınırlamasına sahip olabilir. Puanını maksimize etmek için hızlı ve doğru ol.",
- "have_fun": "İyi Eğlenceler!",
- "have_fun_p1": "Oyunun tadını çıkar ve bilgilerini test et. İyi şanslar!"
- },
-
- "login": {
- "title": "Giriş Yap",
+ "scoring_p1": "Her doğru cevap size x puan kazandırır.",
+ "scoring_p2": "Yanlış cevaplar puan kaybettirmez.",
+ "time_limit": "Zaman Sınırı:",
+ "time_limit_p1": "Bazı oyun modları her soruya cevap vermek için bir zaman sınırına sahip olabilir. En yüksek puanı almak için hızlı ve doğru olun.",
+ "have_fun": "İyi eğlenceler!",
+ "have_fun_p1": "Oyunun tadını çıkarın ve bilginizi sınamaktan keyif alın. İyi şanslar!"
+ },
+ "login": {
+ "title": "Giriş yap",
"username_placeholder": "Kullanıcı adı",
"password_placeholder": "Şifre",
"remember_me": "Beni hatırla",
"forgot_password": "Şifrenizi mi unuttunuz?",
"login_button": "Giriş yap",
"register_link": "Hesabınız yok mu? Buradan kaydolun."
- },
-
- "addUser": {
- "title": "Kaydol",
+ },
+ "addUser": {
+ "title": "Kayıt Ol",
"username_placeholder": "Kullanıcı adı",
"password_placeholder": "Şifre",
- "repeat_password_placeholder": "Şifreyi tekrar girin",
- "register_button": "Kaydol",
+ "repeat_password_placeholder": "Şifreyi tekrarlayın",
+ "register_button": "Kayıt ol",
"login_link": "Zaten bir hesabınız mı var? Buradan giriş yapın."
- },
-
- "gameMenu": {
+ },
+ "gameMenu": {
"history_button": "Geçmişi Görüntüle",
- "new_game_button": "Yeni oyun oluştur",
+ "new_game_button": "Yeni Oyun Oluştur",
"title": "Oyun Menüsü"
- },
-
- "questionView": {
+ },
+ "questionView": {
"seconds": "saniye",
- "question_counter": "Soru numarası: ",
- "end_countdown": "Süre doldu!"
- }
+ "question_counter": "Soru no. ",
+ "end_countdown": "Zaman doldu!",
+ "finished_game": "Oyun bitti!",
+ "point": "Puan",
+ "no_questions_message": "Lütfen biraz bekleyin"
+ },
+ "historicalView": {
+ "game": "Oyun",
+ "points": "puanlar"
}
-
\ No newline at end of file
+}
I
-
+
Q
-
+
