Scribd
Upload
33 views6 pages

HTML Code

file

Uploaded by

Dpk Ch
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views6 pages

HTML Code

file

Uploaded by

Dpk Ch
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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