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.

Practice

1. What does the $: label do in Svelte?

easy

A. It defines a function that runs only once when the component loads.

B. It declares a variable that cannot be changed.

C. It imports external libraries into the component.

D. It creates a reactive statement that updates automatically when dependencies change.

Solution

1. Step 1: Understand the role of $: in Svelte

   The $: label marks a reactive statement that runs whenever its dependencies change.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated features: constants, imports, and lifecycle functions, not reactive statements.

3. Final Answer:

   It creates a reactive statement that updates automatically when dependencies change. -> Option D

4. Quick Check:

   Reactive statements = It creates a reactive statement that updates automatically when dependencies change. [OK]

Hint: Remember: $: means auto-update when data changes [OK]

Common Mistakes:

• Thinking $: declares constants
• Confusing $: with imports or functions
• Believing it runs only once

2. Which of the following is the correct syntax to create a reactive derived value double from count in Svelte?

easy

A. let $double = count * 2;

B. $: double = count * 2;

C. const double = $: count * 2;

D. double = $count * 2;

Solution

1. Step 1: Identify correct reactive syntax

   In Svelte, reactive statements start with $: followed by an assignment. So $: double = count * 2; is correct.

2. Step 2: Check other options for syntax errors

   let $double = count * 2; wrongly uses let $double, which is invalid. const double = $: count * 2; misplaces $:. double = $count * 2; uses $count which is incorrect syntax.

3. Final Answer:

   $: double = count * 2; -> Option B

4. Quick Check:

   Reactive assignment = $: double = count * 2; [OK]

Hint: Reactive statements start with $: followed by assignment [OK]

Common Mistakes:

• Using $ inside variable names
• Placing $: after the variable
• Confusing reactive syntax with normal variable declarations

3. Given the code:

let count = 3;
$: double = count * 2;
count = 5;

What is the value of double after count changes?

medium

A. 10

B. 3

C. 6

D. Undefined

Solution

1. Step 1: Understand reactive update

   Initially, count is 3, so double is 6. When count changes to 5, the reactive statement recalculates double as 5 * 2 = 10.

2. Step 2: Confirm final value of double

   After the update, double is 10, reflecting the latest count.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   double = count * 2 = 10 [OK]

Hint: Reactive values update immediately when dependencies change [OK]

Common Mistakes:

• Assuming double stays at initial value
• Thinking reactive statements run only once
• Confusing variable assignment timing

4. Identify the error in this Svelte code snippet:

let a = 2;
$: b = a + 3
$: c = b * 2;

medium

A. Missing semicolon after b = a + 3 causes syntax error.

B. Reactive statements cannot depend on other reactive variables.

C. No error; code works correctly.

D. Variables a, b, and c must be declared with const.

Solution

1. Step 1: Check syntax and reactive dependencies

   In Svelte, semicolons are optional. Reactive statements can depend on other reactive variables like b.

2. Step 2: Verify variable declarations

   Variables can be declared with let and updated reactively. No need for const here.

3. Final Answer:

   No error; code works correctly. -> Option C

4. Quick Check:

   Reactive chaining allowed = No error; code works correctly. [OK]

Hint: Svelte allows reactive statements to depend on other reactive values [OK]

Common Mistakes:

• Expecting mandatory semicolons
• Believing reactive variables can't chain
• Forcing const declarations unnecessarily

5. You want to create a reactive derived value status that shows "High" if score is above 80, "Medium" if between 50 and 80, and "Low" otherwise. Which Svelte code correctly implements this?

hard

A. $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low';

B. if (score > 80) { status = 'High'; } else if (score >= 50) { status = 'Medium'; } else { status = 'Low'; }

C. let status = $: score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low';

D. $: status = (score > 80 && 'High') || (score > 80 && 'Medium') || 'Low';

Solution

1. Step 1: Check reactive statement syntax

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; uses a single reactive assignment with nested ternary operators, which is valid and concise.

2. Step 2: Evaluate other options

   let status = $: score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; incorrectly combines let and $:. if (score > 80) { status = 'High'; } else if (score >= 50) { status = 'Medium'; } else { status = 'Low'; } uses an if-else block but lacks $: label for reactivity. $: status = (score > 80 && 'High') || (score > 80 && 'Medium') || 'Low'; uses logical operators with duplicate conditions that never produce 'Medium'.

3. Final Answer:

   $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; -> Option A

4. Quick Check:

   Correct reactive ternary = $: status = score > 80 ? 'High' : score >= 50 ? 'Medium' : 'Low'; [OK]

Hint: Use nested ternary inside $: for concise reactive logic [OK]

Common Mistakes:

• Omitting $: for reactive statements
• Mixing let with $: incorrectly
• Using if-else without reactive label