Scribd
Upload
8 views5 pages

Document

The document contains JavaScript code for a simple multiplication quiz game. Players can start the game, answer questions, and track their score and remaining time. The game generates random multiplication questions and provides feedback on correct or incorrect answers.

Uploaded by

ijmrset64
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
8 views5 pages

Document

The document contains JavaScript code for a simple multiplication quiz game. Players can start the game, answer questions, and track their score and remaining time. The game generates random multiplication questions and provides feedback on correct or incorrect answers.

Uploaded by

ijmrset64
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/ 5

// Global Variables

var playing = false;

var score;

var timeremaining;

var countdown;

var correctAns;

// Create the container for the game

document.body.innerHTML = `

<div id="container" style="text-align: center; margin: 100px auto; width: 400px;">

<div id="score">Score: <span id="scoreValue"></span></div>

<div id="correct" style="display:none; color:green;">Correct</div>

<div id="wrong" style="display:none; color:red;">Try Again!</div>

<div id="question" class="text-center"></div>

<div id="information" class="text-center">Click on the correct answer!</div>

<div id="choices">

<div id="box1" class="box text-center" style="border: 1px solid #000; display: inline-block; width:
100px; height: 100px; line-height: 100px; margin: 10px; cursor: pointer;"></div>

<div id="box2" class="box text-center" style="border: 1px solid #000; display: inline-block; width:
100px; height: 100px; line-height: 100px; margin: 10px; cursor: pointer;"></div>

<div id="box3" class="box text-center" style="border: 1px solid #000; display: inline-block; width:
100px; height: 100px; line-height: 100px; margin: 10px; cursor: pointer;"></div>

<div id="box4" class="box text-center" style="border: 1px solid #000; display: inline-block; width:
100px; height: 100px; line-height: 100px; margin: 10px; cursor: pointer;"></div>

</div>

<div id="startreset" class="text-center" style="cursor:pointer;">Start Game</div>

<div id="timeremaining" class="text-center">Time Remaining: <span


id="timeremainingValue"></span></div>

<div id="gameover" class="text-center"></div>

</div>
`;

// Register Events

document.getElementById("startreset").addEventListener("click", play);

document.getElementById("box1").addEventListener("click", checkAnswer);

document.getElementById("box2").addEventListener("click", checkAnswer);

document.getElementById("box3").addEventListener("click", checkAnswer);

document.getElementById("box4").addEventListener("click", checkAnswer);

function play(e) {

if (playing === true) {

// You want to reset

window.location.reload();

} else {

// You want to start the play

playing = true;

this.innerHTML = "Reset Game";

score = 0;

setText("scoreValue", score);

hide("gameover");

timeremaining = 60;

setText("timeremainingValue", timeremaining);

show("timeremaining");

startCountdown();

generateQA();

function generateQA() {
var x = (1 + Math.round(Math.random() * 9));

var y = (1 + Math.round(Math.random() * 9));

correctAns = x * y;

let quesString = `${x} x ${y}`;

setText("question", quesString);

var correctPos = (1 + Math.round(Math.random() * 3));

setText(`box${correctPos}`, correctAns);

var answers = [correctAns];

for (i = 1; i < 5; i++) {

var wrongAns;

if (i != correctPos) {

do {

wrongAns = (1 + Math.round(Math.random() * 9)) * (1 + Math.round(Math.random() * 9));

} while (answers.indexOf(wrongAns) != -1);

setText(`box${i}`, wrongAns);

answers.push(wrongAns);

function checkAnswer() {

if (playing === true) {

if (this.innerHTML == correctAns) {

score++;

setText("scoreValue", score);

show("correct");

hide("wrong");

setTimeout(function () {

hide("correct");
}, 500);

generateQA();

} else {

show("wrong");

hide("correct");

setTimeout(function () {

hide("wrong");

}, 500);

function startCountdown() {

countdown = setInterval(function () {

timeremaining -= 1;

setText("timeremainingValue", timeremaining);

if (timeremaining <= 0) {

clearInterval(countdown);

playing = false;

show("gameover");

hide("timeremaining");

setText("scoreValue", "");

setText("startreset", "Start Game");

let msg = `<p>Game over!</p><p>Your score: ${score}</p>`;

setText("gameover", msg);

}, 1000)

}
// Helper Functions

function setText(id, text) {

document.getElementById(id).innerHTML = text;

function show(id) {

document.getElementById(id).style.display = 'block';

function hide(id) {

document.getElementById(id).style.display = 'none';

You might also like