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

<!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>Loading (<span id="load-progress">0</span>%)...</p>
                    <p><a href="#" id="play-link">Play</a></p>
                </div>
            </div>
            <div id="game">
                <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="scorekeeper"></div>
            </div>
        </div>
        <script src="data.js"></script>
        <script src="main.js"></script>
    </body>
</html>