NEW
Font size
WorksheetsCode.org App Development Environment Quiz
Total questions: 64
Worksheet time: 32mins
What is the primary function of the buttons labeled "A" in the Code.org App Development Environment?
To toggle between Design Mode and Code Mode
To delete elements from the screen
To run the app
To switch between different projects
What does the dropdown menu labeled "B" allow you to do in the Code.org App Development Environment?
Switch between screens
Change the background color
Add new buttons
Save your project
In the Code.org App Development Environment, what is the purpose of the section labeled "C"?
It is the User Interface (UI) or screen where elements are located
It is the code editor for writing JavaScript
It is the toolbox for adding new elements
It is the area for viewing version history
Suppose you want to preview how your app looks to users and interact with its elements. Which section of the Code.org App Development Environment should you focus on?
The User Interface (UI) screen (Section C)
The Design Toolbox (Section E)
The Properties Panel (Section J)
The Version History (Section K)
Which of the following best describes the function of the "Run" button in a programming environment?
Button to click to initiate running of the program
Button for deleting or duplicating an element
Dropdown menu to switch between screens
Workspace for adjusting properties
What are apps considered as in relation to users and computing devices?
Properties
Interfaces
Elements
Workspaces
Which section of the development environment is used to adjust properties for each element?
Design Toolbox
Workspace
Version History
Dropdown Menu
What is the first thing needed for each element in an app's development environment?
Properties
Unique ID
Instructions
Version History
If a programmer wants to retrieve earlier versions or start over, which feature should they use?
Design Toolbox
Dropdown Menu
Version History
Instructions
Which of the following is NOT a component that makes up an app?
UI's (screens)
Properties
Instructions
Dropdown Menu
A programmer needs to delete or duplicate a specified element. Which button should they use?
Run Button
Delete/Duplicate Button
Version History
Workspace
Why is it important for each element in an app to have a unique ID?
To adjust properties easily
To identify and specify the element uniquely
To switch between screens
To save versions of the work
Which of the following best describes the purpose of the Design Toolbox in a development environment?
Contains elements for app design
Stores version history
Adjusts properties of elements
Provides instructions for programmers
How are apps composed in terms of their structure?
By combining properties and instructions
By using UI's (screens)
By saving versions in version history
By assigning unique IDs
What is the main functionality of a Button element in an app's user interface?
To allow the user to initiate some app action.
To display an image from a URL.
To create an area where the user can draw.
To collect specific input from the user.
Which UI element is used to collect text input from the user?
Text Input
Label
Dropdown
Canvas
What is the purpose of a Label element in an app?
To display titles or words next to other UI elements.
To allow the user to check a box.
To display an image.
To create a drawing area.
Which element allows users to choose one item from a predefined group of options?
Radio Button
Checkbox
Canvas
Image
What does the Checkbox element allow the user to do?
Check a box if they agree with something.
Draw on the screen.
Display a title.
Choose from a dropdown menu.
Which element displays an image from a provided URL?
Image
Button
Dropdown
Label
What is the main use of the Canvas element in a user interface?
To create an area where the user can draw.
To collect text input.
To display a dropdown menu.
To show a privacy statement.
If you want users to select their favorite color from a list of options, which UI element would be most appropriate to use?
Dropdown
Canvas
Image
Label
In an app, you want to display a privacy statement and let users agree to it. Which element should you use to let users indicate their agreement?
Checkbox
Radio Button
Canvas
Image
You are designing a survey app where users need to enter their name, select their gender from a list, and agree to the terms and conditions. Which combination of UI elements would you use for each task?
Text Input for name, Radio Button for gender, Checkbox for agreement
Label for name, Dropdown for gender, Image for agreement
Button for name, Canvas for gender, Label for agreement
Image for name, Checkbox for gender, Dropdown for agreement
Imagine you are creating a drawing app where users can draw and also upload a picture as a background. Which two UI elements would you need to include?
Canvas and Image
Button and Dropdown
Label and Checkbox
Radio Button and Text Input
What is the main purpose of the "Screen" element in a user interface?
To create a new screen.
To display a chart.
To select an image.
To move a slider.
Which UI element is generally used for providing information to the user with pre-entered text?
Chart
Slider
Text Area
Photo Select
What is the function of the "Slider" element in a user interface?
To display a chart
To prompt user to select a value by moving the slider
To create a new screen
To select an image
Why is it important to have sensible names for screens and elements in a user interface?
To make the UI look colorful
To make it easier for programmers and code readers to understand their purposes or functionalities
To increase the speed of the computer
To reduce the number of screens
Which of the following is a way to switch between screens in a user interface?
Use the dropdown menu on top of the UI
Double-click the background
Press the spacebar
Change the theme
Suppose you are designing a user interface and want users to select an image to display using its URL. Which element should you use?
Chart
Photo Select
Slider
Text Area
A programmer is having trouble understanding the purpose of a screen in a UI because it is named "Screen1". What could have helped avoid this confusion?
Using a unique and sensible name for the screen
Adding more sliders
Changing the theme color
Using more charts
Which of the following is a way to switch between elements in an app interface?
Switch to the screen that contains the element and double left-mouse click on the element.
Right-click on the element and select "Switch".
Press the spacebar to toggle between elements.
Use the search bar to find the element.
How can you create a new screen in the app's UI?
Use the dropdown menu on top of UI and click on "New screen..."
Right-click on the workspace and select "Add screen".
Press Ctrl+N on your keyboard.
Drag a screen icon from the toolbox.
What is the correct way to import a screen from another app?
Use the dropdown menu on top of UI and click on "Import screen..."
Copy and paste the screen from another app.
Click the "Import" button in the Design Toolbox.
Drag and drop the screen file into the workspace.
How would you create a new element in the app's UI?
Drag element from the Design Toolbox and drop it on the selected screen.
Click "New Element" in the workspace menu.
Type the element name in the search bar.
Right-click on the screen and select "Add element".
What steps are involved in deleting an existing screen?
Switch to the screen using the dropdown menu, go to the Workspace, click the Delete button on the right side, and confirm.
Right-click on the screen and select "Remove".
Press the Delete key while the screen is selected.
Drag the screen to the trash bin icon.
Suppose you want to delete an existing element from the screen. Which of the following is a possible way to do it?
Use the delete button on the right side of the screen after selecting the element.
Rename the element and it will be deleted.
Move the element to another screen.
Click "Hide" to remove the element.
What is the first step to copy an existing element to multiple screens in a UI workspace?
Switch to the screen the element is on.
Delete the element from the screen.
Adjust the position and size of the element.
Insert a new image element.
Which button should you click to duplicate an element in the workspace?
Duplicate button
Delete button
Save button
Export button
What is the correct sequence to import an image or icon into a workspace?
Switch to the intended screen, insert an image element, provide a name, adjust position and size, use the Choose... hyperlink in the workspace, and select from the popup window.
Insert an image element, adjust position, and save the workspace.
Switch to the intended screen, click delete, and then insert an image element.
Provide a name, adjust position, and export the image.
When importing an image, what are the three options available in the popup window?
My Files, Link to Image, Icons
My Files, Export, Save As
Icons, Delete, Duplicate
Link to Image, Export, Save
Where is the point of origin (0,0) located on the UI for most elements?
Upper left corner of the UI.
Bottom right corner of the UI.
Center of the UI.
Lower left corner of the UI.
In which direction does the x value increase on the UI?
Horizontally to the right.
Vertically down.
Diagonally up.
Horizontally to the left.
How can you obtain the x and y values for an element in Design mode?
Hover the mouse over the element to display x and y values on a popup menu.
Right-click the element and select "Show Coordinates."
Type the element's name in the search bar.
Press the spacebar while selecting the element.
Which of the following is a way to change the name of a screen or an element?
Change the name of the element in the top window.
Double-click the background.
Press the escape key.
Right-click and select "Delete."
How would you change the setup of a screen to an existing template?
Use the Theme dropdown menu in the Design Toolbox to select among existing screen templates.
Drag the screen to the trash bin.
Rename the screen in the properties panel.
Click the "Export" button.
Which method allows you to change the location of an element on a screen?
Use mouse to click, hold and drag the element to the desired location on the screen.
Type the new coordinates in the search bar.
Press the "Enter" key repeatedly.
Change the screen color.
Suppose you want to view all properties associated with an element, including its x and y positions. What should you do?
Left-mouse click the element to bring it into the Workspace, then left-mouse click on the Property button to bring up all properties.
Right-click the element and select "Hide."
Double-click the background.
Press the "Tab" key.
If you need to rename an element but cannot find it in the workspace, what is an alternative way to select it?
Select the element from the dropdown menu in the top right-hand corner of Workspace.
Restart the application.
Change the screen color.
Delete the element and create a new one.
How can you change the size or background color of an element if the option is available?
Adjust the border radius and use the Depth buttons
Adjust width and/or height in the property field, and specify or select a background color
Only use the Depth buttons at the bottom of the workspace
Change the x and y position values only
What property should you change to make the corners of an element smoother, if available?
Border color
Border width
Border radius
Background color
Which of the following steps is necessary to change the border properties of an element?
Change the x and y position values
Adjust properties such as border width, border color, and border radius
Use the Depth buttons to arrange order
Select a new background image
If you want to change the order of multiple overlaid elements on a screen, what should you do?
Change the background color
Use the Depth buttons at the bottom of the workspace
Adjust the border radius
Change the screen resolution
Suppose you want to use an image as the background on a screen. What is the first step you should take?
Change the border color
Navigate to the selected screen
Adjust the border radius
Use the Depth buttons
A designer wants to make the corners of a button more rounded. What should they do, and why does this work?
Increase the border width, which makes the corners rounder
Increase the border radius, which makes the corners rounder
Decrease the background color, which makes the corners rounder
Use the Depth buttons, which makes the corners rounder
You are tasked with overlaying three images and want the second image to appear on top. Describe the process you would follow.
Change the background color of the second image
Use the Depth buttons to move the second image above the others
Adjust the border radius of the second image
Change the x and y position of the second image only
Which menu option should you select in the Workspace to make an image fill the element?
Fill from "fit image" dropdown menu
Resize from "edit" dropdown menu
Crop from "image tools" dropdown menu
Adjust from "settings" dropdown menu
What is one way to enlarge an image to fit the whole screen according to the instructions?
Use the mouse to enlarge the image
Double-click the image
Right-click and select "maximize"
Press the spacebar
If you want to manually set the image to fit the screen, what values should you set for "x position" and "y position"?
0 for both "x position" and "y position"
100 for both "x position" and "y position"
320 for "x position" and 450 for "y position"
50 for both "x position" and "y position"
Suppose you have inserted an image but it does not fill the screen. Describe two different methods you could use to make the image fit the whole screen, based on the instructions.
Use the mouse to enlarge the image or change the position and size values manually
Delete the image and re-insert it, or use the undo button
Copy and paste the image, or use the print screen function
Change the color settings, or rotate the image
Which UI element would you use to allow users to enter text information, such as their name?
Canvas
Image
Text Input
Checkbox
What is the main purpose of the Properties Panel in an app development environment?
To switch between screens
To run the app
To adjust settings and attributes of selected elements
To view version history
Which of the following actions will help organize your app and make it easier to maintain?
Using random colors for all elements
Giving meaningful names to screens and elements
Adding as many elements as possible
Deleting unused screens without renaming
