#### Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

# Create a Math Game

edited November 2015 Posts: 56

I'm quite new to Codea but I need to make this program that does math. The description of the program is:

"Create a program that will allow the user to enter in the answer from a simple math problem. Both numbers for the question are in the range from 1 -> 99. If the user gets it right, a message tells them this and then increments the “Number Correct” count. If the user gets it wrong, a message tells them they got it wrong, tell them the correct answer and then increments the “Number Wrong” count. Both numbers should be generated randomly and the program should randomly select an operation each time as well (+, -, *, /). Also don't use the iPad keyboard to input the answer"

I would appreciate any input from anyone on how I would go about doing this. Thanks!

Tagged:
«13

• Mod
edited November 2015 Posts: 5,396

School project?

If so, how much can you figure out for yourself? While we are happy to help, you won't learn anything if we do all the thinking for you.

I suggest you break the problem into its parts

• creating random numbers and arithmetic operations

• displaying the problem on the screen

• providing a way for the user to enter an answer without the keyboard

• keeping score of correct and incorrect answers

Looking at each of these separately makes it easier to solve.

(and welcome to the forum).
:-h

• Posts: 56

@Ignatz Yeah it kind of is a project but my teacher hasn't taught us a lot. I know the print function and we skimmed through if statements in Codea. We haven't learned about buttons or generating random mathematical equations. But thanks anyways, I'll search the forum.

• Posts: 56

@quezadav Thanks as well. Although I don't quite understand that code, but it's alright. I'll just figure it out somehow.

• Mod
edited November 2015 Posts: 5,396

If that's all you know, you haven't any chance of doing this.

You need to understand the drawing cycle, how to draw text on the screen, how to make simple clickable "buttons" and how touch works.

You could do it more simply by printing the test questions and the results in the output area at the left of screen, but you'd still need buttons and touches for the user to input an answer.

There's not much point us writing it for you, either, because you won't understand it.

I would discuss with your teacher that this is probably too hard based on what you know.

• Mod
Posts: 8,943

I don't mean to hijack this post, but this link might be relevant. It's 2 years old and I would like to ask anyone who started Codea about Dec 2013: Was it better to give you code so you could see how it was done without you doing anything, or was it better to give you suggestions so you had to figure it out yourself. A lot of people on this forum can write the code for the above post in a couple of minutes, but are we helping or hurting those trying to learn. I'm not sure if I should write the code for this as I normally do and post it, or just let it go with the suggestions above.

``````http://codea.io/talk/discussion/4246/homework/p1
``````
• Mod
Posts: 5,396

Dave, I think sample code is great when you have some basic skills and just need some help with the shape of a program or some technique.

The problem here is that the knowledge deficit is so great that our code - especially anything to do with drawing or touch - is going to look like greek.

Additionally, homework is supposed to be done by you personally, not by other people. It's unfair to the rest of the class if we write a great program for one student.

So I suggest our role here is to help unblock problems, and to explain, but not to solve the assignment or write the code.

• Posts: 56

Writing sample codes wouldn't hurt. I'm familiar with touch events a bit and the text function. Also the code isn't being presented to the class so it won't affect anyone. Thanks anyways

• Mod
Posts: 5,396

Ah, well, that's a bit different from what you said above.

I go back to my original advice of breaking the project into its parts and tackling each separately. It will be more fun than just having someone write the whole thing for you.

• Mod
edited November 2015 Posts: 8,943

@CodingIsLife Here's an example. I'll leave it to you to add the bells and whistles.
Tap the button with the correct answer. You don't go to the next problem unless you get the current one right.

``````displayMode(FULLSCREEN)

function setup()
rectMode(CENTER)
right=0
wrong=0
create()
end

function create()
a={}
ans={}
str={}
choice=math.random(4)
c=math.random(4)    -- + - x /
for z=1,4 do
a[z]=vec2(math.random(99),math.random(99))
if c==1 then
str[z]=string.format("%d + %d = ",a[z].x,a[z].y)
ans[z]=math.tointeger(a[z].x+a[z].y)
elseif c==2 then
str[z]=string.format("%d - %d = ",a[z].x,a[z].y)
ans[z]=math.tointeger(a[z].x-a[z].y)
elseif c==3 then
str[z]=string.format("%d x %d = ",a[z].x,a[z].y)
ans[z]=math.tointeger(a[z].x*a[z].y)
elseif c==4 then
str[z]=string.format("%d / %d = ",a[z].x,a[z].y)
ans[z]=a[z].x/a[z].y
end
end
end

