তো প্রথমে অ্যাপ্লিকেশন এর প্রশ্ন গুলো কিভাবে JSON ফাইলের মধ্যে রাখবেন সেই বিষয়ে আলোচনা করা যাক। প্রথমেই .json ফরম্যাট এর ফাইল তৈরি করুন এবং নিচে উদাহরণ হিসেবে দেওয়া json ফাইলের মত স্ট্রাকচারে আপনার কুইজের প্রশ্ন এবং উত্তরের অপশনগুলো স্টোর করুন। আর হ্যা, প্রতিটি প্রশ্নের অ্যারে এর মধ্যে "correctAnswer" কী এর ভ্যালু হিসেবে যত নম্বর অপশনটি সঠিক উত্তর সেটা দিবেন।
questions = [
{
"question" : "What does the acronym WWW stand for?",
"choices" : ["Wild Wacky Walter","Web Wide Wave","World Wide Web","Wide Wall Web"],
"correctAnswer": 3
},
{
"question" : "What does HTML stand for?",
"choices" : ["Home Tool Markup Language","Hyperlinks and Text Markup Language", "Hyper Text Markup Language"],
"correctAnswer" : 3
},
{
"question" : "Choose the correct HTML element for the largest heading:",
"choices" : ["<heading>", "<h1>", "<head>", "<h6>"],
"correctAnswer" : 2
},
{
"question" : "Which of these elements are all <table> elements?",
"choices" : ["<table><head><tfoot>", "<thead><body><tr>", "<thead><body><tr>", "<table><tr><td>"],
"correctAnswer" : 4
},
{
"question" : "How can you make a numbered list?",
"choices" : ["<list>", "<li>", "<ol>", "<ul>"],
"correctAnswer" : 3
}
];আপনার কুইজ অ্যাপ্লিকেশন এর ডাটাগুলো JSON ফাইলের মধ্যে স্টোর করার পর এবার জাভাস্ক্রিপ্ট দিয়ে কুইজ অ্যাপটি প্রোগ্রাম করা যাক। তো এবার একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করে নিচের জাভাস্ক্রিপ্ট কোডগুলো কপি করে সেই ফাইলের মধ্যে পেস্ট করুন তাহলেই জাভাস্ক্রিপ্ট এর কাজ শেষ।
var currentQuestion = 0;
var correctAnswers = 0;
var quizOver = false;
window.addEventListener('DOMContentLoaded', function(e){
displayCurrentQuestion();
var errorMessage = document.querySelector('#errorMessage');
errorMessage.style.display = 'none';
document.querySelector('#nextButton').addEventListener('click', function(){
if(!quizOver){
var selectedOption = document.querySelector('input[type=radio]:checked');
if (selectedOption === null){
errorMessage.innerText = 'Please select an option';
errorMessage.style.display = 'block';
} else {
console.log(selectedOption.value);
errorMessage.style.display = 'none';
if (parseInt(selectedOption.value) === questions[currentQuestion].correctAnswer - 1){
correctAnswers++;
}
currentQuestion++;
if (currentQuestion < questions.length){
displayCurrentQuestion();
} else {
displayScore();
document.querySelector('#nextButton').innerText = 'Play Again';
quizOver = true;
}
}
} else {
quizOver = false;
document.querySelector('#nextButton').innerText = 'Next';
resetQuiz();
displayCurrentQuestion();
hideScore();
}
});
});
function displayCurrentQuestion(){
console.log('In display current Questions');
var question = questions[currentQuestion].question;
var questionID = document.querySelector('#quizContainer > #question');
var options = document.querySelector('#quizContainer > #options');
var numChoices = questions[currentQuestion].choices.length;
questionID.innerText = question;
options.innerHTML = '';
var choice;
for (i = 0; i < numChoices; i++){
choice = questions[currentQuestion].choices[i];
var li = document.createElement('li');
li.innerHTML = '<li><label><label class="radio-button"><input type="radio" value="' + i + '" name="dynradio" /><span class="radio-button-icon"/></label>' + choice + '</label></li>'
options.appendChild(li);
}
}
function resetQuiz(){
currentQuestion = 0;
correctAnswers = 0;
hideScore();
}
function displayScore(){
document.querySelector('#quizContainer > #result').innerText = 'You scored: ' + correctAnswers + ' out of ' + questions.length;
document.querySelector('#quizContainer > #result').style.display = 'block';
}
function hideScore(){
document.querySelector('#result').style.display = 'none';
}জাভাস্ক্রিপ্ট এর কাজ শেষ হলে এবার আপনার এইচটিএমএল ফাইলের মধ্যে জাভাস্ক্রিপ্ট ফাইলটি এবং জেসন ফাইলটি লিঙ্ক করুন (জাভাস্ক্রিপ্ট এর মত করে একই ভাবে জেসন লিঙ্ক করতে হয়) এবং সেই সাথে নিচের এইচটিএমএল কোডটুকু কপি করে এইচটিএএল এর মধ্যে যুক্ত করুন তাহলেই কুইজ অ্যাপ্লিকেশন এর মেইন স্ট্রাকচার তৈরি।
<div class="container">
<div class="quiz-container" id="quizContainer">
<h2 class="question" id="question"></h2>
<ul class="options" id="options"></ul>
<div class="error-message" id="errorMessage"></div>
<div class="result" id="result"></div>
<button class="next-button" id="nextButton">Next</button>
</div>
</div>অ্যাপ্লিকেশন এর মেইন স্ট্রাকচার তৈরি হলে এবার পালা সেটা ডিজাইন করার জন্য। তো আপনারা চাইলে আপনাদের পছন্দ মতো ডিজাইন করতে পারেন অথবা আমার দেওয়া নিচের সিএসএস গুলো ব্যবহার করেও ডিজাইন করতে পারেন। জাস্ট নিচের সিএসএস গুলো কপি করে আপনার সিএসএস ফাইলের মধ্যে যুক্ত করে দিন অথব এইচটিএমএল এর মধ্যে স্টাইল ট্যাগ এর ভিতরে যুক্ত করে দিন।
.container {
width: 100vw;
height: 100vh;
padding: 20px;
background: rgba(66,133,244,0.1);
display: grid;
place-items: center;
}
.quiz-container {
width: 100%;
padding: 20px 30px;
background: white;
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
border-radius: 5px;
transition: all 0.2s;
}
.quiz-container .question {
font-size: 19px;
font-weight: 500;
text-transform: uppercase
}
.quiz-container .options {
list-style: none;
margin: 20px 10px
}
.quiz-container .options li {
margin: 10px 0;
font-size: 14px;
line-height: 14px;
vertical-align: center
}
.quiz-container .radio-button input {
display: none;
}
.radio-button .radio-button-icon {
width: 10px;
height: 10px;
background: none;
display: inline-block;
border: 2px solid #ccc;
border-radius: 100%;
transform: scale(1.5);
vertical-align: center;
margin: 0 10px 0 0;
position: relative;
}
.radio-button .radio-button-icon:after {
content: '';
background: #09f;
border-radius: 100%;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
visibility: hidden;
transition: all 0.1s;
}
.radio-button input:checked + .radio-button-icon {
border: 2px solid #09f;
}
.radio-button input:checked + .radio-button-icon:after {
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
visibility: visible;
}
.next-button {
background: #09f;
color: white;
padding: 10px 15px;
border: none;
outline: none;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(66,133,244,1);
margin: 0 auto;
display: block;
transition: all 0.2s
}
.next-button:active {
background: gray;
}
.error-message,
.result {
color: red;
background: rgba(219,68,55,0.1);
margin: 0 -30px 20px -30px;
padding: 10px 30px;
text-align: center;
}
.result {
background: rgba(66,133,244,0.1);
color: rgb(66,133,244);
}
.error-message:empty,
.result:empty {
display: none
}Download Project
তো আর্টিকেল মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন। ধন্যবাদ সবাইকে।