From c238364bd3848a887a14894027aab38dc0e09fdb Mon Sep 17 00:00:00 2001 From: AnandajithS Date: Fri, 7 Mar 2025 22:16:45 +0530 Subject: [PATCH] Completed Issue-3 --- .../typing-game-solution/.vscode/launch.json | 0 .../assignment/assignment.html | 26 +++++ .../assignment/assignment_script.js | 109 ++++++++++++++++++ .../assignment/assignment_style.css | 96 +++++++++++++++ 3-typing-game/typing-game-solution/index.html | 27 +++++ 3-typing-game/typing-game-solution/script.js | 83 +++++++++++++ .../typing-game-solution/solution.md | 16 +++ 3-typing-game/typing-game-solution/style.css | 96 +++++++++++++++ 8 files changed, 453 insertions(+) create mode 100644 3-typing-game/typing-game-solution/.vscode/launch.json create mode 100644 3-typing-game/typing-game-solution/assignment/assignment.html create mode 100644 3-typing-game/typing-game-solution/assignment/assignment_script.js create mode 100644 3-typing-game/typing-game-solution/assignment/assignment_style.css create mode 100644 3-typing-game/typing-game-solution/index.html create mode 100644 3-typing-game/typing-game-solution/script.js create mode 100644 3-typing-game/typing-game-solution/solution.md create mode 100644 3-typing-game/typing-game-solution/style.css diff --git a/3-typing-game/typing-game-solution/.vscode/launch.json b/3-typing-game/typing-game-solution/.vscode/launch.json new file mode 100644 index 0000000..e69de29 diff --git a/3-typing-game/typing-game-solution/assignment/assignment.html b/3-typing-game/typing-game-solution/assignment/assignment.html new file mode 100644 index 0000000..204edda --- /dev/null +++ b/3-typing-game/typing-game-solution/assignment/assignment.html @@ -0,0 +1,26 @@ + + + + + + Typing Quiz Game + + + + +

Typing Quiz Game

+

Type the correct answer. One mistake and it's game over!

+ + +
+

+ + + + +

Score: 0 | High Score: 0

+