function draw()
background(0)
fill(255)
text("Right   "..right,WIDTH/2-100,HEIGHT-50)
text("Wrong   "..wrong,WIDTH/2+100,HEIGHT-50)
text(str[choice],WIDTH/2,HEIGHT/2 )
for a,b in pairs(ans) do
fill(255)
rect(WIDTH/2,100+a*50,180,40)
fill(0)
text(b,WIDTH/2,100+a*50)
end
end

function touched(t)
if t.state==BEGAN then
if choice==(t.y-25-100)//50+1 then
right=right+1
create()
else
wrong=wrong+1
end
end
end
``````
• edited November 2015 Posts: 18

I think this is a pedagogically appropriate answer to the question. It offers a solution to the problem of not using the keyboard, and the touch handler offers a lesson for UI design. You have covered the design issues specified by @Ignatz, while still leaving plenty of bells and whistles to implement given the original specification. I encourage @CodingIsLife to post their solution. I would be interested in seeing how they handled the design trade offs for generating a problem, getting the answer, and providing feedback.

Moving beyond multiple choice opens up interesting user interface problems for negative numbers and precision for division.

• Mod
Posts: 5,396

I think I would put the numbers 0 to 9 on the screen so you could touch them in turn to give your answer, like a calculator keypad.

But there are several ways to do it, of course...

• Mod
Posts: 8,943

@Ignatz I did the 0-9 . - keys to start, but it started to get too complicated for just a simple example. As mentioned above, the precision on the divide would be a problem.

• Posts: 56

@dave1707 Thanks for your example. It works but I don't understand it. I'll see what I come up with and @nfgdayton I'll definitely post my code if I figure out how to do it. In addition, @Ignatz you're right, a 0-9 keypad is the better option in my opinion. Thanks to all of you

• edited November 2015 Posts: 56

This is all I have so far. It's mainly just the draw function. The program doesn't do much. I still need to generate random numbers and operations, program the buttons to display numbers when touched + an enter button and tell the user the right answer if answered wrong. It's not perfect I know and it can probably be shortened but this is what I have. [Screenshot of my program] http://imgur.com/yGyOCmY

``````-- MathGame

--Variables
local button0 = "Project:button0"
local button1 = "Project:button1"
local button2 = "Project:button2"
local button3 = "Project:button3"
local button4 = "Project:button4"
local button5 = "Project:button5"
local button6 = "Project:button6"
local button7 = "Project:button7"
local button8 = "Project:button8"
local button9 = "Project:button9"

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()
end

-- This function gets called once every frame
function touched(touch)

end

-- This function gets called once every frame
function draw()

-- This sets a dark background color
background(40, 40, 50)

--This displays numbers 0-9 in a keypad fashion on the screen
sprite(button0, WIDTH/2-150, HEIGHT/2-300, 75, 75)
sprite(button1, WIDTH/2-250, HEIGHT/2, 75, 75)
sprite(button2, WIDTH/2-150, HEIGHT/2, 75, 75)
sprite(button3, WIDTH/2-50, HEIGHT/2, 75, 75)
sprite(button4, WIDTH/2-250, HEIGHT/2-100, 75, 75)
sprite(button5, WIDTH/2-150, HEIGHT/2-100, 75, 75)
sprite(button6, WIDTH/2-50, HEIGHT/2-100, 75, 75)
sprite(button7, WIDTH/2-250, HEIGHT/2-200, 75, 75)
sprite(button8, WIDTH/2-150, HEIGHT/2-200, 75, 75)
sprite(button9, WIDTH/2-50, HEIGHT/2-200, 75, 75)

-- This displays the "Right" and "Wrong" at the top of the screen
fill(255)
fontSize(48)
text("Right     ",WIDTH/2-100,HEIGHT-50)
text("Wrong     ",WIDTH/2+100,HEIGHT-50)
end
``````
• Mod
Posts: 8,943

@CodingIsLife Don't forget the Clear, Backspace, Minus, and Decimal point buttons. When you show a divide problem, how many places past the decimal point will you expect the user to key. Also, will you round up the answer or just truncate the answer. You're off to a good start, but you have a long way to go.

