Skip to content

Commit 804b80e

Browse files
thinkswellthinkswell
authored
Merge pull request #916 from dellucifer/quizUtil
Added a new quiz utility
2 parents d344ce1 + 6a7f130 commit 804b80e

File tree

2 files changed

+316
-0
lines changed

2 files changed

+316
-0
lines changed

‎QuizApp/dellucifer/index.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Quiz Challenge</title>
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
</head>
8+
<body>
9+
<div class="quiz_wrapper">
10+
<div class="question" id="questionBox">
11+
12+
</div>
13+
14+
<div class="options">
15+
<ul id="ul">
16+
<li id="opt1" onclick="button(this)"></li>
17+
<li id="opt2" onclick="button(this)"></li>
18+
<li id="opt3" onclick="button(this)"></li>
19+
<li id="opt4" onclick="button(this)"></li>
20+
</ul>
21+
</div>
22+
<div class="score">
23+
<div class="next">
24+
<button type="button" onclick="moveNext()" id="nextButton">Next</button>
25+
</div>
26+
<div class="score-card">
27+
Points : <span id="scoreCard">0</span>
28+
</div>
29+
<div class="back">
30+
<button type="button" onclick="moveBack()" id="backButton">Back</button>
31+
</div>
32+
<div class="restart">
33+
<button type="button" onclick="reloadPage()" id="restartButton">Restart</button>
34+
</div>
35+
</div>
36+
37+
38+
</div>
39+
<script type="text/javascript">
40+
function reloadPage() {
41+
location.reload();
42+
}
43+
</script>
44+
45+
46+
<script type="text/javascript">
47+
48+
var ul = document.getElementById('ul');
49+
var nextBtn = document.getElementById('nextButton');
50+
var scoreCard = document.getElementById('scoreCard');
51+
var quizBox = document.getElementById('questionBox');
52+
var opt1 = document.getElementById('opt1');
53+
var opt2 = document.getElementById('opt2');
54+
var opt3 = document.getElementById('opt3');
55+
var opt4 = document.getElementById('opt4');
56+
57+
58+
var app = {
59+
questions: [
60+
{ q: 'What does CPU stand for?', options: ['Central Processing Unit', 'Computer Personal Unit', 'Central Personal Unit', 'None of these'], answer: 1 },
61+
{ q: 'What does RAM stand for?', options: ['Read After Modification', 'Random Access Memory', 'Random After Modification', 'Read Access Memory'], answer: 2 },
62+
63+
{ q: 'Which company developed JavaScript?', options: ['Oracle', 'Netscape', 'Microsoft', 'Google'], answer: 2 },
64+
65+
{ q: 'What is the default value of the opacity property in CSS?', options: ['0.5', '1', '0', '0.1'], answer: 3 },
66+
67+
{ q: 'How do you call a function named "myFunction" in JavaScript?', options: ['call myFunction()', 'call function myFunction()', 'myFunction()', 'function myFunction()'], answer: 3 },
68+
69+
],
70+
index: 0,
71+
load: function () {
72+
if (this.index <= this.questions.length - 1) {
73+
quizBox.innerHTML = this.index + 1 + ". " + this.questions[this.index].q;
74+
opt1.innerHTML = this.questions[this.index].options[0];
75+
opt2.innerHTML = this.questions[this.index].options[1];
76+
opt3.innerHTML = this.questions[this.index].options[2];
77+
opt4.innerHTML = this.questions[this.index].options[3];
78+
this.scoreCard();
79+
}
80+
else {
81+
82+
quizBox.innerHTML = "Quiz Finished......!!!"
83+
opt1.style.display = "none";
84+
opt2.style.display = "none";
85+
opt3.style.display = "none";
86+
opt4.style.display = "none";
87+
nextBtn.style.display = "none";
88+
}
89+
},
90+
moveNext: function () {
91+
this.index++;
92+
this.load();
93+
},
94+
95+
moveBack: function () {
96+
this.index--;
97+
this.load();
98+
},
99+
checkAnswer: function (ele) {
100+
101+
var id = ele.id.split('');
102+
103+
if (id[id.length - 1] == this.questions[this.index].answer) {
104+
this.score++;
105+
ele.className = "correct";
106+
ele.innerHTML = "Correct";
107+
this.scoreCard();
108+
}
109+
else {
110+
ele.className = "wrong";
111+
ele.innerHTML = "Wrong";
112+
}
113+
},
114+
notClickable: function () {
115+
for (let i = 0; i < ul.children.length; i++) {
116+
ul.children[i].style.pointerEvents = "none";
117+
}
118+
},
119+
120+
clickable: function () {
121+
for (let i = 0; i < ul.children.length; i++) {
122+
ul.children[i].style.pointerEvents = "auto";
123+
ul.children[i].className = ''
124+
125+
}
126+
},
127+
score: 0,
128+
scoreCard: function () {
129+
scoreCard.innerHTML = this.questions.length + "/" + this.score;
130+
}
131+
132+
}
133+
134+
window.onload = app.load();
135+
136+
function button(ele) {
137+
app.checkAnswer(ele);
138+
app.notClickable();
139+
}
140+
141+
function moveNext() {
142+
app.moveNext();
143+
app.clickable();
144+
}
145+
146+
function moveBack() {
147+
app.moveBack();
148+
app.clickable();
149+
}
150+
</script>
151+
</body>
152+
153+
</html>

