HTML Quiz for blogger || Creat responsive Quiz for Blogger

13
Hello dosto swagat hai ap sabhi ka hamare bolg par aaj ke is article me ham batane wale hai ki aap apne blog ke liye ek sundar or responsive Quiz kaise bana sakte hai to dosto quiz develop karne ke liye aapko diye gaye code ko copy karna hoga or video ko dekhkar samajhna hoga to


Dowload Quiz code




Code ...

<!DOCTYPE html>
<html>
<head>
 <title>quiz in Javascript </title>
 <link rel="stylesheet" href="style.css">
<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: #cccccc;
  font-size:16px;
  color:000000;
  margin-bottom:10px;
  border-radius:5px;
  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: green;
 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;
 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:#009688;
 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;
}

.answers-tracker div.correct{
 background-color: green;
 background-image:url('img/correct.png');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 50%;

}
.answers-tracker div.wrong{
 background-color: red;
 background-image:url('img/wrong.png');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 50%;
}

.quiz-over{
 position: fixed;
 left:0;
 top:0;
 width: 100%;
 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: #009688;
 padding:30px;
 border-radius:10px;
 text-align: center;
 flex-basis: 700px;
 max-width:700px;
 color:#ffffff;
}

.quiz-over .box h1{
 font-size:36px;
 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;
}

</style>
</head>
<body>
     <div class="quizContainer container-fluid well well-lg">
        <div id="quiz1" class="text-center">
<h3 style="color:#d14040;position:center;left:80%;top:0%;" align="Center" ><span id="Modern History Of India Quiz part 01 for all Exams">Quiz for all Exams </span><br/><span id='Modern History Of India Quiz part 01 for all Exams' style="font-size:25px;"></span></h3>
<h2 Style="color:#ff000;position:center;left:80%;top0%;" align="center" "font-size:25px;"><samp id="Sub heading"> Test Quiz</samp></h2>
         
</div>
 <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="question">
   
    </div>
    <div class="options">
       <div id="1" class="option1" onclick="check(this)"></div>
       <div id="2" class="option2" onclick="check(this)"></div>
       <div id="3" class="option3" onclick="check(this)"></div>
       <div id="4" class="option4" onclick="check(this)"></div>
    </div>
    <div class="button">
       <button type="button" class="btn" onclick="next()">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 type="button" onclick="tryAgain()">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:'where is the capital of India',
    options:['New Delhi','Kolkatta','Varanashi','Agra'],
    answer:1
   },
   {
    q:'Who is the Prime Minister of India',
    options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'],
    answer:2
   },
   {
    q:'where is the capital of India',
    options:['New Delhi','Kolkatta','Varanashi','Agra'],
    answer:1
   },
   {
    q:'Who is the Prime Minister of India',
    options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'],
    answer:2
   },
   {
    q:'where is the capital of India',
    options:['New Delhi','Kolkatta','Varanashi','Agra'],
    answer:1
   },
   {
    q:'Who is the Prime Minister of India',
    options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'],
    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>

</body>
</html>

Post a Comment

13 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Very nice thanks... But desktop version me work nahi karta... Isla kuch solution he?

    ReplyDelete
  2. HELLO BHAI YE SCRIPT ME HINDI QUESTION DALTE HAI TO KAAM NAHI KARTA HAI .. PLS SOLVE MY PROBLEM BRO

    ReplyDelete
  3. Bhai Isko Wordpress me Kaise Add Kare

    ReplyDelete
  4. bhai koi v thme chal nai raha he kya karu. them me paste karne ke bad v blog me sara htm hi show karrahe he bro . kuch bolo me kya karu

    ReplyDelete
    Replies
    1. bhai aap blog me jaha post krte ho waha ek html ka option aata hai waha aap code ko past karo work krega

      Delete
  5. NOT WORKING ON MY BLOGGER THEME

    ReplyDelete
  6. thanks for this i have same problem this cod was not work ShoW Error Tag is not closed: DIV
    but your effort was good

    ReplyDelete
  7. Sir Desktop version pe kisi bhi theme par kam nahi kar raha hai ye code?

    ReplyDelete
Post a Comment

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top