• Mod
edited November 2015 Posts: 5,396

You're getting there. You may find this is neater

``````buttons={}
for i=0,9 do
buttons[i]={} --make subtable for each button
buttons[i].img="Project:button"..i
end
--use the table to hold screen position too
buttons[0].pos=vec2(WIDTH/2-150,HEIGHT/2-300)
--and so on, for the other buttons

--and in draw..
for i=0,9 do
sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end
``````

When the user touches the screen, it is easy to tell which button has been pressed

``````function touched(t)
if t.state==ENDED then --wait for touch to end
local touch=vec2(t.x,t.y)
for i=0,9 do
if touch:dist(buttons[i].pos)<75 then
keyTouched=i
return
end
end
end
end
``````
• edited November 2015 Posts: 56

@dave1707 Thanks for the heads up. Although I believe having a decimal and minus button will over complicate the program. Is there a way to program the division problems to only be even (e.g. 18/6=3)? (No floats just integers)

@Ignatz I haven't tried your code just yet but it looks good. I like keeping things organized so thanks Where would I put the buttons={} chunk of code? Under any function or just at the beginning OR as a new blank file? Also could you possibly do a further example using 2 or 3 buttons? Just so get an idea of what specifics I must put.

I'm going to keep trying at this.

• Mod
Posts: 8,943

@CodingIsLife For whole division, pick 2 numbers so when they're multiplied together is below some limit you set. Then use the multiplied value divided by one of the 2 numbers. The result will be your other number.

• edited November 2015 Posts: 56

@dave1707 That makes sense in my head but I don't know exactly how to code that perfectly. I'm very visual so examples help (in code).

(I understand why that reverse math works)

• Mod
edited November 2015 Posts: 5,396

@CodingIsLife - For the division problem, it's probably best to work backwards from the divisor, ie choose that first.

For example,

1. randomly choose a divisor D between 0 and 50, eg 17
2. calculate how many times N it goes into 99 evenly (which is 5 for 17)
3. randomly choose a number R between 2 and N
4. ask the user to divide D*R by D

Can you figure some of this code out for yourself?

You should put buttons={} just before you start allocating images and positions, and the obvious place for all that code is in setup.

for the button positions, here's the second one

``````buttons[1].pos=vec2(WIDTH/2-250,HEIGHT/2)
``````

(I'm just copying the positions you used in draw)

• Posts: 56

@Ignatz Thanks for the example. That'll help a bunch. I'm sure I can figure out the math.random function. That step-by-step process really helps!

• Mod
Posts: 8,943

@CodingIsLife Here's a simple example. You can adjust the numbers in calc() to fit your needs. Keep taping the screen for another problem.

``````function setup()
calc()
end

function calc()
output.clear()
a=math.random(25)
b=math.random(50,99)//a
print(a*b.." / "..a.." = "..b)
end

function touched(t)
if t.state==BEGAN then
calc()
end
end
``````
• Posts: 56

@dave1707 That works nicely. I would rather have the equations in a text function than print (if that's even possible)

• Posts: 56

@Ignatz This is how I interpreted your comment.

`````` -- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()

buttons={}
for i=0,9 do
buttons[i]={}
buttons[i].img="Project:button"..i
end

buttons[0].pos=vec2(WIDTH/2-150,HEIGHT/2-300)
buttons[1].pos=vec2(WIDTH/2-250, HEIGHT/2)
buttons[2].pos=vec2(WIDTH/2-150,HEIGHT/2)
buttons[3].pos=vec2(WIDTH/2-50, HEIGHT/2)
buttons[4].pos=vec2(WIDTH/2-250,HEIGHT/2-100)
buttons[5].pos=vec2(WIDTH/2-150,HEIGHT/2-100)
buttons[6].pos=vec2(WIDTH/2-50, HEIGHT/2-100)
buttons[7].pos=vec2(WIDTH/2-250,HEIGHT/2-200)
buttons[8].pos=vec2(WIDTH/2-150, HEIGHT/2-200)
buttons[9].pos=vec2(WIDTH/2-50,HEIGHT/2-200)

end

-- This function gets called once every frame
function touched(t)
if t.state==ENDED then --wait for touch to end
local touch=vec2(t.x,t.y)
for i=0,9 do
if touch:dist(buttons[i].pos)<75 then
keyTouched=i
return
print("touch") --just a test to see if it registers the touch
end
end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color
background(40, 40, 50)

for i=0,9 do
sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the "Right" and "Wrong" at the top of the screen
fill(255)
fontSize(48)
text("Right     ",WIDTH/2-100,HEIGHT-50)
text("Wrong     ",WIDTH/2+100,HEIGHT-50)

end
``````
• Mod
Posts: 8,943

@CodingIsLife Here's an example with text added.

``````function setup()
calc()
end

function calc()
output.clear()
a=math.random(25)
b=math.random(50,99)//a
print(a*b.." / "..a.." = "..b)
end

function draw()
background(0)
fill(255)
text(a*b.." / "..a.." = ",WIDTH/2,HEIGHT/2)
end

function touched(t)
if t.state==BEGAN then
calc()
end
end
``````
• Posts: 56

@dave1707 Thanks. Now I just need to randomly generate the operation and display that in an output rect and have an input rect too for the keypad.

• Mod
Posts: 5,396

Yes.

You can make it neater still by putting the button positions into a table, like so

``````local pos={vec2(-150,-300),vec2(-250,0),vec2(-150,0), etc etc}
buttons={}
for i=0,9 do
buttons[i]={} --make subtable for each button
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end
``````

The temporary pos table lists the ten screen positions of the button, leaving out WIDTh and HEIGHT because they are the same for all of them, so we can add them later.

Then our loop that sets the images, can also set the positions, avoiding the need for 10 separate statements.

• edited November 2015 Posts: 56

@Ignatz I've attempted to make the list but when I press the start program button I get to errors. Screenshot line 20 is

buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]

and line 46 is

sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)

