Why template syntax renders dynamic content in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the value of name inside the template.

Svelte

<script>
  let name = 'Alice';
</script>

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

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

A{name}

Bname

C$name

D{{name}}

Attempts:

3 left

💡 Hint

Common Mistakes

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

Writing the variable name without braces.

Using a dollar sign before the variable.

In Svelte, you use curly braces {} to insert dynamic values inside the template.

2fill in blank

medium

Complete the code to update the displayed count when the button is clicked.

Svelte

<script>
  let count = 0;
  function increment() {
    count[1];
  }
</script>

<button on:click={increment}>Add</button>
<p>Count: {count}</p>

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

A--

B+=

C++

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using -- which decreases the value.

Using = without adding anything.

Using += without a number.

The ++ operator increases the value by 1, which updates the reactive variable count.

3fill in blank

hard

Fix the error in the reactive statement to update double when count changes.

Svelte

<script>
  let count = 1;
  $: double = count [1] 2;
</script>

<p>Double: {double}</p>

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

A+

B*

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication.

Using division or subtraction which gives wrong results.

The * operator multiplies count by 2 to get double.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates message when name changes.

Svelte

<script>
  let name = 'Bob';
  $: message = [1] + ' is learning Svelte!';
</script>

<p>{message}</p>

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

Aname

B'name'

Cmessage

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string 'name' instead of the variable name.

Using unrelated variables like count or message.

The variable name is used to build the message dynamically.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates greeting using hour and name.

Svelte

<script>
  let hour = 10;
  let name = 'Eve';
  $: greeting = (hour [1] 12) ? 'Good morning, ' + [2] : 'Good evening, ' + [3];
</script>

<p>{greeting}</p>

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

A<

Bname

Cname.toUpperCase()

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using greater than operator which reverses the greeting.

Using name.toUpperCase() which changes the name's appearance.

Using different variables for the greeting.

The condition checks if hour is less than 12 to say good morning. The name variable is used to greet the person.

Practice

1. In Svelte, why do we use curly braces { } inside the template?

easy

A. To write comments that are ignored by the browser

B. To insert dynamic data or expressions into the HTML output

C. To define CSS styles inside the component

D. To declare variables in the script section

Solution

1. Step 1: Understand the role of curly braces in Svelte templates

   Curly braces { } are used to embed JavaScript expressions or variables inside the HTML markup so that their values appear dynamically.

2. Step 2: Differentiate from other uses

   Curly braces are not for comments, CSS, or variable declarations; those have other syntax.

3. Final Answer:

   To insert dynamic data or expressions into the HTML output -> Option B

4. Quick Check:

   Curly braces = dynamic content insertion [OK]

Hint: Curly braces show variables inside HTML [OK]

Common Mistakes:

• Thinking curly braces are for comments
• Confusing with CSS or script syntax
• Using parentheses instead of braces

2. Which of the following is the correct way to display a variable name inside a Svelte template?

easy

A. <p>$(name)</p>

B. <p>{{name}}</p>

C. <p>{name}</p>

D. <p>[name]</p>

Solution

1. Step 1: Recall Svelte's template syntax for variables

   Svelte uses single curly braces { } to insert variables inside HTML.

2. Step 2: Check each option's syntax

   <p>{name}</p> uses {name}, which is correct. Options A, C, and D use invalid or incorrect syntax for Svelte.

3. Final Answer:

   <p>{name}</p> -> Option C

4. Quick Check:

   Use single braces for variables [OK]

Hint: Use single curly braces for variables [OK]

Common Mistakes:

• Using double braces like {{name}}
• Using $() instead of {}
• Using square brackets []

3. Consider this Svelte code snippet:

  <script>
    let count = 3;
  </script>
  <p>Count is {count} now.</p>

What will be rendered on the page?

medium

A. Count is 3 now.

B. Count is {count} now.

C. Count is count now.

D. Syntax error, nothing renders.

Solution

1. Step 1: Identify the variable and its value

   The variable count is set to 3 in the script.

2. Step 2: Understand template rendering

   The template uses {count} which inserts the value 3 into the paragraph.

3. Final Answer:

   Count is 3 now. -> Option A

4. Quick Check:

   Variable value replaces braces [OK]

Hint: Variables inside braces show their current value [OK]

Common Mistakes:

• Thinking braces print variable name literally
• Expecting syntax error from braces
• Confusing variable with string

4. What is wrong with this Svelte template code?

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

medium

A. Missing closing brace '}' after message

B. Variable message is not declared

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

D. Script tag should be outside the component

Solution

1. Step 1: Check the template syntax carefully

   The opening brace { is present but the closing brace } after message is missing.

2. Step 2: Understand consequences of missing brace

   Without the closing brace, Svelte cannot parse the expression, causing a syntax error.

3. Final Answer:

   Missing closing brace '}' after message -> Option A

4. Quick Check:

   Every { must have a matching } [OK]

Hint: Check for matching braces in template expressions [OK]

Common Mistakes:

• Forgetting to close curly braces
• Using double braces instead of single
• Misplacing script tags

5. You want to display a user's full name dynamically in Svelte. You have two variables: firstName and lastName. Which template syntax correctly renders the full name with a space between them?

hard

A. <p>{firstName.concat(' ', lastName)}</p>

B. <p>{firstName, ' ', lastName}</p>

C. <p>{firstName & ' ' & lastName}</p>

D. <p>{firstName + ' ' + lastName}</p>

Solution

1. Step 1: Understand string concatenation in JavaScript expressions

   In Svelte templates, expressions inside braces are JavaScript. Using + concatenates strings correctly.

2. Step 2: Evaluate each option's validity

   <p>{firstName + ' ' + lastName}</p> uses firstName + ' ' + lastName, which is valid. <p>{firstName, ' ', lastName}</p> uses commas which do not concatenate strings. <p>{firstName & ' ' & lastName}</p> uses & which is invalid in JS. <p>{firstName.concat(' ', lastName)}</p> uses concat method correctly with closing parenthesis.

3. Final Answer:

   <p>{firstName + ' ' + lastName}</p> -> Option D

4. Quick Check:

   Use + to join strings inside braces [OK]

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

Common Mistakes:

• Using commas instead of + for concatenation
• Using & instead of +
• Incorrect method calls without parentheses