Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    WP Assgn 1

    Uploaded by

    Rohit Sharma
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    WP Assgn 1

    Uploaded by

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

    Original Description:

    Original Title

    WP ASSGN 1

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    19 views8 pages

    WP Assgn 1

    Uploaded by

    Rohit Sharma
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 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