-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (113 loc) · 6.73 KB
/
Copy pathindex.html
File metadata and controls
135 lines (113 loc) · 6.73 KB
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
<!DOCTYPE html>
<html lang="en">
<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">
<title>QuizApp</title>
<link rel="shortcut icon" href="./img/brain result.png" type="image/x-icon">
<script src="database.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<!-- Bootstrap files-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</head>
<body onload="render()">
<div class="progress position-absolute top-0 end-0 start-0" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" id="progress-bar" style="width: 25%">25%</div>
</div>
<div class="vh-100 d-flex align-items-center justify-content-center">
<img id="tropy" style="display: none;" class="position-absolute end-0 z-3" src="./img/tropy.png">
<div class="card mb-3" style="min-width: 540px;">
<div class="row">
<div class="col-md-4 position-relative flex-column rounded-start d-flex justify-content-center gap-2">
<div class="logo mt-3 d-flex justify-content-center">
<img src="./img/logo.png" alt="">
</div>
<div class="linkbar flex-column rounded-start d-flex justify-content-center gap-2"
style="min-height: 380px;">
<a id="HTML" onclick="linkFocused('HTML')" href="#">HTML</a>
<a id="CSS" onclick="linkFocused('CSS')" href="#">CSS</a>
<a id="JS" onclick="linkFocused('JS')" href="#">JS</a>
<a id="Java" onclick="linkFocused('Java')" href="#">Java</a>
</div>
</div>
<div class="col-md-8">
<div id="endscreen" class="card-body h-100 d-flex justify-content-center align-items-center flex-column imgclass" style="display: none !important;">
<img src="./img/brain result.png">
<h5 class="mb-4">COMPLETE<br>
HTML QUIZ
</h5>
<div class="d-flex justify-content-center gap-5 mb-4" style="font-weight: bold;">
<span style="color: #E29F6B;">
YOUR SCORE
</span>
<span>
<b id="result">3/3</b>
</span>
</div>
<button class="btn btn-primary" style="width: 150px;">SHARE</button>
<a onclick="restart()" href="#" class="text-decoration-none">Replay</a>
</div>
<div id="quiz"
class="card-body bg h-100 d-flex justify-content-center align-items-center flex-column">
<!--<h5 class="card-title">Welcome to<br>
The Awesome HTML Quiz</h5>
<span>Ready for the Challenge?</span>
<button class="position-button">
START NOW
<img src="./img/arrow_forward.svg">
</button>-->
<h5 class="mb-4" id="question-text">Frage</h5>
<div id="boxAnswer_1" class="card quiz-answer mb-2 w-100 border-0 rounded-0">
<div onclick="answer(1)"
class="card-body d-flex gap-2 position-relative justify-content-center align-items-center">
<div class="cube d-flex justify-content-center align-items-center ms-2">
A
</div>
<span id="answer_1">Antwort</span>
</div>
</div>
<div id="boxAnswer_2" class="card quiz-answer mb-2 w-100 border-0 rounded-0">
<div onclick="answer(2)"
class="card-body d-flex gap-2 position-relative justify-content-center align-items-center">
<div class="cube d-flex justify-content-center align-items-center ms-2">
B
</div>
<span id="answer_2">Antwort</span>
</div>
</div>
<div id="boxAnswer_3" class="card quiz-answer mb-2 w-100 border-0 rounded-0">
<div onclick="answer(3)"
class="card-body d-flex gap-2 position-relative justify-content-center align-items-center">
<div class="cube d-flex justify-content-center align-items-center ms-2">
C
</div>
<span id="answer_3">Antwort</span>
</div>
</div>
<div id="boxAnswer_4" class="card quiz-answer mb-2 w-100 border-0 rounded-0 mb-5">
<div onclick="answer(4)"
class="card-body d-flex gap-2 position-relative justify-content-center align-items-center">
<div class="cube d-flex justify-content-center align-items-center ms-2">
D
</div>
<span id="answer_4">Antwort</span>
</div>
</div>
<div
class="mb-2 w-50 question-footer d-flex justify-content-between position-absolute bottom-0">
<span><b id="currentquestioncount">1</b> von <b id="questionCount"></b> Fragen</span>
<button id="next-button" disabled onclick="nextQuestion()">nächste Frage</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>