Text interpolation with {} in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the variable name inside the paragraph using Svelte text interpolation.

Svelte

<p>Hello, [1]!</p>

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

A{name}

Bname

C$name

D{{name}}

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the variable name without braces.

Using double curly braces like {{name}} which is not Svelte syntax.

In Svelte, you use curly braces {} to insert variables into the HTML. So {name} will show the value of name.

2fill in blank

medium

Complete the code to show the sum of a and b inside the heading using Svelte interpolation.

Svelte

<h1>The sum is [1]</h1>

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

Aa + b

B{a} + {b}

C{a + b}

Da plus b

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the expression without braces.

Putting braces around each variable separately instead of the whole expression.

To show an expression result in Svelte, wrap the entire expression in curly braces like {a + b}.

3fill in blank

hard

Fix the error in the code to correctly display the user's full name using Svelte interpolation.

Svelte

<p>User: [1]</p>

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

A{user.firstName + ' ' + user.lastName}

Buser.firstName + ' ' + user.lastName

C{user.firstName, user.lastName}

D{user.firstName} {user.lastName}

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to put multiple braces for each variable separately.

Not using braces at all around the expression.

In Svelte, you can use expressions inside curly braces. Concatenate the first and last name inside one set of braces.

4fill in blank

hard

Fill both blanks to create a greeting that shows the user's name and age using Svelte interpolation.

Svelte

<p>Hello, [1]! You are [2] years old.</p>

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

A{user.name}

Buser.age

C{user.age}

Duser.name

Attempts:

3 left

💡 Hint

Common Mistakes

Not using braces for one or both variables.

Using braces incorrectly or missing them.

Use curly braces around variables to show their values. For user.name and user.age, wrap both in braces.

5fill in blank

hard

Fill all three blanks to display a message with the user's uppercase name, current year, and age next year using Svelte interpolation.

Svelte

<p>[1] is [2] years old now and will be [3] next year.</p>

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

A{user.name.toUpperCase()}

B{new Date().getFullYear()}

C{user.age + 1}

Duser.age

Attempts:

3 left

💡 Hint

Common Mistakes

Not wrapping expressions in braces.

Trying to use JavaScript outside of braces.

Use curly braces to insert expressions. You can call functions like toUpperCase() and use JavaScript expressions inside the braces.