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