Fast QnA | Question and Answer Blogger Template Download

ব্লগারের জন্য এখন অনেক সুন্দর টেমপ্লেট পাওয়া যায়।যেগুলো ব্যবহার করে সহজেই ব্লগার ব্লগকে সুন্দর লুক দেয়া সম্ভব।তাছাড়া এখন ব্লগার টেমপ্লেটগুলি ডেভলপাররা এমনভাবে ডেভেলপ করতেছেন,যেনো টেমপ্লেটগুলির ডিজাইন সুন্দর হয় এবং পাশাপশি টেমপ্লেটগুলি হয় রেসপন্সিভ এবং ইউজার ফ্রেন্ডলী ও এসইও ফ্রেন্ডলী।

ব্লগারের জন্য এত সুন্দর টেমপ্লেট বা থিম পাওয়া গেলেও QnA Blogger Template খুব কমই দেখা যায়।যেগুলো ব্যবহার করে একজন ব্লগার তার ব্লগার ব্লগে প্রশ্নোত্তর ওয়েবসাইট তৈরি করতে পারে।এর অবশ্য অন্য কারণ রয়েছে,কারণ ব্লগারে ভিজিটররা আমাদের ব্লগে একাউন্ট খুলতে পারে না।তাই তারা আমাদের প্রশ্নোত্তর ওয়েবসাইটে কোনো ধরনের উত্তর দিতে পারবেন না।

কিন্তু আজকে আমি একটি ব্লগার টেমপ্লেট শেয়ার করবো,যেটি ব্যবহার করে আপনি আপনার ব্লগার ব্লগে প্রশ্নোত্তর ওয়েবসাইট বানাতে পারবেন।এই টেমপ্লেটটির নাম হলো Fast QnA Blogger Template । এই টেমপ্লেটের ডেভেলপার টেমপ্লেটটি Fletro Pro Blogger Template এর রিডিজাইন করেছেন এবং এমন ভাবে ডিজাইন করেছেন যেনো এই টেমপ্লেট ব্যবহার করে যে কেউ তার ব্লগার ব্লগে প্রশ্নোত্তর ওয়েবসাইট তৈরি করতে পারে।

এখন আপনি আমাকে প্রশ্ন করতে পারেন যে,একটু আগেই আমি বলেছি ব্লগারে প্রশ্নোত্তর ওয়েবসাইট বানানো সম্ভব না।কারণ এতে ইউজাররা লগইন করতে পারবে না আমাদের সাইটে।ইউজার বা ভিজিটররা শুধু কমেন্ট করতে পারবেন পোস্টের নিচে।তাহলে এই টেমপ্লেট দিয়ে কিভাবে প্রশ্নোত্তর ওয়েবসাইট বানানো যাবে? আসলে এই টেমপ্লেটটি ব্যবহার করলেও ইউজাররা লগইন করতে পারবে না।কিন্তু এই টেমপ্লেট ব্যবহার করে আপনি প্রশ্নোত্তর ব্লগ বানাতে পারবেন।অর্থাৎ প্রশ্ন এবং উত্তর সহ পোস্ট করতে পারবেন।

ডেমো দেখতে : এখানে ক্লিক করুন।

MCQ পোস্ট করার জন্য নিচের কোডগুলো কপি করে নতুন পোস্টের HTML view এ গিয়ে পেস্ট করে দিবেন।তারপর Your Question here এবং Option A,Option B,Option C,Option D ও Answer :The correct option is B এগুলো আপনার প্রশ্ন ও উত্তর অনুযায়ী পরিবর্তন করে নিবেন।

MCQ Codes

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

<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 Bangladesh',

        options:['Hero Alom','Sheikh Hasina','Khaleda Jiya','None of the above'],

        answer:2

       },

       {

        q:'Where is the capital of Bangladesh',

        options:['Dhaka','Rangpur','Sylhet','Chattogram'],

        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>

Quiz Code এর ফিচার হলো এখানে যদি আপনার ওয়েবসাইটের ভিজিটর সঠিক উত্তরে ক্লিক করে তবে উক্ত অপশনটি সবুজ রং ধারণ করবে এবং ভুল উত্তরে ক্লিক করলে লাল রং ধারণ করবে।

কোডগুলো ডাউনলোড করতে : এখানে ক্লিক করুন।

টেমপ্লেট ডাউনলোড করতে : এখানে ক্লিক করুন।

উপসংহার

আজকের এই পোস্টে আমি ব্লগারের জন্য প্রশ্নোত্তর ওয়েবসাইটের টেমপ্লেট শেয়ার করেছি।এই টেমপ্লেট ব্যবহার করে আপনি ব্লগারে সহজেই প্রশ্নোত্তর ওয়েবসাইট বানাতে পারবেন এবং উক্ত ওয়েবসাইট প্রশ্ন – উত্তর পোস্ট করার পাশাপশি কুইজ পোস্ট করতে পারবেন।যেকোনো সমস্যায় কমেন্ট করুন।

ব্লগারে আন্টি অ্যাডব্লক স্ক্রিপ্ট অ্যাড করার টিউটোরিয়াল

প্রিমিয়াম ব্লগার টেমপ্লেট , ব্লগিং টিপস , ব্লগার উইজেট স্ক্রিপ্ট , এসইও টিপস পেতে ভিজিট করুন আমার Blogen ব্লগ।আল্লাহ হাফেজ।