Development 1

README.md

@@ -0,0 +1,2 @@
+# quiz-app
+User can take MCQ test. And based on the answers it generates and displays percentage of user.

index.html

@@ -15,9 +15,12 @@ <h2 class="text-primary display-3 my-4">QUIZ WEBSITE</h2>
 <div class="result py-4 d-none bg-light text-center">
 	<div class="container lead">
 		<p>Final Score <span class="text-primary display-4 p-3">0%</span></p>
+		<p>Arigato Osimas</p>
 	</div>
+
 </div>
 
+
 <div class="quiz py-4 bg-primary">
 	<div class="container">
 	 <h2 class="my-5 text-white">Questions..</h2>
@@ -111,7 +114,7 @@ <h2 class="my-5 text-white">Questions..</h2>
 
 	</div>
 <div class="text-ceter">
-	<input type="Submit" value="submit" class="btn btn-light">
+	<input type="Submit" value="submit" class="btn btn-dark">
 </div>
 </form>
 </div>

quiz.js

@@ -1,44 +1,43 @@
-const correctAnswers= ['C','A','A','B','C'];
+const correctAnswers = ['C', 'A', 'A', 'B', 'C'];
 const form = document.querySelector('.quiz-form');
-const result= document.querySelector('.result');
-
-form.addEventListener('submit', e=>
-{
-	e.preventDefault();
-
-
-let score= 0;
-const userAnswers =[form.q1.value, form.q2.value, form.q3.value, form.q4.value, form.q5.value];
-
-//check answers
-
-
-userAnswers.forEach((answer, index)=>
-{
-	if(answer===correctAnswers[index]){
-		score+=20;
-
-}
-
-})
-//console.log(score);
-//check result
-window.scrollTo(0,0);
-//result.querySelector('span').textContent= `${score}%`;
-result.classList.remove('d-none');
-
-let output=0;
-const timer = setInterval(()=>{
-result.querySelector('span').textContent= `${output}%`;
-if(output===score)
-{
-	clearInterval(timer);
-
-}
-else{
-	output++;
-}
-
-},10);
-
+const result = document.querySelector('.result');
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+
+  let correctAnsCount = 0;
+  let score;
+  let total = correctAnswers.length;
+
+  const userAnswers = [
+    form.q1.value,
+    form.q2.value,
+    form.q3.value,
+    form.q4.value,
+    form.q5.value,
+  ];
+
+  //check answers
+
+  userAnswers.forEach((answer, index) => {
+    if (answer === correctAnswers[index]) {
+      correctAnsCount += 1;
+    }
+  });
+
+  score = (correctAnsCount / total) * 100;
+
+  //check result
+  window.scrollTo(0, 0);
+  result.classList.remove('d-none');
+
+  let output = 0;
+  const timer = setInterval(() => {
+    result.querySelector('span').textContent = `${output}%`;
+    if (output === score) {
+      clearInterval(timer);
+    } else {
+      output++;
+    }
+  }, 10);
 });