Sections:

• Part 1: Planning
• Part 2: Execution
• Part 3: Final writeup to showcase final product
• Part 4: Peer Review
• Part 5: Additional work done

Part 1: Planning

1. Inspiration:

• Typeracer games that I will be using as inspiration for the design of my typeracer game:

  • MonkeyType (https://monkeytype.com/)

    

  • 10FastFingers (https://10fastfingers.com/typing-test/english)

    

2. User interface and planned features

• User Interface mockup/plan:

  

• Features/Game elements:

  • Game settings will be at the top:
    • User will have the ability to change the passage type to either use random words or a random quote/paragraph. I have not decided if I want to allow the user to upload their own passage, as I don’t know if I will have enough time to do implement this feature.
    • User will also have the ability to change the amount of time per game.
    • I have currently only decided on these two settings. If I have more time, I may be able to implement more settings.
  • Game experience:
    • When the typeracer game starts, the user will type out the highlighted word in the textbox below, and press space when they are done.
    • If they typed the word correctly, the word is highlighted in green, and the user can move on to the next word.
    • Otherwise, the word is highlighted in red, but the user can still move on to the next word.
    • This user interface is similar to the user interface of 10fastfingers.com. I chose this kind of user interface as I felt that it would be clearer as compared to a simple blinking cursor (like the one used in monkeytype.com).
    • At the end of the game, users will be shown a screen telling them their typing speed in words per minute, and accuracy.
  • Frameworks I plan to use:
    • I plan to use SvelteKit (https://kit.svelte.dev/) and the Fluent Svelte UI Library (https://fluent-svelte.vercel.app/) to build the user interface.

3. Concepts I need to accomplish this

• Concepts I already know:
  • Basic knowledge of HTML
  • Basic knowledge of CSS
  • Knowledge on how to use SvelteKit
  • Basic data structures (e.g., strings, arrays)
  • How to deploy a website using Vercel
• New concepts I need to pick up:
  • Knowledge of JavaScript syntax
  • How to manipulate HTML elements using JavaScript
  • How to use event listeners with JavaScript

4. Execution schedule

• T1W3 Saturday and Sunday:
  • Begin work on the basic layout of the user interface, as well as the logic behind generating the passage using random words.
• T1W4 Monday and Tuesday:
  • Start on the text highlighting feature which highlights the text in the passage based on what the user typed, and begin to work on the timer.
• T1W4 Saturday and Sunday:
  • Work on the logic behind generating a random quote/paragraph, and finish up on any incomplete features and fix bugs.