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.