Why reactivity drives UI updates in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable in Svelte.

Svelte

let count = [1];

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

A"count"

B0

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a number for the initial count.

Leaving the variable uninitialized.

In Svelte, you declare reactive variables with let. Initializing count to 0 sets it as a number that can change and trigger UI updates.

2fill in blank

medium

Complete the code to update the count reactively when a button is clicked.

Svelte

<button on:click={() => count [1] 1}>Increment</button>

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

A/=

B-=

C*=

D+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition.

Forgetting to update the variable inside the arrow function.

The += operator adds 1 to count each time the button is clicked, triggering Svelte's reactive update.

3fill in blank

hard

Fix the error in the reactive statement that doubles the count.

Svelte

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

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 do not double the value.

The * operator multiplies count by 2 to get doubled. This reactive statement updates doubled whenever count changes.

4fill in blank

hard

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

Svelte

<script>
  let count = 0;
  $: message = `Count is [1]` + [2];
</script>

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

A${count}

Bcount

C`!`

D'!'

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain variables without template literals.

Forgetting to wrap punctuation in quotes.

The template literal syntax ${count} inserts the current count value inside the string. Adding '!' appends an exclamation mark to the message.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates doubled and tripled values.

Svelte

<script>
  let count = 0;
  $: doubled = count [1] 2;
  $: tripled = count [2] 3;
  $: total = doubled [3] tripled;
</script>

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition or subtraction instead of multiplication for doubled/tripled.

Using subtraction or division instead of addition for total.

Multiply count by 2 and 3 to get doubled and tripled. Then add them to get total. This shows how reactive variables update automatically.