1
Project Report
On
Basic React Quiz App
Submitted By
Mr. Kartik Sharma
Under the guidance of
Ms. Shalini Maheshgauri
Submitted in partial fulfillment of the requirement
for qualifying T.Y.B.Sc. Computer Science
Semester V Examination 2021
DEPARTMENT OF COMPUTER SCIENCE
KISHINCHAND CHELLARAM COLLEGE
Churchgate, Mumbai – 400 020
2
KISHINCHAND CHELLARAM COLLEGE
Churchgate, Mumbai-400 020
CERTIFICATE
This is to certify that Ms. / Mr. Kartik Dinesh Sharma
Seat no. 55 of T.Y.B.Sc. Computer Science has completed his / her
Windows based / Web based / Android based project entitled
Typeracer in partial fulfillment of the degree of
B.Sc. in Computer Science for Semester V under the University of Mumbai
for the academic year 2021-2022.
It is further certified that this project had not been submitted for any other
examination and does not form part of any other course undergone by the
candidate.
_
Project Guide Coordinator
Date 28-10-2021 Examined By: Ms. Geeta Brijwani _
3
ACKNOWLEDGEMENT
I would like to express my deep regards to Dr. Hemlata Bagla, Principal of
Kishinchand Chellaram College for providing me with the facilities of the
institution.
I would also thank our Vice Principal and Coordinator of the Department of
Computer Science Dr. Shalini R. Sinha, for being a constant source of
inspiration and making all the necessary facilities available to me during my
project development.
I would like to give special honor and respect to my mentor Mrs. Shalini
Maheshgauri have taken keen interest in checking the minute details of the
project work and guided me throughout in making this project functioning in
a correct way.
Their continuous support, patience, motivation, enthusiasm not only helped
in making my efforts fruitful but also made project development journey
enjoyable. I am also pleased to thank other project guides teachers of my
department.
I am thankful to the non-teaching staff of our department for being always
accommodating and co-operative all services through needed for project
development.
Last but not the least, I wish to avail myself of this opportunity to express
my gratitude to my family and friends for their constant encouragement and
support for project formation.
4
INDEX
Topic Page Number
I. Preliminary Investigation 5
i. Organizational Overview 5
ii. Description of the present system 5
iii. Limitations of the present system 5
iv. Description of the proposed system 5
v. Limitations of the proposed system 6
vi. Requirement Specification 7
II. System Analysis and Design 8
i. Event List 5
ii. User Flow Diagram 10
iii. System Flow Diagram 11
III. System Coding 19
ii. Test Cases, Test Data and Test Results 12
iii. Screen and Report Layouts 13
IV. System Implementation and Uploading 18
V. Conclusion and Future Scope 18
VI. Future Enhancements 18
VII. References and Bibliography 19
5
I. PRELIMINARY INVESTIGATION
1) Description of the current system.
1) There are 2-3 games we will get on the Internet, but they all have
unlike features ascompared to our system.
2) There is a website and it has only one page where you willrace online
and see your stats. No interactive user interface was observed.
3) The existence system didn't have different level of difficulties for self-practice.
4) No other existing project or hosted website was found Online as
compared to ourproject
2) Limitations of the current system.
During lockdowns, all the interviews were conducted online and one important
aspect about them was how fast and accurate do we type in the coding test. In
Corporations like Google, Amazon, Microsoft, etc., the speed of clearing coding
interviews has a huge impact on the chances of a person’s selection. So, we
have been working on developing an application method which can teach all the
coders how to type fast in an interactive way.
3) Description of proposed system
Our project is a web-based application, which means that any who wants to play
can join otherpeople online. There are three modes of races: -
In the First Mode, the player gets matched up with two other random
players around theworld
In the Practice Mode, a player can practice his/her own skills according
to his own caliber.Different levels are present to master typing.
Also, we can race with two more friends online to decide who types the fastest.
The website is interactive and easy-to-use, which means that people will not
have to memorizethe instructions about how exactly the game has to be played.
There is no login system, which means that people do not have to remember
their credentials. Also, there is a leader board whichhelps to determine which
user had the highest typing speed.
6
4) Limitations of the proposed system
This Application is web based, so network traffic may have an effect on the loading
times. Wehave not used any database as all things are taken care of on the front-end.
The website uses cookies, so multiple login attempts may cause an error. Also, as
we are using a free hosting service, some functions such as player matching and
loading the leader board may face someissues.
Now, typing speed certainly plays a large role in your comfort, up to a point. If
typing out a comment or a code snippet takes too long, it will interrupt your flow
and become more of a burden. Then you'll simply start doing it less: not a good state
of events. Programming is morethan just writing code: strong communication is also
crucial. If you hesitate to write a longer comment, blog post or email just because
typing is awkward or too slow, you'll be seriously limiting yourself.
7
5) Requirement Specification
i. Operating System: Runs on all operating systems with the latest browsers.
ii. Software Requirement:
Languages: HTML5, CSS3, JavaScript, node.js
Visual Studio Code for Coding
iii. Hardware Requirements:
4GB RAM.
Internet Connection.
Any processor that is suitable for all the browsers
iv. For Deployment
Localhost
8
II. SYSTEM ANALYSIS AND DESIGN
CONTENT
SYSTEM ANALYSIS AND DESIGN:
EVENT LIST
USER FLOW DIAGRAM
SYSTEM FLOW DIAGRAM
EVENT LIST
DEVELOPER
The developer can add any other programming language questions for the quiz.
The developer can add more questions to the quiz.
STUDENT/USER
Students, once they click the link, will be redirected to the quiz.
Students can select the language they want to attempt (here there are four).
Students can click on the option they think is right.
Students can review the questions- Answered and Not Answered.
Students can go back to previous question.
Students can go to the next question.
Students can go to the first and last question too, just by clicking on the button
9
EVENT TABLE
USER
Events Trigger Source Activity Response Destination
User opens the The Web Enter Home page
User User
link Page Username opens
User sees the View Dashboard
Dashboard User User
dashboard Dashboard opens
User views Available
View
The available Dashboard User options are User
Dashboard
Races seen
User joins a Join Race is
Race Page User Race Starts User
regular race prompted
User Types the
Race with The Race is
given Race Page User User
users recorded
paragraph
User joins Practice
Practice Race for
practice race User Race page is User
Race practice opens
opened
Level
User selects the Practice Race for
User Selection User
level Race Practice starts
takes place
Race with
User joins the Race with Race with
User friends page User
friends’ race Friends friends starts
is displayed
10
USER FLOW DIAGRAM
USER
11
SYSTEM FLOW DIAGRAM
12
I. SYSTEM CODING
TEST CASES, TEST DATA AND RESULTS
Sr. User Form Test Step Input Expected Actual Result
Name Condition Procedure Test Output Output
no
Data
1 Homepage Home.html Enter 1 Enter Username : Next Page Next page PASS
Name username abcde
2Enter no Username All racers have a All racers have
PASS
username username a username
3 Enter Enter a Race Loading Screen Loading PASS
regular race Appears Screen
Appears
4 The The Race Congratulations the Congratulatio PASS
paragraph is Completes Race is completed ns the Race is
completed completed
3 Practice Practice.ht Start 1 Selects the New Race The Race starts The Race starts PASS
Race ml practice level Starts
2 The The Race Congratulations the Congratulation
PASS
paragraph is Completes Race is completed s the Race is
completed completed
3 Race with Racefrnds. Start Race 1 Enter or A race id is Enter the Race Enter the Race PASS
Friends html with make a new shown
Friends Race
2 All friends The Race The Paragraph is The Paragraph PASS
join the Race Starts shown is shown
Game
13
SCREEN AND REPORT LAYOUTS:
This is the First Page which the users see when they open the link.Here, they have entered their
username so that they become an active user.
After the username is entered, the users will be shown this dashboard where
they can select the type of Race or see the leaderboard.
14
This is the loading page, whenever the user is waiting in the lobby for other
racers.
When three people are online, the Race starts. The user has to type the
highlighted word has to betyped and as they keep typing the words, the car
moves ahead in the race.
15
After the race the completed when the complete paragraph is typed, the user
can see all the statsrelated to his typing speed and accuracy.
In practice mode, the user can select the difficulty level according to their
won choice. In the specifiedtime, the user has to type the full paragraph in
order to see the analysis regarding his typing.
16
When the user clicks the option of racing with friends, the user gets two
options, i.e., enter a room IDwhich was given by his/her friends, or he/she
can generate a random room ID which can be shared with friends to start a
race.
17
After all the racers have entered the room ID and joined the race, the friends
can compete against eachother and the friend which completes the race first
wins the race.
18
IV. SYSTEM IMPLEMENTATION AND UPLOADING
1) Install node.js.
2) Using node server.js.
3) I have uploaded my project in repository in Github
V. CONCLUSION AND FUTURE SCOPE
Therefore, I have successfully implemented our Summer Project
“TYPERACER” andsatisfies the Academic Requirements.
This project has been a joint effort of the members of our group and we believe
that our objective of teaching people about the important skills of typing with
speed and accuracy is achieved with the help of our project. The application has
been hosted on the Internet and therefore is accessible to everyone at any times
to use and learn from our Project.
VI. FUTURE ENHANCEMENTS:
I am planning to add following features to my project: -
A user database for storing all the statistics of a user
A login and registration so that the user will not have to remember his
exact usernameevery time
Currently, only 9 users have been tested for working simultaneously
without any lag, we are planning to add more users who can access the
website at the same time.
I am also planning to add Bots of different difficulty levels, so that the
users can practice with a computer simulated player for better
understanding of their typing speeds.
Page | 18
19
VII. REFERENCES AND BIBLIOGRAPHY:
We are planning to add following features to our project: -
A user database for storing all the statistics of a user
A login and registration so that the user will not have to remember his
exact usernameevery time
Currently, only 9 users have been tested for working simultaneously
without any lag, we are planning to add more users who can access the
website at the same time.
We are also planning to add Bots of different difficulty levels, so that the
users can practice with a computer simulated player for better
understanding of their typing speeds.
1. Forthmann, B., Holling, H., Çelik, P., Storme, M., & Lubart, T. (2017).
Typing speed as a confounding variable and the measurement of
quality in divergent thinking. Creativity Research Journal, 29(3), 257-
269.
2. Chen, Beilei. "An Empirical Study on Obstacles and Countermeasures of
English Audio-Typing Based on Monitor Theory." Frontiers in Educational
Research 4.1(2021).
3. Peng, Hanqi, Yanyi Qian, and Chang Liu. "Examination of Effects of Time
Constraintand Task Type on Users’ Query Typing Behaviors." Data and
InformationManagement 5.1 (2021): 48-55.
4. “Does typing speed matter?”
https://www.infoworld.com/article/2073295/correlation-between-
typing-speed-and- programming-competence.html
Page | 19
20
5. The following are the references used for developing the project: -
Web Hosting: - https://www.youtube.com/watch?v=ncHGkYmIBRE&t=1070s
SSH Keys Generation: - https://www.youtube.com/watch?
v=AGDrk3bfKjg&t=994sGitHub: - https://www.youtube.com/watch?
v=gwWKnnCMQ5c
JavaScript Tutorials: - https://www.youtube.com/watch?
v=PkZNo7MFNFg&t=289s
Page | 20
