Else and else-if blocks in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a message only if isLoggedIn is true.

Svelte

<script>
  let isLoggedIn = true;
</script>

{#if isLoggedIn}
  <p>Welcome back!</p>
[1]

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

A{/else}

B{/each}

C{/await}

D{/if}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {/else} to close an if block

Using {/each} or {/await} incorrectly

In Svelte, an {#if} block must be closed with {/if}.

2fill in blank

medium

Complete the code to add an else block that shows a message when isLoggedIn is false.

Svelte

<script>
  let isLoggedIn = false;
</script>

{#if isLoggedIn}
  <p>Welcome back!</p>
[1]
  <p>Please log in.</p>
{/if}

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

A{:elseif}

B{:else}

C{:else if}

D{:elif}

Attempts:

3 left

💡 Hint

Common Mistakes

Writing else as {:elseif} or {:else if}

Using Python-style elif or else if

In Svelte, the else block is written as {:else} inside an if block.

3fill in blank

hard

Fix the error in the else-if block syntax to check if score is greater than 50.

Svelte

<script>
  let score = 60;
</script>

{#if score > 80}
  <p>Excellent!</p>
{:[1] score > 50}
  <p>Good job!</p>
{:else}
  <p>Keep trying!</p>
{/if}

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

Aelif

Belse if

Celseif

Delseif:

Attempts:

3 left

💡 Hint

Common Mistakes

Writing {:else if} with a space

Using Python's elif or adding colon after elseif

Svelte uses {:elseif condition} without space or colon after 'elseif'.

4fill in blank

hard

Fill both blanks to create a conditional block that shows different messages for status values.

Svelte

<script>
  let status = 'loading';
</script>

{#if status === 'success'}
  <p>Data loaded!</p>
[1] status === 'loading'}
  <p>Loading...</p>
[2]
  <p>Error occurred.</p>
{/if}

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

A{:elseif

B{:else if

C{:else}

D{:elif

Attempts:

3 left

💡 Hint

Common Mistakes

Using {:else if} with space

Using {:elif} which is invalid in Svelte

Use {:elseif condition} for else-if and {:else} for else in Svelte.

5fill in blank

hard

Fill all three blanks to create a nested conditional that checks userRole and isActive.

Svelte

<script>
  let userRole = 'admin';
  let isActive = false;
</script>

{#if userRole === 'admin'}
  {#if isActive}
    <p>Admin active</p>
  [1]
    <p>Admin inactive</p>
  {/if}
[2] userRole === 'guest'}
  <p>Guest user</p>
[3]
  <p>Unknown role</p>
{/if}

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

A{:else}

B{:elseif

Attempts:

3 left

💡 Hint

Common Mistakes

Using {:else if} with space

Mixing up inner and outer else blocks

Nested if uses {:else} inside inner block. Outer block uses {:elseif condition} and {:else}.