Task: Create Touch Typing GameDescription: Create a typing game that has a timer and shows the typing speed in words per minute(WPM)Acceptace criteriaTimer element ID timerWPM element ID wpmContainer element ID containercorrect, incorrect classes should be used appropriately to mark letters if the user typed some letters.Initially timer and wpm should be zero(0)User can start the game clicking on container elementIn order to start the game, start the timer, and the user should be able to type and see their progress in the wpm elementUser can stop the game by clicking outside of containerIn order to stop the game, stop the timer and set it to zero(0), pause the wpm whatever its value was, and remove classes correct/incorrect from the letter of the quote (make it like new rendered quote)If the user typed the rendered quote completely (doesn't matter correct/incorrect), automatically render a new quote and set the timer to zero(0)Update the timer after each second by 1 (one) when game stated. The timer should show the time passed in seconds.Given formula should be used to calculate speed(wpm)You should be using this API to get quotes. Be mindful of special letters/symbolsUse fetch() to make API callsUse Math.round() in order to round wpm.Time-Elapsed (sec) should be calculate using Math.floor((new Date() - startTime) / 1000)startTime ->Timestamp(when timer started)WPM should be calculating using Math.round(parseFloat(correctStrokes()) / 5.0 / (parseFloat(Time-Elapsed(sec)) / 60.0)); Formula is shown in the pictureUpdate the wpm on each-stroke(doesn't matter correct/incorrect)Input should be given to body tag. Hint add an event listener to document.Use keydown event for input. Hint: e.key/e.keyCodeTry to make it interactive/engaging/awesome. Happy coding :)
Question
Task: Create Touch Typing GameDescription: Create a typing game that has a timer and shows the typing speed in words per minute(WPM)Acceptace criteriaTimer element ID timerWPM element ID wpmContainer element ID containercorrect, incorrect classes should be used appropriately to mark letters if the user typed some letters.Initially timer and wpm should be zero(0)User can start the game clicking on container elementIn order to start the game, start the timer, and the user should be able to type and see their progress in the wpm elementUser can stop the game by clicking outside of containerIn order to stop the game, stop the timer and set it to zero(0), pause the wpm whatever its value was, and remove classes correct/incorrect from the letter of the quote (make it like new rendered quote)If the user typed the rendered quote completely (doesn't matter correct/incorrect), automatically render a new quote and set the timer to zero(0)Update the timer after each second by 1 (one) when game stated. The timer should show the time passed in seconds.Given formula should be used to calculate speed(wpm)You should be using this API to get quotes. Be mindful of special letters/symbolsUse fetch() to make API callsUse Math.round() in order to round wpm.Time-Elapsed (sec) should be calculate using Math.floor((new Date() - startTime) / 1000)startTime ->Timestamp(when timer started)WPM should be calculating using Math.round(parseFloat(correctStrokes()) / 5.0 / (parseFloat(Time-Elapsed(sec)) / 60.0)); Formula is shown in the pictureUpdate the wpm on each-stroke(doesn't matter correct/incorrect)Input should be given to body tag. Hint add an event listener to document.Use keydown event for input. Hint: e.key/e.keyCodeTry to make it interactive/engaging/awesome. Happy coding :)
Solution
The task is to create a touch typing game with the following specifications:
-
Setup: Create a webpage with three elements: a timer (ID: timer), a words per minute counter (ID: wpm), and a container (ID: container). The timer and wpm should initially display zero.
-
Starting the Game: The game starts when the user clicks on the container. This should start the timer and allow the user to begin typing. The user's progress should be displayed in the wpm element.
-
During the Game: As the user types, letters should be marked as correct or incorrect using the appropriate classes. The timer should increase by one every second, and the wpm should be updated with each keystroke. The wpm should be calculated using the formula:
Math.round(parseFloat(correctStrokes()) / 5.0 / (parseFloat(Time-Elapsed(sec)) / 60.0)). -
Stopping the Game: The game stops when the user clicks outside of the container. This should stop the timer and set it back to zero, pause the wpm counter, and remove the correct/incorrect classes from the letters.
-
Completing a Quote: If the user finishes typing a quote (regardless of whether it was typed correctly), a new quote should be rendered and the timer should be reset to zero.
-
Fetching Quotes: Use the provided API to fetch quotes for the game. Be mindful of special characters and symbols.
-
Input: The user's input should be captured using a keydown event listener added to the document.
-
Design: Try to make the game interactive and engaging.
Happy coding!
Similar Questions
One of my favorite time-passing game is touch typing. Good command of touch typing is a very important skill, especially when it comes to productivity. Sometimes you can feel it too.Touch typing gives leverage when you are competing with others. Also, it's fun, isn't it?Task: Create Touch Typing GameDescription: Create a typing game that has a timer and shows the typing speed in words per minute(WPM)Acceptace criteriaTimer element ID timerWPM element ID wpmContainer element ID containercorrect, incorrect classes should be used appropriately to mark letters if the user typed some letters.Initially timer and wpm should be zero(0)User can start the game clicking on container elementIn order to start the game, start the timer, and the user should be able to type and see their progress in the wpm elementUser can stop the game by clicking outside of containerIn order to stop the game, stop the timer and set it to zero(0), pause the wpm whatever its value was, and remove classes correct/incorrect from the letter of the quote (make it like new rendered quote)If the user typed the rendered quote completely (doesn't matter correct/incorrect), automatically render a new quote and set the timer to zero(0)Update the timer after each second by 1 (one) when game stated. The timer should show the time passed in seconds.Given formula should be used to calculate speed(wpm)You should be using this API to get quotes. Be mindful of special letters/symbolsUse fetch() to make API callsUse Math.round() in order to round wpm.Time-Elapsed (sec) should be calculate using Math.floor((new Date() - startTime) / 1000)startTime ->Timestamp(when timer started)WPM should be calculating using Math.round(parseFloat(correctStrokes()) / 5.0 / (parseFloat(Time-Elapsed(sec)) / 60.0)); Formula is shown in the pictureUpdate the wpm on each-stroke(doesn't matter correct/incorrect)Input should be given to body tag. Hint add an event listener to document.Use keydown event for input. Hint: e.key/e.keyCode
A touch typist uses ________ to keep track of location on the keyboard.*1 pointMuscle MemoryRAM MemoryROM MemoryNone of the above
How do you type faster?
Karen’s typing speed is 60 words per min.She can type words in 5
Develop a Java program that creates a GUI application for a stopwatch usingSwing. The stopwatch should have start, stop, and reset buttons, and displaythe elapsed time.
Upgrade your grade with Knowee
Get personalized homework help. Review tough concepts in more detail, or go deeper into your topic by exploring other relevant questions.