Why events drive user interaction in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for a click event on a button.

Svelte

<button on:[1]={() => alert('Clicked!')}>Click me</button>

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

Aclick

Bhover

Csubmit

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'click' will not trigger on button press.

Using 'submit' is for forms, not buttons.

Using 'change' is for input fields, not buttons.

The click event triggers when the user clicks the button.

2fill in blank

medium

Complete the code to update a variable when the input changes.

Svelte

<input type="text" bind:value=[1]>

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

Atext

Bname

CinputValue

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' directly without declaring it.

Using 'text' which is not defined.

Using 'name' which is unrelated here.

Binding value to inputValue updates the variable as the user types.

3fill in blank

hard

Fix the error in the event handler syntax.

Svelte

<button on:click=[1]>Submit</button>

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

AhandleSubmit()

BhandleSubmit

ChandleSubmit();

DhandleSubmit =>

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses calls the function on render, not on event.

Using arrow syntax incorrectly inside the attribute.

Adding semicolons inside the attribute causes syntax errors.

In Svelte, event handlers should be passed as references without parentheses.

4fill in blank

hard

Fill both blanks to create a button that increments a count on click.

Svelte

<script>
  let count = 0;
  function [1]() {
    count [2] 1;
  }
</script>
<button on:click={increment}>Clicked {count} times</button>

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

Aincrement

B+=

C-=

D++

Attempts:

3 left

💡 Hint

Common Mistakes

Using '--' or '-=' decreases the count.

Using '++' alone is not valid syntax in this context.

Mismatching function name and event handler causes errors.

The function increment adds 1 to count using the += operator.

5fill in blank

hard

Fill all three blanks to create an input that updates a message and shows it.

Svelte

<script>
  let [1] = '';
</script>
<input type="text" bind:value=[2] placeholder="Type here">
<p>{ [3] }</p>

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

Amessage

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names causes the display not to update.

Using 'text' instead of 'message' breaks the binding.

Not binding the input value means the variable won't update.

The variable message holds the input text and is displayed inside the paragraph.