``````-- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()

right=0
wrong=0

local pos =     {vec2(-150,-300),vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
buttons={}
for i=0,9 do
buttons[i]={}
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end
end

-- This function gets called once every frame
function touched(t)
if t.state==ENDED then --wait for touch to end
local touch=vec2(t.x,t.y)
for i=0,9 do
if touch:dist(buttons[i].pos)<75 then
keyTouched=i
return
print("touch") --just a test to see if it registers the touch
end
end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color
background(40, 40, 50)

-- This displays the 0-9 keypad
for i=0,9 do
sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the input rectangle correlating with the keypad
rect(WIDTH/2-100, HEIGHT/2-300)

-- This displays the "Right" and "Wrong" at the top of the screen
fill(255)
fontSize(48)
text("Right     ",WIDTH/2-100,HEIGHT-50)
text("Wrong     ",WIDTH/2+100,HEIGHT-50)
rect(WIDTH/2-300, HEIGHT/2+100, 300, 50)

text(right, WIDTH/2-50, HEIGHT-50)
text(wrong, WIDTH/2+175, HEIGHT-50)
end
``````
• Mod
Posts: 5,396

Yes, the problem is that when we set up a table this way, it starts from 1, not 0 as we want. So what we can do is just give it the positions 1 to 9, then add position 0 afterward, like this

``````local pos =     {vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
pos[0]=vec2(-150,-300)
``````
• Posts: 56

I've changed that part of the code and the "Right" & "Wrong" and the rect displays, but the number keypad does not. Although the output sidebar still prints "touch" when I tap on where they'd be.

• Mod
Posts: 5,396

You don't need them anyway, you can draw text numbers instead

``````--to draw them...
fill(255) --NEW
fontSize(24) --NEW
for i=0,9 do
text(i,buttons[i].pos.x,buttons[i].pos.y) --NEW
end
``````
• edited November 2015 Posts: 56

For some reason it works now. I just deleted the sprite(buttons[i].img...) stuff under the draw function and retyped it

• edited November 2015 Posts: 56

Okay so I've added a clear and backspace button. The next thing I want to do is when the buttons are pressed they actually do something ) Also in case you want to see my code (anyone) this is it: (http://imgur.com/69mKCPP)

``````-- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()

right=0
wrong=0

clearButton = "Project:clearButton"
backspaceButton = "Project:backspaceButton"
local pos =     {vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
pos[0]=vec2(-150,-300)

buttons={}
for i=0,9 do
buttons[i]={}
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end
end

-- This function gets called once every frame
function touched(t)
if t.state==ENDED then --wait for touch to end
local touch=vec2(t.x,t.y)
for i=0,9 do
if touch:dist(buttons[i].pos)<75 then
keyTouched=i
return
print("touch") --just a test to see if it registers the touch
end
end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color
background(40, 40, 50)

-- This displays the 0-9 keypad
for i=0,9 do
sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the input rectangle correlating with the keypad
rect(WIDTH/2-100, HEIGHT/2-300)

-- This displays the backspace and clear button
sprite(clearButton, WIDTH/2-250, HEIGHT/2-300, 75)
sprite(backspaceButton, WIDTH/2-50, HEIGHT/2-300, 75)

-- This displays the "Right" and "Wrong" at the top of the screen and the increments
fill(255)
fontSize(48)
text("Right "..right,WIDTH/2-100,HEIGHT-50) -- "Right 0"
text("Wrong "..wrong,WIDTH/2+100,HEIGHT-50) -- "Wrong 0"
rect(WIDTH/2-300, HEIGHT/2+100, 300, 50) -- Input bar

end
``````
• Posts: 18

I've looked up project data and assets. I have pulled in a windmill image with the statement:

sprite("Small World:Windmill",pos._x,_pos.y,75)

And looked at moving data into my global project file on post

Where is @CodingIsLife's project data coming from?

I looked at this post:

http://codea.io/talk/discussion/58/persistent-data

To see that project data is stored in a Data.plist file. When I look up Data.plist I go to an iOS developer page, which is way out of the scope for Codea

• Mod
Posts: 5,396

The data is stored locally on the iPad, so unless he shares the pictures with you, you'll have to make your own, or else just print numbers on the screen instead of pictures (see my code for this a little higher up).

• Posts: 56

Yes I am using my own images. They are straight from either Google or some icon website. I'd be happy to share the images if it allows other people to use the program I'm making

• Posts: 18

@CodingIslife ... I used the wrong Google search the first time I looked for buttons. Found a link to a site http://dabuttonfactory.com/ which should help me experiment with buttons. I will need to do this and will use your program as a template.

I think you have reached a difficult part in your development and recommend that you read http://codeatuts.blogspot.com.au/2012/07/tutorial-5-finite-state-machines.html before attempting the buttons on your own. The user experience for your program is going to be initially a little frustrating for negative numbers I suspect. I am looking forward to seeing your code for presenting answers for addition problems!

@ignatz I have been messing with Codea for a couple of months now and am finally getting a feel for the language. Text and Sprite both use the center of the displayed object making your obj vec2(touch.x,touch.y) ... obj:dist(object location) ... Coding pattern really cool. I've been messing with my own button logic that I drew from the lower left corner, making handling the touch event a lot more complicated. I really appreciate the work you have done with Codea. I hope to be able to discuss graphics with you a little more intelligently real soon now :-bd

• Mod
Posts: 8,943

@CodingIsLife Here's a keyboard that I had that uses built in emoji images, so anyone can use it. It handles BACKSPACE (single triangle), CLEAR (double triangle), ENTER (curly arrow). The * and # buttons do nothing in this example.

``````function setup()
pic={"*️⃣","↩️","#️⃣","◀️","0️⃣","⏪","1️⃣","2️⃣",
"3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣"}
val={-99,-4,-99,-1,0,-2,1,2,3,4,5,6,7,8,9}
rectMode(CENTER)
butt={}
count=0
for y=1,5 do
for x=1,3 do
count=count+1
table.insert(butt,button(100+x*70,200+y*70,70,count))
end
end
value=0
end

function draw()
background(40, 40, 50)
stroke(206, 223, 228, 255)
strokeWidth(5)
fill(0, 176, 255, 255)
rect(240,410,220,360)
for a,b in pairs(butt) do
b:draw()
end
fill(0,176,255,255)
rect(240,620,220,50)
fill(255)
fontSize(40)
fill(255)
text(value,240,620)
end

function touched(t)
for a,b in pairs(butt) do
b:touched(t,a)
end
end

button=class()

function button:init(x,y,w,c)
self.x=x
self.y=y
self.w=w
self.pic=pic[c]
self.keyVal=val[c]
end

function button:draw()
fontSize(65)
fill(255)
text(self.pic,self.x,self.y)
end

function button:touched(t,a)
if t.state==BEGAN then
if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and
t.y>self.y-self.w/2 and t.y<self.y+self.w/2 then
if self.keyVal>=0 then
value=value*10+self.keyVal
elseif self.keyVal==-1 then
value=value//10
elseif self.keyVal==-2 then
value=0
elseif self.keyVal==-4 then
print(value)
value=0
end
end
end
end
``````
• Posts: 56

@dave1707 Code works nicely and it's very appreciated but I'm probably going to stick with my own buttons for my program but I'm sure others can figure out how to add your code into mine

• edited November 2015 Posts: 56

This comment is for anyone to help. I've achieved drawing the sprites where I'd like. The only problem I face now is coding/displaying the math and coding the buttons to do what they should. Any insight is appreciated even if it's an organization tip. (http://imgur.com/qfmVGZN)

``````-- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()
-- Sprites in variables
right=0
wrong=0
clearButton = "Project:clearButton"
backspaceButton = "Project:backspaceButton"
professor = "Project:professor"
speechBubble = "Project:speechBubble"

-- List of positions for the keypad
local pos =     {vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),  vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
pos[0]=vec2(-150,-300)

buttons={}
for i=0,9 do
buttons[i]={}
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end
end

-- This function gets called once every frame
function touched(t)
if t.state==ENDED then --wait for touch to end
local touch=vec2(t.x,t.y)
for i=0,9 do
if touch:dist(buttons[i].pos)<75 then
keyTouched=i
return
print("touch") --just a test to see if it registers the touch
end
end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color
background(40, 40, 50)

-- This displays the 0-9 keypad
for i=0,9 do
sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the input rectangle correlating with the keypad
rect(WIDTH/2-100, HEIGHT/2-300)

-- This displays the backspace and clear button
sprite(clearButton, WIDTH/2-250, HEIGHT/2-300, 75)
sprite(backspaceButton, WIDTH/2-50, HEIGHT/2-300, 75)

-- This displays the "Right" and "Wrong" at the top of the screen and the increments
fill(255)
fontSize(48)
text("Right "..right,WIDTH/2-100,HEIGHT-50) -- "Right 0"
text("Wrong "..wrong,WIDTH/2+100,HEIGHT-50) -- "Wrong 0"
rect(WIDTH/2-300, HEIGHT/2+100, 300, 50) -- Input bar

-- This displays the professor sprite and his speech bubble
sprite(professor, WIDTH/2+225,HEIGHT/2-100, 350, 600)
sprite(speechBubble, WIDTH/2+75, HEIGHT/2+200, 250, 150)
end
``````
• Mod
Posts: 8,943

@CodingIsLife That's fine. I just put this out to show a keyboard using emoji images instead of using local images that others on the forum don't have access to.

• Mod
Posts: 8,943

@CodingIsLife My code above does what you need, but I don't know if you understand or used classes yet. The code in the function button:touched() gets a key value and builds the final value. It also does the backspace, clear, and enter code.

• Posts: 56

@dave1707 Yes I assumed that. It'd be great if I could take the part of your code that does all that button code and merge into my code. Is that possible?

• Mod
Posts: 8,943

@CodingIsLife The exact code won't work, but the way I do the calculations and backspace, clear, enter code should work with your keys.

• Posts: 56

@dave1707 What specific parts of the code should I copy? And is there anything I need to change in yours to work with mine buttons?

• Mod
Posts: 8,943

@CodingIsLife I don't think there anything you could copy and have it work with yours, but the math should work. When you tap a digit (0-9) then value=value*10+digit. That will build value as you key digits. When you hit backspace, then value=value//10. That will remove the rightmost digit. When you hit clear, value=0. When you hit enter, do whatever you need to do with value then move 0 to it.

• Posts: 56

@dave1707 Thanks. Again that makes sense in my mind but I'm not sure how I'd code it. I'm thinking using an if statement and possibly the t.state == ENDED code. Any tips?

• Mod
Posts: 8,943

@CodingIsLife Everything is going to be based on what's touched on the keypad. If you tap the digits, you build the value. If you tap backspace, the rightmost digit is removed. If you tap clear, you move 0 to value. If you tap enter, you compare the value to the answer of your calculation. If they match, you create a new problem. If they don't match, you move 0 to value and the user tries again.

• Posts: 56

@dave1707 Perfect. I believe I know what to do. I'll post an update when I get it working (of if I have any other errors :P )