Demo Quiz in Blogger - W3Templates


<style>
body{
 margin:0;
 background-color:#d9cdcd;
 font-family: sans-serif;
}
*{
 box-sizing: border-box;
}

.quiz-container{
 max-width: 700px;
 min-height:500px;
 background-color: #ffffff;
 margin:40px auto;

 border-radius:10px;
 padding:30px;
}
.quiz-container::after,.quiz-container::before{
 content: '';
 clear: both;
 display: table;

}
.question-number,
.question,
.options,
.button,
.answers-tracker{
 float: left;
 width: 100%;
}
.question-number h3{
 color:#009688;
 border-bottom: 1px solid #ccc;
 margin:0;
 padding-bottom:10px;
}

.question {
 font-size:22px;
 color:000000;
 padding:20px 0;
 
}

.options div{
    background-color: #fff;
    font-size: 16px;
    color: 000000;
    margin-bottom: 10px;
    border-radius: 5px;
    border: solid 1px darkgray;
    padding: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.options div.disabled{
 pointer-events: none;
}
.options div.correct{
 z-index: 1;
 color: #fff;
}
.options div.correct::before{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width: 100%;
 height: 100%;
 background-color: #09d209;
 border: solid 1px #09d209;
 z-index: -1;
 
 animation: animateBackground 1s ease;
 animation-fill-mode: forwards;
}
@keyframes animateBackground{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0%); 
 }
}
.options div.wrong{
 z-index: 1;
 color: #fff;
}
.options div.wrong::before{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width: 100%;
 height: 100%;
 background-color:red;
 border: solid 1px red;
 z-index: -1;
 
 animation: animateBackground 1s ease;
 animation-fill-mode: forwards;
}
@keyframes animateBackground{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0%); 
 }
}

.button .btn{
 padding:15px 50px;
 border-radius:5px;
 cursor: pointer;
 background-color:#00a0d2;
 font-size:16px;
 color:#ffffff;
 border: none;
 display: inline-block;
 margin:15px 0 20px;
}
.answers-tracker{
 border-top:1px solid #ccc;
 padding-top: 15px;
}
.answers-tracker div{
 height: 40px;
 width: 40px;
 background-color: #cccccc;
 display: inline-block;
 border-radius: 50%;
 margin-right:5px;
 margin: 3px;
}

.answers-tracker div.correct{
    background-color: #fff;
    background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhTysieJiTOusKu2d4WGG0VFMvT99fkqenqY30J-PYQXPkLQzShjoiqTA8uQ3pLvxx7LXuLoDh8AD-jO9NdxVHNDX4IKJT75tdxc_6J4z4jZQu7z3ky3ctWMKTmzAVpTTDoDb2jcjXAbis79ee6T-sAYeMGCtYPAU1_0PuPrjABMqICygN2KOFu33up=s833);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    border: dashed 1px gray;
    margin: 3px;

}
.answers-tracker div.wrong{
 background-color: #fff;
border: dashed 1px gray; background-image:url('https://blogger.googleusercontent.com/img/a/AVvXsEikNX-7_M_M4rqYR0K5JiEHEsIRAx0wMTMdYx9REWw_wm-tdGzPnvSI4VtucGmDc_T4N50WXzMn_Pl6Qok3Y90nOwTqIzoyrsqjJy6VvZYu68ThaurV5UHUHetQfVhzsvlemmgxOP8Dbk9darCC9l4j1DYEHd1uLArCUtJFaZuqHvdNBCMS7z3j61dJ=s708');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 50%;
 margin: 3px;
}

.quiz-over{
 position: fixed;
 left:0;
 top:0;
 width: 90%;
 height: 100%;
 background-color:rgba(0,0,0,0.9);
 z-index: 10;
 display: none;
 align-items: center;
 justify-content: center;
}
.quiz-over.show{
 display: flex;
}
.quiz-over .box{
 background-color:#34a9d2;
 padding:30px;
 border-radius:10px;
 text-align: center;
 flex-basis: 700px;
 max-width:700px;
 color:#ffffff;
}

.quiz-over .box h1{
 font-size:30px;
 margin:0 0 20px;
}

.quiz-over .box button{
 padding:15px 50px;
 border:none;
 background-color:#FF9800;
 border-radius:5px;
 font-size:16px;
 margin:15px 0 20px;
 color:#ffffff;
}
.advt{
     align-items: center;
}

</style>
     <br />
<div class="quizContainer container-fluid well well-lg">
<div class="quiz-container">
<div class="question-number">
<h3>
Question <span class="question-num-value"></span> of <span class="total-question"></span></h3>
</div>
<div class="advt"><img src="https://www.wordstreamcdn.com/wp-content/uploads/2021/07/banner-ads-examples-ncino.jpg"><div>
<div class="question">
</div>
<div class="options">
<div class="option1" id="1" onclick="check(this)">
</div>
<div class="option2" id="2" onclick="check(this)">
</div>
<div class="option3" id="3" onclick="check(this)">
</div>
<div class="option4" id="4" onclick="check(this)">
</div>
</div>
<div class="button">
<button class="btn" onclick="next()" type="button">Next</button>
    </div>
<div class="answers-tracker">
</div>
</div>
<div class="quiz-over">
<div class="box">
<h1>
      Good Try!<br />
      You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br />
      That's <span class="percentage"></span>
     </h1>
