From ccfb4d38ac15e9b730da3b06cfdd8178ff778030 Mon Sep 17 00:00:00 2001 From: UO287568 Date: Tue, 16 Apr 2024 14:42:54 +0200 Subject: [PATCH 1/5] Cambia color la respuesta. Muestra boton continuar --- .../templates/game/fragments/gameFrame.html | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/main/resources/templates/game/fragments/gameFrame.html b/src/main/resources/templates/game/fragments/gameFrame.html index 8f81a3ec..b312f7f5 100644 --- a/src/main/resources/templates/game/fragments/gameFrame.html +++ b/src/main/resources/templates/game/fragments/gameFrame.html @@ -7,6 +7,7 @@

+
@@ -16,27 +17,46 @@

function initiateGameCounters() { let timeoutId = -1; let interval = -1; + let corrAnswerId = [[${question.correctAnswer.id}]]; + let answers = /*[[${question.options}]]*/ []; + + $("#continueBtn").hide(); function setupAnswers() { - let questionId = [[${question.id}]]; - let answers = /*[[${question.options}]]*/ []; + //let questionId = [[${question.id}]]; + //let answers = /*[[${question.options}]]*/ []; answers.forEach(answer => { $("#btn" + answer.id).click(function () { clearTimeout(timeoutId); clearInterval(interval); - $("#gameFrame").load("/game/" + questionId + "/" + answer.id); + //$("#gameFrame").load("/game/" + questionId + "/" + answer.id); + if (!(corrAnswerId == answer.id)) { + $("#btn" + answer.id).css("background-color", "red"); + } + prueba(); }); }); } setupAnswers(); + function prueba() { + + answers.forEach(answer => { + if (corrAnswerId == answer.id) { + $("#btn" + answer.id).css("background-color", "green"); + } + }); + $("#continueBtn").show(); + } + let timeoutPeriod = [[${questionDuration}]] * 1000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds) let updateInterval = 100; // How often to update the progress bar (in milliseconds) timeoutId = setTimeout(() => { - $("#gameFrame").load('/game/[[${question.id}]]/-1'); + //$("#gameFrame").load('/game/[[${question.id}]]/-1'); + prueba(); clearTimeout(timeoutId); }, timeoutPeriod); From 221cb3e5607114cc70a197405d7ed3529274d286 Mon Sep 17 00:00:00 2001 From: UO287568 Date: Tue, 16 Apr 2024 14:53:50 +0200 Subject: [PATCH 2/5] Avance al mostrar siguiente pregunta. --- .../uniovi/controllers/GameController.java | 19 ++++++++++--------- .../templates/game/fragments/gameFrame.html | 11 ++++++++--- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/main/java/com/uniovi/controllers/GameController.java b/src/main/java/com/uniovi/controllers/GameController.java index 59c20083..ad8a7506 100644 --- a/src/main/java/com/uniovi/controllers/GameController.java +++ b/src/main/java/com/uniovi/controllers/GameController.java @@ -79,15 +79,15 @@ public String getCheckResult(@PathVariable Long idQuestion, @PathVariable Long i if(idAnswer == -1 || getRemainingTime(gameSession) <= 0) { - model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer()); - model.addAttribute("messageKey", "timeRunOut.result"); - model.addAttribute("logoImage", "/images/logo_incorrect.svg"); + //model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer()); + //model.addAttribute("messageKey", "timeRunOut.result"); + //model.addAttribute("logoImage", "/images/logo_incorrect.svg"); gameSession.addAnsweredQuestion(gameSession.getCurrentQuestion()); gameSession.addQuestion(false, 0); } else if(questionService.checkAnswer(idQuestion, idAnswer)) { - model.addAttribute("messageKey", "correctAnswer.result"); - model.addAttribute("logoImage", "/images/logo_correct.svg"); + //model.addAttribute("messageKey", "correctAnswer.result"); + //model.addAttribute("logoImage", "/images/logo_correct.svg"); if (!gameSession.isAnswered(gameSession.getCurrentQuestion())) { gameSession.addQuestion(true, getRemainingTime(gameSession)); @@ -95,16 +95,17 @@ else if(questionService.checkAnswer(idQuestion, idAnswer)) { } } else { - model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer()); - model.addAttribute("messageKey", "failedAnswer.result"); - model.addAttribute("logoImage", "/images/logo_incorrect.svg"); + //model.addAttribute("correctAnswer", gameSession.getCurrentQuestion().getCorrectAnswer()); + //model.addAttribute("messageKey", "failedAnswer.result"); + //model.addAttribute("logoImage", "/images/logo_incorrect.svg"); gameSession.addAnsweredQuestion(gameSession.getCurrentQuestion()); gameSession.addQuestion(false, 0); } session.setAttribute("hasJustAnswered", true); gameSession.getNextQuestion(); - return "game/fragments/questionResult"; + //return "game/fragments/questionResult"; + return updateGame(model, session); } @GetMapping("/game/update") diff --git a/src/main/resources/templates/game/fragments/gameFrame.html b/src/main/resources/templates/game/fragments/gameFrame.html index b312f7f5..c118cb34 100644 --- a/src/main/resources/templates/game/fragments/gameFrame.html +++ b/src/main/resources/templates/game/fragments/gameFrame.html @@ -17,6 +17,7 @@

function initiateGameCounters() { let timeoutId = -1; let interval = -1; + let questionId = [[${question.id}]]; let corrAnswerId = [[${question.correctAnswer.id}]]; let answers = /*[[${question.options}]]*/ []; @@ -34,19 +35,23 @@

if (!(corrAnswerId == answer.id)) { $("#btn" + answer.id).css("background-color", "red"); } - prueba(); + prueba(questionId, answer.id); }); }); } setupAnswers(); - function prueba() { + function prueba(qId, aId) { answers.forEach(answer => { if (corrAnswerId == answer.id) { $("#btn" + answer.id).css("background-color", "green"); } + $("#btn" + answer.id).off("click"); + }); + $("#continueBtn").click(function () { + $("#gameFrame").load("/game/" + qId + "/" + aId); }); $("#continueBtn").show(); } @@ -56,7 +61,7 @@

timeoutId = setTimeout(() => { //$("#gameFrame").load('/game/[[${question.id}]]/-1'); - prueba(); + prueba(questionId, -1); clearTimeout(timeoutId); }, timeoutPeriod); From 4a614099675cc15fc10fc6f853f4b253c87d8c29 Mon Sep 17 00:00:00 2001 From: UO287568 Date: Wed, 17 Apr 2024 13:36:43 +0200 Subject: [PATCH 3/5] Solucion bug contador pregunta --- .../resources/templates/game/basicGame.html | 12 +++++ .../templates/game/fragments/gameFrame.html | 48 +++++++++++++++++-- 2 files changed, 56 insertions(+), 4 deletions(-) diff --git a/src/main/resources/templates/game/basicGame.html b/src/main/resources/templates/game/basicGame.html index 52236c9c..7223b6da 100644 --- a/src/main/resources/templates/game/basicGame.html +++ b/src/main/resources/templates/game/basicGame.html @@ -32,7 +32,19 @@ }); } + function updateQuestionCounter() { + $.ajax({ + type: "GET", + url: "/game/currentQuestion", + success: function (response) { + if (!isNaN(response)) + $("#currentQuestion").text(response); + } + }); + } + setInterval(updatePoints, 1000); + setInterval(updateQuestionCounter, 1000); \ No newline at end of file diff --git a/src/main/resources/templates/game/fragments/gameFrame.html b/src/main/resources/templates/game/fragments/gameFrame.html index c118cb34..e68ffd2a 100644 --- a/src/main/resources/templates/game/fragments/gameFrame.html +++ b/src/main/resources/templates/game/fragments/gameFrame.html @@ -50,10 +50,8 @@

} $("#btn" + answer.id).off("click"); }); - $("#continueBtn").click(function () { - $("#gameFrame").load("/game/" + qId + "/" + aId); - }); - $("#continueBtn").show(); + + initiateTimeout(qId, aId); } let timeoutPeriod = [[${questionDuration}]] * 1000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds) @@ -87,6 +85,48 @@

