text box

Hello

Can I display a text box in Codea.
For example:
The user can enter a number. (IF-structure)
and what is the code please?

thanks!

Does it need to be simple or does it need to look nice?

simple it’s for children (secondary school)
to learn the IF-structure

Ill see what I can do for you, class structure or in main code?

main code
the children learn programming

it are the first lessons…

How’s this:

function setup()
    --Set starting variables of the text box
    pos = vec2(WIDTH/2,HEIGHT-200)
    size = vec2(200,35)
    startertxt = "Enter a number"
    txt = startertxt
    editing = false
    --Create a table to store values in.
    texttbl = {}
end

function touched(t)
    --Localise the position and size, makes variables shorter and quicker in a function
    local p,s = pos,size
    --Check if the touch position (t.x,t.y) is inside the box, we go out half (1/2) the size in
    --each direction to create a box
    if t.x > p.x-s.x/2 and t.x < p.x+s.x/2 and t.y > p.y-s.y/2 and t.y < p.y+s.y/2 then
        --Check that the touch state has began 
        if t.state == BEGAN then
            --Set text editing to true
            editing = true
            --Show the keyboard to start typing
            showKeyboard()
        end
    else
        --The else statement here means that all code below is executed if the touch is outside
        --the text box
        --Check if the touch has began and the text box is being edited.
        if t.state == BEGAN and editing == true then
            --Set editing to false and hide the keyboard
            editing = false
            hideKeyboard()
        end
    end
end

function draw()
    local p,s = pos,size
    background(150,255)
    --Enclose the drawing parameters (strokeWidth,fill,stroke) inside a style 
    pushStyle()
        --Set draw style 
        strokeWidth(5)
        stroke(0,255)
        fill(255,200)
        --Draw box
        rect(p.x-s.x/2,p.y-s.y/2,s.x,s.y)
        --Change text colour according to whether the text box is editing or not.
        if editing == true then
            --Trig coming up, this use of sine allows us to make flashing text.
            local n = math.sin(ElapsedTime*10)*75+25
            fill(50+n,255)
        elseif editing == false then
            fill(50,255)
        end
        --The elseif statement is different to else in the case that if the first statement does 
        --not pass then it will go to the elseif and if the criteria matches the statement it will 
        --execute, but if the first statement does pass, the second will be ignored completely.
        
        --Wrap text if bigger than the size of the box
        textWrapWidth(s.x)
        --Set the draw mode of the text to corner, same as rectangle.
        textMode(CORNER)
        fontSize(20)
        --Draw text
        text(txt,p.x-s.x/2+5,p.y-s.y/2+7.5)
    popStyle() 
    
    for k,v in pairs(texttbl) do
        fill(255,0,0)
        text(v,pos.x,pos.y-s.y/2-30*k)
    end
end

function keyboard(k)
    --If the text box is not being edited then hide the keyboard (if it is still open) and return
    --nothing on the function to stop it being executed any further.
    if editing == false then hideKeyboard() return end
    --Check that the text in the text box is not the same as the default text
    if txt == startertxt then 
        txt = ""
    end
    if k == "\
" then 
        --Stop editing and hide keyboard if the enter key (represented by "\
") is pressed
        editing = false 
        hideKeyboard() 
        --Check if the text entered in the box is not blank
        if txt ~= "" then
            --Add the text to a table then set it back to default
            table.insert(texttbl,txt)
            txt = startertxt
        end
        --The use of return can come in handy when we want to cut functions short, so if the 
        --enter key (\
) is pressed then we wont execute the rest of the keyboard function
        return 
    end
    --Add character to the string 'txt'
    txt = txt..k
    if txt == startertxt or string.sub(txt,1,txt:len()-1) == startertxt then
        txt = k or "" 
    end
    --If the key pressed is the back key the remove the last character from the string
    if k == BACKSPACE then
        txt = string.sub(txt,1,txt:len()-1) 
    end
end

Documented it as well as I could, not the best teacher around…

@AnnSophie Here’s something I posted for someone else, but I don’t remember who.


displayMode(FULLSCREEN)

function setup()
    str = ""
    col=color(255,0,0)    --box color
    x=300    -- position of box x value
    y=500    -- y value
    w=200    -- width of box
    h=50     -- height of box
    l=x-w/2    -- left side of box
    r=x+w/2    -- right side
    b=y-h/2    -- bottom
    t=y+h/2    -- top
end

function draw()
    background(30,30,0,255)
    strokeWidth(6)
    rectMode(CENTER) 
    textMode(CENTER)        
    fill(255)
    text("Tap button then input data",x,700)
    text("Press RETURN to show input",x,650)    
    text("Enter value",x,550)  
    fill(col) 
    rect(x,y,w,h)    -- input area        
    fill(255)
    if keyboardBuffer() ~= nil then
        text(keyboardBuffer(),x,500)    -- show data as it is keyed
    else
        text(str,x,500)    -- show data in input area  
    end
    text(str,x,y-100)   
end

function touched() -- check if input area was touched
    if CurrentTouch.x > l and CurrentTouch.x < r then
        if CurrentTouch.y > b and CurrentTouch.y < t then
            showKeyboard()
            col=color(128,0,0)    -- change color of box
        end
    end
end

function keyboard(key) -- move keyboard buffer to str when return is pressed
    if key == RETURN then
        str = keyboardBuffer()
        hideKeyboard()
        col=color(255,0,0)    -- change color of box
    end
end

it’s to difficult for the children.

I mean…
In Visual Basic you must type:

System.Console.Write (“Type a number:”)

number1 = System.Console.Readline ()

something like that?

You want a premade class then, its harder to create stuff like that than it is on visual

You could use the output pane.

print("Type a number in the box above")
parameter.text("number")

This stores whatever they type as number (but note that it is dynamically updated so there’s no need to press “return”).

I made a calculator app once, if you want, I can share the code, you can only type numbers and the operations, though.

@AnnSophie If you want a basic type language, try “techBASIC”. That might be easier for them to try programming.