-
Notifications
You must be signed in to change notification settings - Fork 2
/
final.html
123 lines (108 loc) · 10.3 KB
/
final.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<title> Python Final Project </title>
<link href= "flashtypecss.css" rel="stylesheet">
</head>
<body>
<h1> Flash Type </h1>
<h2> Lin (Kitty) Wang, Kayla Tsui, Justine Kyi Period 5 </h2>
<nav class = "table">
<nav> <h3> Menu/Table of Contents: </h3> </nav>
<ul> <a href = "#Description"> Project Overview </a> </ul>
<ul> <a href= "#Instructions"> How to Use </a> </ul>
<ul> <a href= "#Works"> How it Works </a> </ul>
<ul> <a href= "#Files"> Files </a> </ul>
<ul> <a href= "#Resource"> Resources </a> </ul>
<ul> <a href= "#bugs"> Things to Know </a> </ul>
</nav>
<a id= "Description"><h3> Project Overview/Description </h3> </a>
<p>
Hello! This is the main landing page for Flash Type. Our team, Kit Kat Juice, aims to create a user-friendly Python program that functions as a typing speed test, which will test how fast the user can type a random sentence (created through a program like generate_text and displayed one line at a time) based on words per minute. At the end of the round, error frequency analysis and the typing speed computations will be displayed (this will be made possible with the time module). The random sentences generated for the user to test themselves on are taken from various text files from Project Gutenberg, and every "sentence" displayed for the user to type is randomly sourced from one of three books: <em></em>.
</p>
<div class = "GUI">
<img class="fit-picture"
src="flashtype1.png"
alt= "Image of the starting page of Flash Type">
</div>
<a id= "Instructions"> <h3> Instructions </h3> </a>
<p>
A typing test measures the test-taker's typing speed and accuracy. Typing tests usually give one or more sentences/paragraphs for the typer to copy within a certain time frame.
The program collects data on how fast the tester is able to copy that passage and the amount of errors they make while typing it. This data is displayed at the end of the typing test.
Flash Type is a specific typing test that will utilize data analysis and imported modules using Python.
To play, the program will display the sentence that the user needs to copy. Make sure to click on the black text box before typing. Once the user finishes typing the sentence, click enter to go to the next sentence. This process continues until the typing test is over, when the results of the typing test will then be generated. Flash Type offers one minute long typing rounds at the end of which users receive analyses results based on their input.
<br> To enjoy your experience with Flash Type:
</p>
<ol>
<li> Peruse the landing load page</li>
<li> When the screen has transitioned to the test phase, please click on the black input box to begin the test </li>
<li> Type the sentence displayed above the input box in lavender to the best of your ability. Press enter when done. </li>
<li> The next sentence to type in will appear, and you may begin typing once again.</li>
<li> Repeat steps 3 & 4 until the round is over, when the results will be returned to the user, which consists of one's most frequent error, accuracy, and words per minute typing rate (displayed as "wpm"). </li>
<li> Should the user decide to play another round, they may click the reset button, which takes the form of a keyboard at the bottom of the screen.</li>
</ol>
<a id= "Works"><h3> How it Works </h3> </a>
<p> Flash Type will take a randomly generated sentence from one of the chosen texts (see the Files section for more info on the texts used). The user will retype that sentence. The program will assess how correct the user's sentence was (such as any errors they made when compared to the original sentence).
The Time module and program calculations will be based on one line at a time, and this data is then scaled to record wpm (words per minute). To accomplish all of this, Flash Type uses a game class and a main() method that maintains the running of the program. To source the words of the sentences, a list containing the three book's filenames are stored and passed into two methods that process the text and generate a new sentence with eight random words from the book. The main() method begins by resetting all variables storing values from the previous round (which are declared in the __init__ step), and initializes the landing page. After 2.7 seconds, the user will be directed to the typing speed test page. All lines of text displayed on the screen are rendered by the two write text functions as the background image is loaded. When the user clicks on the black input box to begin typing, the timer begins and the user's keyboard inputs are stored and updated with every change to render a typewriter-like effect in the input box. When the user completes typing each line, they may enter the return key, which will invoke a new line to be generated and displayed for typing. Meanwhile, the total time is recorded again, as the user input and the sample "sentence" for the previous line are appended to a record keeping string. The accuracy for the line is then calculated and stored in a list, and the overall accuracy is computed at the end of the round (after ~60 seconds have elapsed) as the mean of the list of accuracy rates.
</p>
<p>
At the end of the round, the user will be able to view their most frequent error (the most common character that has been typed incorrectly), holistic accuracy rate, and words per minute rate. A reset button in the form of a keyboard will also be displayed and the position of the user's mouse click will be assessed to determine whether the program will run another round.
</p>
<a id= "Files"><h3> Files </h3> </a>
<ul>
<li>Alice's Adventures in Wonderland: By Lewis Carroll, the story follows a young girl named Alice as she follows a white rabbit down a hole into a whimsical place.</li>
<img class="fit-picture"
src="https://images-na.ssl-images-amazon.com/images/I/71su1O1yFJL.jpg"
alt= "Image of Alice's Adventures in Wonderland Book Cover">
<li>Dubliners: "Dubliners" by James Joyce is a collection of short stories detailing various characters in the Irish city Dublin.</li>
<img class="fit-picture"
src="https://images-na.ssl-images-amazon.com/images/I/A1Ge6-BQ+dL.jpg"
alt= "Image of Dubliners Book Cover">
<li>Frankenstein or, The Modern Prometheus: "Frankenstein or, The Modern Prometheus" is written by Mary Wollstonecraft (Godwin) Shelley. The story is about scientist Victor Frankenstein creating a living creature. By attempting to create life, Victor instead creates a monster.</li>
<img class="fit-picture"
src="https://images-na.ssl-images-amazon.com/images/I/51r0PdZrI8L._SX316_BO1,204,203,200_.jpg"
alt= "Image of Frankenstein or, The Modern Prometheus Book Cover">
<li> final.html : This html file </li>
<li> Flashtype.py : The main Python file that makes up the typing portion, using components such as the GUI (explained further in a section below). </li>
<li> errors.py : The Python file that calculates the number of errors and percentage accuracy based on the total number of words. </li>
<li> background.jpg : This file serves as the background color of the window when the user is taking the typing test. </li>
<li> icon.png : When the results of the typing test are shown, there is an icon at the bottom, which allows the rounds to be reset so the user can take the test again. </li>
</ul>
<a id = "Resource"> <h3> Resources </h3> </a>
<p> Flash Type uses two Python modules: Pygame and time. </p>
<ul>
<li>
pygame: The pygame library was implemented so that there is a user-friendly interface for the program. Since Pygame is generally used for developing games in Python, implementing Pygame into Flash Type would help make the typing test more user-friendly and vibrant to promote user-program interactions. To see the official Pygame documentation repository,
<a href= https://github.com/pygame/pygame> click here. </a>
In addition,
<a href= https://www.pygame.org/docs/>this website</a>
has a general overview of pygame references and commands.
</li>
<li> time: The time module will help with determining calculations, such as typing speed, after each round of typing ends. This allows the results at the end of the typing test to be more accurate, such as assessing how much time elapsed throughout the typing rounds.
<a href= https://docs.python.org/3/library/time.html>This website</a>
gives an overview of the time module.
</li>
<li>
sys: the sys module has been implemented to manipulate different parts of the Python runtime environment, namely to exit out of the user interface window after a QUIT prompt as been sent. The documentation for
<a href= https://docs.python.org/3/library/sys.html#sys.exit>sys</a> can be accessed here.
</li>
</ul>
<a id= "bugs"><h3> Bugs/Errors/Things to be Aware of </h3> </a>
<ul>
<li>
Since the "sentences" that are displayed for the user to type are randomly generated, this means that the length of the words for each line may vary, and repetition of words are thus to be expected. While this may create for a more varied test, this also means some "sentences" may be of shorter or longer length than others. In addition, some words, stemming from the three book sources, may be unique to their authors and unconventional in nature. Some examples are when authors have concentenated multiple words together to form a new adjective or noun.
</li>
<li>
The timer permits the user to finish typing their current line even after 60 seconds have elapsed, which is compensated during the words per minute calculation process as it accounts for the total time elapsed
</li>
<li>
For words including contractions with hypostrophes, such as, I'm and wouldn't, the hypostrophe has been removed for more accurate calculations in the program. Consequently, contracted words will display in a line without a hypostrophe (e.g "Im" and "wouldnt").
</li>
<li>
Because the average word is 4.7 characters long, the words per minute calculation has divided the user's total character count by 4.7 and rounded to the nearest ones place.
</li>
<li>
Based on testing conducted during the team's finalization phase, there seems to be a difference in resolution of the graphical user interface depending on the resolution and configurations of the user's display or monitor.
</li>
</ul>
</html>