Text view and modifiers in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Text view that displays "Hello, SwiftUI!".

iOS Swift

Text([1])

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

AHello, SwiftUI!

B"Hello, SwiftUI!"

CText("Hello, SwiftUI!")

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the quotes around the string

Passing a Text view inside another Text view

The Text view requires a string literal inside quotes to display text.

2fill in blank

medium

Complete the code to make the Text view bold using a modifier.

iOS Swift

Text("Welcome!").[1]()

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

Abold

Bitalic

Cunderline

Dfont

Attempts:

3 left

💡 Hint

Common Mistakes

Using .italic() instead of .bold()

Trying to pass parameters to .bold()

The .bold() modifier makes the text bold.

3fill in blank

hard

Fix the error in the code to change the text color to red.

iOS Swift

Text("Error Fix").foregroundColor([1])

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

A"red"

Bred

CUIColor.red

DColor.red

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string "red" instead of Color.red

Using UIKit UIColor instead of SwiftUI Color

In SwiftUI, colors are specified using the Color struct, like Color.red.

4fill in blank

hard

Fill both blanks to create a Text view with font size 24 and italic style.

iOS Swift

Text("Stylish Text").font(.system(size: [1])).[2]()

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

A24

Bbold

Citalic

Dunderline

Attempts:

3 left

💡 Hint

Common Mistakes

Using .bold() instead of .italic()

Passing font size as a string

Use .font(.system(size: 24)) to set size and .italic() to make text italic.

5fill in blank

hard

Fill all three blanks to create a Text view with blue color, bold font, and underline.

iOS Swift

Text("Decorated").foregroundColor([1]).[2]().[3]()

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

AColor.blue

Bbold

Cunderline

Ditalic

Attempts:

3 left

💡 Hint

Common Mistakes

Using .italic() instead of .underline()

Using string "blue" instead of Color.blue

Use Color.blue for color, .bold() for bold text, and .underline() for underline.

Practice

1. What does the Text view do in SwiftUI?

easy

A. Creates a button for user interaction

B. Displays a string of text on the screen

C. Draws a rectangle shape

D. Plays a video clip

Solution

1. Step 1: Understand the role of Text view

   The Text view is designed to show words or sentences on the screen in SwiftUI.

2. Step 2: Differentiate from other views

   Buttons, shapes, and media players serve different purposes, not displaying plain text.

3. Final Answer:

   Displays a string of text on the screen -> Option B

4. Quick Check:

   Text view = shows text [OK]

Hint: Text view always shows words on screen [OK]

Common Mistakes:

• Confusing Text with Button or Image
• Thinking Text plays media
• Assuming Text draws shapes

2. Which of the following is the correct way to change the font size of a Text view to 24 points?

easy

A. Text("Hello").font(.system(size: 24))

B. Text("Hello").fontSize(24)

C. Text("Hello").setFont(24)

D. Text("Hello").fontSize = 24

Solution

1. Step 1: Recall SwiftUI font modifier syntax

   The correct modifier to set font size is .font(.system(size: value)).

2. Step 2: Check each option

   Only Text("Hello").font(.system(size: 24)) uses the correct SwiftUI syntax. Others are invalid or do not exist.

3. Final Answer:

   Text("Hello").font(.system(size: 24)) -> Option A

4. Quick Check:

   Use .font(.system(size:)) for font size [OK]

Hint: Use .font(.system(size:)) to set font size [OK]

Common Mistakes:

• Using non-existent .fontSize modifier
• Trying to assign fontSize property directly
• Confusing method names

3. What will be the color of the text displayed by this code?

Text("Welcome")
  .foregroundColor(.red)
  .foregroundColor(.blue)

medium

A. Red

B. Purple

C. Blue

D. Black (default)

Solution

1. Step 1: Understand modifier chaining order

   Modifiers apply in order; the last .foregroundColor overrides previous ones.

2. Step 2: Identify final color

   The last color set is .blue, so the text color will be blue.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Last modifier wins = Blue [OK]

Hint: Last color modifier sets the text color [OK]

Common Mistakes:

• Thinking colors combine or blend
• Assuming first modifier applies
• Ignoring modifier order

4. Identify the error in this SwiftUI code snippet:

Text("Hello")
  .font(.title)
  .padding(10, 20)

medium

A. Padding modifier does not accept two numbers like that

B. Text view cannot have modifiers chained

C. Font modifier .title is invalid

D. Padding modifier requires only one argument

Solution

1. Step 1: Check padding modifier syntax

   The .padding() modifier accepts either no arguments, one argument for uniform padding, or a specific edge set with length.

2. Step 2: Analyze given arguments

   Passing two numbers directly like .padding(10, 20) is invalid syntax in SwiftUI.

3. Final Answer:

   Padding modifier does not accept two numbers like that -> Option A

4. Quick Check:

   .padding() needs one argument or edge set [OK]

Hint: Padding takes one value or edges + value [OK]

Common Mistakes:

• Passing multiple numbers directly to padding
• Confusing padding with frame size
• Assuming .title font is invalid

5. You want to create a Text view that shows "SwiftUI Rocks!" in large bold font, colored green, with padding around it. Which code snippet achieves this correctly?

hard

A. Text("SwiftUI Rocks!")
.font(.bold.largeTitle)
.foregroundColor(.green)
.padding()

B. Text("SwiftUI Rocks!")
.font(.largeTitle.bold)
.foregroundColor(.green)
.padding()

C. Text("SwiftUI Rocks!")
.font(.largeTitle)
.foregroundColor(.green.bold())
.padding()

D. Text("SwiftUI Rocks!")
.font(.largeTitle.bold())
.foregroundColor(.green)
.padding()

Solution

1. Step 1: Apply bold to font correctly

   Using .font(.largeTitle.bold()) chains the bold style properly with the font size.

2. Step 2: Set color and padding

   .foregroundColor(.green) sets the text color, and .padding() adds default padding around the text.

3. Step 3: Check other options for errors

   Text("SwiftUI Rocks!") .font(.largeTitle).bold() .foregroundColor(.green) .padding() tries to call .bold() separately which is invalid on Font. Text("SwiftUI Rocks!") .font(.largeTitle) .foregroundColor(.green.bold()) .padding() tries to bold the color, which is incorrect. Text("SwiftUI Rocks!") .font(.bold.largeTitle) .foregroundColor(.green) .padding() uses invalid font syntax.

4. Final Answer:

   Text("SwiftUI Rocks!") .font(.largeTitle.bold()) .foregroundColor(.green) .padding() -> Option D

5. Quick Check:

   Use .font(.largeTitle.bold()) for bold large font [OK]

Hint: Chain .bold() inside .font() for bold text [OK]

Common Mistakes:

• Calling .bold() separately on Text or Font
• Trying to bold the color
• Using invalid font modifier order