Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Enhancement] : Master Typing UI #4605

Merged
merged 3 commits into from
Jun 28, 2024
Merged

[Enhancement] : Master Typing UI #4605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37d5e5d
fix: master typing UI related issues
anisharma07 Jun 17, 2024
5d5dbc4
fix: master type instruction color visibility
anisharma07 Jun 17, 2024
7a0d442
fix: master typing ui
anisharma07 Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions Games/Master_Typing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,16 @@
</head>
<body>
<div class="details_div">
<div class="home_btn">
<a href="https://kunjgit.github.io/GameZone/">
<div onclick="window.location.href='/'" class="home_btn">
<i style="color:white;" class="fas fa-home home-icon"></i>
</a>
</div>
<div class="load">
<h1>MASTER TYPING</h1>
<hr>
</div>

<div class="menu">
<p>click here for <a href="./rules.html">instructions</a></p>
<div onclick="window.location.href = './rules.html'" class="menu">
<p>Click here for Instructions</></p>
</div>
</div>

Expand Down
17 changes: 11 additions & 6 deletions Games/Master_Typing/rules.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<title>Master Typing | Instructions</title>
</head>
<body>
<navbar class="menu">
<a href="./index.html">back</a>
<div onclick="window.location.href='./index.html'" class="Back-button">
<svg width="20" height="20" viewBox="0 0 95 82" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.74177 37.0406C-0.406112 39.1885 -0.406112 42.6709 1.74177 44.8188L36.7436 79.8206C38.8914 81.9684 42.3738 81.9684 44.5217 79.8206C46.6696 77.6727 46.6696 74.1903 44.5217 72.0424L13.409 40.9297L44.5217 9.81699C46.6696 7.66911 46.6696 4.1867 44.5217 2.03881C42.3738 -0.109069 38.8914 -0.109069 36.7436 2.03881L1.74177 37.0406ZM94.5898 35.4297L5.63086 35.4297V46.4297L94.5898 46.4297V35.4297Z" fill="white"/>
</svg>

