adding max-score feature for every quiz

JAYESHBATRA · May 13, 2024 · b14f7cb · b14f7cb
1 parent 21d0f4f
commit b14f7cb
Show file tree

Hide file tree

Showing 25 changed files with 326 additions and 2 deletions.
diff --git a/Pages/Quizes/tests/button-1/script.js b/Pages/Quizes/tests/button-1/script.js
@@ -113,6 +113,7 @@ const quizData = [
   const difficulty = document.getElementById("difficulty");
   const quizcount = document.getElementById("quizcount");
   const prev_score= document.getElementById("max-score");
+  const max_wrapper= document.getElementsByClassName("max-wrapper")[0]
 
 
   let currentQuiz = 0;
@@ -122,6 +123,8 @@ const quizData = [
     const score= localStorage.getItem('btn-1-max');
    if(score){
     prev_score.innerHTML=`Max score <br>${score}`;
+   }else{
+    max_wrapper.style.display='none'
    }
 
   }

diff --git a/Pages/Quizes/tests/button-2/index.html b/Pages/Quizes/tests/button-2/index.html
@@ -45,7 +45,9 @@ <h1>Scalars & Vectors</h1>
     <!-- Quiz section -->
 
     <div class="quiz-wrapper">
-
+        <div class="max-wrapper">
+            <div id="max-score"></div>
+       </div>
       <div class="quiz-container" id="quiz">
 
           <div class="quiz-header">

diff --git a/Pages/Quizes/tests/button-2/script.js b/Pages/Quizes/tests/button-2/script.js
@@ -111,6 +111,24 @@ const quizData = [
   const submitButton = document.getElementById("submit");
   const difficulty = document.getElementById("difficulty");
   const quizcount = document.getElementById("quizcount");
+  const prev_score= document.getElementById("max-score");
+  const max_wrapper= document.getElementsByClassName('max-wrapper')[0];
+
+  const loadScore=()=>{
+      const score= localStorage.getItem('btn-2-max');
+     if(score){
+      prev_score.innerHTML=`Max score <br>${score}`;
+     }else{
+      max_wrapper.style.display='none'
+     }
+
+    }
+    const storeMax=(score)=>{
+      const maxscore = localStorage.getItem('btn-2-max');
+      if (score>maxscore){
+        localStorage.setItem('btn-2-max',score)
+      }
+    }
 
 
   let currentQuiz = 0;
@@ -142,6 +160,7 @@ const quizData = [
   };
 
   loadQuiz();
+  loadScore();
 
   submitButton.addEventListener("click", () => {
     const answer = getSelected();
@@ -160,6 +179,8 @@ const quizData = [
             <h2>You answered ${score}/${quizData.length} questions correctly</h2>
             <button onclick="history.go(0)">Play Again</button>
         `
+        storeMax(score);
+        loadScore();
         var temp;
         for (i = 0; i < weak_topics.length; i++) {
           if(i===0){

diff --git a/Pages/Quizes/tests/button-2/style.css b/Pages/Quizes/tests/button-2/style.css
@@ -333,9 +333,27 @@ ul {
 .recommendations h3{
   margin-left: 1.5vw;
 }
+.max-wrapper{
+  background-color:#F0F1FF;
+  border-radius: 50%;
+  width:100px;
+  height:100px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  border : 7px solid #242969;
+  margin-bottom: 20px;
+  padding: 5px;
+}
+#max-score{
+ font-family: 'Poppins', sans-serif;
+ font-weight: bold;
+ text-align: center;
+}
 
 /* footer */
 
+
 footer{
 
   bottom: 0;

diff --git a/Pages/Quizes/tests/button-3/index.html b/Pages/Quizes/tests/button-3/index.html
@@ -45,6 +45,9 @@ <h1>Respiration In Plants</h1>
     <!-- Quiz section -->
 
     <div class="quiz-wrapper">
+        <div class="max-wrapper">
+            <div id="max-score"></div>
+       </div>
 
       <div class="quiz-container" id="quiz">
 

diff --git a/Pages/Quizes/tests/button-3/script.js b/Pages/Quizes/tests/button-3/script.js
@@ -111,11 +111,28 @@ const quizData = [
   const submitButton = document.getElementById("submit");
   const difficulty = document.getElementById("difficulty");
   const quizcount = document.getElementById("quizcount");
+  const prev_score= document.getElementById("max-score");
+  const max_wrapper= document.getElementsByClassName("max-wrapper")[0]
 
 
   let currentQuiz = 0;
   let score = 0;
   const weak_topics=[];
+  const loadScore=()=>{
+    const score= localStorage.getItem('btn-3-max');
+   if(score){
+    prev_score.innerHTML=`Max score <br>${score}`;
+   }else{
+    max_wrapper.style.display='none'
+   }
+
+  }
+  const storeMax=(score)=>{
+    const maxscore = localStorage.getItem('btn-3-max');
+    if (score>maxscore){
+      localStorage.setItem('btn-3-max',score)
+    }
+  }
 
   const deselectAnswers = () => {
     answerElements.forEach((answer) => (answer.checked = false));
@@ -128,6 +145,7 @@ const quizData = [
     });
     return answer;
   };
+
 
   const loadQuiz = () => {
     deselectAnswers();
@@ -142,6 +160,7 @@ const quizData = [
   };
 
   loadQuiz();
+  loadScore();
 
   submitButton.addEventListener("click", () => {
     const answer = getSelected();
@@ -160,6 +179,8 @@ const quizData = [
             <h2>You answered ${score}/${quizData.length} questions correctly</h2>
             <button onclick="history.go(0)">Play Again</button>
         `
+        storeMax(score);
+        loadScore();
         var temp;
         for (i = 0; i < weak_topics.length; i++) {
           if(i===0){

diff --git a/Pages/Quizes/tests/button-3/style.css b/Pages/Quizes/tests/button-3/style.css
@@ -334,6 +334,23 @@ ul {
 .recommendations h3{
   margin-left: 1.5vw;
 }
+.max-wrapper{
+  background-color:#F0F1FF;
+  border-radius: 50%;
+  width:100px;
+  height:100px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  border : 7px solid #242969;
+  margin-bottom: 20px;
+  padding: 5px;
+}
+#max-score{
+ font-family: 'Poppins', sans-serif;
+ font-weight: bold;
+ text-align: center;
+}
 /* footer */
 
 footer{

diff --git a/Pages/Quizes/tests/button-4/index.html b/Pages/Quizes/tests/button-4/index.html
@@ -45,6 +45,9 @@ <h1>Newton Laws of Motion</h1>
     <!-- Quiz section -->
 
     <div class="quiz-wrapper">
+        <div class="max-wrapper">
+            <div id="max-score"></div>
+       </div>
 
       <div class="quiz-container" id="quiz">
 

diff --git a/Pages/Quizes/tests/button-4/script.js b/Pages/Quizes/tests/button-4/script.js
@@ -111,11 +111,28 @@ const quizData = [
   const submitButton = document.getElementById("submit");
   const difficulty = document.getElementById("difficulty");
   const quizcount = document.getElementById("quizcount");
+  const prev_score= document.getElementById("max-score");
+  const max_wrapper= document.getElementsByClassName("max-wrapper")[0]
 
 
   let currentQuiz = 0;
   let score = 0;
   const weak_topics=[];
+  const loadScore=()=>{
+    const score= localStorage.getItem('btn-4-max');
+   if(score){
+    prev_score.innerHTML=`Max score <br>${score}`;
+   }else{
+    max_wrapper.style.display='none'
+   }
+
+  }
+  const storeMax=(score)=>{
+    const maxscore = localStorage.getItem('btn-4-max');
+    if (score>maxscore){
+      localStorage.setItem('btn-4-max',score)
+    }
+  }
 
   const deselectAnswers = () => {
     answerElements.forEach((answer) => (answer.checked = false));
@@ -142,6 +159,7 @@ const quizData = [
   };
 
   loadQuiz();
+  loadScore();
 
   submitButton.addEventListener("click", () => {
     const answer = getSelected();
@@ -160,6 +178,8 @@ const quizData = [
             <h2>You answered ${score}/${quizData.length} questions correctly</h2>
             <button onclick="history.go(0)">Play Again</button>
         `
+        storeMax(score);
+        loadScore();
         var temp;
         for (i = 0; i < weak_topics.length; i++) {
           if(i===0){

diff --git a/Pages/Quizes/tests/button-4/style.css b/Pages/Quizes/tests/button-4/style.css
@@ -334,6 +334,23 @@ ul {
 .recommendations h3{
   margin-left: 1.5vw;
 }
+.max-wrapper{
+  background-color:#F0F1FF;
+  border-radius: 50%;
+  width:100px;
+  height:100px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  border : 7px solid #242969;
+  margin-bottom: 20px;
+  padding: 5px;
+}
+#max-score{
+ font-family: 'Poppins', sans-serif;
+ font-weight: bold;
+ text-align: center;
+}
 /* footer */
 
 footer{

diff --git a/Pages/Quizes/tests/button-5/index.html b/Pages/Quizes/tests/button-5/index.html
@@ -45,6 +45,9 @@ <h1>Thermodynamics</h1>
     <!-- Quiz section -->
 
     <div class="quiz-wrapper">
+        <div class="max-wrapper">
+            <div id="max-score"></div>
+       </div>
 
       <div class="quiz-container" id="quiz">
 

diff --git a/Pages/Quizes/tests/button-5/script.js b/Pages/Quizes/tests/button-5/script.js
@@ -111,6 +111,23 @@ const quizData = [
   const submitButton = document.getElementById("submit");
   const difficulty = document.getElementById("difficulty");
   const quizcount = document.getElementById("quizcount");
+  const prev_score= document.getElementById("max-score");
+  const max_wrapper= document.getElementsByClassName("max-wrapper")[0]
+const loadScore=()=>{
+    const score= localStorage.getItem('btn-5-max');
+   if(score){
+    prev_score.innerHTML=`Max score <br>${score}`;
+   }else{
+    max_wrapper.style.display='none'
+   }
+
+  }
+  const storeMax=(score)=>{
+    const maxscore = localStorage.getItem('btn-5-max');
+    if (score>maxscore){
+      localStorage.setItem('btn-5-max',score)
+    }
+  }
 
 
   let currentQuiz = 0;
@@ -142,6 +159,7 @@ const quizData = [
   };
 
   loadQuiz();
+  loadScore();
 
   submitButton.addEventListener("click", () => {
     const answer = getSelected();
@@ -160,6 +178,8 @@ const quizData = [
             <h2>You answered ${score}/${quizData.length} questions correctly</h2>
             <button onclick="history.go(0)">Play Again</button>
         `
+        storeMax(score);
+        loadScore();
         var temp;
         for (i = 0; i < weak_topics.length; i++) {
           if(i===0){

diff --git a/Pages/Quizes/tests/button-5/style.css b/Pages/Quizes/tests/button-5/style.css
@@ -316,6 +316,23 @@ ul {
 .recommendations h3{
   margin-left: 1.5vw;
 }
+.max-wrapper{
+  background-color:#F0F1FF;
+  border-radius: 50%;
+  width:100px;
+  height:100px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  border : 7px solid #242969;
+  margin-bottom: 20px;
+  padding: 5px;
+}
+#max-score{
+ font-family: 'Poppins', sans-serif;
+ font-weight: bold;
+ text-align: center;
+}
 /* footer */
 
 footer{

diff --git a/Pages/Quizes/tests/button-6/index.html b/Pages/Quizes/tests/button-6/index.html
@@ -45,6 +45,9 @@ <h1>Periodic Table & Periodicity </h1>
     <!-- Quiz section -->
 
     <div class="quiz-wrapper">
+        <div class="max-wrapper">
+            <div id="max-score"></div>
+       </div>
 
       <div class="quiz-container" id="quiz">
 

diff --git a/Pages/Quizes/tests/button-6/script.js b/Pages/Quizes/tests/button-6/script.js
@@ -112,6 +112,23 @@ const quizData = [
   const submitButton = document.getElementById("submit");
   const difficulty = document.getElementById("difficulty");
   const quizcount = document.getElementById("quizcount");
+  const prev_score= document.getElementById("max-score");
+  const max_wrapper= document.getElementsByClassName("max-wrapper")[0]
+const loadScore=()=>{
+    const score= localStorage.getItem('btn-6-max');
+   if(score){
+    prev_score.innerHTML=`Max score <br>${score}`;
+   }else{
+    max_wrapper.style.display='none'
+   }
+
+  }
+  const storeMax=(score)=>{
+    const maxscore = localStorage.getItem('btn-6-max');
+    if (score>maxscore){
+      localStorage.setItem('btn-6-max',score)
+    }
+  }
 
 
   let currentQuiz = 0;
@@ -143,6 +160,7 @@ const quizData = [
   };
 
   loadQuiz();
+  loadScore();
 
   submitButton.addEventListener("click", () => {
     const answer = getSelected();
@@ -161,6 +179,8 @@ const quizData = [
             <h2>You answered ${score}/${quizData.length} questions correctly</h2>
             <button onclick="history.go(0)">Play Again</button>
         `
+        storeMax(score);
+        loadScore();
 
         var temp;
         for (i = 0; i < weak_topics.length; i++) {