अपना खुद का इंटरैक्टिव क्विज़ कैसे बनाएं: HTML, CSS और JavaScript का उपयोग करके
क्या आपने कभी सोचा है कि वेबसाइटों पर वे मज़ेदार, इंटरैक्टिव क्विज़ कैसे बनाए जाते हैं? यह उतना जटिल नहीं है जितना लगता है! इस पोस्ट में, हम आपको सिखाएंगे कि HTML, CSS और JavaScript का उपयोग करके अपना खुद का क्विज़ कैसे बनाया जाए। यह एक शानदार तरीका है न केवल कुछ कोडिंग कौशल सीखने का, बल्कि अपनी वेबसाइट पर उपयोगकर्ताओं को जोड़े रखने का भी।
आइए शुरू करें!
1. HTML: क्विज़ की संरचना (The Skeleton of Your Quiz)
सबसे पहले, हमें अपने क्विज़ के लिए मूल संरचना बनाने की आवश्यकता है। HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) वह भाषा है जिसका उपयोग हम अपनी सामग्री को व्यवस्थित करने के लिए करते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>मेरा शानदार क्विज़</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">प्रश्न पाठ</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer">
<label for="a" id="a_text">विकल्प A</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer">
<label for="b" id="b_text">विकल्प B</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer">
<label for="c" id="c_text">विकल्प C</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer">
<label for="d" id="d_text">विकल्प D</label>
</li>
</ul>
</div>
<button id="submit">जमा करें</button>
</div>
<script src="script.js"></script>
</body>
</html>इस कोड में:
- हमने एक
divबनाया है जिसमेंquiz-containerऔरquizID है। यह हमारे पूरे क्विज़ को रखेगा। quiz-headerके अंदर, हमारे पासh2है जहाँ हमारा प्रश्न दिखाई देगा।- प्रत्येक विकल्प के लिए एक
ul(अनऑर्डर की गई सूची) औरli(सूची आइटम) हैं। - प्रत्येक
input type="radio"एक चयन योग्य विकल्प है।name="answer"यह सुनिश्चित करता है कि आप एक बार में केवल एक विकल्प चुन सकें। labelतत्वinputके साथ जुड़े होते हैं, जिससे उपयोगकर्ता टेक्स्ट पर क्लिक करके विकल्प का चयन कर सकते हैं।- अंत में, हमारे पास
submitबटन है जो उपयोगकर्ता के चयन को संसाधित करेगा।
यह रही इसकी प्रारंभिक संरचना की एक कल्पना:
नोट: ऊपर दी गई इमेज एक प्लेसहोल्डर है। आपको इसे अपने ब्लॉग पोस्ट के लिए वास्तविक इमेज से बदलना होगा।
2. CSS: क्विज़ को स्टाइल करना (Styling Your Quiz)
अब जब हमारे पास संरचना है, तो आइए इसे कुछ CSS (कैस्केडिंग स्टाइल शीट्स) के साथ सुंदर बनाएं। यह हमारे क्विज़ को एक आकर्षक रूप देगा। style.css नामक एक फ़ाइल बनाएं और उसमें निम्नलिखित कोड जोड़ें:
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.quiz-container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
max-width: 90%;
overflow: hidden;
}
.quiz-header {
padding: 2rem;
}
h2 {
padding: 1rem;
text-align: center;
margin: 0;
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin: 1rem 0;
font-size: 1.2rem;
}
ul li label {
cursor: pointer;
display: block;
padding: 0.5rem 0;
}
ul li input[type="radio"] {
margin-right: 10px;
}
button {
background-color: #4CAF50; /* हरा */
color: white;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.3rem;
padding: 1.3rem;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}इस CSS के साथ, हमने:
- बॉडी को केंद्र में रखा और एक हल्का पृष्ठभूमि रंग दिया।
- क्विज़ कंटेनर को एक सफ़ेद पृष्ठभूमि, गोल किनारे और छाया दी।
- प्रश्न और विकल्पों के लिए पैडिंग और फ़ॉन्ट स्टाइल जोड़ा।
- सबमिट बटन को एक आकर्षक हरा रंग और होवर इफ़ेक्ट दिया।
यह रही स्टाइलिंग के बाद की एक कल्पना:
नोट: ऊपर दी गई इमेज एक प्लेसहोल्डर है। आपको इसे अपने ब्लॉग पोस्ट के लिए वास्तविक इमेज से बदलना होगा।
3. JavaScript: क्विज़ को इंटरैक्टिव बनाना (Making Your Quiz Interactive)
यह वह जगह है जहाँ जादू होता है! JavaScript (JS) हमारे क्विज़ को गतिशील और कार्यात्मक बनाएगा। script.js नामक एक फ़ाइल बनाएं और उसमें निम्नलिखित कोड जोड़ें:
const quizData = [
{
question: "HTML का पूर्ण रूप क्या है?",
a: "हाइपरटेक्स्ट मार्कअप लैंग्वेज",
b: "हाइपरटेक्स्ट मल्टीपल लैंग्वेज",
c: "हाइपरटेक्स्ट मेकिंग लैंग्वेज",
d: "हाइपरटाइपिंग मल्टीपल लैंग्वेज",
correct: "a",
},
{
question: "CSS का क्या अर्थ है?",
a: "कंप्यूटर स्टाइल शीट्स",
b: "कैस्केडिंग स्टाइल शीट्स",
c: "कलरफुल स्टाइल शीट्स",
d: "कम्प्यूटेशनल स्टाइल शीट्स",
correct: "b",
},
{
question: "JavaScript मुख्य रूप से किसके लिए उपयोग किया जाता है?",
a: "डेटाबेस प्रबंधन",
b: "सर्वर-साइड प्रोग्रामिंग",
c: "वेबपेज में इंटरैक्टिविटी जोड़ना",
d: "स्टाइलिंग वेबपेज",
correct: "c",
},
{
question: "कौन सा HTML टैग सबसे बड़ी हेडिंग को परिभाषित करता है?",
a: "<h1>",
b: "<head>",
c: "<h6>",
d: "<heading>",
correct: "a",
},
];
const quiz = document.getElementById('quiz');
const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const submitBtn = document.getElementById('submit');
const answerEls = document.querySelectorAll('.answer');
let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz() {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
}
function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false);
}
function getSelected() {
let answer = undefined;
answerEls.forEach(answerEl => {
if (answerEl.checked) {
answer = answerEl.id;
}
});
return answer;
}
submitBtn.addEventListener('click', () => {
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) {
score++;
}
currentQuiz++;
if (currentQuiz < quizData.length) {
loadQuiz();
} else {
quiz.innerHTML = `
<h2>आपने ${score}/${quizData.length} प्रश्नों का सही उत्तर दिया!</h2>
<button onclick="location.reload()">दोबारा लोड करें</button>
`;
}
}
});आइए समझते हैं कि यह कोड क्या करता है:
quizDataArray: यह हमारे सभी प्रश्न, विकल्प और सही उत्तरों को संग्रहीत करता है। आप यहां जितने चाहें उतने प्रश्न जोड़ सकते हैं।- DOM तत्वों को प्राप्त करना: हमने JavaScript को HTML तत्वों से जोड़ने के लिए
document.getElementByIdऔरquerySelectorAllका उपयोग किया है। currentQuizऔरscore: ये वेरिएबल ट्रैक करते हैं कि हम वर्तमान में किस प्रश्न पर हैं और उपयोगकर्ता ने कितने सही उत्तर दिए हैं।loadQuiz()फ़ंक्शन: यह फ़ंक्शन वर्तमान प्रश्न डेटा को HTML में लोड करता है, प्रश्न टेक्स्ट और विकल्प लेबल को अपडेट करता है। यह सुनिश्चित करने के लिएdeselectAnswers()को भी कॉल करता है कि हर बार जब कोई नया प्रश्न लोड होता है तो कोई भी रेडियो बटन चेक न हो।deselectAnswers()फ़ंक्शन: सभी रेडियो बटन को अनचेक करता है।getSelected()फ़ंक्शन: यह जांचता है कि कौन सा रेडियो बटन चेक किया गया है और उस विकल्प की ID (जोquizDataमें हमारेcorrectकुंजी से मेल खाती है) वापस करता है।submitBtnEvent Listener: जब उपयोगकर्ता "जमा करें" बटन पर क्लिक करता है, तो यह इवेंट ट्रिगर होता है:- यह
getSelected()को कॉल करके उपयोगकर्ता के उत्तर को प्राप्त करता है। - यह जांचता है कि क्या उत्तर सही है और
scoreको बढ़ाता है। currentQuizको बढ़ाता है और यदि अधिक प्रश्न हैं, तोloadQuiz()को फिर से कॉल करता है।- यदि सभी प्रश्न पूरे हो गए हैं, तो यह क्विज़ कंटेनर को उपयोगकर्ता के स्कोर के साथ एक परिणाम संदेश और क्विज़ को फिर से शुरू करने के लिए एक "दोबारा लोड करें" बटन के साथ अपडेट करता है।
- यह
यह रही क्विज़ के चलने की एक कल्पना:
नोट: ऊपर दी गई इमेज एक प्लेसहोल्डर है। आपको इसे अपने ब्लॉग पोस्ट के लिए वास्तविक इमेज से बदलना होगा।
समाप्त! (That's It!)
बधाई हो! अब आपने सफलतापूर्वक HTML, CSS और JavaScript का उपयोग करके अपना खुद का इंटरैक्टिव क्विज़ बना लिया है। आप इस क्विज़ को अपनी पसंद के अनुसार अनुकूलित कर सकते हैं:
- अधिक प्रश्न जोड़ें:
quizDataसरणी में बस और वस्तुएं जोड़ें। - स्टाइल बदलें:
style.cssमें रंगों, फ़ॉन्ट और लेआउट के साथ खेलें। - अतिरिक्त सुविधाएँ जोड़ें: आप टाइमर, प्रगति पट्टी या अधिक जटिल परिणाम स्क्रीन जैसी सुविधाएँ जोड़ सकते हैं।
कोडिंग जारी रखें और मज़े करें! यदि आपके कोई प्रश्न हैं, तो उन्हें टिप्पणियों में छोड़ दें।