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}.

Practice

1. In Svelte, which block is used to check a second condition if the first {#if} condition is false?

easy

A. {:else}

B. {#each}

C. {:else if}

D. {#await}

Solution

1. Step 1: Understand the purpose of {#if} and {:else if}

   The {#if} block checks the first condition. If it is false, {:else if} allows checking another condition.

2. Step 2: Identify the correct block for a second condition

   {:else if} is specifically designed to check additional conditions after the first fails.

3. Final Answer:

   {:else if} -> Option C

4. Quick Check:

   Second condition check = {:else if} [OK]

Hint: Use {:else if} to test another condition after {#if} fails [OK]

Common Mistakes:

• Using {:else} to check a condition instead of fallback
• Confusing {#each} with conditional blocks
• Trying to use {#await} for conditions

2. Which of the following is the correct syntax for an else-if block in Svelte?

easy

A. {:elseif condition}

B. {:else if condition}

C. {:else-if condition}

D. {:else if (condition)}

Solution

1. Step 1: Recall Svelte syntax for else-if

   Svelte uses {:else if} followed by the condition without parentheses.

2. Step 2: Compare options to correct syntax

   {:else if condition} matches the correct syntax exactly: {:else if condition}

3. Final Answer:

   {:else if condition} -> Option B

4. Quick Check:

   Correct else-if syntax = {:else if condition} [OK]

Hint: Remember: space between else and if, no parentheses [OK]

Common Mistakes:

• Writing {:elseif} as one word
• Adding parentheses around condition
• Using hyphen in else-if

3. What will be rendered by this Svelte code?

{`\n{#if score >= 90}\n  
Excellent
\n{:else if score >= 60}\n  
Good
\n{:else}\n  
Try again
\n{/if}`}

medium

A. Good

B. Try again

C. Excellent

D. No output

Solution

1. Step 1: Evaluate the first condition

   score is 75, which is not >= 90, so the first {#if} block is false.

2. Step 2: Evaluate the else-if condition

   score is 75, which is >= 60, so {:else if} block is true and renders <p>Good</p>.

3. Final Answer:

   <p>Good</p> -> Option A

4. Quick Check:

   score 75 triggers else-if block = Good [OK]

Hint: Check conditions top-down; first true block renders [OK]

Common Mistakes:

• Assuming all blocks render instead of only one
• Misreading the score value
• Confusing else-if with else

4. Identify the error in this Svelte code snippet:

{`{#if isActive}\n  
Active
\n{:else if}\n  
Inactive
\n{/if}`}

medium

A. Missing condition after {:else if}

B. Incorrect closing tag {/if}

C. Cannot use {:else if} after {#if}

D. Missing colon before else

Solution

1. Step 1: Check {:else if} syntax

   The {:else if} block requires a condition to follow it, but none is provided here.

2. Step 2: Confirm other parts are correct

   The {#if} and {/if} tags are correctly placed, and {:else if} is allowed after {#if}.

3. Final Answer:

   Missing condition after {:else if} -> Option A

4. Quick Check:

   {:else if} needs a condition [OK]

Hint: Always add a condition after {:else if} [OK]

Common Mistakes:

• Leaving {:else if} without condition
• Confusing {:else} with {:else if}
• Misplacing {/if} tag

5. Given this Svelte code:

{`\n{#if status === 'loading'}\n  
Loading...
\n{:else if status === 'success'}\n  
Data loaded
\n{:else if status === 'error'}\n  
Error occurred
\n{:else}\n  
Idle
\n{/if}`}

What will be displayed if status is an empty string?

hard

A. Loading...

B. Data loaded

C. Error occurred

D. Idle

Solution

1. Step 1: Check each condition against empty string

   status is '', so none of the conditions 'loading', 'success', or 'error' match.

2. Step 2: Use {:else} block as fallback

   Since no conditions match, the {:else} block runs, rendering <p>Idle</p>.

3. Final Answer:

   <p>Idle</p> -> Option D

4. Quick Check:

   Empty string triggers else block = Idle [OK]

Hint: If no conditions match, {:else} block runs [OK]

Common Mistakes:

• Assuming empty string matches a condition
• Forgetting {:else} fallback
• Mixing up else-if and else blocks