Create a Math Game

Questions
1

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! :slight_smile:

2

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

3

Check this for ideas: http://codea.io/talk/discussion/6936/guess-the-number

4

@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.

5

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

6

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.

7

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
8

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.

9

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

10

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.

11

@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
12

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.

13

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…

14

@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.

15

@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 :smiley:

16

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
17

@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.

18

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
19

@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 :slight_smile: 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.

20

@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.