TypingPractice/index.html at main · Popaulol/TypingPractice · GitHub

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
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <h3>Typing</h3>
        <label for="language">Text Language</label>
        <select name="language" id="language">

        </select><br>
        <label for="length">Text Length</label>
        <input type="number" name="length" id="length" value="20"><br>
        <div class="text" id="text"></div>
        <input class="btn" type="button" id="reset_run" value="RESET RUN">
        <input class="btn" type="button" id="new_text" value="Generate new Text"><br>

        <h4>Statistics</h4>
        <div id="stats">
            <span class="subheading">Last run</span><br>
            <span>Time: <span id="last_run_time">No Data Loaded yet</span> CPM: <span id="last_run_cpm">No Data Loaded
                    yet</span> Wrong chars: <span id="last_run_wrong_chars">No Data
                    Loaded yet</span></span><br>
            <span class="subheading">Today</span><br>
            <span>
                runs: <span id="today_run_count">No Data Loaded yet</span>
                Chars Typed: <span id="today_chars_typed">No Data Loaded yet</span>
                Time: <span id="today_time">No Data Loaded yet</span>
                CPM: <span id="today_cpm">No Data Loaded yet</span>
                Mistake Ratio: <span id="today_wrong_chars">No Data Loaded yet</span>
            </span><br>
            <span class="subheading">Total</span><br>
            <span>
                runs: <span id="total_run_count">No Data Loaded yet</span>
                Chars Typed: <span id="total_chars_typed">No Data Loaded yet</span>
                Time: <span id="total_time">No Data Loaded yet</span>
                CPM: <span id="total_cpm">No Data Loaded yet</span>
                Mistake Ratio: <span id="total_wrong_chars">No Data Loaded yet</span>
            </span><br><br><br>

            <span class="subheading">Character Breakdown</span><br><br>
            <input type="button" value="Refresh Character Breakdown Report" id="report"><br>
            <span class="note">This report isn't updated automatically since it's
                comutation takes enough resources to make the timing of the Typing practice inaccurate</span>
            <table id="detailed_report">
                <thead>
                    <tr>
                        <th>Character</th>
                        <th>Occurences</th>
                        <th>Mistakes</th>
                        <th>Error Rate</th>
                        <th>Average Time</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="invisible" id="no_stats">No Data available</div>

        <h4>Data Management</h4>
        <input class="btn" id="save_button" type="button" value="Save Data to File" accept=".json"><br>
        <label for="load_data">Upload Save: </label>
        <input type="file" name="load_data" id="load_data"><br>
        <!-- <span style="color: red">&ShortUpArrow;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ShortUpArrow;</span><br>
        <sup style="color: red">These are only tested on firefox and may not work in other Browsers!</sup><br> -->
        <input class="btn" id="delete_today" type="button" value="DELETE TODAYS DATA">
        <input class="btn" id="delete_everything" type="button" value="DELETE ALL DATA">
    </div>
</body>

</html>