Scribd
Upload
18 views

HTML Code

file

Uploaded by

Dpk Ch
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

HTML Code

file

Uploaded by

Dpk Ch
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML code:-

<html>
<head>
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<div class="grid">
<div id="quiz">
<h1>Quiz about Indian Agriculture</h1>
<hr style="margin-bottom: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x of y</p>
</footer>
</div>
</div>
<script src="questions.js"></script>
</body>
</html>
CSS code:-
body{
background-color: #f7efef;
}
.grid{
width: 600px;
height: 500px;
margin: 0 auto;
background-color: rgb(243, 229, 229);
padding: 10px 50px 50px 50px;
border: 2px solid #d4cbcb;
}
.grid h1{
font-family: "sans-serif";
background-color: #05871f;
font-size: 60px;
text-align: center;
color: #f7f1f1;
padding: 2px 0px;
}
#score{
color: #021606;
text-align: center;
font-size: 30px;
}
.grid #question {
font-family: "monospace";
font-size: 30px;
color: #05871f;
}
.buttons{
margin-top: 30px;
}
#btn0, #btn1, #btn2, #btn3{
background-color: #05871f;
width: 250px;
font-size: 20px;
color: rgb(247, 239, 239);
border: 1px solid #244982;
margin: 10px 40px 10px 0px;
padding: 10px 10px;
}
#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover{
cursor: pointer;
background-color: #05871f;
}
#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus{
outline: 0;
}
#progress{
color: #312f2f;
font-size: 18px;
}
JAVASCRIPT code:-
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;
}
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}
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("btn" + 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'> You scored: " + quiz.score + " out of 5</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
// create questions here
var questions = [
new Question("Green Revolution in India is related with - ", ["(a). Fish production", "(b).
Egg/Poultry production","(c). Milk/Dairy production", "(d). Agriculture production"], "(d).
Agriculture production"),
new Question("Which of the following is the commercial crop in India?", ["(a). Mustard",
"(b). Tobacco", "(c). Jute", "(d). All of the above"], "(d). All of the above"),
new Question("Which Indian state produces the largest quantity of pulses?", ["(a).
Maharashtra", "(b). Uttar Pradesh","(c). Madhya Pradesh", "(d). Rajasthan"], "(c). Madhya
Pradesh"),
new Question("What does the word Olericulture refer to ____?", ["(a). Cultivation of
fruits", "(b). Cultivation of vegetables", "(c). Cultivation of Oil seeds", "(d). Cultivation of
Cash crops"], "(b). Cultivation of vegetables"),
new Question("____ is the primary sector of Indian economy.", ["(a). Banking", "(b).
Information and Technology", "(c). Agriculture", "(d). Judiciary"], "(c). Agriculture")
];
// create quiz
var quiz = new Quiz(questions);
// display quiz
populate();

You might also like