-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (132 loc) · 6.26 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Quiz</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<meta name="keywords"
content="emoji, emoji quiz, emoji game, emoji trivia, emoji quiz game" />
<meta name="author" content="Rahul Kabra" />
<meta name="description" content="A fun multi category javascript quiz based on emojis.">
<meta property="og:url" content="https://rahul-kabra.github.io/emoji-quiz/" />
<meta property="og:title" content="Emoji Quiz - A fun multi category javascript quiz based on emojis" />
<meta property="og:site_name" content="Emoji Quiz - A fun multi category javascript quiz based on emojis">
<meta property="og:description" content="A fun multi category javascript quiz based on emojis." />
<meta property="og:type" content="website">
</head>
<body>
<div id="navbar-container">
<h1 id="site-description">Emoji Quiz</h1>
<div id="github-link">
<p>
<a href="https://github.com/rahul-kabra/emoji-quiz" target="_blank" rel="noreferrer noopener">
<span class="fa fa-github">
</span>
</a>
</p>
</div>
<div id="about">
<p><span class="fa fa-info-circle"></span></p>
</div>
</div>
<div id="main-design-container">
<div id="sidebar-container">
<div>
<div id="static-container" style="text-align: center;
padding: 5px 10px;">
<p>Wassup? 👋</p>
<p>There are five different quiz sets each comprising of 25 questions.</p>
<p>Each question constitutes a set of emojis and a clue. Your task is simple - to answer all 25
questions.</p>
<p>Click on the <span><i class="fa fa-lock"></i></span> of each question to see the clue and click
on <span><i class="fa fa-unlock-alt"></i></span> to hide it again.</p>
<p>So, just select a set and get going.</p>
<div id="quiz-set-container">
<label id="set-1" onclick="setupQuizGrid(this)">
<span>1</span>
</label>
<label id="set-2" onclick="setupQuizGrid(this)">
<span>2</span>
</label>
<label id="set-3" onclick="setupQuizGrid(this)">
<span>3</span>
</label>
<label id="set-4" onclick="setupQuizGrid(this)">
<span>4</span>
</label>
<label id="set-5" onclick="setupQuizGrid(this)">
<span>5</span>
</label>
</div>
</div>
<div id="dynamic-container" style="padding: 10px;">
<div id="data-container">
<div id="input-container" class="input-field">
<label>
<p id="input-data-label" class="label-txt" style="padding-left: 0;">Enter answers here..
</p>
<input type="text" id="input-data" class="input" style="padding-left: 0;"
onkeydown="checkVal()">
<div class="line-box">
<div class="line"></div>
</div>
</label>
<button id="answer" onclick="onAnswerSubmit()"><span>Submit</span></button>
</div>
</div>
<div id="answer-message-container">
<p id="answer-message"></p>
</div>
<div id="score-checker">
<div id="score-checker-counter">
<div id="answer-score-container">
<div>
<label>Your Score: </label>
<p id="score-counter">
0
</p>
</div>
<div>
<label>Target: </label>
<p id="score-target">
25
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="quiz-container">
<div id="empty-quiz-container-message">
<p>Please select a set to start answering.</p>
</div>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<p>Emojis have become an essential part in our everyday lives.</p>
<p>They are used every instant, everywhere and by everyone.</p>
<p>Having said that, test your knowledge about emojis right
here. 🎯</p>
<p>A fun quiz with a riot of pop colors awaits you.</p>
<p id="emoji">Happy Emoji'ng!!! 🎆</p>
<br>
<button id="overlay-close-button" onclick="closeModal()"><span>Close</span></button>
</nav>
</div>
<footer>
<p style="padding-bottom: 2px;">Handcrafted with
<span style="color: #fcd06b">
<i class="fa fa-heart" aria-hidden="true"></i>
</span>
by <a href="https://github.com/rahul-kabra" target="_blank" rel="noreferrer noopener">Rahul</a></p>
</footer>
<script src="./data.js" type="text/javascript"></script>
<script src="./app.js" type="text/javascript"></script>
</body>
</html>