kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add eraser button and add start calculation logic

Browse Source
This commit is contained in:
Suvodip
2024-09-06 20:05:34 +05:30
parent 2fe965cd99
commit d2a1edd333
21 changed files with 291 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/tick/tick_phonics_v1.astro
View File

@@ -79,9 +79,9 @@ import Layout from "../../layouts/Layout.astro";
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<div class="flex flex-col justify-center place-items-center pt-8">
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>
@@ -92,9 +92,15 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline>
const params = new URLSearchParams(window.location.search);
const gameId = params.get('id');
const userId = params.get('userid');
const userId = params.get('userId');
let startTime = Date.now();
let gameData = null;
let wrongCount = 0;
let starValue;
let totalPoints = 0;
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json())
@@ -144,17 +150,26 @@ import Layout from "../../layouts/Layout.astro";
element.classList.remove('greenBorder', 'redBorder');
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
function saveUserData() {
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
if (checkedCount < 2) {
// 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.';
return;
} else {
// Hide error message if validation passes
let errorMessageSection = document.getElementById('errorMessage');
errorMessageSection.style.display = "none";
}
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => {
const checkbox = document.getElementById(id);
const element = document.getElementById('image' + id.slice(-1));
@@ -166,7 +181,6 @@ import Layout from "../../layouts/Layout.astro";
});
// Count points based on checkbox values and "greenBorder" class
let totalPoints = 0;
checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1;
@@ -174,12 +188,15 @@ 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 userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'star': starValue
};
// console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {

44
src/pages/tick/tick_phonics_v2.astro
View File

@@ -104,8 +104,8 @@ import Layout from "../../layouts/Layout.astro";
</div>
</div>
<div class="flex flex-col justify-center place-items-center pt-8">
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>
@@ -116,8 +116,14 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline>
const params = new URLSearchParams(window.location.search);
const gameId = params.get('id');
const userId = params.get('userid');
const userId = params.get('userId');
let startTime = Date.now();
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
let wrongCount = 0;
let starValue;
let totalPoints = 0;
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json())
@@ -176,27 +182,24 @@ import Layout from "../../layouts/Layout.astro";
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
function saveUserData(){
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
if (checkedCount < 3) {
// 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.';
return;
} else {
// Hide error message if validation passes
let errorMessageSection = document.getElementById('errorMessage');
errorMessageSection.style.display = "none";
}
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// const checkboxValues = {
// a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked,
// a3: document.getElementById('a3').checked,
// a4: document.getElementById('a4').checked,
// a5: document.getElementById('a5').checked,
// a6: document.getElementById('a6').checked,
// a7: document.getElementById('a7').checked,
// a8: document.getElementById('a8').checked,
// a9: document.getElementById('a9').checked,
// };
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
const checkboxValues = checkboxes.map(id => {
const checkbox = document.getElementById(id);
const element = document.getElementById('image' + id.slice(-1));
@@ -208,18 +211,21 @@ import Layout from "../../layouts/Layout.astro";
});
// Count points based on checkbox values and "greenBorder" class
let totalPoints = 0;
checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1;
}
});
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'star': starValue
};
// console.log(userData);

14
src/pages/tick/tick_phonics_v3.astro
View File

@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline>
const params = new URLSearchParams(window.location.search);
const gameId = params.get('id');
const userId = params.get('userid');
const userId = params.get('userId');
let startTime = Date.now();
let gameData = null;
let starValue;
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
let totalPoints = 0;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json())
@@ -108,9 +113,6 @@ import Layout from "../../layouts/Layout.astro";
element.classList.remove('greenBorder', 'redBorder');
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
function saveUserData() {
const endTime = Date.now();
@@ -130,19 +132,19 @@ import Layout from "../../layouts/Layout.astro";
});
// Count points based on checkbox values and "greenBorder" class
let totalPoints = 0;
checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1;
}
});
totalPoints === 1 ? starValue = 5 : starValue = 3;
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'star': starValue
};
// console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {

33
src/pages/tick/v1.astro
View File

@@ -76,7 +76,8 @@ import Layout from "../../layouts/Layout.astro";
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<div class="flex flex-col justify-center place-items-center pt-8">
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
</div>
</form>
@@ -88,9 +89,15 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline>
const params = new URLSearchParams(window.location.search);
const gameId = params.get('id');
const userId = params.get('userid');
const userId = params.get('userId');
let startTime = Date.now();
let gameData = null;
let totalPoints = 0;
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
let wrongCount = 0;
let starValue;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json())
@@ -135,22 +142,33 @@ import Layout from "../../layouts/Layout.astro";
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
wrongCount += 1;
}
} else {
element.classList.remove('greenBorder', 'redBorder');
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
function saveUserData() {
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
if (checkedCount < 2) {
// 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.';
return;
} else {
// Hide error message if validation passes
let errorMessageSection = document.getElementById('errorMessage');
errorMessageSection.style.display = "none";
}
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => {
const checkbox = document.getElementById(id);
const element = document.getElementById('image' + id.slice(-1));
@@ -162,19 +180,20 @@ import Layout from "../../layouts/Layout.astro";
});
// Count points based on checkbox values and "greenBorder" class
let totalPoints = 0;
checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1;
}
});
// Move the userData object creation inside the saveUserData function if needed
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'star': starValue
};
// console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {

31
src/pages/tick/v2.astro
View File

@@ -104,8 +104,8 @@ import Layout from "../../layouts/Layout.astro";
</div>
</div>
<div class="flex flex-col justify-center place-items-center pt-8">
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>
@@ -116,8 +116,13 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline>
const params = new URLSearchParams(window.location.search);
const gameId = params.get('id');
const userId = params.get('userid');
const userId = params.get('userId');
let startTime = Date.now();
let wrongCount = 0;
let starValue;
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json())
@@ -170,17 +175,27 @@ import Layout from "../../layouts/Layout.astro";
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
wrongCount += 1;
}
} else {
element.classList.remove('greenBorder', 'redBorder');
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
function saveUserData() {
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
if (checkedCount < 3) {
// 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.';
return;
} else {
// Hide error message if validation passes
let errorMessageSection = document.getElementById('errorMessage');
errorMessageSection.style.display = "none";
}
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
@@ -195,7 +210,6 @@ import Layout from "../../layouts/Layout.astro";
// a8: document.getElementById('a8').checked,
// a9: document.getElementById('a9').checked,
// };
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
const checkboxValues = checkboxes.map(id => {
const checkbox = document.getElementById(id);
const element = document.getElementById('image' + id.slice(-1));
@@ -213,12 +227,15 @@ import Layout from "../../layouts/Layout.astro";
totalPoints += 1;
}
});
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'star': starValue
};
// console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {

14
src/pages/tick/v3.astro
View File

@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline>
const params = new URLSearchParams(window.location.search);
const gameId = params.get('id');
const userId = params.get('userid');
const userId = params.get('userId');
let startTime = Date.now();
let gameData = null;
let starValue;
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
let totalPoints = 0;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json())
@@ -120,9 +125,6 @@ import Layout from "../../layouts/Layout.astro";
element.classList.remove('greenBorder', 'redBorder');
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
function saveUserData() {
const endTime = Date.now();
@@ -142,19 +144,19 @@ import Layout from "../../layouts/Layout.astro";
});
// Count points based on checkbox values and "greenBorder" class
let totalPoints = 0;
checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1;
}
});
totalPoints === 1 ? starValue = 5 : starValue = 3;
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
'star': starValue
};
// console.log(userData);