Fast Qna Blogger Template
 |
| Fast Qna Blogger Template |
BlogrTool এ স্বাগতম।
ব্লগার এর জন্য এখন অনেক ভালো ভালো টেমপ্লেট পাওয়া যায়।কিন্তু মনের মতো QNA Blogger Template (Question And Answer) পাওয়া কিছুটা দুষ্কর।কারণ ব্লগারের জন্য এখন অব্দি তত বেশি Question And Answer Blogger Template রিলিজ হয়নি।এর মূল কারণ অবশ্য অন্য কিছু।কারণ,ব্লগারে ওয়ার্ডপ্রেস এর মত আমাদের সাইটে ভিজিটররা একাউন্ট খুলতে পারে না।যায় দরুন তারা কোনো প্রশ্নের উত্তর দিতে পারে না।
আজকে আমি আপনাদের সাথে শেয়ার করবো ইউজার ফ্রেন্ডলী , রেসপন্সিভ একটি ব্লগার টেমপ্লেট।এটি মূলত একটি QNA Blogger Template । আজকের এই পোস্ট থেকে আপনি এই Responsive QNA Blogger Template টি ডাউনলোড করতে পারবেন।এবং নিচে দেয়া Demo লিংক থেকে চাইলে ডেমো দেখে নিতে পারেন।আজকের পোস্টটি মূলত যে টেমপ্লেটটি নিয়ে সেটি হলো , Fast Qna Blogger Template ।
ব্লগারের জন্য যতগুলো QNA Template রয়েছে তার মাঝে Fast Qna Blogger Template হলো সবচেয়ে ফাস্ট ব্লগার টেমপ্লেট।Fast Qna Blogger Template এর ডিজাইনার এই টেমপ্লেটটি ডিজাইন করেছেন UI Dashboard idea নিয়ে।Fast Qna Blogger Template অন্যান্য QNA Blogger Template এর চেয়ে অনেক ফাস্ট,মিনিমালিস্টিক,এবং অ্যাডসেন্স ফ্রেন্ডলী একটি টেমপ্লেট।
How To Install Fast Qna Blogger Template
 |
| How to Make QnA Website in Blogger |
Step 1 : প্রথমে যাবেন Blogger Dashboard এ।
Step 2 : তারপর যাবেন Themes এ।
Step 3 : এবারে ড্রপ ডাউন মেনু থেকে Edit HTML অপশন এ গিয়ে পূর্বের সব কোড সিলেক্ট করে রিমুভ করে দিন।
Step 4 : এখন Fast Qna Blogger Template এর xml ফাইলের ভিতরের সবগুলো কোড কপি করে সেগুলো Themes - Edit HTML - এ পেস্ট করে দিন।
Step 5 : এখন ৩ডট থেকে সেভ করে দিন।
Step 6 : আপনার ব্লগে Fast Qna Blogger Template ইন্সটল হয়ে গেছে।
You may want to read this post :
| Fast Qna Template Features |
|---|
| Question Answer Feature |
| Multiple Choice Feature |
| Bangla Font Added |
| Sidebar Post Widgets by (Recent, Label, or Comments) |
| One-Click Fixed Sidebar |
| Footer Ads |
| AdSense (In-Feed ADS) on Homepage |
| Post ADS 1 and 2 on Post Page |
| Exclusive Download Button |
| 100% Responsive Design |
| Auto Translated |
| One-Click Dark Mode |
| One-Click Boxed Layout |
| Mega Menu by Shortcodes |
| One-Click Fixed Menu |
| Advanced Hero Section |
| Responsive YouTube Videos |
| Content Table Support |
| Advanced Post Share Buttons |
| Fully Customizable Background, Widths, Colors, and Fonts |
| Big Featured Post Section |
| Header Ads |
| Custom Copyrights |
| Fast Loaded |
| SEO Optimized |
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 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>
কোনো সমস্যা হলে কমেন্ট সেকশনে জানিয়ে দিবেন।তাহলে আপনাকে বিকল্প পদ্ধতি দিতে পারবো।
Final Words
পোস্টটি সম্পর্কে আপনার মতামত জানাতে ভুলবেন না।কোনো ধরনের ভুল-ত্রুটি হলে অবশ্যই সংশোধন করে দেয়ার চেষ্টা করবেন।আজ এতটুকুই।আবারও দেখা হবে নতুন কোনো পোস্টে নতুন কোনো টপিক নিয়ে।
