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.