Create Questions Page By Coding
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Quiz By Maa Blogger</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid">
<div id="quiz">
<h1>Exam Preparation Question</h1>
<style="margin-bottom: 20px">
<p id="question"> </p>
<div class="button">
<button id="bt0"> <span id="choice0"> </span> </button>
<button id="bt1"> <span id="choice1"> </span> </button>
<button id="bt2"> <span id="choice2"> </span> </button>
<button id="bt3"> <span id="choice3"> </span> </button>
</div>
<hr style="margin-top: 80px">
<footer>
<p id="progress"> Question x of y</p>
</footer>
</div>
</div>
<script src="quiz.js"> </script>
<script src="question.js"> </script>
<script src="app.js"> </script>
</body>
</html>
CSS
body {
background: url(https://thumbs.dreamstime.com/z/exam-exam-book-homework-clock-time-stack-education-117739355.jpg);
}
.grid {
width: 700px;
height: 500px;
margin: 0 auto;
background-color: transparent;
padding: 5px 50px 50px 50px;
border-radius: 80px;
}
.grid h1 {
font-family: "century";
background-color: #2c0747;
font-size: 45px;
text-align: center;
color: #ffffff;
padding: 2px 0px;
border-radius: 10px;
}
#score {
color: #f00;
text-align: center;
font-size: 30px;
}
.grid #question {
font-family: "monospace";
font-size: 25px;
color: #000000;
padding: 5px 0px;
border-radius: 10px;
}
.buttons {
margin-top: 30px;
}
#bt0, #bt1, #bt2, #bt3 {
background-color: #510b84;
width: 250px;
font-size: 20px;
color: #fff;
border: 1px solid #20c94d;
border-radius: 50px;
margin: 10px 40px 10px 0px;
padding: 5px 5px;
}
#bt0:hover, #bt1:hover, #bt2:hover, #bt3:hover {
cursor: pointer;
background-color: #20c94d;
}
#bt0: focus, #bt1: focus, #bt2: focus, #bt3: focus {
outline: 0;
}
#progress {
color: #fcf403;
font-size: 30px;
}
Java Script 1
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}
Java Script 2
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}
Java Script 3
function populate() {
if(quiz.isEnded()) {
showScores();
}
else {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// show options
var choices = quiz.getQuestionIndex().choices;
for(var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("bt" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
// create questions
var questions = [
new Question("Who was the first Indian to win the Nobel Prize? नोबेल पुरस्कार जीतने वाला पहला भारतीय कौन था? ", ["Rabindranath Tagore रविंद्रनाथ टैगोर", "CV Raman सी वी रमन","Mother Teresa मदर टेरेसा", "Har govind Khurana हर गोबिंद खोराना"], "Rabindranath Tagore रविंद्रनाथ टैगोर"),
new Question("Who headed the committee on 'computerisation' in Indian Banks(1988)? भारतीय बैंकों (1988) में 'कम्प्यूटरीकरण' समिति का नेतृत्व किसने किया?", ["C. Rangarajan सी. रंगराजन", "R. N. Malhotra आर. एन. मल्होत्रा","S. Venkitramanan एस वेंकटरमणन", "M. Narasimhan एम. नरसिम्हन"], "C. Rangarajan सी. रंगराजन"),
new Question("Raja Ravi Verma, was famous in which of the fields? राजा रवि वर्मा, किस क्षेत्र में प्रसिद्ध थे?", ["Dance नृत्य", "Politics राजनीति","Painting चित्रकला", "Music संगीत"], "Painting चित्रकला"),
new Question("The first Indian to swim across English channel was- अंग्रेजी चैनल पर तैरने वाला पहला भारतीय था", ["V. Merchant वी. मर्चेंट", "P. K. Banerji पी. के. बनर्जी","Mihir Sen मिहिर सेन", "Arati Saha आरती साहा"], "Mihir Sen मिहिर सेन"),
new Question("The first lady Chief Minister of an Indian State after independence is: स्वतंत्रता के बाद भारतीय राज्य की पहली महिला मुख्यमंत्री हैं", ["Sarojini Naidu सरोजिनी नायडू", "Sucheta Kriplani सुचेता कृपलानी","Vijyalaxmi Pandit विजयालक्ष्मी पंडित", "Padmaja Naidu पद्मजा नायडू"], "Sucheta Kriplani सुचेता कृपलानी"),
new Question("By which constitution amendment act, the age limit of adult suffrage was reduced from 21 years to 18 years? किस संविधान संशोधन अधिनियम द्वारा, वयस्क मताधिकार की आयु सीमा 21 वर्ष से घटाकर 18 वर्ष कर दी गई?", ["42nd 42 वें", "44th 44 वें","61st 61 वें", "75th 75 वें"], "61st 61 वें"),
new Question("Who is called Machiavelli of India? भारत का मैकियावेली किसे कहा जाता है?", ["Kalidas कालिदास", "Megasthenes मेगस्थनीज","Chanakya चाणक्य", "Seleucus Nicator सेल्यूकस निकेटर"], "Chanakya चाणक्य"),
new Question("Mauna Lova is an active volcano मौना लोवा एक सक्रिय ज्वालामुखी है", ["Hawaiian Islands हवाई द्वीप का", "Alaska अलास्का का","Italian इटली का", "Japan जापान"], "Hawaiian Islands हवाई द्वीप का"),
new Question("What causes benzene pollution? बेंजीन प्रदूषण किन कारणों से होता है?", ["By automated vehicle स्वचालित वाहन द्वारा", "Tobacco smoke तंबाकू का धुँआ","Burning wood लकड़ी जलाना", "All of the above उपर्युक्त सभी"], "All of the above उपर्युक्त सभी"),
new Question("Rhino virus ....causes राइनो वायरस .... का कारण बनता है", ["Common cold सामान्य जुकाम", "Headache सिर दर्द","Phlegm कफ", "Knee pain घुटने के दर्द"], "Common cold सामान्य जुकाम"),
new Question("The 'Ballpoint' pen was invented 'बॉलपॉइंट' पेन का आविष्कार किया था", ["Waterman वाटरमैन", "Oscar ऑस्कर","Wilson विल्सन", "Lajlo Byro लाजलो बायरो"], "Lajlo Byro लाजलो बायरो"),
new Question("Oncology is the study of ऑन्कोलॉजी का अध्ययन है", ["Bird पक्षी", "Cancer कैंसर","Mammals स्तनधारी", "Soil मिट्टी"], "Cancer कैंसर"),
new Question("What is the study of cells called? कोशिकाओं के अध्ययन को क्या कहा जाता है?", ["Cytology साइिोलॉजी", "Anthropology एंरोपोलॉजी","Bacteriology जीवाणु विज्ञान", "Anthropology एंरोपोलॉजी"], "Cytology साइिोलॉजी"),
new Question("Which is the driest place in the world? विश्व का सबसे शुष्क स्थान कौन सा है?", ["Kalahari कालाहारी", "Atacama अटाकामा","Mojave Desert मोजावे रेगिस्तान", "Tebarnas Desert तबरनस रेगिस्तान"], "Atacama अटाकामा"),
];
var quiz = new Quiz(questions);
populate();
OUTPUT
Posts
44 Comments
Wonderful 🙏🙏🙏🙏
ReplyDeleteGood very good 🙏🙏🙏🙏
ReplyDeleteWow
ReplyDeleteVery interesting
Very nice 🙏🙏🙏🙏
ReplyDeleteGood
ReplyDeleteGood
ReplyDeleteNicely done
ReplyDelete👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌
ReplyDeleteKallu
ReplyDeleteVery good
👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌
👌 👌 👌 👌 👌 👌
👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌
👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌
ReplyDelete👌 👌 👌 👌 👌 👌
ReplyDeletePerfect 👌
ReplyDeleteVery interesting
ReplyDeleteVery interesting
ReplyDeleteExcellent
ReplyDeletePerfect 👌
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAttractive
ReplyDeleteWonderful
ReplyDeleteSuperb
ReplyDeleteWonderful
ReplyDeleteVery Nice
ReplyDeleteVery Nice
ReplyDeleteGreat
ReplyDeleteNice Work Guys
ReplyDeleteNicely done
ReplyDeleteBrilliant
ReplyDeleteWow wonderful
ReplyDeleteWonderful
ReplyDeletePerfect 👌
ReplyDeleteWonderful 🙏😊🙏😊🙏
ReplyDeleteNice
ReplyDeleteAmazing creation
ReplyDeleteWow Great
ReplyDeleteSuperb
ReplyDeleteAttractive
ReplyDelete