Optional parameters in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Svelte component with an optional parameter name that defaults to 'Guest'.

Svelte

<script>
  export let name = [1];
</script>

<p>Hello, {name}!</p>

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

A"Guest"

BGuest

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the default string value.

Using undefined or null instead of a default string.

The optional parameter name is given a default value of "Guest" using the assignment syntax. This means if no value is passed, it uses "Guest".

2fill in blank

medium

Complete the code to define a Svelte component with an optional number parameter count defaulting to 0.

Svelte

<script>
  export let count = [1];
</script>

<p>Count: {count}</p>

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

Anull

B0

Cundefined

D"0"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the number 0, making it a string.

Leaving the parameter undefined without a default.

The optional parameter count is given a default number value 0. This ensures it is a number, not a string.

3fill in blank

hard

Fix the error in the Svelte component by completing the optional parameter color with a default value of 'blue'.

Svelte

<script>
  export let color [1] 'blue';
</script>

<p style="color: {color}">This text is colored.</p>

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

A:

B=>

C==

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon instead of equals sign.

Using arrow function syntax mistakenly.

In Svelte, to set a default value for a prop, use the equals sign =. The colon or arrow are invalid here.

4fill in blank

hard

Fill both blanks to create a Svelte component with optional parameters title defaulting to 'Welcome' and show defaulting to true.

Svelte

<script>
  export let title = [1];
  export let show = [2];
</script>

{#if show}
  <h1>{title}</h1>
{/if}

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

A"Welcome"

Bfalse

Ctrue

D"Hello"

Attempts:

3 left

💡 Hint

Common Mistakes

Using false instead of true for show, hiding the heading.

Forgetting quotes around the string default.

The title parameter defaults to the string "Welcome" and show defaults to the boolean true. This controls whether the heading shows.

5fill in blank

hard

Fill all three blanks to create a Svelte component with optional parameters user defaulting to 'Guest', age defaulting to 18, and active defaulting to false.

Svelte

<script>
  export let user = [1];
  export let age = [2];
  export let active = [3];
</script>

<p>{user} is {age} years old.</p>
<p>Status: {active ? 'Active' : 'Inactive'}</p>

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

A"Guest"

B18

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using true instead of false for active.

Putting quotes around numbers or booleans.

The user defaults to "Guest" (string), age defaults to 18 (number), and active defaults to false (boolean). This sets clear default states.