Skip to content

Commit 7728bfa

Browse files
CodeExplainedRepoCodeExplainedRepo
authored
Add files via upload
1 parent 499b80f commit 7728bfa

13 files changed

+370
-0
lines changed

‎Quiz - starter template.rar

87 KB
Binary file not shown.

‎img/1.png

19.1 KB
Loading

‎img/2.png

18.3 KB
Loading

‎img/3.png

17.7 KB
Loading

‎img/4.png

18.6 KB
Loading

‎img/5.png

18.4 KB
Loading

‎img/css.png

4.64 KB
Loading

‎img/html.png

2.05 KB
Loading

‎img/js.png

47.7 KB
Loading

‎img/score.png

29 KB
Loading

‎index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Quiz</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div id="container">
10+
<div id="start">Start Quiz!</div>
11+
<div id="quiz" style="display: none">
12+
<div id="question"></div>
13+
<div id="qImg"></div>
14+
<div id="choices">
15+
<div class="choice" id="A" onclick="checkAnswer('A')"></div>
16+
<div class="choice" id="B" onclick="checkAnswer('B')"></div>
17+
<div class="choice" id="C" onclick="checkAnswer('C')"></div>
18+
</div>
19+
<div id="timer">
20+
<div id="counter"></div>
21+
<div id="btimeGauge"></div>
22+
<div id="timeGauge"></div>
23+
</div>
24+
<div id="progress"></div>
25+
</div>
26+
<div id="scoreContainer" style="display: none"></div>
27+
</div>
28+
<script src="quiz.js"></script>
29+
</body>
30+
</html>

‎quiz.js

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
// select all elements
2+
const start = document.getElementById("start");
3+
const quiz = document.getElementById("quiz");
4+
const question = document.getElementById("question");
5+
const qImg = document.getElementById("qImg");
6+
const choiceA = document.getElementById("A");
7+
const choiceB = document.getElementById("B");
8+
const choiceC = document.getElementById("C");
9+
const counter = document.getElementById("counter");
10+
const timeGauge = document.getElementById("timeGauge");
11+
const progress = document.getElementById("progress");
12+
const scoreDiv = document.getElementById("scoreContainer");
13+
14+
// create our questions
15+
let questions = [
16+
{
17+
question : "What does HTML stand for?",
18+
imgSrc : "img/html.png",
19+
choiceA : "Correct",
20+
choiceB : "Wrong",
21+
choiceC : "Wrong",
22+
correct : "A"
23+
},{
24+
question : "What does CSS stand for?",
25+
imgSrc : "img/css.png",
26+
choiceA : "Wrong",
27+
choiceB : "Correct",
28+
choiceC : "Wrong",
29+
correct : "B"
30+
},{
31+
question : "What does JS stand for?",
32+
imgSrc : "img/js.png",
33+
choiceA : "Wrong",
34+
choiceB : "Wrong",
35+
choiceC : "Correct",
36+
correct : "C"
37+
}
38+
];
39+
40+
// create some variables
41+
42+
const lastQuestion = questions.length - 1;
43+
let runningQuestion = 0;
44+
let count = 0;
45+
const questionTime = 10; // 10s
46+
const gaugeWidth = 150; // 150px
47+
const gaugeUnit = gaugeWidth / questionTime;
48+
let TIMER;
49+
let score = 0;
50+
51+
// render a question
52+
function renderQuestion(){
53+
let q = questions[runningQuestion];
54+
55+
question.innerHTML = "<p>"+ q.question +"</p>";
56+
qImg.innerHTML = "<img src="+ q.imgSrc +">";
57+
choiceA.innerHTML = q.choiceA;
58+
choiceB.innerHTML = q.choiceB;
59+
choiceC.innerHTML = q.choiceC;
60+
}
61+
62+
start.addEventListener("click",startQuiz);
63+
64+
// start quiz
65+
function startQuiz(){
66+
start.style.display = "none";
67+
renderQuestion();
68+
quiz.style.display = "block";
69+
renderProgress();
70+
renderCounter();
71+
TIMER = setInterval(renderCounter,1000); // 1000ms = 1s
72+
}
73+
74+
// render progress
75+
function renderProgress(){
76+
for(let qIndex = 0; qIndex <= lastQuestion; qIndex++){
77+
progress.innerHTML += "<div class='prog' id="+ qIndex +"></div>";
78+
}
79+
}
80+
81+
// counter render
82+
83+
function renderCounter(){
84+
if(count <= questionTime){
85+
counter.innerHTML = count;
86+
timeGauge.style.width = count * gaugeUnit + "px";
87+
count++
88+
}else{
89+
count = 0;
90+
// change progress color to red
91+
answerIsWrong();
92+
if(runningQuestion < lastQuestion){
93+
runningQuestion++;
94+
renderQuestion();
95+
}else{
96+
// end the quiz and show the score
97+
clearInterval(TIMER);
98+
scoreRender();
99+
}
100+
}
101+
}
102+
103+
// checkAnwer
104+
105+
function checkAnswer(answer){
106+
if( answer == questions[runningQuestion].correct){
107+
// answer is correct
108+
score++;
109+
// change progress color to green
110+
answerIsCorrect();
111+
}else{
112+
// answer is wrong
113+
// change progress color to red
114+
answerIsWrong();
115+
}
116+
count = 0;
117+
if(runningQuestion < lastQuestion){
118+
runningQuestion++;
119+
renderQuestion();
120+
}else{
121+
// end the quiz and show the score
122+
clearInterval(TIMER);
123+
scoreRender();
124+
}
125+
}
126+
127+
// answer is correct
128+
function answerIsCorrect(){
129+
document.getElementById(runningQuestion).style.backgroundColor = "#0f0";
130+
}
131+
132+
// answer is Wrong
133+
function answerIsWrong(){
134+
document.getElementById(runningQuestion).style.backgroundColor = "#f00";
135+
}
136+
137+
// score render
138+
function scoreRender(){
139+
scoreDiv.style.display = "block";
140+
141+
// calculate the amount of question percent answered by the user
142+
const scorePerCent = Math.round(100 * score/questions.length);
143+
144+
// choose the image based on the scorePerCent
145+
let img = (scorePerCent >= 80) ? "img/5.png" :
146+
(scorePerCent >= 60) ? "img/4.png" :
147+
(scorePerCent >= 40) ? "img/3.png" :
148+
(scorePerCent >= 20) ? "img/2.png" :
149+
"img/1.png";
150+
151+
scoreDiv.innerHTML = "<img src="+ img +">";
152+
scoreDiv.innerHTML += "<p>"+ scorePerCent +"%</p>";
153+
}
154+
155+
156+
157+
158+
159+
160+
161+
162+
163+
164+
165+
166+
167+
168+
169+
170+
171+
172+
173+
174+

