If blocks ({#if}) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show the message only if showMessage is true.

Svelte

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

[1] showMessage}
  <p>Hello, Svelte!</p>
{/if}

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

A{#await

B{#each

C{#if

D{#else

Attempts:

3 left

💡 Hint

Common Mistakes

Using {#each} instead of {#if} for conditional rendering.

Forgetting the opening brace { in the block syntax.

The {#if} block in Svelte shows content only when the condition is true.

2fill in blank

medium

Complete the code to show Loading... while loading is true.

Svelte

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

[1] loading}
  <p>Loading...</p>
{/if}

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

A{#if

B{#await

C{#each

D{#else

Attempts:

3 left

💡 Hint

Common Mistakes

Using {#await} which is for promises, not simple booleans.

Using {#else} without a preceding {#if}.

The {#if} block is used to conditionally show content when loading is true.

3fill in blank

hard

Fix the error in the if block syntax to correctly check isVisible.

Svelte

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

[1] isVisible
  <p>Visible content</p>
{/if}

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

A{#if}

B{#if isVisible}

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the condition empty like {#if}.

Not including the closing brace after the condition.

The correct syntax requires the condition inside the braces: {#if isVisible}.

4fill in blank

hard

Fill both blanks to show Yes if answer is true, otherwise show No.

Svelte

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

[1] answer}
  <p>Yes</p>
[2]
  <p>No</p>
{/if}

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

A{#if

B{#else if

C{:else}

D{#else}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {#else} instead of {:else} for the else block.

Forgetting to close the if block with {/if}.

Use {#if condition} to check the condition and {:else} for the alternative content.

5fill in blank

hard

Fill all three blanks to show Loading... if loading is true, Success! if success is true, otherwise show Error.

Svelte

<script>
  let loading = false;
  let success = true;
</script>

[1] loading}
  <p>Loading...</p>
[2] success}
  <p>Success!</p>
[3]
  <p>Error</p>
{/if}

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

A{#if

B{:else if

C{:else}

D{#else}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {#else} instead of {:else} or {:else if}.

Not closing the block properly with {/if}.

Use {#if} for the first condition, {:else if} for the second, and {:else} for the fallback.

Practice

1. What does the {#if} block do in Svelte?

easy

A. It conditionally shows or hides content based on a true or false value.

B. It loops over a list of items to display them.

C. It styles elements with CSS inside the component.

D. It defines a reusable component.

Solution

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

   The {#if} block is used to check a condition and decide if some content should be shown or hidden.

2. Step 2: Compare with other options

   Looping is done with {#each}, styling is done with CSS, and reusable components are separate files or functions.

3. Final Answer:

   It conditionally shows or hides content based on a true or false value. -> Option A

4. Quick Check:

   Conditional display = C [OK]

Hint: If you want to show/hide, think {#if} block [OK]

Common Mistakes:

• Confusing {#if} with loops like {#each}
• Thinking {#if} styles elements
• Mixing {#if} with component creation

2. Which of the following is the correct syntax for an {#if} block in Svelte?

easy

A. {if condition} ... {endif}

B. <if condition> ... </if>

C. {#if condition} ... {/if}

D. {#if condition} ... {#end}

Solution

1. Step 1: Recall Svelte if block syntax

   Svelte uses {#if condition} ... {/if} to start and end an if block.

2. Step 2: Check other options for correctness

   Options A and C use incorrect syntax from other languages or HTML. {#if condition} ... {#end} uses a wrong closing tag.

3. Final Answer:

   {#if condition} ... {/if} -> Option C

4. Quick Check:

   Correct Svelte if syntax = B [OK]

Hint: Remember Svelte uses {/if} to close if blocks [OK]

Common Mistakes:

• Using HTML <if> tags instead of Svelte syntax
• Forgetting the # in {#if}
• Using wrong closing tags like {#end}

3. What will be rendered by this Svelte code?

{`\n{#if loggedIn}\n  
Welcome back!
\n{:else}\n  
Please log in.
\n{/if}`}

medium

A. Welcome back!

B. Please log in.

C. Nothing will be shown

D. Syntax error

Solution

1. Step 1: Check the value of loggedIn

   The variable loggedIn is set to false initially.

2. Step 2: Understand the if-else block behavior

   If loggedIn is true, it shows "Welcome back!"; else it shows "Please log in." Since loggedIn is false, the else block runs.

3. Final Answer:

   <p>Please log in.</p> -> Option B

4. Quick Check:

   loggedIn false shows else block = A [OK]

Hint: False condition shows {:else} content [OK]

Common Mistakes:

• Assuming false shows the if block content
• Ignoring the {:else} block
• Thinking no output if condition false

4. Identify the error in this Svelte code snippet:

{`\n{#if count > 3}\n  
Count is high
\n{:else if count > 1}\n  
Count is medium
\n{:else}\n  
Count is low
\n{/if}`}

medium

A. The syntax {:else if} is invalid in Svelte.

B. The variable count should be declared with const, not let.

C. The closing tag {/if} is missing.

D. There is no error; the code is correct.

Solution

1. Step 1: Check if {:else if} is valid in Svelte

   Svelte supports {:else if} syntax to chain conditions inside {#if} blocks.

2. Step 2: Verify variable declaration and closing tags

   Using let for count is correct for reactive variables. The {/if} closing tag is present.

3. Final Answer:

   There is no error; the code is correct. -> Option D

4. Quick Check:

   Valid else if syntax and proper closure = A [OK]

Hint: Svelte supports {:else if} inside {#if} blocks [OK]

Common Mistakes:

• Thinking {:else if} is invalid syntax
• Forgetting {/if} closing tag
• Confusing let and const for reactive vars

5. You want to display a message only if a user is logged in and has admin rights. Which Svelte {#if} block correctly checks both conditions?

hard

A. {#if loggedIn && isAdmin} Welcome, admin! {/if}

B. {#if loggedIn || isAdmin} Welcome, admin! {/if}

C. {#if loggedIn} {:if isAdmin} Welcome, admin! {/if} {/if}

D. {#if loggedIn | isAdmin} Welcome, admin! {/if}

Solution

1. Step 1: Understand the condition requirements

   The message should show only if both loggedIn and isAdmin are true, so we need a logical AND.

2. Step 2: Evaluate each option's logic

   {#if loggedIn | isAdmin}

   Welcome, admin!

   {/if} uses | bitwise OR which shows if either is true (wrong). {#if loggedIn || isAdmin}

   Welcome, admin!

   {/if} uses || logical OR which means either can be true (wrong). {#if loggedIn} {:if isAdmin}

   Welcome, admin!

   {/if} {/if} uses invalid {:if} syntax. {#if loggedIn && isAdmin}

   Welcome, admin!

   {/if} uses && logical AND which requires both true (correct).

3. Final Answer:

   {#if loggedIn && isAdmin} <p>Welcome, admin!</p> {/if} -> Option A

4. Quick Check:

   Use && for both true conditions [OK]

Hint: Use && to require both conditions true in {#if} [OK]

Common Mistakes:

• Using || instead of && for both conditions
• Using bitwise | instead of logical &&
• Using invalid {:if} syntax