Challenge - 5 Problems
Svelte If Blocks Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What will this Svelte component render?
Consider this Svelte component code:
What will be rendered in the browser?
<script>
let count = 3;
</script>
{#if count > 5}
<p>Count is greater than 5</p>
{:else if count > 0}
<p>Count is positive but 5 or less</p>
{:else}
<p>Count is zero or negative</p>
{/if}What will be rendered in the browser?
Svelte
<script> let count = 3; </script> {#if count > 5} <p>Count is greater than 5</p> {:else if count > 0} <p>Count is positive but 5 or less</p> {:else} <p>Count is zero or negative</p> {/if}
Attempts:
2 left
💡 Hint
Check the value of count and which condition matches first.
✗ Incorrect
The variable count is 3, which is greater than 0 but not greater than 5. So the {:else if} block runs, rendering 'Count is positive but 5 or less'.
📝 Syntax
intermediate2:00remaining
Identify the syntax error in this Svelte if block
Which option correctly fixes the syntax error in this Svelte code?
{#if isActive}
<p>Active</p>
{:else}
<p>Inactive</p>
{/ifSvelte
{#if isActive}
<p>Active</p>
{:else}
<p>Inactive</p>
{/ifAttempts:
2 left
💡 Hint
Check the closing tag of the if block carefully.
✗ Incorrect
The closing tag {/if} must have a closing brace '}'. The code is missing it, causing a syntax error.
❓ state_output
advanced2:00remaining
What is the output after clicking the button twice?
Given this Svelte component:
What will the paragraph show after clicking the button two times?
<script>
let count = 0;
</script>
{#if count % 2 === 0}
<p>Even count: {count}</p>
{:else}
<p>Odd count: {count}</p>
{/if}
<button on:click={() => count++}>Increment</button>What will the paragraph show after clicking the button two times?
Svelte
<script> let count = 0; </script> {#if count % 2 === 0} <p>Even count: {count}</p> {:else} <p>Odd count: {count}</p> {/if} <button on:click={() => count++}>Increment</button>
Attempts:
2 left
💡 Hint
Count how many times the button increments and check parity.
✗ Incorrect
Starting at 0 (even), after two increments count is 2, which is even, so the even block renders.
🔧 Debug
advanced2:00remaining
Why does this Svelte if block not update on variable change?
This component does not update the displayed text when the button is clicked:
What is the most likely reason the paragraph never appears?
<script>
let visible = false;
function toggle() {
visible = !visible;
}
</script>
{#if visible}
<p>Visible</p>
{/if}
<button on:click={toggle}>Toggle</button>What is the most likely reason the paragraph never appears?
Svelte
<script> let visible = false; function toggle() { visible = !visible; } </script> {#if visible} <p>Visible</p> {/if} <button on:click={toggle}>Toggle</button>
Attempts:
2 left
💡 Hint
Svelte tracks changes to let variables automatically.
✗ Incorrect
In Svelte, reassigning a let variable triggers updates automatically. The code is correct and the paragraph will appear when the button is clicked.
🧠 Conceptual
expert3:00remaining
How does Svelte optimize {#if} blocks during compilation?
Which statement best describes how Svelte handles {#if} blocks when compiling components?
Attempts:
2 left
💡 Hint
Think about how Svelte differs from React in updating the UI.
✗ Incorrect
Svelte compiles {#if} blocks into efficient JavaScript that directly adds or removes DOM elements as needed, avoiding virtual DOM overhead.