<button onclick="tryAgain()" type="button">TryAgain</button>
   </div>
</div>
<script src="script.js"></script>
<script>
  
  const options=document.querySelector(".options").children;
  const answerTrackerContainer=document.querySelector(".answers-tracker");
  const questionNumberSpan=document.querySelector(".question-num-value");
  const totalQuestionSpan=document.querySelector(".total-question");
  const correctAnswerSpan=document.querySelector(".correct-answers");
  const totalQuestionSpan2=document.querySelector(".total-question2");
  const percentage=document.querySelector(".percentage");
  const question=document.querySelector(".question");
  const op1=document.querySelector(".option1");
  const op2=document.querySelector(".option2");
  const op3=document.querySelector(".option3");
  const op4=document.querySelector(".option4");
  let questionIndex;
  let index=0;
  let myArray=[];
  let myArr=[];
  let score=0;

  // questions and options and answers

  const questions=[
   {
    q:'निम्नलिखित में कौन सा भारत में शास्त्रीय नृत्य नहीं है?',
    options:['A. कत्थक','B.सत्रीय','C. मणिपुरी','D. भांगड़ा'],
    answer:4
   },
   {
    q:'सुनील गंगोपाध्याय का पहला उपन्यास कौन सा था?',
    options:['A. आत्मोप्रकाश','B. प्रथम अलो','C. पूरब पश्चिम','इनमें से कोई नहीं'],
    answer:1
   },
   {
    q:'भारतीय नेपोलियन की उपाधि कि से दी गई हैं? ',
    options:['(A) चन्द्रगुप्तमौर्य','(B) समुद्रगुप्त','(C) चन्द्रगुप्तप्रथम','(D) हर्षवर्धन'],
    answer:2
   },
   {
    q:'कवी कालिदास किसके राजकवि थे? ',
    options:['(A)चन्द्रगुप्तमौर्य','(B) समुद्रगुप्त','(C) चन्द्रगुप्तप्रथम','(C) चन्द्रगुप्त II '],
    answer:4
   },
   {
    q:'भारतीय नेपोलियन की उपाधि कि से दी गई हैं? ',
    options:['(A) चन्द्रगुप्तमौर्य','(B) समुद्रगुप्त','(C) चन्द्रगुप्तप्रथम','(D) हर्षवर्धन'],
    answer:2
   }
   
  ]

  // set questions and options and question number
  totalQuestionSpan.innerHTML=questions.length;
  function load(){
        questionNumberSpan.innerHTML=index+1;
         question.innerHTML=questions[questionIndex].q;     
         op1.innerHTML=questions[questionIndex].options[0];
         op2.innerHTML=questions[questionIndex].options[1];
         op3.innerHTML=questions[questionIndex].options[2];
         op4.innerHTML=questions[questionIndex].options[3];
         index++;
  }
  
  function check(element){
   if(element.id==questions[questionIndex].answer){
    element.classList.add("correct");
    updateAnswerTracker("correct")
    score++;
    console.log("score:"+score)
   }
   else{
    element.classList.add("wrong");
    updateAnswerTracker("wrong")

   }
   disabledOptions()
  }
   
  function disabledOptions(){
     for(let i=0; i<options.length; i++) {
      options[i].classList.add("disabled");
      if(options[i].id==questions[questionIndex].answer){
       options[i].classList.add("correct");
      }

     }
  }
  
  function enableOptions(){
     for(let i=0; i<options.length; i++) {
      options[i].classList.remove("disabled","correct","wrong");
     }
  }

  function validate(){
      if(!options[0].classList.contains("disabled")){
        alert("Please Selecto one option")
      }
      else{
       enableOptions();
       randomQuestion();
      }
  }

  function next(){
    validate();
  }
   
  function randomQuestion(){
   let randomNumber=Math.floor(Math.random()*questions.length);
   let hitDuplicate=0;
       if(index==questions.length){
        quizOver();
       }
       else{
         if(myArray.length>0){
             for(let i=0; i<myArray.length; i++){
               if(myArray[i]==randomNumber){
                  hitDuplicate=1;
                  break;
               }
             }
             if(hitDuplicate==1){
              randomQuestion();
             }
             else{
               questionIndex=randomNumber;   
              load();
              myArr.push(questionIndex);
             }
         }
         if(myArray.length==0){
           questionIndex=randomNumber;   
           load();
           myArr.push(questionIndex);
         }

       myArray.push(randomNumber);
       
      }
  }
      
  function answerTrakcer(){
     for(let i=0; i<questions.length; i++){
      const div=document.createElement("div")
         answerTrackerContainer.appendChild(div);
     }
  }

 function updateAnswerTracker(classNam){
   answerTrackerContainer.children[index-1].classList.add(classNam);
 }

 function quizOver(){
    document.querySelector(".quiz-over").classList.add("show");
    correctAnswerSpan.innerHTML=score;
    totalQuestionSpan2.innerHTML=questions.length;
    percentage.innerHTML=(score/questions.length)*100 + "%";
 }
 
 function tryAgain(){
     window.location.reload();
 }

 window.onload=function(){
  randomQuestion();
  answerTrakcer();
 
}

</script>



</div>
Download File
Login

Register