+ +
+ + diff --git a/3-typing-game/typing-game-solution/assignment/assignment_script.js b/3-typing-game/typing-game-solution/assignment/assignment_script.js new file mode 100644 index 0000000..7a55c7b --- /dev/null +++ b/3-typing-game/typing-game-solution/assignment/assignment_script.js @@ -0,0 +1,109 @@ +let questions = [ + { question: "What year did the Soviet Union dissolve?", answer: "1991" }, + { question: "Who was the first person to win two Nobel Prizes?", answer: "Marie Curie" }, + { question: "What year did the Berlin Wall fall?", answer: "1989" }, + { question: "What element has the highest melting point?", answer: "Tungsten" }, + { question: "Unicorn is the national animal of which country?", answer: "Scotland" }, + { question: "Which Indian state has the longest coastline?", answer: "Gujarat" }, + { question: "What was the first country to leave the Soviet Union?", answer: "Lithuania" }, + { question: "Which country built the first high-speed rail system?", answer: "Japan" }, + { question: "What is the longest bone in the human body?", answer: "Femur" }, + { question: "What is the largest cryptocurrency by market cap?", answer: "Bitcoin" }, + { question: "Which country has the most number of time zones?", answer: "France" }, + { question: "What is the only sport to have been played on the moon?", answer: "Golf" }, + { question: "Which country was formerly known as Persia?", answer: "Iran" }, + { question: "The Library of Alexandria was located in which modern-day country?", answer: "Egypt" } +]; + +let score = 0; +let timer; +const timeLimit=30; +let timeLeft; + +let highScore = localStorage.getItem("topscore") || 0; +document.getElementById("high-score").innerText = highScore; + +let currentQuestionIndex = -1; +let usedQuestions = []; + +function getRandomQuestion() { + if (usedQuestions.length == questions.length) { + document.getElementById("question").innerText = "You won! Refresh or restart to play again."; + document.getElementById("submit").disabled = true; + document.getElementById("answer").disabled = true; + return; + } + + let randomIndex; + do { + randomIndex = Math.floor(Math.random() * questions.length); + } while (usedQuestions.includes(randomIndex)); + + usedQuestions.push(randomIndex); + currentQuestionIndex = randomIndex; + document.getElementById("question").innerText = questions[currentQuestionIndex].question; + displayTimer(); +} + +const timerElement=document.getElementById("timer"); +function displayTimer(){ + timeLeft=timeLimit; + timerElement.innerText=`Time left: ${timeLeft}`; + timer=setInterval(()=>{ + if (timeLeft==0){ + clearInterval(timer); + endGame(); + } + else{ + timerElement.innerText = `Time left: ${timeLeft}s`; + timeLeft--; + } + },1000) +} + +const startButton=document.getElementById("start"); +const container=document.getElementById("container"); +container.style.display="none"; +startButton.addEventListener("click", function () { + startButton.style.display = "none"; + container.style.display = "block"; + getRandomQuestion(); +}); + +document.getElementById("submit").addEventListener("click", function () { + const userAnswer = document.getElementById("answer").value.trim(); + if (userAnswer.toLowerCase() === questions[currentQuestionIndex].answer.toLowerCase()) { + score++; + document.getElementById("score").innerText = `Score: ${score} | High Score: ${highScore}`; + document.getElementById("answer").value = ""; + getRandomQuestion(); + } else { + endGame(); +}}); + +function endGame(){ + document.getElementById("game-over").classList.remove("hidden"); + document.getElementById("restart").classList.remove("hidden"); + + if (score > highScore) { + localStorage.setItem("topscore", score); + document.getElementById("high-score").innerText = score; + } + + document.getElementById("submit").disabled = true; + document.getElementById("answer").disabled = true; +} + +document.getElementById("restart").addEventListener("click", function () { + score = 0; + usedQuestions = []; + document.getElementById("score").innerText = `Score: 0 | High Score: ${highScore}`; + document.getElementById("game-over").classList.add("hidden"); + document.getElementById("restart").classList.add("hidden"); + document.getElementById("submit").disabled = false; + document.getElementById("answer").disabled = false; + document.getElementById("answer").value = ""; + getRandomQuestion(); +}); + +getRandomQuestion(); diff --git a/3-typing-game/typing-game-solution/assignment/assignment_style.css b/3-typing-game/typing-game-solution/assignment/assignment_style.css new file mode 100644 index 0000000..54da0d8 --- /dev/null +++ b/3-typing-game/typing-game-solution/assignment/assignment_style.css @@ -0,0 +1,96 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + + +h1 { + margin-top: 20px; + font-size: 28px; + color: #333; +} + + +p { + font-size: 18px; + color: #555; +} + + +#question { + font-size: 22px; + font-weight: bold; + margin: 20px 0; + color: #222; +} + + +input { + padding: 10px; + font-size: 18px; + border: 2px solid #007bff; + border-radius: 5px; + width: 60%; + text-align: center; + outline: none; + transition: 0.3s; +} + +input:focus { + border-color: #0056b3; + box-shadow: 0px 0px 10px rgba(0, 91, 187, 0.5); +} + + +button { + margin-top: 10px; + padding: 10px 20px; + font-size: 18px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: 0.3s; +} + + +button:hover { + background-color: #0056b3; +} + + +#score { + margin-top: 20px; + font-size: 20px; + font-weight: bold; +} + + +#game-over { + font-size: 22px; + font-weight: bold; + color: red; + margin-top: 15px; +} + + +.hidden { + display: none; +} + + +#restart { + background-color: #28a745; + margin-left: 10px; +} + + +#restart:hover { + background-color: #218838; +} + + diff --git a/3-typing-game/typing-game-solution/index.html b/3-typing-game/typing-game-solution/index.html new file mode 100644 index 0000000..5a1c1d0 --- /dev/null +++ b/3-typing-game/typing-game-solution/index.html @@ -0,0 +1,27 @@ + + + Typing game + + + +

Typing game!

+

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

+

Best Time: -- seconds

+

+

+
+ + +
+ + + + + \ No newline at end of file diff --git a/3-typing-game/typing-game-solution/script.js b/3-typing-game/typing-game-solution/script.js new file mode 100644 index 0000000..7d61036 --- /dev/null +++ b/3-typing-game/typing-game-solution/script.js @@ -0,0 +1,83 @@ +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; + +let words = []; +let wordIndex = 0; +let startTime = Date.now(); + +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); +const highScoreElement = document.getElementById('highScoreDisplay'); // High Score Display + +let highScore = localStorage.getItem("highScore") || null; +if (highScore) { + highScoreElement.textContent = `Best Time: ${highScore} seconds`; +} + +function startGame() { + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + + typedValueElement.disabled = false; + words = quote.split(' '); + wordIndex = 0; + + const spanWords = words.map(word => `${word} `); + quoteElement.innerHTML = spanWords.join(''); + quoteElement.childNodes[0].className = 'highlight'; + + messageElement.innerText = ''; + typedValueElement.value = ''; + typedValueElement.focus(); + + startTime = new Date().getTime(); +} + +document.getElementById('start').addEventListener('click', startGame); + +typedValueElement.addEventListener('input', () => { + const currentWord = words[wordIndex]; + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + const elapsedTime = (new Date().getTime() - startTime) / 1000; + const message = `You finished in ${elapsedTime} seconds.`; + + + if (!highScore || elapsedTime < highScore) { + highScore = elapsedTime; + localStorage.setItem("highScore", highScore); + highScoreElement.textContent = `Best Time: ${highScore} seconds`; + } + + document.getElementById("modal-message").innerText = message; + document.getElementById("modal").style.display = "block"; + + typedValueElement.removeEventListener('input', startGame); + typedValueElement.value = ''; + typedValueElement.disabled = true; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + typedValueElement.value = ''; + wordIndex++; + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + typedValueElement.className = ''; + } else { + typedValueElement.className = 'error'; + } +}); + +document.querySelector(".close").addEventListener("click", function() { + document.getElementById("modal").style.display = "none"; +}); diff --git a/3-typing-game/typing-game-solution/solution.md b/3-typing-game/typing-game-solution/solution.md new file mode 100644 index 0000000..8be1dc2 --- /dev/null +++ b/3-typing-game/typing-game-solution/solution.md @@ -0,0 +1,16 @@ +# Challenge + +* 1. Disabled the `input` event listener using `removeEventListener`and when the button is clicked, it is added again using `addEventListener` + +* 2. The textbox is disabled when the game ends using the `disabled` property which is set to `true`. + +* 3. First, I created a `div` in index.html to display the modal box. The modal box is not displayed when we start as the `display` property in CSS is set to `none`. After we complete the game, the modal box will popup as the `display` property is changed to `block` and will show you the congratulatory message. + +* 4. The high score is stored and retrieved using id `highScore`. We us `localstorage.getItem` method for it. + +# Assignment + +For my assignment, I made a quiz game. A question will be displayed on the screen and you have to answer it within the specified time. If you answer it incorrectly or fail to answer it within the time limit, the game will end. The questions are displayed randomly by generating an index and then pushing it to the `usedQuestions` array. When generating an index, it will make sure that the index is not in usedQuetions. When length of the `usedQuestions` becomes equal to the length of `questions` array (where our questions and answers are stored), the game will end and the modal box will pop up, congradulating you. + + + diff --git a/3-typing-game/typing-game-solution/style.css b/3-typing-game/typing-game-solution/style.css new file mode 100644 index 0000000..6304c48 --- /dev/null +++ b/3-typing-game/typing-game-solution/style.css @@ -0,0 +1,96 @@ +.highlight { + background-color: yellow; + padding: 2px 4px; + border-radius: 5px; +} + + +.error { + background-color: lightcoral; + border: 2px solid red; + color: white; +} + + +body { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + text-align: center; + font-size: 30px; + background: linear-gradient(135deg, rgba(129, 253, 237, 0.7), rgba(241, 7, 183, 0.7)); + color: #333; + padding: 20px; +} + + +button { + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + font-weight: bold; + border: none; + background-color: #ff6b81; + color: white; +} + +button:hover { + background-color: #ff3b6d; + color: yellow; + box-shadow: 2px 3px 6px grey; + transform: scale(1.1); +} + +input { + font-size: 18px; + padding: 8px; + width: 250px; + border: 2px solid #333; + border-radius: 5px; + text-align: center; +} + + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); +} + + +.modal-content { + background-color: white; + margin: 15% auto; + padding: 20px; + border: 2px solid #888; + width: 50%; + text-align: center; + border-radius: 10px; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); +} + + +.close { + color: red; + float: right; + font-size: 28px; + font-weight: bold; + +} + +.close:hover { + color: darkred; + transform: scale(1.1); +} + + +#highScoreDisplay { + font-size: 20px; + font-weight: bold; + color: #222; + margin-bottom: 10px; +}