Reactive blocks for side effects in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive block that logs the value of count whenever it changes.

Svelte

<script>
  let count = 0;

  $: [1] {
    console.log('Count is', count);
  }
</script>

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

A:count

B$

C:

DonMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using $ without colon

Trying to use onMount for reactive blocks

Adding variable name after colon like :count

In Svelte, a reactive block starts with $: followed by the code to run when dependencies change.

2fill in blank

medium

Complete the reactive block to update double whenever count changes.

Svelte

<script>
  let count = 1;
  let double;

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

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

Adouble

Bcount

CdoubleCount

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Using count on the left side instead of double

Using a variable name not declared like doubleCount

The reactive statement assigns the new value to double whenever count changes.

3fill in blank

hard

Fix the error in the reactive block that should log message when it changes.

Svelte

<script>
  let message = 'Hello';

  $: [1] {
    console.log(message);
  }
</script>

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

A:message

Bmessage:

C$

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Adding variable name after colon like :message

Using message: which is invalid syntax

The reactive block uses $: without specifying the variable name after colon.

4fill in blank

hard

Fill both blanks to create a reactive block that updates status based on count.

Svelte

<script>
  let count = 0;
  let status = '';

  $: [1] = count > 5 ? 'High' : 'Low';
</script>

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

Astatus

Bcount

Cmessage

Dlevel

Attempts:

3 left

💡 Hint

Common Mistakes

Using count on the left side instead of status

Using undeclared variables like message or level

The reactive block assigns status based on the condition involving count.

5fill in blank

hard

Fill all three blanks to create a reactive block that updates result with the sum of a and b only if enabled is true.

Svelte

<script>
  let a = 1;
  let b = 2;
  let enabled = true;
  let result = 0;

  $: if ([1]) {
    [2] = [3] + b;
  }
</script>

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

Aenabled

Bresult

Ca

Db

Attempts:

3 left

💡 Hint

Common Mistakes

Using b in the condition instead of enabled

Assigning to a or b instead of result

Adding b + b instead of a + b

The reactive block checks if enabled is true, then updates result with the sum of a and b.