Frame modifier in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the frame width of the Text view to 200 points.

iOS Swift

Text("Hello World")
    .frame(width: [1])

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

A100

B200

C300

D400

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width

Forgetting to use the frame modifier

The frame(width:) modifier sets the width of the view. Here, 200 points is the correct width.

2fill in blank

medium

Complete the code to set both width and height of the Rectangle to 100 points.

iOS Swift

Rectangle()
    .frame(width: [1], height: [2])

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

A50

B200

C150

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for width and height

Omitting one of the parameters

Setting both width and height to 100 points makes the rectangle a square of 100x100.

3fill in blank

hard

Fix the error in the code by completing the frame modifier to set a fixed height of 50 points.

iOS Swift

Circle()
    .frame(height: [1])

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

A"50"

B50.0f

Cfifty

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the number in quotes

Using a string instead of a number

The height parameter expects a number without quotes. Use 50 as a number.

4fill in blank

hard

Fill both blanks to set the frame width to 150 and height to 75 points for the Text view.

iOS Swift

Text("SwiftUI")
    .frame(width: [1], height: [2])

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

A150

B100

C75

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping width and height values

Using the same value for both width and height

The width is set to 150 points and the height to 75 points using the frame modifier.

5fill in blank

hard

Fill all three blanks to create a frame with width 120, height 80, and center alignment.

iOS Swift

Image(systemName: "star")
    .frame(width: [1], height: [2], alignment: [3])

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

A120

B80

C.center

D.leading

Attempts:

3 left

💡 Hint

Common Mistakes

Using alignment without the dot prefix

Mixing up width and height values

The frame is set with width 120, height 80, and the alignment is centered using .center.