Welcome Message
Hello students, this is Mayank Chawdhari, and I will be guiding you on how you can start your basic English typing test on Shubham Academy's English Typing page.
So upon coming into the typing page from the navigation bar typing section (not for logged-in students), you will find this form:
Instructions
In the form, you will see the following fields:
- Name: (Fill in your name here)
- Time: (Select a suitable time)
- Topic: (Select a relevant topic according to you)
- Are you a student of Shubham Academy: (Only if you are a student of Shubham Academy, then click the checkbox)
Start Typing: Before clicking this button, it’s important to select a topic. Without selecting a topic, you won’t be able to start the typing test.
After starting the typing test, you will see this interface:
Overview of the Script
This page is part of an interactive typing test interface. It includes various elements to help users track their typing performance, configure settings, and interact with the application. Here’s a simple breakdown of what each part of the page does:
Detailed Explanation
1. Typing Container 🧩
Container : This is the main wrapper for the typing test interface. Initially hidden, it will only be shown when the test starts.
2. Welcome Section 🎉
Welcome Container: Includes a person icon representing the user or test taker and a welcome message displaying a greeting or instructions for the user.
3. Statistics Section 📊
Stats : Shows different performance metrics such as total characters, characters typed, gross WPM (Words Per Minute), delete count, backspace count, and time left.
4. Content Display 📜
Content Display : Shows the text that the user needs to type with an article icon representing the content and a content inner section with a content header and content text.
5. Typing Area ⌨️
Textarea: Where the user will type their text. Initially disabled, it will be enabled when the test starts.
6. Control Settings ⚙️
Control Container: Allows users to adjust settings such as enabling/disabling backspace and copy/paste functions.
7. Buttons 🎯
Button Container: Contains action buttons like reset and submit, allowing users to manage the test interface.