‎QuizApp/dellucifer/style.css‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
body{
2+
background-color: #000;
3+
margin:0;
4+
padding:0;
5+
}
6+
7+
*{
8+
box-sizing: border-box;
9+
font-family: sans-serif;
10+
}
11+
12+
.quiz_wrapper{
13+
height: 450px;
14+
width: 650px;
15+
background-color: white;
16+
margin:50px auto;
17+
border-radius: 8px;
18+
padding: 30px;
19+
border:6px solid lime;
20+
margin-top: 150px;
21+
}
22+
23+
.quiz_wrapper .question{
24+
padding: 15px;
25+
background-color:#673ab7;
26+
border-radius: 8px;
27+
color:#ffffff;
28+
font-size:20px;
29+
float: left;
30+
width: 100%;
31+
}
32+
33+
.quiz_wrapper .options{
34+
float: left;
35+
width: 100%;
36+
}
37+
38+
.quiz_wrapper .options ul{
39+
list-style: none;
40+
padding: 0px;
41+
display: flex;
42+
justify-content: space-between;
43+
flex-wrap: wrap;
44+
}
45+
46+
.quiz_wrapper .options ul li{
47+
display: inline-block;
48+
background-color:#9e9e9e;
49+
width: 47%;
50+
padding: 15px;
51+
border-radius:8px;
52+
margin-top: 25px;
53+
font-size: 15px;
54+
color:#ffffff;
55+
box-shadow: 0px 3px 0px grey;
56+
cursor: pointer;
57+
outline: none;
58+
text-align: center;
59+
}
60+
61+
.quiz_wrapper .options ul li:active{
62+
box-shadow: 0px 3px 0px transparent;
63+
}
64+
65+
.quiz_wrapper .options ul li.correct{
66+
background-color: #0fd40f;
67+
box-shadow: 0px 3px 0px #03a503;
68+
}
69+
70+
.quiz_wrapper .options ul li.wrong{
71+
background-color: #e91e1e;
72+
box-shadow: 0px 3px 0px #cb0b0b;
73+
}
74+
75+
.quiz_wrapper .score{
76+
float: left;
77+
width: 100%;
78+
padding:25px 0px;
79+
}
80+
81+
.quiz_wrapper .score .next{
82+
width: 35%;
83+
float: right;
84+
}
85+
86+
.quiz_wrapper .score .next button{
87+
padding: 15px 80px;
88+
color:white;
89+
background-color:#ff9800;
90+
border:none;
91+
border-radius:8px;
92+
font-size: 15px;
93+
cursor: pointer;
94+
box-shadow: 0px 3px 0px #c97a06;
95+
outline: none;
96+
}
97+
98+
.quiz_wrapper .score .next button:active{
99+
box-shadow: 0px 3px 0px transparent;
100+
}
101+
102+
.quiz_wrapper .score .back{
103+
width: 35%;
104+
float: center;
105+
}
106+
107+
.quiz_wrapper .score .back button{
108+
padding: 15px 80px;
109+
color:white;
110+
background-color:#ff9800;
111+
border:none;
112+
border-radius:8px;
113+
font-size: 15px;
114+
cursor: pointer;
115+
box-shadow: 0px 3px 0px #c97a06;
116+
outline: none;
117+
}
118+
119+
.quiz_wrapper .score .back button:active{
120+
box-shadow: 0px 3px 0px transparent;
121+
}
122+
123+
.quiz_wrapper .score .restart{
124+
width: 1%;
125+
float: right;
126+
margin-top: 30px;
127+
}
128+
129+
.quiz_wrapper .score .restart button{
130+
padding: 15px 64px;
131+
color:white;
132+
background-color:red;
133+
border:none;
134+
border-radius:8px;
135+
font-size: 15px;
136+
cursor: pointer;
137+
box-shadow: 0px 3px 0px #c97a06;
138+
outline: none;
139+
140+
}
141+
142+
.quiz_wrapper .score .restart button:active{
143+
box-shadow: 0px 3px 0px transparent;
144+
}
145+
146+
.quiz_wrapper .score .score-card{
147+
width: 30%;
148+
float: right;
149+
}
150+
151+
.quiz_wrapper .score .score-card{
152+
font-size: 20px;
153+
color:black;
154+
line-height: 50px;
155+
text-transform: uppercase;
156+
}
157+
158+
.quiz_wrapper .score .score-card span{
159+
background-color: #4caf50;
160+
padding: 5px 15px;
161+
border-radius: 8px;
162+
color:#ffffff;
163+
}

0 commit comments

Comments
 (0)