हेल्लो दोस्तों, आज कइ इस आर्टिकल में हम लेकर आये है Quiz प्रोजेक्ट का Script Code जिसके माध्यम से आप Quiz Project को बना सकते है
Quiz Project HTML and JavaScript projects Demo
Quiz Project Demo
नीचे दिखाए गए Project की तरह Quiz Project को बना सकते है
Quiz Project CSS Code
नीचे दिए गए CSS Code से आप Question एवं Answer के फॉण्ट Style Change कर सकते है तथा View Answer के बटन को कस्टमाइज कर सकते है
body{
font-size: 15px;
font-family: sans-serif;
color: #333;
}
.question{
font-weight: 300;
}
.answers {
margin-bottom: 20px;
}
.answers label{
display: block;
}
#submit{
font-family: sans-serif;
font-size: 20px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
}
#submit:hover{
background-color: #38a;
}
Quiz Project HTML Code
Quiz Project के बटन के नाम को परिवर्तित कर सकते है
<div id="quiz"></div>
<button id="submit">View Answer</button>
<div id="results"></div>
Quiz Project Java Script Code
(function(){
function buildQuiz(){
const output = [];
myQuestions.forEach(
(currentQuestion, questionNumber) => {
const answers = [];
for(letter in currentQuestion.answers){
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
output.push(
`<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join('')} </div>`
);
}
);
quizContainer.innerHTML = output.join('');
}
function showResults(){
const answerContainers = quizContainer.querySelectorAll('.answers');
let numCorrect = 0;
myQuestions.forEach( (currentQuestion, questionNumber) => {
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer === currentQuestion.correctAnswer){
// add to the number of correct answers
numCorrect++;
answerContainers[questionNumber].style.color = 'lightgreen';
}
else{
answerContainers[questionNumber].style.color = 'red';
}
});
resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
}
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [
{
question: "भारत की राजधानी क्या है?",
answers: {
a: "लखनऊ",
b: "दिल्ली",
c: "पंजाब",
d: "हरियाणा"
},
correctAnswer: "b"
},
{
question: "राम का जन्म कहाँ हुआ था?",
answers: {
a: "अयोध्या",
b: "मथुरा",
c: "काशी",
d: "बृन्दावन "
},
correctAnswer: "a"
},
{
question: "Computer का दिमाग किसे कहा जाता है?",
answers: {
a: "Hard Disk",
b: "Desktop",
c: "Keyboard",
d: "C.P.U."
},
correctAnswer: "d"
}
];
buildQuiz();
submitButton.addEventListener('click', showResults);
})();
उपरोक्त दिए गए Script कोड में यदि आपको और भी Question Add करना हो तो आप नीचे दिए गए कोड को Question के नीचे
लिखे
question: "Computer का दिमाग किसे कहा जाता है?",
answers: {
a: "Hard Disk",
b: "Desktop",
c: "Keyboard",
d: "C.P.U."
},
correctAnswer: "d"
}
Quiz Project Source Code
नीचे दिए गए Copy Code के बटन पर Click करके उपरोक्त Code को कॉपी कर सकते है