clearInterval(interval); } } + + function initiateTimeout(qId, aId) { + let timeoutPeriod = 8000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds) + let updateInterval = 100; // How often to update the progress bar (in milliseconds) + let progressBar = $('#progressBar'); + + let activeTimeout = setTimeout(function () { + clearInterval(interval); // Ensure the interval is cleared when the timeout completes + $("#gameFrame").load('/game/update'); + updateQuestionCounter(); + }, timeoutPeriod); + + timeoutPeriod = timeoutPeriod - updateInterval * 2; // Adjust the timeout period to account for the update interval + let interval = setInterval(updateProgressBar, updateInterval); + + function updateProgressBar() { + let currentTime = parseFloat(progressBar.attr('aria-valuenow')); + let decrement = 100 * updateInterval / timeoutPeriod; + let newTime = Math.max(0, currentTime - decrement); + + // Calculate the color based on the percentage + let greenValue = Math.round((newTime * 255) / 100); + let redValue = 255 - greenValue; + let color = 'rgb(' + redValue + ',' + greenValue + ',0)'; + + progressBar.css('width', newTime + '%'); + progressBar.css('background-color', color); // Apply the calculated color + progressBar.attr('aria-valuenow', newTime); + + if(newTime <= 0) { + clearInterval(interval); + } + } + $("#continueBtn").show(); + $("#continueBtn").off('click').on('click', function () { + if (activeTimeout) { + clearTimeout(activeTimeout); + clearInterval(interval); + } + $("#gameFrame").load("/game/" + qId + "/" + aId); + }); + } } initiateGameCounters(); From 212f5fe06cc3d790c3857af44d89b07c55b4b3b9 Mon Sep 17 00:00:00 2001 From: UO287568 Date: Wed, 17 Apr 2024 15:21:04 +0200 Subject: [PATCH 4/5] =?UTF-8?q?Correcci=C3=B3n=20contador=20y=20barra=20de?= =?UTF-8?q?=20progreso?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../templates/game/fragments/gameFrame.html | 52 +++++++------------ .../templates/game/fragments/stopwatch.html | 10 +++- 2 files changed, 29 insertions(+), 33 deletions(-) diff --git a/src/main/resources/templates/game/fragments/gameFrame.html b/src/main/resources/templates/game/fragments/gameFrame.html index e68ffd2a..7833a350 100644 --- a/src/main/resources/templates/game/fragments/gameFrame.html +++ b/src/main/resources/templates/game/fragments/gameFrame.html @@ -35,15 +35,14 @@