‎style.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
body{
2+
font-size: 20px;
3+
font-family: monospace;
4+
}
5+
6+
#container{
7+
margin : 20px auto;
8+
background-color: white;
9+
height: 300px;
10+
width : 700px;
11+
border-radius: 5px;
12+
box-shadow: 0px 5px 15px 0px;
13+
position: relative;
14+
}
15+
#start{
16+
font-size: 1.5em;
17+
font-weight: bolder;
18+
word-break: break-all;
19+
width:100px;
20+
height:150px;
21+
border : 2px solid lightgrey;
22+
text-align: center;
23+
cursor: pointer;
24+
position: absolute;
25+
left:300px;
26+
top:50px;
27+
color : lightgrey;
28+
}
29+
#start:hover{
30+
border: 3px solid lightseagreen;
31+
color : lightseagreen;
32+
}
33+
34+
#qImg{
35+
width : 200px;
36+
height : 200px;
37+
position: absolute;
38+
left : 0px;
39+
top : 0px;
40+
}
41+
#qImg img{
42+
width : 200px;
43+
height : 200px;
44+
border-top-left-radius: 5px;
45+
}
46+
47+
#question{
48+
width:500px;
49+
height : 125px;
50+
position: absolute;
51+
right:0;
52+
top:0;
53+
}
54+
#question p{
55+
margin : 0;
56+
padding : 15px;
57+
font-size: 1.25em;
58+
}
59+
60+
#choices{
61+
width : 480px;
62+
position: absolute;
63+
right : 0;
64+
top : 125px;
65+
padding : 10px
66+
}
67+
.choice{
68+
display: inline-block;
69+
width : 135px;
70+
text-align: center;
71+
border : 1px solid grey;
72+
border-radius: 5px;
73+
cursor: pointer;
74+
padding : 5px;
75+
}
76+
.choice:hover{
77+
border : 2px solid grey;
78+
font-weight: bold;
79+
}
80+
81+
#timer{
82+
position: absolute;
83+
height : 100px;
84+
width : 200px;
85+
bottom : 0px;
86+
text-align: center;
87+
}
88+
#counter{
89+
font-size: 3em;
90+
}
91+
#btimeGauge{
92+
width : 150px;
93+
height : 10px;
94+
border-radius: 10px;
95+
background-color: lightgray;
96+
margin-left : 25px;
97+
}
98+
#timeGauge{
99+
height : 10px;
100+
border-radius: 10px;
101+
background-color: mediumseagreen;
102+
margin-top : -10px;
103+
margin-left : 25px;
104+
}
105+
#progress{
106+
width : 500px;
107+
position: absolute;
108+
bottom : 0px;
109+
right : 0px;
110+
padding:5px;
111+
text-align: right;
112+
}
113+
.prog{
114+
width : 25px;
115+
height : 25px;
116+
border: 1px solid #000;
117+
display: inline-block;
118+
border-radius: 50%;
119+
margin-left : 5px;
120+
margin-right : 5px;
121+
}
122+
#scoreContainer{
123+
margin : 20px auto;
124+
background-color: white;
125+
opacity: 0.8;
126+
height: 300px;
127+
width : 700px;
128+
border-radius: 5px;
129+
box-shadow: 0px 5px 15px 0px;
130+
position: relative;
131+
display: none;
132+
}
133+
#scoreContainer img{
134+
position: absolute;
135+
top:100px;
136+
left:325px;
137+
}
138+
#scoreContainer p{
139+
position: absolute;
140+
display: block;
141+
width : 59px;
142+
height :59px;
143+
top:130px;
144+
left:325px;
145+
font-size: 1.5em;
146+
font-weight: bold;
147+
text-align: center;
148+
}
149+
150+
151+
152+
153+
154+
155+
156+
157+
158+
159+
160+
161+
162+
163+
164+
165+
166+

0 commit comments

Comments
 (0)