Reactive statements ($:) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive statement that updates double when count changes.

Svelte

<script>
  let count = 0;
  let double;

  $: double = 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 + instead of * will add 2 instead of doubling.

Forgetting the $: reactive statement syntax.

The $: syntax creates a reactive statement in Svelte. Here, double updates automatically when count changes. Multiplying by 2 doubles the value.

2fill in blank

medium

Complete the reactive statement to update message when name changes.

Svelte

<script>
  let name = "";
  let message;

  $: message = `Hello, [1]!`;
</script>

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

Aname

Bmessage

Ccount

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using message inside its own assignment causes errors.

Using unrelated variables like count or user.

The reactive statement updates message using the current value of name. So, name must be inside the template string.

3fill in blank

hard

Fix the error in the reactive statement to correctly update total when price or quantity changes.

Svelte

<script>
  let price = 5;
  let quantity = 3;
  let total;

  $: total = price [1] quantity;
</script>

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

A+

B/

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using + adds price and quantity instead of multiplying.

Using - or / gives incorrect results.

To calculate the total cost, multiply price by quantity. The reactive statement updates total whenever either changes.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates fullName by combining firstName and lastName with a space.

Svelte

<script>
  let firstName = "John";
  let lastName = "Doe";
  let fullName;

  $: fullName = [1] + [2];
</script>

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

AfirstName

B" "

ClastName

DfullName

Attempts:

3 left

💡 Hint

Common Mistakes

Using fullName inside its own assignment causes errors.

Forgetting to add a space between names.

The reactive statement combines firstName and a space " ". The learner still needs to add lastName to complete the full name, but this task focuses on the first two parts.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates fullName by combining firstName, a space, and lastName.

Svelte

<script>
  let firstName = "Jane";
  let lastName = "Smith";
  let fullName;

  $: fullName = [1] + [2] + [3];
</script>

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

AfirstName

B" "

ClastName

DfullName

Attempts:

3 left

💡 Hint

Common Mistakes

Using fullName inside its own assignment.

Forgetting the space between names.

Mixing up the order of names.

This reactive statement concatenates firstName, a space " ", and lastName to update fullName whenever either name changes.