TASK1 TASK2 TASK3

QUIZ GAME

HTML File

<!DOCTYPE html>
<html>
    <head>
        <title>Quiz Game</title>
        <script src="Script.js"></script>
        <link rel="stylesheet" href="Style.css">
    </head>

    <body>
        <h1 id="title">Quiz</h1>
        <h2 id="question">The Question</h2>
        <div id="answers">
            
        </div> 
        <br>
        <span id="score"></span> <br>
        <span id="playAgain"></span>
    </body>
</html>

<script>
    GetQuestion();
</script>

CSS FILE

body
{
    font-family: sans-serif;
    text-align: center;
}

button
{
    background-color : #e7e7e7; /* Green */
    color: black;
    border: none;
    padding: 15px 32px;
    display: inline-block;
    font-size: 24px;
    margin: 18px;
}

JavaScript FILE

var quests = new Array();
var questNumber = 0;
var CorrectAnswers = 0;

quests[0] = {"question" : "10 + 10",
        "Answer" : ["10", "20", "30", "55"],
        "CorrectAnswer" : "20"};

quests[1] = {"question" : "2 * 3",
        "Answer" : ["8", "9", "6", "1"],
        "CorrectAnswer" : "6"};

quests[2] = {"question" : "4 * 4",
"Answer" : ["8", "9", "16", "1"],
"CorrectAnswer" : "16"}; 

function GetQuestion()
{
    if(questNumber >= quests.length)
    {
        PlayerScore();
        return;
    }

    document.getElementById("question").innerHTML = quests[questNumber].question;
    Answers = document.getElementById("answers");
    Answers.innerHTML = "";
    Score = document.getElementById("score");

    for(var i = 0; i < quests[questNumber].Answer.length; i++)
    {
        id = "button" + i;
        answer = quests[questNumber].Answer[i];
        Answers.innerHTML += '<button id="'+ id +'" onclick="CheckAnswer(' + "id" + ')">' + answer + '</button>';
    }
    Score.innerHTML = "Question Correct : " + CorrectAnswers + " of " + questNumber; 
}

function CheckAnswer(btn)
{
    var PlayerAnswer = document.getElementById(btn).innerHTML;
    var CorrectAnswer = quests[questNumber].CorrectAnswer;

    if(CorrectAnswer == PlayerAnswer)
        CorrectAnswers++;

    questNumber++;
    GetQuestion();
}

function PlayerScore()
{
    document.getElementById("title").innerHTML = "";
    document.getElementById("question").innerHTML = "Thanks for playing";
    document.getElementById("answers").innerHTML = "";
    document.getElementById("score").innerHTML = "Questions Correct : " + CorrectAnswers + " of " + quests.length;
    document.getElementById("playAgain").innerHTML = "<button onclick='PlayAgain()'> PLAY AGAIN </button>";
}

function PlayAgain()
{
    questNumber = 0;
    CorrectAnswers = 0;
    GetQuestion();
    document.getElementById("playAgain").innerHTML = "";
}

Next Lecture, Wednesday 1 PM