index.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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>guess the character</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <div id="everything-lol">
            <noscript>
                <p>* Like, enable JavaScript.</p>
            </noscript>
            <div id="js-not-working">
                <p>Uh, this is awkward. The JavaScript code isn't working.</p>
                <p>Maybe it isn't loaded in yet? Just give it a minute, if your browser says the page is still loading...</p>
                <p>Otherwise, your browser might be kinda old. Try a recent version of Firefox or Chrome or something like that.</p>
                <p>Or like, who knows. Maybe I broke the code and it just doesn't work anymore.</p>
            </div>
            <div id="crashed">
                <p>Oh heck this is the worst thing possible. <span class="red">The game crashed.</span></p>
                <p>Sorry!!! Here is the error. Please share this with the game author on, like, The Internet.</p>
                <pre id="crash-trace"></pre>
            </div>
            <div id="container">
                <h1>GUESS THE CHARACTER</h1>
                <div id="intro">
                    <p>is a game in which you GUESS THE CHARACTER based on the sound of their speech.</p>
                    <p id="mode-picker">PICK MODE: <a href="#" data-mode="encyclopedia">Encyclopedia</a> - <a href="#" data-mode="time-trial">Time Trial</a></p>
                    <div id="mode-descriptions">
                        <p data-mode="encyclopedia">Encyclopedia: Try to guess EVERY SINGLE character correctly! Unlimited time.</p>
                        <p data-mode="time-trial">Time Trial: Guess as many characters as possible in 30 seconds!</p>
                    </div>
                    <p>Loading (<span id="load-progress">0</span>%)...</p>
                    <p id="play-paragraph"><a href="#" id="play-link">Play</a></p>
                </div>
            </div>
            <div id="game">
                <h2 id="time-trial-heading">TIME TRIAL <span id="time-trial-time">30.00s</span> TIME TRIAL</h2>
                <div id="choice-container"></div>
                <div id="results" class="hide">
                    <p id="correct"><span>Correct!</span></p>
                    <p id="incorrect"><span>Incorrect.</span><br>The correct choice was <span id="correct-character">Noelle</span>.</p>
                    <p><a href="#" id="next-link">Next</a></p>
                </div>
                <div id="final-results">
                    <p>Good job! You got <span id="final-correct">0</span> <span>correct</span> and <span id="final-incorrect">0</span> <span>incorrect</span>.</p>
                    <p><a href="#" id="play-again-link">Play again?</a></p>
                </div>
                <div id="scorekeeper"></div>
            </div>
        </div>
        <script src="data.js"></script>
        <script src="main.js"></script>
    </body>
</html>