add eraser button and add start calculation logic
This commit is contained in:
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user