[go: up one dir, main page]
Scribd
Upload
36 views7 pages

WP Assignment 1

p

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 PDF, TXT or read online on Scribd
36 views7 pages

WP Assignment 1

p

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 PDF, TXT or read online on Scribd
You are on page 1/ 7

ADMINISTRATIVE MANAGEMENT COLLEGE

DEPARTMENT OF COMPUTER APPLICATIONS

Web Programming
Assignment - 1

“Quiz about Indian Agriculture”

Submitted by:

Deepak Choudhury
Regd. No.: 19SBSB7010
B. C. A 6th semester
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:-

1
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;
}

2
#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;
}

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("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"),

4
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();

5
OUTPUT:-

You might also like