-
Notifications
You must be signed in to change notification settings - Fork 0
/
09-math-game.htm
133 lines (92 loc) · 4.26 KB
/
09-math-game.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<title>Math Game</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
ALGORITHM:
- It asks a math question and checks the given answer.
PROJECT DESCRIPTION:
A step-by-step video of the project. (Language: Turkish)
https://www.youtube.com/watch?v=BmzSq53Y61k
*/
// TextBox object.
var txtAnswer
// Button objects.
var btnCheckAnswer
var btnNewQuestion
// Variables where numbers are stored.
var number1
var number2
var operationNumber
var correctAnswer
// First running function.
var start = function() {
page.color = "whitesmoke"
// Create the TextBox object. Parameters: left, top
txtAnswer = createTextBox(50, 50)
// Create the Button object. Parameters: left, top
btnNewQuestion = createButton(50, 110)
// Set the text on the object.
that.text = "New"
that.color = "lightgray"
// Determine which function will run when the object is clicked.
that.onClick(makeAQuestion)
// Create the Button object.
btnCheckAnswer = createButton()
// Align to the right of the btnNewQuestion object with a 10px spacing.
that.aline(btnNewQuestion, "right", 10)
// Set the text on the object.
that.text = "Check"
// When the object is clicked, the checkAnswer() function will run.
that.onClick(checkAnswer)
// Make a question at the beginning.
makeAQuestion()
}
// Function that creates a new question.
var makeAQuestion = function() {
// Clear inside the TextBox.
txtAnswer.text = ""
// Let the random numbers be between 1 and 20.
number1 = random(1, 20)
number2 = random(1, 20)
// Random operation.
operationNumber = random(1, 3)
// NOTE: operationNumber can be 1, 2, or 3.
// 1: addition, 2: subtraction, 3: multiplication.
var questionText = " What is the result?"
// If the operation is addition:
if (operationNumber == 1) {
correctAnswer = number1 + number2
txtAnswer.title = number1 + " + " + number2 + questionText
} else if (operationNumber == 2) {
correctAnswer = number1 - number2
txtAnswer.title = number1 + " - " + number2 + questionText
} else if (operationNumber == 3) {
correctAnswer = number1 * number2
txtAnswer.title = number1 + " x " + number2 + questionText
}
}
// The function that checks the txtAnswer.text with the correctAnswer variable when the button is clicked.
var checkAnswer = function() {
// If the given answer is equal to the variable correctAnswer,
if (txtAnswer.text == correctAnswer) {
txtAnswer.text = "The answer is correct."
} else {
txtAnswer.text = "Try again."
}
}
/*
DEVELOPMENT SUGGESTIONS:
- Have a small (50x50) box next to the TextBox.
If the correct answer is given, it will be colored "green" and if the wrong answer is given, it will be colored "red".
- Show the total number of correct and incorrect answers given on the screen. Automatically increase.
*/
</script>
</head>
<body></body>
</html>