back</div>
</navbar>
<div class="container1">
<div class="rules">
<article>
<h1>INSTRUCTIONS</h1>
<p>This is a typing test which allows you test your typing skills</p>
<p>Click on the popped up key to start the test</p>
<p>The test limit is 60 seconds</p>
<p>A result will be generated after completion of test</p>
<p>&#9688 This is a typing test which allows you test your typing skills</p>
<p>&#9688 Click on the popped up key to start the test</p>
<p>&#9688 The test limit is 60 seconds</p>
<p>&#9688 A result will be generated after completion of test</p>
</article>
</div>
<hr>
Expand Down
91 changes: 43 additions & 48 deletions Games/Master_Typing/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
const keys = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"];
let wrongKeyTracker=[];
let wrongKeyTracker = [];
const timestamps = [];
let wrongKey;
const wrongTeller=document.querySelector(".wrTeller");
const wrongTeller = document.querySelector(".wrTeller");
console.log(wrongTeller.innerText);
//Declear the variables for counting total entry and correct entry
let totalEntry = 0;
let correctEntry = 0;
for(let i=0;i<26;i++){
wrongKeyTracker[i]=0;
for (let i = 0; i < 26; i++) {
wrongKeyTracker[i] = 0;
}
timestamps.unshift(getTimestamp());

Expand All @@ -22,12 +22,11 @@ function getRandomKey() {
return keys[getRandomNumber(0, keys.length - 1)];
}

let lastPopUpkey=null;
let lastPopUpkey = null;
function targetRandomKey() {
const key = document.getElementById(getRandomKey());
key.classList.add("selected");
lastPopUpkey=key;

lastPopUpkey = key;
}
// Function to unselect the last popped-up key
function unselectLastPopUpKey() {
Expand All @@ -39,20 +38,20 @@ function unselectLastPopUpKey() {
function getTimestamp() {
return Math.floor(Date.now() / 1000);
}
const totKey=document.querySelector(".TotScore");
const wrKey=document.querySelector(".wrScore");
const corKey=document.querySelector(".corScore");
const totKey = document.querySelector(".TotScore");
const wrKey = document.querySelector(".wrScore");
const corKey = document.querySelector(".corScore");
document.addEventListener("keyup", (event) => {
const keyPressed = String.fromCharCode(event.keyCode);
const keyElement = document.getElementById(keyPressed);
const highlightedKey = document.querySelector(".selected");

//counting the total entry
totalEntry++;
totKey.textContent="Key pressed :"+totalEntry;
// Add sound
const audio = new Audio("assets/Right_Press.mp3");
audio.play();
totKey.textContent = "Key pressed :" + totalEntry;
// Add sound
const audio = new Audio("assets/Right_Press.mp3");
audio.play();

keyElement.classList.add("hit");
keyElement.addEventListener("animationend", () => {
Expand All @@ -62,8 +61,8 @@ document.addEventListener("keyup", (event) => {
if (keyPressed === highlightedKey.innerHTML) {
//counting the correct entry
correctEntry++;
corKey.innerText="Correct: "+correctEntry;

corKey.innerText = "Correct: " + correctEntry;

// // Add right sound
// const audio = new Audio("assets/Right_Press.mp3");
Expand All @@ -78,10 +77,9 @@ document.addEventListener("keyup", (event) => {

highlightedKey.classList.remove("selected");
targetRandomKey();
}
else{
wrongKeyTracker[(highlightedKey.innerHTML).charCodeAt(0)-65]++;
wrKey.innerText="Incorrect: "+(totalEntry-correctEntry);
} else {
wrongKeyTracker[highlightedKey.innerHTML.charCodeAt(0) - 65]++;
wrKey.innerText = "Incorrect: " + (totalEntry - correctEntry);
}
// else {
// // Add wrong sound
Expand All @@ -90,21 +88,18 @@ document.addEventListener("keyup", (event) => {
// }
});



// ---------------------For the Timer--------------------------------

var timerElement = document.getElementById("timer");
var intervalId;
var secondsLeft = 60;

function startTimer() {

const startButton = document.querySelector("button:nth-of-type(1)");

targetRandomKey();
// Disable the start button
startButton.disabled = true;
startButton.disabled = true;

// Reset the counts entries
totalEntry = 0;
Expand All @@ -118,7 +113,7 @@ function startTimer() {
if (secondsLeft === 10) {
showCountdownMessage(); // Show custom alert message
}

if (secondsLeft < 0) {
//call assessment function for review result
assessment();
Expand All @@ -136,26 +131,24 @@ function restartTimer() {
secondsLeft = 60;
timerElement.textContent = "00:00";

unselectLastPopUpKey();

unselectLastPopUpKey();

//set all the counter to 0
totKey.innerText="Total Key Pressed: 0";
corKey.innerText="Correct: 0";
wrKey.innerText="Incorrect: 0";
wrongTeller.innerHTML=" ";
totKey.innerText = "Total Key Pressed: 0";
corKey.innerText = "Correct: 0";
wrKey.innerText = "Incorrect: 0";
wrongTeller.innerHTML = " ";
//remove the mark from key which was pressed wrong most amount of time
if(wrongKey!=null&&wrongKey.classList.contains("wrongSelection"))
wrongKey.classList.remove("wrongSelection");
totalEntry=0;
correctEntry=0;
for(let i=0;i<26;i++){
wrongKeyTracker[i]=0;
if (wrongKey != null && wrongKey.classList.contains("wrongSelection"))
wrongKey.classList.remove("wrongSelection");
totalEntry = 0;
correctEntry = 0;
for (let i = 0; i < 26; i++) {
wrongKeyTracker[i] = 0;
}

// Enable the start button
document.querySelector("button:nth-of-type(1)").disabled = false;

}

function padNumber(number) {
Expand Down Expand Up @@ -191,18 +184,20 @@ function assessment() {
// Update the timerElement with the result content
timerElement.innerHTML = "00:00";
let mostIncorrectKey;
let micval=0;//mostIncorrectKeyValue
for(let i=0;i<26;i++){
if(micval<wrongKeyTracker[i]){
mostIncorrectKey=65+i;
micval=wrongKeyTracker[i];
let micval = 0; //mostIncorrectKeyValue
for (let i = 0; i < 26; i++) {
if (micval < wrongKeyTracker[i]) {
mostIncorrectKey = 65 + i;
micval = wrongKeyTracker[i];
}
}
//Specify which key needing improvement
if(micval>0){
wrongKey=document.getElementById(String.fromCharCode(mostIncorrectKey));
if (micval > 0) {
wrongKey = document.getElementById(String.fromCharCode(mostIncorrectKey));
wrongKey.classList.add("wrongSelection");
wrongTeller.innerText="The Key which need most Practice is "+String.fromCharCode(mostIncorrectKey);
wrongTeller.innerText =
"The Key which need most Practice is " +
String.fromCharCode(mostIncorrectKey);
}
}

Expand Down Expand Up @@ -292,4 +287,4 @@ document.addEventListener("DOMContentLoaded", () => {

// Set timeout for game completion after 60 seconds
setTimeout(onGameCompleted, 67000);
});
});
Loading
Loading