typing-tutor/typing-tutor.html at master · davidburhans/typing-tutor · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/InputGatherer.js" type="text/javascript"></script>
    <script src="scripts/DisplayManager.js" type="text/javascript"></script>
    <script src="scripts/TypedChar.js" type="text/javascript"></script>
    <script src="scripts/TypedCharFactory.js" type="text/javascript"></script>
    <script src="scripts/TypingSession.js" type="text/javascript"></script>
    <script src="scripts/SessionManager.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var valid = 'ckly';

            var sessionManager = new SessionManager();
            var session = sessionManager.createSession(valid);

            //            var history = session.pastSessions();
            //            var $history = $('.past-sessions');
            //            $history.append($('<option />').val('').text('- Select a Session -').attr('selected', 'selected'));
            //            $.each(history, function (idx, key) {
            //                $history.append($('<option />').val(key).text(key));
            //            });

            //            $history.change(function () {
            //                var key = $history.val();
            //                if (key) {
            //                    session = session.load(key);
            //                    updateRate();
            //                } else {
            //                    $('.reset').click();
            //                }
            //            });

                        $('.start').click(function () {
                            session.start();
                            $(this).attr('disabled', 'disabled');
                            $('.reset').removeAttr('disabled');
                        });

                        $('.reset').click(function () {
                            session.reset();
                            $(this).attr('disabled', 'disabled');
                            $('.start').removeAttr('disabled');
                        }).attr('disabled', 'disabled');

            //            $('.save').click(function () {
            //                session.save();
            //                $('.reset').click();
            //            });

            //            var updateRate = function () {
            //                $('.rate').text(session.getRate());
            //            };


        });
    </script>
    <noscript>Your browser does not support JavaScript.</noscript>
</head>
<body>
    <div class="display">
    </div>
    <div class="input">
        <input type="text" class="input-prompt" />
    </div>
    <div>
        <button class="start">
            Start</button>
        <button class="reset">
            Reset</button>
        <button class="save">
            Save</button>
        <select class='past-sessions'>
        </select>
    </div>
    <div>
        <span class="rate">0</span> wpm
    </div>
    <ul>
        <li>Sessions
            <ul>
                <li>Create new </li>
                <li>Choose characters for session </li>
                <li>Display typing speed </li>
                <li>Display error rate </li>
                <li>Save sessions </li>
            </ul>
        </li>
    </ul>
</body>
</html>