App Basics
What does UI stand for?
User Interface
Name one type of UI element you can add in design mode?
Button, Label, text area, text input, image, dropdown, addscreen
What does the onEvent block do?
Listens for a user's action and runs code once it happens
what does the setText() command do?
Change the text inside a UI element
What is debugging ?
Finding and fixing errors in code
What's the difference between an app's purpose and its function?
Purpose: Why does the app exist? /What problem is it solving?
Function: What the app actually does
What is the importance of naming UI elements instead of leaving them as "button1" or "text_area1"?
Makes code easier to read and prevents confusion.
Give one example of an event in an app.
Button click, key press, mouse over, screen change, text input
What is the difference between setText() and getText()?
setText: changes
getText: reads the text
What should you check first if your button doesn't work in App Lab?
check the elementID
True or False: Every app needs to solve real-world problems.
false
Why is it important to consider the user experience when designing an app?
So the app is easy to use, intuitive, and enjoyable
What happens if you write multiple onEvent blocks for the same button?
All of them will run when the button is clicked
What command changes an app's screen?
setScreen("screenId");
True or False: Event handlers can only be used with buttons.
False
What do we call the process of brainstorming, designing, prototyping, and testing an app?
The Design Process
What is the difference between a text area and a label?
Text area: displays user input
Explain the difference between an event and an event handler.
Event: the action
Event Handler: the code that runs when the event happens
What command is used to change an image in an app?
setImageURL
Why is it important to use meaningful variable names and element names?
so that your code is readable and easier to debug
In AppLab, what is the difference between design mode and code mode?
Design mode: add and arrange UI elements
Code mode: write code to control how the app works
What is the purpose of an event-driven program in terms of UI design?
It allows the app to respond to user actions (like clicks or typing)
In App Lab, how do you connect a button to make the screen change when clicked?
{
setScreen("screenId");
});
Write the code that changes a label with the ID being scoreLabel to say Game Over! When the button is clicked
onEvent("button", "click", function(){
setText("scoreLabel", "Game Over!");
});
You wrote code for a button click, but nothing happens. Name two possible causes.
wrong element ID, missing onEvent, or code has a syntax error