From 2e342cd642b4c4cc499454216cb70b2edaf41662 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Wed, 2 Oct 2024 21:19:54 +0530 Subject: [PATCH] s1 --- public/saveGameData.js | 6 +- src/pages/cross/cross_phonics_v1.astro | 180 ++++++++++++++++++++++-- src/pages/cross/cross_phonics_v2.astro | 180 ++++++++++++++++++++++-- src/pages/cross/v1.astro | 180 ++++++++++++++++++++++-- src/pages/cross/v2.astro | 180 ++++++++++++++++++++++-- src/pages/cross/v3.astro | 183 +++++++++++++++++++++++-- src/pages/data-table.astro | 160 +++++++++++++++++++++ src/pages/drag/dragdrop_phonics.astro | 2 +- src/pages/drag/index.astro | 2 +- src/pages/drag/match_phonics.astro | 2 +- src/pages/drag/v2.astro | 2 +- src/pages/drag/v3.astro | 2 +- src/pages/drag/v4.astro | 2 +- src/pages/tick/tick_phonics_v1.astro | 11 +- src/pages/tick/tick_phonics_v2.astro | 11 +- src/pages/tick/tick_phonics_v3.astro | 5 +- src/pages/tick/v1.astro | 13 +- src/pages/tick/v2.astro | 12 +- src/pages/tick/v3.astro | 6 +- 19 files changed, 1061 insertions(+), 78 deletions(-) create mode 100644 src/pages/data-table.astro diff --git a/public/saveGameData.js b/public/saveGameData.js index 880c051..f45cec7 100644 --- a/public/saveGameData.js +++ b/public/saveGameData.js @@ -96,8 +96,8 @@ function submitUserData(drawingZone) { starValue = 3; } let maxStarValue = 5; - let progress = 0; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; function progressIncrement() { const interval = setInterval(() => { @@ -201,14 +201,14 @@ function submitUserData(drawingZone) { body: JSON.stringify(userData) }) .then(response => { - setTimeout(() => { + setTimeout(() => { if (response.ok) { if (response.status == 200) { loadingMainContainer.style.display = 'none'; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG; diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro index 9cd4fae..79fb968 100644 --- a/src/pages/cross/cross_phonics_v1.astro +++ b/src/pages/cross/cross_phonics_v1.astro @@ -68,13 +68,37 @@ import Layout from "../../layouts/Layout.astro";
- +
+ \ No newline at end of file diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro index 4234e53..a83232c 100644 --- a/src/pages/drag/dragdrop_phonics.astro +++ b/src/pages/drag/dragdrop_phonics.astro @@ -14,7 +14,7 @@ import Layout from '../../layouts/Layout.astro';
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 4253999..8e7bb87 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -19,7 +19,7 @@ const numberOfTimes = starNumberOfTime;
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro index 6fc33df..77faed3 100644 --- a/src/pages/drag/match_phonics.astro +++ b/src/pages/drag/match_phonics.astro @@ -15,7 +15,7 @@ import Layout from '../../layouts/Layout.astro';
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index 42a41a3..b788bee 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -15,7 +15,7 @@ import Layout from '../../layouts/Layout.astro';
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index 78b81fd..10e55be 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -15,7 +15,7 @@ import Layout from '../../layouts/Layout.astro';
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index 083a1d3..dd8d672 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -14,7 +14,7 @@ import Layout from '../../layouts/Layout.astro';
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro index 8e035fb..cde4917 100644 --- a/src/pages/tick/tick_phonics_v1.astro +++ b/src/pages/tick/tick_phonics_v1.astro @@ -80,7 +80,7 @@ import Layout from "../../layouts/Layout.astro";
- +
@@ -99,7 +99,7 @@ import Layout from "../../layouts/Layout.astro";
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

@@ -221,11 +221,11 @@ import Layout from "../../layouts/Layout.astro"; document.getElementById('allParentDiv').style.display = 'block'; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length; - if (checkedCount < 2) { + if (checkedCount < 0) { // Show error message if less than 3 checkboxes are checked let errorMessageSection = document.getElementById('errorMessage'); errorMessageSection.style.display = "block"; - errorMessageSection.innerHTML = 'Please select at least 2 options.'; + errorMessageSection.innerHTML = 'Please select at least 1 options.'; return; } else { // Hide error message if validation passes @@ -257,6 +257,7 @@ import Layout from "../../layouts/Layout.astro"; // Move the userData object creation inside the saveUserData function if needed wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; let userData = { 'gameName': gameName, 'gameID': gameId, @@ -337,7 +338,7 @@ import Layout from "../../layouts/Layout.astro"; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG; diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro index b7edc62..0fc16ee 100644 --- a/src/pages/tick/tick_phonics_v2.astro +++ b/src/pages/tick/tick_phonics_v2.astro @@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
- +
@@ -123,7 +123,7 @@ import Layout from "../../layouts/Layout.astro";
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

@@ -252,11 +252,11 @@ import Layout from "../../layouts/Layout.astro"; document.getElementById('allParentDiv').style.display = 'block'; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9']; const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length; - if (checkedCount < 3) { + if (checkedCount < 0) { // Show error message if less than 3 checkboxes are checked let errorMessageSection = document.getElementById('errorMessage'); errorMessageSection.style.display = "block"; - errorMessageSection.innerHTML = 'Please select at least 2 options.'; + errorMessageSection.innerHTML = 'Please select at least 1 options.'; return; } else { // Hide error message if validation passes @@ -284,6 +284,7 @@ import Layout from "../../layouts/Layout.astro"; } }); wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; let userData = { 'gameName': gameName, @@ -366,7 +367,7 @@ import Layout from "../../layouts/Layout.astro"; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG; diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro index 5314aeb..6f448f4 100644 --- a/src/pages/tick/tick_phonics_v3.astro +++ b/src/pages/tick/tick_phonics_v3.astro @@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

@@ -211,6 +211,7 @@ import Layout from "../../layouts/Layout.astro"; } }); totalPoints === 1 ? starValue = 5 : starValue = 3; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; let userData = { 'gameName': gameName, 'gameID': gameId, @@ -289,7 +290,7 @@ import Layout from "../../layouts/Layout.astro"; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG; diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro index 5dd1925..381960f 100644 --- a/src/pages/tick/v1.astro +++ b/src/pages/tick/v1.astro @@ -77,7 +77,7 @@ import Layout from "../../layouts/Layout.astro";
- +
@@ -96,7 +96,7 @@ import Layout from "../../layouts/Layout.astro";
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

+

@@ -185,7 +185,7 @@ import Layout from "../../layouts/Layout.astro"; opacity: 0; /* Initial opacity */ animation: scaleUp 0.5s ease forwards; } - `; + `; document.head.appendChild(style); } function progressIncrement() { @@ -219,11 +219,11 @@ import Layout from "../../layouts/Layout.astro"; document.getElementById('allParentDiv').style.display = 'block'; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length; - if (checkedCount < 2) { + if (checkedCount < 0) { // Show error message if less than 3 checkboxes are checked let errorMessageSection = document.getElementById('errorMessage'); errorMessageSection.style.display = "block"; - errorMessageSection.innerHTML = 'Please select at least 3 options.'; + errorMessageSection.innerHTML = 'Please select at least 1 options.'; return; } else { // Hide error message if validation passes @@ -254,6 +254,7 @@ import Layout from "../../layouts/Layout.astro"; }); // Move the userData object creation inside the saveUserData function if needed wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; let userData = { 'gameName': gameName, 'gameID': gameId, @@ -333,7 +334,7 @@ import Layout from "../../layouts/Layout.astro"; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG; diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro index 84fbd89..80a9b26 100644 --- a/src/pages/tick/v2.astro +++ b/src/pages/tick/v2.astro @@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
- +
@@ -123,8 +123,7 @@ import Layout from "../../layouts/Layout.astro";
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

-
+

@@ -251,11 +250,11 @@ import Layout from "../../layouts/Layout.astro"; document.getElementById('allParentDiv').style.display = 'block'; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9']; const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length; - if (checkedCount < 3) { + if (checkedCount < 0) { // Show error message if less than 3 checkboxes are checked let errorMessageSection = document.getElementById('errorMessage'); errorMessageSection.style.display = "block"; - errorMessageSection.innerHTML = 'Please select at least 3 options.'; + errorMessageSection.innerHTML = 'Please select at least 1 options.'; return; } else { // Hide error message if validation passes @@ -295,6 +294,7 @@ import Layout from "../../layouts/Layout.astro"; }); wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; let userData = { 'gameName': gameName, 'gameID': gameId, @@ -374,7 +374,7 @@ import Layout from "../../layouts/Layout.astro"; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG; diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro index 02d3385..3179c13 100644 --- a/src/pages/tick/v3.astro +++ b/src/pages/tick/v3.astro @@ -82,8 +82,7 @@ import Layout from "../../layouts/Layout.astro";
-

Well done! stars for your effort!
Keep pushing, you’ve got this!

-
+

@@ -223,6 +222,7 @@ import Layout from "../../layouts/Layout.astro"; } }); totalPoints === 1 ? starValue = 5 : starValue = 3; + let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
Keep pushing, you’ve got this!` : ''; let userData = { 'gameName': gameName, 'gameID': gameId, @@ -301,7 +301,7 @@ import Layout from "../../layouts/Layout.astro"; loadingDiv.style.display = 'none'; starContainer.style.display = 'flex'; starContainer.style.flexDirection = 'row'; - document.getElementById('countStar').innerHTML = starValue; + document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage; for (let i = 0; i < starValue; i++) { const starDiv = document.createElement('div'); starDiv.innerHTML = starSVG;