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.

Practice

1. In Svelte, how do you display the value of a variable name inside your HTML?

easy

A. Use {name} inside the HTML to show the variable's value.

B. Use <name> tags around the variable.

C. Use $name directly in the HTML.

D. Use $(name) inside the HTML.

Solution

1. Step 1: Understand Svelte's text interpolation syntax

   Svelte uses curly braces {} to insert variables or expressions inside HTML. To display the value of name, write {name} inside the HTML.

2. Final Answer:

   Use {name} inside the HTML to show the variable's value. -> Option A

3. Quick Check:

   Text interpolation = {name} [OK]

Hint: Remember: Curly braces {} show variables in Svelte [OK]

Common Mistakes:

• Using $name instead of {name}
• Trying to use HTML tags like <name>
• Using parentheses like $(name)

2. Which of the following is the correct syntax to show the result of 2 + 3 inside a Svelte component?

easy

A. $(2 + 3)

B. {{2 + 3}}

C. {2 + 3}

D. <2 + 3>

Solution

1. Step 1: Recall Svelte's expression interpolation

   Svelte allows expressions inside curly braces {} to be evaluated and shown. Only {2 + 3} correctly uses curly braces for expression evaluation; others are invalid.

2. Final Answer:

   {2 + 3} -> Option C

3. Quick Check:

   Expression in {} = {2 + 3} [OK]

Hint: Use curly braces {} for expressions, not $ or double braces [OK]

Common Mistakes:

• Using $(2 + 3) which is invalid in Svelte
• Using double curly braces {{}} like in other frameworks
• Using angle brackets around expressions

3. What will be displayed when this Svelte code runs?

<script>
  let count = 5;
</script>
<p>Count is: {count * 2}</p>

medium

A. Count is: 10

B. Count is: count * 2

C. Count is: 5

D. Count is: {count * 2}

Solution

1. Step 1: Evaluate the expression in the component

   The variable count is 5, and count * 2 equals 10, so "Count is: 10" is displayed.

2. Final Answer:

   Count is: 10 -> Option A

3. Quick Check:

   count * 2 = 10 [OK]

Hint: Calculate expressions inside {} before display [OK]

Common Mistakes:

• Showing the expression text instead of its value
• Not multiplying and showing just the variable
• Leaving braces visible in output

4. Identify the error in this Svelte code snippet:

<script>
  let message = 'Hello';
</script>
<p>{message</p>

medium

A. Use parentheses instead of braces (message)

B. Variable 'message' is not declared

C. Curly braces should be double like {{message}}

D. Missing closing brace '}' after {message}

Solution

1. Step 1: Check the interpolation syntax

   The code opens { but lacks closing } after message. Proper syntax is {message}.

2. Final Answer:

   Missing closing brace '}' after {message} -> Option D

3. Quick Check:

   Interpolation needs matching {} [OK]

Hint: Always close your curly braces {} in interpolation [OK]

Common Mistakes:

• Forgetting the closing brace '}'
• Using double braces {{}} which is invalid in Svelte
• Not declaring the variable before use

5. You want to display a user's full name by combining firstName and lastName inside a Svelte component. Which code correctly shows "Full Name: John Doe" if firstName = 'John' and lastName = 'Doe'?

hard

A. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName, ' ', lastName}</p>

B. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName + ' ' + lastName}</p>

C. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName & lastName}</p>

D. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName.concat(lastName)}</p>

Solution

1. Step 1: Identify correct string concatenation

   Svelte evaluates JS expressions in {}. Use +: {firstName + ' ' + lastName} gives "John Doe". Commas invoke comma operator (returns lastName), & is bitwise, concat(lastName) gives "JohnDoe" (no space).

2. Final Answer:

   Full Name: {firstName + ' ' + lastName} -> Option B

3. Quick Check:

   Use + to join strings inside {} [OK]

Hint: Use + to join strings inside {} for full text [OK]

Common Mistakes:

• Using commas instead of + for concatenation
• Using & which is a bitwise operator
• Forgetting space between names