Derived values with $: in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

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

Forgetting the $: reactive label.

Using / or - which changes the meaning.

The $: syntax creates a reactive statement. Here, doubled updates automatically when count changes by multiplying it by 2.

2fill in blank

medium

Complete the code to create a reactive statement that updates message when name changes.

Svelte

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

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

Amessage

Bcount

Cname

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable not defined or unrelated like count.

Using message inside its own definition causing confusion.

Using a variable user which is not declared.

The reactive statement uses name inside the template string to update message whenever name changes.

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;
  $: 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 / changes the meaning and causes wrong results.

The total cost is the product of price and quantity, so the multiplication operator * is needed.

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';
  $: fullName = [1] + [2];
</script>

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

AfirstName + ' '

B' ' + lastName

ClastName

DfirstName

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the space between names.

Concatenating in the wrong order.

Using variables not declared.

The reactive statement concatenates firstName with a space and then lastName to form fullName.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates summary with the uppercase title, the count, and a check if count is greater than 10.

Svelte

<script>
  let title = 'task';
  let count = 12;
  $: summary = `$[1]: $[2] items - $[3]`;
</script>

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

Atitle.toUpperCase()

Bcount

Ccount > 10 ? 'many' : 'few'

Dtitle.toLowerCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using title.toLowerCase() instead of uppercase.

Forgetting to include count in the string.

Not using a conditional expression for the last part.

The reactive statement creates a string showing the uppercase title, the count, and a word indicating if count is many or few based on the condition.