Css Project
Css Project
Math Game
PROJECT REPORT
Submitted by:
ROLL NO NAME
24 SNEHA GULED
80 GAURI SHINDE
1
CERTIFICATE
ROLL NO NAME
24 SNEHA GULED
80 GAURI SHINDE
2
INDEX
1 Project Proposal 4
2 Action plan 5
3 Resource required 6
5 Flowchart 10
6 Coding 11-22
6 Output 23-28
8 Conclusion 30
9 Refernce 31
3
Micro-Project Proposal
Math Game
1.0 Aim/Benefits of the Micro-Project
The aim of this micro-project included:
1. To Generate Random Numbers and avoid repetition of Numbers.
2. To Calculate Correct and Incorrect answers while solving.
3. To show negative marking if answer selected is incorrect.
4
4.0 Action Plan
SR Details of activity Planned Planned Name of
. Start date Finish Responsible
No. date Team
Members
1 Finalization of project Title 17/9/2021 28/9/2021 All
and Scope
2 Project Definition 28/9/2021 5/10/2021 All
5
5.0 Resources Required
6
Micro-Project Report
Math Game
1.0 Rationale
JavaScript is a scripting or programming language that allows you to
implement complex features on web pages. Every time a web page does more
than just sit there and display static information for you to look at. Displaying
timely content updates, interactive maps, animated 2D/3D graphics, scrolling
video jukeboxes, etc.We have made a maths game, this can improve other
brain functions, such as attention, concentration, and focus. It helps the users
in practicing Math. It is a Learn And Fun Game. It can be used by any Age-
Groups. Math games give space to critical thinking and that helps children
nurture their attention to detail while solving it. Math games can improve
visual recognition as well as help in investing leisure time in something quite
useful.
7
4.0 Literature Review
JavaScript is a dynamic computer programming language. It is lightweight
and most commonly used as a part of web pages, whose implementations
allow client-side script to interact with the user and make dynamic pages. It is
an interpreted programming language with object-oriented capabilities. Most
of the functions and applications that make the Internet indispensable to
modern life are coded in some form of JavaScript. It is used to create a
dynamic and interactive experience for the user.
The keyword if executes a statement only if the condition is true. It does not
do anything if the condition is false.
8
do…while Statement : This statement executes atleast once, even if the
condition is false. In this, the loop will execute the code block once, before
checking if the condition is true, then it will repeat the loop as long as the
condition is true.
9
5.0 Actual Procedure Followed.
Algorithm:
Step 1. Start
Step 2. Create HTML structure by adding the 4 boxes, scoreboard and reset
button.
Step 3. Declare and initialize the DOM objects in Js.
Step 4. Call function play
4.1 A question along with 4 options will be displayed.
Step 5. Select the option you feel is correct.
5.1 If Selected Option Is Correct, Display : Correct
5.2 If Selected Option Is Incorrect, Display : Try Again!
Step 6. Check if option selected is correct or incorrect
6.1 If Option Selected is Correct :
Increment to Next Question
Display : Score
Display : Time Remaining
6.2 If Option Selected is Incorrect :
Execute the same question again
Display : Score
Display : Time Remaining
Step 7. Final Function
7.1 Function Success: Check if user’s time remaning is equal to 0,
if YES then display user’s performance stats with total time taken.
Step 8. If user wants to play again or if user clicks reset button in between, Go
to step 4.
Step 9. Stop.
10
Flowchart:
11
Coding:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="score">Score: <span id="scoreValue"></span></div>
<div id="correct">Correct</div>
<div id="wrong">Wrong<br>Try Again!</div>
<div id="question" class="text-center"></div>
<div id="information" class="text-center" onclick="check()">Click on
the correct answer!</div>
<div id="choices">
<div id="box1" class="box text-center"></div>
<div id="box2" class="box text-center"></div>
<div id="box3" class="box text-center"></div>
<div id="box4" class="box text-center"></div>
</div>
<div id="startreset" class="text-center">Start Game</div>
<div id="timeremaining" class="text-center">Time Remaining: <span
id="timeremainingValue"></span></div>
<div id="gameover" class="text-center"></div>
</div>
<script src="main.js"></script>
</body>
</html>
12
JAVASCRIPT
// Global Variables
var playing = false;
var score;
var timeremaining;
var countdown;
var correctAns=0;
// 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() {
document.getElementById('information').innerHTML="Click on the
correct answer!";
13
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);
setText("scoreValue","");
setText("startreset","Start Game");
15
CSS
html {
height: 100%;
.text-center {
text-align: center;
#container {
box-sizing: border-box;
height: 440px;
width: 590px;
background: #9DD2EA;
padding: 20px;
border-radius: 10px;
position: relative;
}
16
#score {
background: #f1ff92;
color: #888e5f;
padding: 11px;
position: absolute;
left: 500px;
border-radius: 5px;
#correct,
#wrong {
background: #42e252;
color: #fff;
padding: 11px;
position: absolute;
left: 245px;
display: none;
#wrong {
background: #de401a;
17
}
#question {
width: 450px;
height: 150px;
border-radius: 7px;
line-height: 150px;
font-size: 100px;
background: #9da0ea;
#information {
width: 450px;
height: 50px;
background: #b481d9;
border-radius: 7px;
line-height: 50px;
#choices {
width: 450px;
height: 100px;
.box {
width: 85px;
height: 85px;
background: #fff;
float: left;
margin-right: 36px;
border-radius: 5px;
line-height: 85px;
cursor: pointer;
position: relative;
19
#box4 {
margin-right: 0;
#startreset {
width: 100px;
height: 38px;
line-height: 38px;
cursor: pointer;
position: relative;
#timeremaining {
width: 170px;
height: 38px;
line-height: 38px;
position: absolute;
bottom: 5px;
20
right: 20px;
background: #afe64b;
border-radius: 5px;
display: none;
#gameover {
width: 500px;
height: 200px;
color: #FFF;
font-size: 2.5rem;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
z-index: 9999;
display: none;
21
6.0 Actual Resources Used
Sr.N Equipment Name with Broad Specification Remark (if
o. any)
1 Hardware Computer System: Computer (i3-i5
preferable), Nil
RAM minimum 2 GB and onwards
2 Operating System: Windows 7 or Later
Version/LINUX version 5.0 Nil
or Later Version
3 Software: VS Code, Chrome. Nil
22
7.0 Outputs of the Micro-Projects
INITIALLY:
23
WHEN A QUESTION IS GENERATED:
24
WHEN CORRECT ANSWER IS SELECTED:
25
8.0 Skill Developed / learning out of this Micro-Project.
1. We learnt how to manage the time properly.
2. We developed our logical and designing skills.
3. We improved our teamwork skills.
4. We learnt how to solve problems faced during designing of the project.
1. Math games can improve visual recognition and can be used as Math
Test/ Quiz.
2. With many Math games based on calculating easy to tough levels of
math problems, children improve their visual discrimination.
3. It improves other brain functions, such as attention, concentration, and
focus.
4. It is very user-friendly, Interactive UI and UX and A Fun & Learn
Game.
5. These games improve visual memory, sustained attention, and visual
recognition skills.
26
Conclusion
27
Reference
Book
JavaScript Demystified-
(McGraw- hill-JavaScript Demystified (2006))
Beginning JavaScript
www.youtube.com
www.google.com
28