├── Quiz - starter template.rar
├── README.md
├── img
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    ├── css.png
    ├── html.png
    ├── js.png
    └── score.png
├── index.html
├── quiz.js
└── style.css


/Quiz - starter template.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/Quiz - starter template.rar


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Multiple-Choice-Quiz-JavaScript
2 | Today we're going to create a multiple choice quiz using JavaScript, in this quiz, the user will have to choose the correct answer out of three choices, in less than 10 seconds, if the user didn't answer the question in 10sec, it will go to the next question automatically, and the question is marked wrong. the user has a progress bar, that shows the total number of question, and also if the user answered a question correctly or not.
3 | 
4 | Watch The Tutorial On Youtube: 
5 | https://www.youtube.com/watch?v=49pYIMygIcU
6 | 
7 | 
8 | 


--------------------------------------------------------------------------------
/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/1.png


--------------------------------------------------------------------------------
/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/2.png


--------------------------------------------------------------------------------
/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/3.png


--------------------------------------------------------------------------------
/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/4.png


--------------------------------------------------------------------------------
/img/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/5.png


--------------------------------------------------------------------------------
/img/css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/css.png


--------------------------------------------------------------------------------
/img/html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/html.png


--------------------------------------------------------------------------------
/img/js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/js.png


--------------------------------------------------------------------------------
/img/score.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/Multiple-Choice-Quiz-JavaScript/d06f850c3f35c789d053346f216f305d6c9f2ed6/img/score.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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:
--------------------------------------------------------------------------------
  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 | 
175 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  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 | 
167 | 


--------------------------------------------------------------------------------