if (!(corrAnswerId == answer.id)) { $("#btn" + answer.id).css("background-color", "red"); } - prueba(questionId, answer.id); + respuesta(questionId, answer.id); }); }); } setupAnswers(); - function prueba(qId, aId) { - + function respuesta(qId, aId) { answers.forEach(answer => { if (corrAnswerId == answer.id) { $("#btn" + answer.id).css("background-color", "green"); @@ -59,8 +58,7 @@

timeoutId = setTimeout(() => { //$("#gameFrame").load('/game/[[${question.id}]]/-1'); - prueba(questionId, -1); - clearTimeout(timeoutId); + respuesta(questionId, -1); }, timeoutPeriod); initStopwatch(timeoutPeriod / 1000); @@ -87,41 +85,31 @@

} function initiateTimeout(qId, aId) { - let timeoutPeriod = 8000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds) - let updateInterval = 100; // How often to update the progress bar (in milliseconds) + if (timeoutId) { + clearTimeout(timeoutId); + clearInterval(interval); + } + timeoutPeriod = 12000; // Timeout period in milliseconds (e.g., 8000ms for 8 seconds) + updateInterval = 100; // How often to update the progress bar (in milliseconds) let progressBar = $('#progressBar'); + progressBar.attr('aria-valuenow', 100); - let activeTimeout = setTimeout(function () { - clearInterval(interval); // Ensure the interval is cleared when the timeout completes - $("#gameFrame").load('/game/update'); - updateQuestionCounter(); + timeoutId = setTimeout(function () { + if (timeoutId) { + clearTimeout(timeoutId); + clearInterval(interval); + } + $("#gameFrame").load("/game/" + qId + "/" + aId); }, timeoutPeriod); + initStopwatch(timeoutPeriod / 1000); timeoutPeriod = timeoutPeriod - updateInterval * 2; // Adjust the timeout period to account for the update interval - let interval = setInterval(updateProgressBar, updateInterval); + interval = setInterval(updateProgressBar, updateInterval); - function updateProgressBar() { - let currentTime = parseFloat(progressBar.attr('aria-valuenow')); - let decrement = 100 * updateInterval / timeoutPeriod; - let newTime = Math.max(0, currentTime - decrement); - - // Calculate the color based on the percentage - let greenValue = Math.round((newTime * 255) / 100); - let redValue = 255 - greenValue; - let color = 'rgb(' + redValue + ',' + greenValue + ',0)'; - - progressBar.css('width', newTime + '%'); - progressBar.css('background-color', color); // Apply the calculated color - progressBar.attr('aria-valuenow', newTime); - - if(newTime <= 0) { - clearInterval(interval); - } - } $("#continueBtn").show(); $("#continueBtn").off('click').on('click', function () { - if (activeTimeout) { - clearTimeout(activeTimeout); + if (timeoutId) { + clearTimeout(timeoutId); clearInterval(interval); } $("#gameFrame").load("/game/" + qId + "/" + aId); diff --git a/src/main/resources/templates/game/fragments/stopwatch.html b/src/main/resources/templates/game/fragments/stopwatch.html index 1282f055..5d51ef9a 100644 --- a/src/main/resources/templates/game/fragments/stopwatch.html +++ b/src/main/resources/templates/game/fragments/stopwatch.html @@ -7,11 +7,19 @@