App Designer basics in MATLAB - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button in App Designer.

MATLAB

app.Button = uibutton(app.UIFigure, '[1]');

Drag options to blanks, or click blank then click option'

A'editfield'

B'push'

C'slider'

D'label'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'slider' instead of 'push' for a button.

Using 'editfield' which is for text input, not buttons.

The 'push' type creates a push button in App Designer.

2fill in blank

medium

Complete the code to set the button text to 'Click Me'.

MATLAB

app.Button.Text = [1];

Drag options to blanks, or click blank then click option'

A'Click Me'

B'Press'

C'Submit'

D'Start'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the quotes around the text string.

Using a different label than requested.

The Text property sets the label shown on the button.

3fill in blank

hard

Fix the error in the callback function definition for the button.

MATLAB

function [1](app, event)
    disp('Button clicked');
end

Drag options to blanks, or click blank then click option'

AButtonPush

BButtonClicked

CButtonPress

DButtonPushed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ButtonClicked' which is not the correct event name.

Using 'ButtonPress' or 'ButtonPush' which are incorrect.

The callback function for a button push event is named 'ButtonPushed'.

4fill in blank

hard

Fill both blanks to create a label and set its position.

MATLAB

app.Label = uilabel(app.UIFigure);
app.Label.Position = [[1] [2] 100 22];

Drag options to blanks, or click blank then click option'

A100

B50

C20

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up x and y coordinates.

Using values too large or too small to see the label.

The label's position is set by [x y width height]. Here x=10 and y=50.

5fill in blank

hard

Fill all three blanks to create a numeric edit field with a default value and label.

MATLAB

app.EditField = uieditfield(app.UIFigure, '[1]');
app.EditField.Value = [2];
app.EditField.Label = '[3]';

Drag options to blanks, or click blank then click option'

Anumeric

B10

CEnter number

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' type instead of 'numeric' for number input.

Setting value as a string instead of a number.

Forgetting to set a label.

The edit field type is 'numeric', default value is 10, and label is 'Enter number'.

Practice

1. What is the main purpose of uifigure in MATLAB App Designer?

easy

A. To add a button to the app

B. To create the main window for the app

C. To display text labels

D. To plot graphs automatically

Solution

1. Step 1: Understand the role of uifigure

   uifigure creates the main window or figure where the app components appear.

2. Step 2: Differentiate from other components

   Buttons and labels are added inside this window but are created with uibutton and uilabel.

3. Final Answer:

   To create the main window for the app -> Option B

4. Quick Check:

   Main window = uifigure [OK]

Hint: Remember: uifigure = app window [OK]

Common Mistakes:

• Confusing uifigure with uibutton or uilabel
• Thinking uifigure creates buttons or labels
• Assuming uifigure plots graphs automatically

2. Which of the following is the correct syntax to create a button in App Designer?

easy

A. btn = uibutton(uifigure, 'Text', 'Click Me');

B. btn = uibutton(uifigure, 'Click Me');

C. btn = uibutton('Text', 'Click Me');

D. btn = uibutton('Click Me');

Solution

1. Step 1: Recall uibutton syntax

   In App Designer, uibutton requires the parent figure as the first argument, then property name-value pairs.

2. Step 2: Check each option

   btn = uibutton(uifigure, 'Text', 'Click Me'); correctly uses uibutton(uifigure, 'Text', 'Click Me'). Others miss the parent or property name.

3. Final Answer:

   btn = uibutton(uifigure, 'Text', 'Click Me'); -> Option A

4. Quick Check:

   Button needs parent + 'Text' property [OK]

Hint: uibutton needs parent and 'Text' property [OK]

Common Mistakes:

• Omitting the parent figure argument
• Passing text without 'Text' property name
• Using wrong argument order

3. What will be the output when the following code runs in App Designer?

fig = uifigure;
lbl = uilabel(fig, 'Text', 'Hello');
lbl.Position = [100 100 100 22];

medium

A. No label appears because uilabel needs a callback

B. An error because Position is not a valid property

C. A label appears but text is empty

D. A label with text 'Hello' appears at position (100,100)

Solution

1. Step 1: Understand label creation

   The code creates a figure, then a label with text 'Hello' inside it.

2. Step 2: Position property sets label location

   Setting Position = [100 100 100 22] places the label at x=100, y=100 with width 100 and height 22.

3. Final Answer:

   A label with text 'Hello' appears at position (100,100) -> Option D

4. Quick Check:

   uilabel + Position sets label location [OK]

Hint: Position sets label location and size [OK]

Common Mistakes:

• Thinking Position is invalid property
• Assuming label text is empty by default
• Believing callback is needed to show label

4. Identify the error in this App Designer code snippet:

fig = uifigure;
btn = uibutton('Text', 'Press');
btn.Position = [50 50 100 30];

medium

A. Missing parent figure argument in uibutton

B. Position property cannot be set for buttons

C. Text property should be set after creating button

D. uifigure must be called after uibutton

Solution

1. Step 1: Check uibutton creation syntax

   uibutton requires the parent figure as the first argument to attach the button to the window.

2. Step 2: Identify missing parent

   The code calls uibutton('Text', 'Press') without specifying fig as parent, causing an error.

3. Final Answer:

   Missing parent figure argument in uibutton -> Option A

4. Quick Check:

   uibutton needs parent figure first [OK]

Hint: Always pass parent figure first to uibutton [OK]

Common Mistakes:

• Forgetting to specify parent figure
• Thinking Position can't be set for buttons
• Calling uifigure after uibutton

5. You want to create a button that changes a label's text to 'Clicked!' when pressed. Which code snippet correctly sets up the callback in App Designer?

hard

A. btn = uibutton(fig, 'Text', 'Press'); btn.Callback = @(btn,event) lbl.Text = 'Clicked!';

B. btn = uibutton(fig, 'Text', 'Press', ButtonPushedFcn, @(btn,event) lbl.Text = 'Clicked!');

C. btn = uibutton(fig, 'Text', 'Press'); btn.ButtonPushedFcn = @(btn,event) lbl.Text = 'Clicked!';

D. btn = uibutton(fig, 'Text', 'Press', 'Callback', @(btn,event) lbl.Text = 'Clicked!');

Solution

1. Step 1: Understand callback property name

   In App Designer, the button's callback is set using the ButtonPushedFcn property, usually assigned after creation.

2. Step 2: Check syntax correctness

   btn = uibutton(fig, 'Text', 'Press'); btn.ButtonPushedFcn = @(btn,event) lbl.Text = 'Clicked!'; correctly creates the button then assigns ButtonPushedFcn with an anonymous function to change label text.

3. Final Answer:

   btn = uibutton(fig, 'Text', 'Press'); btn.ButtonPushedFcn = @(btn,event) lbl.Text = 'Clicked!'; -> Option C

4. Quick Check:

   Set ButtonPushedFcn after button creation [OK]

Hint: Assign ButtonPushedFcn after creating button [OK]

Common Mistakes:

• Using 'Callback' instead of 'ButtonPushedFcn'
• Trying to set callback inside uibutton arguments
• Using wrong property names for callback