Fast QnA Template Blogger Premium Free Download - Question Answer

Chào mừng các bạn đã đến với Blog của mình. Hôm nay, mình xin giới thiệu đến bạn một mẫu blogger thân thiện và đáp ứng tốt cho trang web mới của bạn. Fast QnA là một mẫu blogger miễn phí và cao cấp mà bạn có thể tải xuống rất dễ dàng bằng cách nhấn vào nút tải xuống bên dưới. Template Fast QnA phù hợp cho bạn nào làm về website trắc nghiệm. Nếu bạn muốn thử mẫu này trước khi tải, hãy nhấn vào nút xem trước bên dưới. Nếu bạn gặp bất kỳ vấn đề gì, bạn có thể liên hệ nhé!

Giới thiệu Fast QnA Template Blogger

Fast QnA được thiết kế với ý tưởng bảng điều khiển UI, Fast QnA thực sự là một mẫu blogger cao cấp, mẫu này được tải lên bởi Blog Bracket. Fast QnA là mẫu blogger nổi tiếng nhất mọi thời đại. Fast QnA là chủ đề duy nhất đảm bảo 100% sự chắc chắn của AdSense. Nếu bạn đang cố gắng để đạt được AdSense thì Fast QnA chính là mẫu duy nhất dành cho bạn.

Hướng dẫn cài đặt Fast QnA Template Blogger Premium

Việc cài đặt một mẫu blogger rất dễ dàng, chỉ cần làm theo các bước đơn giản để biết cách triển khai một mẫu blogger.

MCQ Code

<h2 style="text-align: left;">
Your Question Here
</h2>

<div class="mcqwarp">
  <div class="mcqop">
    <div>
      <span class="op">A</span>
    </div>
    <div class="opt">Option A Here</div>
  </div>
  <div class="mcqop">
    <div>
      <span class="op">B</span>
    </div>
    <div class="opt">Option B Here</div>
  </div>
  <div class="mcqop">
    <div>
      <span class="op">C</span>
    </div>
    <div class="opt">Option C Here</div>
  </div>
  <div class="mcqop">
    <div>
      <span class="op">D</span>
    </div>
    <div class="opt">Option D Here</div>
  </div>
</div>

<details class="sp notranslate">
  <summary data-hide="Hide">Answer:</summary>
  <p>The correct option is B. <u>CORRECT OPTION</u></p>
  <p class="note">
    <b>Note</b><br />
    NOTE HERE
  </p>
</details>

Quiz Code

<div class="quizContainer container-fluid well well-lg">
  <div class="text-center" id="quiz1"></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 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>

    <a class="button" style="width: 30% !important; padding-left: 10% !important;" onclick="next()">Next</a>

    <div class="answers-tracker"></div>
  </div>

  <div class="quiz-over">
    <div class="box">
      <h3>
        Good Try!<br />
        You Got <span class="correct-answers"></span> out of
        <span class="total-question2"></span> answers correct! That's
        <span class="percentage"></span>
      </h3>
      <button onclick="tryAgain()" type="button">TryAgain</button>
    </div>
  </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:['থর মরুভুমি','সাহারা মরুভুমি','গোবি মরুভুমি','সোনোরান মরুভুমি'],
        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
       }
      ]

      // 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>

Kết luận

Fast QnA Template Blogger Premium Free Download có thể nói là một trong những Template về dạng trắc nghiệm tối ưu hóa nhất. Tốc độ xử lý cực kỳ nhanh và tốt cho SEO. Template này nếu bạn chuyên làm về trắc nghiệm online thì dùng nó quá hợp lý. Bạn thật sự muốn sử dụng Template này thì hãy để lại bình luận và liên hệ cho mình nhé. Mình sẽ gửi Template sớm nhất có thể. Cảm ơn các bạn rất nhiều.