From b6b33ac29197f621349281552ed1f18714231540 Mon Sep 17 00:00:00 2001 From: runtimeerror11 Date: Fri, 27 Oct 2023 09:52:56 +0530 Subject: [PATCH] Math game added --- maths js/index.html | 53 ++++++++++++++++ maths js/script.js | 125 ++++++++++++++++++++++++++++++++++++++ maths js/style.css | 143 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 321 insertions(+) create mode 100644 maths js/index.html create mode 100644 maths js/script.js create mode 100644 maths js/style.css diff --git a/maths js/index.html b/maths js/index.html new file mode 100644 index 0000000..0af1624 --- /dev/null +++ b/maths js/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + Math Game + + + +
+
+ Time remaining: 60 +
+
+ score: 0 +
+
+ Correct! +
+
+ Try again! +
+
+ +
+
+ Click on the correct answer. +
+
+ +
+
+
+
+
+
+ Start Game +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/maths js/script.js b/maths js/script.js new file mode 100644 index 0000000..3440f69 --- /dev/null +++ b/maths js/script.js @@ -0,0 +1,125 @@ +var timeremaining; +var correctAnswer; +var score; +var action; +var playing = false; + +document.getElementById("startreset").onclick = function () { + if (playing == true) { + location.reload(); + } + else { + playing = true; + score = 0; + + document.getElementById("scorevalue").innerHTML = score; + + show("timeremaining"); + timeremaining = 60; + + document.getElementById("timeremainingvalue").innerHTML = timeremaining; + + hide("gameOver"); + + document.getElementById("startreset").innerHTML = "Reset Game"; + + startCountdown(); + + generateQA(); + + } +} + +for (i = 1; i < 5; i++) { + document.getElementById("box" + i).onclick = function () { + if (playing == true) { + if (this.innerHTML == correctAnswer) { + + score++; + document.getElementById("scorevalue").innerHTML = score; + hide("wrong"); + show("correct"); + setTimeout(function () { + hide("correct"); + }, 1000); + generateQA(); + + } else { + + hide("correct"); + show("wrong"); + setTimeout(function () { + hide("wrong"); + }, 1000); + } + } + } +} + +//functions + +function startCountdown() { + action = setInterval(function () { + timeremaining -= 1; + + + document.getElementById("timeremainingvalue").innerHTML = timeremaining; + if (timeremaining == 0) { + stopCountdown(); + show("gameOver"); + + //game over + document.getElementById("gameOver").innerHTML = "

Game over!

Your score is " + score + ".

"; + hide("timeremaining"); + hide("correct"); + hide("wrong"); + playing = false; + + document.getElementById("startreset").innerHTML = "Start Game"; + } + }, 1000); +} + + +function stopCountdown() { + clearInterval(action); +} + + +function hide(Id) { + document.getElementById(Id).style.display = "none"; +} + + +function show(Id) { + document.getElementById(Id).style.display = "block"; +} + +function generateQA() { + var x = 1 + Math.round(9 * Math.random()); + var y = 1 + Math.round(9 * Math.random()); + correctAnswer = x * y; + + document.getElementById("ques").innerHTML = x + "x" + y; + var correctPosition = 1 + Math.round(3 * Math.random()); + + document.getElementById("box" + correctPosition).innerHTML = correctAnswer;//correct answer + + + var answers = [correctAnswer]; + + for (i = 1; i < 5; i++) { + if (i != correctPosition) { + var wrongAnswer; + do { + wrongAnswer = (1 + + Math.round(9 * Math.random())) * (1 + + Math.round(9 * Math.random()));//wrong answer + + } while (answers.indexOf(wrongAnswer) > -1) + + document.getElementById("box" + i).innerHTML = wrongAnswer; + answers.push(wrongAnswer); + } + } +} \ No newline at end of file diff --git a/maths js/style.css b/maths js/style.css new file mode 100644 index 0000000..775920d --- /dev/null +++ b/maths js/style.css @@ -0,0 +1,143 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"); + +html { + height: 100%; + background: #0F2C59; +} + +#container { + height: 450px; + width: 550px; + background-color: #DAC0A3; + margin: 100px auto; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 4px 0px 0px #243859; + position: relative; + font-family: "Roboto", sans-serif; +} + +#score { + color: white; + position: absolute; + right: 10px; + font-size: 25px; +} + +#correct { + position: absolute; + left: 250px; + background-color: #42e252; + color: white; + padding: 5px 12px; + display: none; +} + +#wrong { + position: absolute; + left: 250px; + background-color: #de401a; + color: white; + padding: 5px 12px; + display: none; +} + +#ques { + width: 450px; + height: 150px; + margin: 50px auto 10px auto; + background-color: #334155; + font-size: 100px; + display: flex; + align-items: center; + justify-content: center; + color: white; +} + +#choices { + width: 450px; + height: 100px; + margin: 5px auto; + } +#inst { + width: 450px; + height: 50px; + margin: 10px auto; + text-align: center; + line-height: 45px; + color: white; +} + + +.box { + margin-right: 36px; + width: 85px; + height: 85px; + background-color: white; + float: left; + border-radius: 3px; + cursor: pointer; + box-shadow: 0px 4px black; + text-align: center; + line-height: 80px; + position: relative; + transition: all 0.2s; +} + +.box:hover, +#startreset:hoover { + background-color: #9c89f6; + color: white; + box-shadow: 0px 4px #6b54d3; +} + +.box:active, +#startreset:active { + box-shadow: 0px 0px #6b54d3; + top: 4px; +} +#startreset { + width: 150px; + padding: 10px; + background-color: lawngreen; + margin: 0 auto; + border-radius: 3px; + cursor: pointer; + box-shadow: 0px 4px rgba(0, 0, 0, 0.2); + text-align: center; + position: relative; + transition: all 0.2s; + } + +#box4 { + margin-right: 0; +} + + +#gameOver { + height: 200px; + width: 500px; + background: black; + color: white; + font-size: 2.3em; + text-align: center; + text-transform: uppercase; + position: absolute; + top: 100px; + left: 45px; + z-index: 2; + display: none; + } + +#timeremaining { + color: red; + padding: 10px; + position: absolute; + top: 10px; + left: 10px; + border-radius: 5px; + display: none; + font-weight: 500; + font-size: 30px; +} +