-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (113 loc) · 5.67 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
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Small JS quiz</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style>
.form-control {
width: 200px;
text-align: center!important;
margin: auto;
}
img {
width: 500px;
height: auto;
margin-top: -200px;
}
.checkBtn{
margin-top: 35px;
}
iframe {
text-align: center!important;
margin: auto;
}
div.alert-messages {
position: fixed;
top: 50px;
left: 25%;
right: 25%;
z-index: 7000;
}
.alert {
opacity: 0;
position: fixed;
width: 100%;
text-align: center!important;
margin: auto;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.mystyle{
opacity: 1;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
</style>
<body>
<div id="test" class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p id="alertText">Success! You have been signed in successfully!</p>
</div>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading" style="margin-bottom: 55px;">Simple JS quiz</h1>
<hr></hr>
<h1 id="" style="margin-bottom: 5px; color:green">Question:</h2>
<h2 id="Question" style="margin-bottom: 25px;"></h2>
<hr></hr>
<h4 id="a0"></h3>
<h4 id="a1"></h3>
<h4 id="a2"></h3>
<h4 id="a3"></h3>
<h4 id="a4"></h3>
<h4 id="a5"></h3>
<div class="form-group">
<label for="exampleInputPassword1" style="margin-top: 25px;">Write your answer (use number of question, example "0")</label>
<input class="form-control" id="answerHere" placeholder="Answer here">
</div>
<div class="checkBtn">
<button class="btn btn-primary my-2" id="Check">Check answer</button>
</div>
<h2 id="Score" style="margin-bottom: 65px; margin-top: 35px;">Your score is: 0</h2>
<h3 style="margin-bottom: 25px; color: rgb(0, 175, 0)">See the video</h3>
<iframe X-Frame-Options='' id="inframeVideo" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
</main>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Purpose ?</h4>
</div>
<div class="modal-body">
<p>This is a small project made only for purpose of personal practice. I put main emphasis on JavaScript as programming language where styling in CSS was not important here.</br></br>
1. Read question and try to answer. You have text field where you have to type <strong>number of question </strong> you think is correct (Fx.: "0").</br>
2. Don`t forget to see the video after you respond.
</br></br>
There are about 3 questions which are pretty interesting, try to guess the answer and check the video as correct answer will be clear after watching it. Enjoy and if you do let me know back <a href="mailto: haverlatom7@gmai.com" target="BLANK">here</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).load(function()
{
$('#myModal').modal('show');
});
</script>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>