-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
81 lines (68 loc) · 3.01 KB
/
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shifty</title>
<meta name="description" content="Take a short quiz to find out when you use which shift key!">
<link rel="shortcut icon" href="shift_key_icon.png" type="image/png">
<meta property="og:url" content="https://whateverwhouare.github.io/Shifty/" />
<meta property="og:type" content="lifestyle" />
<meta property="og:title" content="Shifty: Which shift key do you use?" />
<meta property="og:description" content="Take a short quiz to find out when you use which shift key!" />
<meta property="fb:app_id" content="950073621728512">
<link rel="stylesheet" type="text/css" href="css/styles.css?v=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
</head>
<body>
<div class="container_mine">
<div class="landing" id="landing">
<div class="description">Take a short quiz to find out <br> when you use which shift key!</div>
<div class="description subtext" id="mobileText">This quiz is for computer keyboard only. Check back when you're on a computer!</div>
<div class="startQuiz clickable button" onclick="showQuiz(); startQuiz();" id="startQuizButton">
Start Quiz
</div>
</div>
<div id="quiz" class="quiz hide">
<div class="quizHeader" id="quizPrompt">
<div class="progress progress-color">
<div id="progress-bar" class="progress-bar progress-bar-color" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class="quizInstruction">Type the following as fast as possible (case-sensitive):</div>
<div class="quizWord" id="quizWord"></div>
</div>
<div class="quizHeader" id="quizResult">
<div class="resultHeader">Your result</div>
<div>
<div class="resultBlock l_shift">
<div>Left shift</div>
<div id="l_result">90% (9/10)</div>
</div>
<div class="resultBlock r_shift">
<div>Right shift</div>
<div id="r_result">10% (1/10)</div>
</div>
</div>
<div class="resultButtons">
<div class="clickable button" onclick="shareResult();">
Share on Facebook
</div>
<div class="clickable button" onclick="startQuiz();">
Try Again!
</div>
</div>
</div>
<div class="keyboardHint" id="keyboardHint">(Key's color indicates which shift you used)</div>
<div class="keyboard" id="keyboard">
</div>
</div>
</div>
<script src="./js/keyboardConfig.js"></script>
<script src="./js/words.js"></script>
<script src="./js/script.js"></script>
</body>
</html>