Reactive assignments trigger updates in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Svelte

let count = 0;

function increment() {
  count [1] 1;
}

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

A*=

B-=

C+=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' decreases the count instead of increasing it.

Using '*=' or '/=' changes the count in unintended ways.

Using count += 1 increases the count by one and triggers reactive updates in Svelte.

2fill in blank

medium

Complete the code to trigger a reactive update by reassigning the array after pushing a new item.

Svelte

let items = [];

function addItem(item) {
  items.push(item);
  items = [1];
}

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

Aitems.pop()

Bitems.slice()

Citems.push()

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using items.push() returns the new length, not the array.

Using items.pop() removes an item instead of triggering update.

Reassigning items = items triggers Svelte's reactivity even after mutating the array.

3fill in blank

hard

Fix the error in the reactive assignment to update the object property correctly.

Svelte

let user = { name: 'Alice', age: 25 };

function updateAge(newAge) {
  user.age [1] newAge;
  user = user;
}

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

A+=

B=

C-=

D*=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+=' or '-=' changes the age relative to its current value.

Using '*=' multiplies the age, which is not intended.

Assigning user.age = newAge updates the property, then reassigning user = user triggers the reactive update.

4fill in blank

hard

Fill both blanks to update a nested object property reactively.

Svelte

let settings = { theme: { color: 'blue' } };

function changeColor(newColor) {
  settings.theme.[1] = [2];
  settings = settings;
}

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

Acolor

BnewColor

Ctheme

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'theme' or 'settings' as property names incorrectly.

Assigning the wrong variable to the property.

Assigning settings.theme.color = newColor changes the nested property, then reassigning settings = settings triggers the update.

5fill in blank

hard

Fill all three blanks to update a reactive array element and trigger the update.

Svelte

let scores = [10, 20, 30];

function updateScore(index, value) {
  scores[[1]] = [2];
  scores = [3];
}

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

Aindex

Bvalue

Cscores

Dvalue + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variables or expressions in the blanks.

Not reassigning the array after mutation.

We assign scores[index] = value to update the element, then reassign scores = scores to trigger reactivity.