Scribd
Upload
44 views8 pages

WP Assgn 1

This document contains the code for a sports quiz application including HTML, CSS, and JavaScript code. The HTML code defines the structure and layout of the quiz interface. The CSS code styles the interface elements. The JavaScript code implements the quiz functionality like tracking questions, displaying questions and answer options, checking answers, and displaying scores. The code includes functions to populate the interface with quiz questions, handle guessing answers, and show the results. Sample quiz questions about sports are provided to test the application.

Uploaded by

Rohit Sharma
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
44 views8 pages

WP Assgn 1

This document contains the code for a sports quiz application including HTML, CSS, and JavaScript code. The HTML code defines the structure and layout of the quiz interface. The CSS code styles the interface elements. The JavaScript code implements the quiz functionality like tracking questions, displaying questions and answer options, checking answers, and displaying scores. The code includes functions to populate the interface with quiz questions, handle guessing answers, and show the results. Sample quiz questions about sports are provided to test the application.

Uploaded by

Rohit Sharma
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/ 8

ADMINISTRATIVE MANAGEMENT COLLEGE

DEPARTMENT OF COMPUTER APPLICATIONS

Web Programming
Assignment - 1

“Quiz about Sports”

Submitted by:

Rohit Kumar Sharma


Regd. No.: 19SBSB7044
B. C. A 6th semester
HTML code:-
<html>

<head>

<meta charset="UTF-8">

<title>Quiz</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="grid">

<div id="quiz">

<h1>Quiz About Sports</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>

<div class="Center" align='center'>

<p><input type="button" value="Restart Quiz" onclick="refreshPage()"></p>

</div>

<script src="questions.js"></script>
</body>
</html>

1
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: #252f7c;

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: #0a344b;

.buttons{

margin-top: 30px;

2
}

#btn0, #btn1, #btn2, #btn3{

background-color: #460948;

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: #634bba;

#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus{

outline: 0;

#progress{

color: #312f2f;

font-size: 18px;

3
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;

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

5
};

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;

};

function refreshPage(){

window.location.reload();

// create questions here

var questions = [

new Question("Who was the 1st ODI captain for India?", ["(a). Ajit Wadekar", "(b). Bishen Singh Bedi","(c).
Nawab Pataudi", "(d). Vinoo Mankad"], "(a). Ajit Wadekar"),

new Question("Where did India play its 1st one day international match?", ["(a). Lords", "(b). Headingley",
"(c). Tauntone", "(d). The Oval"], "(b). Headingley"),

new Question("India won its first Olympic hockey gold in...?", ["(a). 1928", "(b). 1932","(c). 1936", "(d).
1948"], "(a). 1928"),

new Question("Who won the 1993 King of the Ring?", ["(a). Owen Hart", "(b). Bret Hart", "(c). Edge", "(d).
Mabel"], "(b). Bret Hart"),

new Question("What is the name of the person that controls a football match?", ["(a).A referee", "(b). An
umpire", "(c). A spectator", "(d). A goalkeeper"], "(a). A referee")

];

// create quiz

var quiz = new Quiz(questions);

// display quiz

populate();

6
OUTPUT:-

You might also like