-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (121 loc) · 6.84 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
<!--
~ Copyright (c) 2023.
~ You can access the source files from my github account. >> https://github.com/burakkrt/Questions-VanillaJavascript
~ Write me for cooperation or questions about the project. >> [email protected]
-->
<!DOCTYPE html>
<html lang="en-tr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="components/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Questions</title>
</head>
<body>
<div class="relative overflow-hidden">
<!-- main content -->
<div class="min-h-screen bg-slate-400" id="content">
<!-- menu -->
<div class="sticky top-0 z-10 flex-row bg-slate-200 p-3" id="questionFilters" style="min-height: 5rem">
<div class="grid grid-cols-5 gap-y-3 text-center">
<div class="col-span-full bg-slate-400 py-1 font-semibold text-slate-600 md:col-span-1">
<span>Total Question :</span>
<span id="totalQuestion">0</span>
</div>
<div
class="col-span-full border border-slate-400 py-1 font-semibold text-slate-600 md:col-span-1"
>
<span>Correct answer :</span>
<span id="totalCorrectAnswer">0</span>
</div>
<div class="col-span-full bg-slate-400 py-1 font-semibold text-slate-600 md:col-span-1">
<span>Wrong answer :</span>
<span id="totalWrongAnswer">0</span>
</div>
<div
class="col-span-full border border-slate-400 py-1 font-semibold text-slate-600 md:col-span-1"
>
<span>Solved:</span>
<span id="totalSolved">0</span>
</div>
<div class="col-span-full bg-slate-400 py-1 font-semibold text-slate-600 md:col-span-1">
<span>Unsolved:</span>
<span id="totalUnsolved">0</span>
</div>
<div class="col-span-full my-auto lg:col-span-2">
<select
class="w-max cursor-pointer rounded-md border-2 border-stone-300 bg-slate-100 py-1 pl-1 pr-3 text-slate-700 hover:border-green-600"
name="questionType"
id="questionType"
>
<option value="" selected disabled hidden>Select question category</option>
<option value="numbers-alphabet">Numbers and Alphabet</option>
<option value="greeting-farewell">Greeting Farewell</option>
<option value="situation-ask">Situation Ask</option>
<option value="to-meet">To Meet</option>
<option value="days-months-years">Days, Months, Years</option>
</select>
<input
class="rounded-md border-2 border-stone-300 bg-slate-100 py-1 pl-1 pr-3 text-slate-700 hover:border-green-600"
type="number"
name="questionNumbers"
id="questionNumbers"
style="max-width: 5rem"
/>
<button
class="mt-1 rounded-md bg-slate-400 px-3 py-1 text-base text-slate-600 duration-150 hover:bg-green-600 hover:text-slate-200"
onclick="createdQuestions(questionType,questionNumbers)"
>
<i class="fa-solid fa-plus mr-2"></i>Create
</button>
</div>
<div class="col-span-full my-auto lg:col-span-2">
<select
name="select-view"
id="selectView"
class="w-max cursor-pointer rounded-md border-2 border-stone-300 bg-slate-100 py-1 pl-1 pr-3 text-slate-700 hover:border-blue-500"
>
<option value="view-all-questions">Show all questions</option>
<option value="view-unsolved">View unsolved questions</option>
<option value="view-wrong">Display only wrong questions</option>
<option value="view-correct">Display only correct questions</option>
</select>
<button
class="mt-1 rounded-md bg-slate-400 px-3 py-1 text-base text-slate-600 duration-150 hover:bg-blue-500 hover:text-slate-200"
onclick="showQuestionsFilter(selectView)"
>
<i class="fa-solid fa-eye mr-2"></i>Show
</button>
</div>
<div class="col-span-full my-auto lg:col-span-1">
<button
class="rounded-md bg-slate-400 px-3 py-1 text-base text-slate-600 duration-150 hover:bg-red-700 hover:text-slate-200"
onclick="deleteAllQuestions()"
>
<i class="fa-solid fa-trash mr-2"></i>Delete all questions
</button>
</div>
</div>
</div>
<!-- question content -->
<div class="grid grid-cols-1 gap-3 p-3 md:grid-cols-2 2xl:grid-cols-3" id="questionContent"></div>
</div>
<!-- message box -->
<div
class="message-box absolute rounded-md bg-zinc-700 px-4 py-2 text-slate-200 shadow-lg transition-all duration-300 ease-in-out"
id="messageBox"
>
<span>Message Box</span>
</div>
</div>
<script type="module" src="components/main.js"></script>
</body>
</html>