Progressive enhancement in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render initially?

Consider this Svelte component that uses progressive enhancement to show a message only if JavaScript is enabled.

<noscript>Please enable JavaScript to see the message.</noscript>
<script>
  let showMessage = false;
  onMount(() => {
    showMessage = true;
  });
</script>

{#if showMessage}
  <p>JavaScript is enabled!</p>
{/if}

What will the user see if JavaScript is disabled?

Svelte

<noscript>Please enable JavaScript to see the message.</noscript>
<script>
  import { onMount } from 'svelte';
  let showMessage = false;
  onMount(() => {
    showMessage = true;
  });
</script>

{#if showMessage}
  <p>JavaScript is enabled!</p>
{/if}

A The message 'JavaScript is enabled!' is shown.

B No message is shown at all.

C The message 'Please enable JavaScript to see the message.' is shown.

D Both messages are shown simultaneously.

💡 Hint

Think about what the <noscript> tag does when JavaScript is disabled.

The <noscript> tag content is only shown if JavaScript is disabled. Since JavaScript is off, the script block and the conditional block do not run, so only the <noscript> message appears.

❓ state_output

intermediate

What is the final value of count after this Svelte component runs?

This Svelte component increments a counter only if JavaScript is enabled. What is the value of count after the component mounts?

<noscript></noscript>
<script>
  import { onMount } from 'svelte';
  let count = 0;
  onMount(() => {
    count += 1;
  });
</script>

<p>Count: {count}</p>

Svelte

<noscript></noscript>
<script>
  import { onMount } from 'svelte';
  let count = 0;
  onMount(() => {
    count += 1;
  });
</script>

<p>Count: {count}</p>

A 1

B 0

C undefined

D NaN

💡 Hint

Remember when onMount runs in Svelte.

The onMount function runs only when JavaScript is enabled and the component is mounted. It increments count by 1, so the final value is 1.

📝 Syntax

advanced

Which option correctly implements progressive enhancement for a button that works without JavaScript?

You want a button that submits a form normally if JavaScript is disabled, but uses Svelte's event handler when JavaScript is enabled. Which code snippet achieves this?

A <button type="submit" on:click={handleClick}>Submit</button>

B <button type="submit" on:click|preventDefault={handleClick}>Submit</button>

C <button type="button" on:click={handleClick}>Submit</button>

D <button on:click={handleClick}>Submit</button>

💡 Hint

Think about the default behavior of a submit button and how to preserve it when JavaScript is disabled.

Using type="submit" ensures the button submits the form normally when JavaScript is off. Adding on:click={handleClick} enhances it with JavaScript behavior without preventing default submission.

🔧 Debug

advanced

Why does this Svelte progressive enhancement code fail to show the fallback message?

Given this code, the fallback message inside <noscript> does not appear when JavaScript is disabled. Why?

<script>
  let jsEnabled = false;
  onMount(() => {
    jsEnabled = true;
  });
</script>

{#if !jsEnabled}
  <noscript>Please enable JavaScript</noscript>
{/if}

Svelte

<script>
  import { onMount } from 'svelte';
  let jsEnabled = false;
  onMount(() => {
    jsEnabled = true;
  });
</script>

{#if !jsEnabled}
  <noscript>Please enable JavaScript</noscript>
{/if}

A The <noscript> tag cannot be used inside Svelte blocks.

B The <noscript> tag is inside a Svelte conditional, so it never renders when JS is disabled.

C The variable jsEnabled is never updated because onMount does not run without JS.

D The condition !jsEnabled is always false, so the block never shows.

💡 Hint

Consider how <noscript> works and when Svelte renders blocks.

The <noscript> tag only works if it is directly in the HTML. Placing it inside a Svelte conditional means it is controlled by JavaScript rendering, so it won't appear if JS is disabled.

🧠 Conceptual

expert

Which statement best describes progressive enhancement in Svelte applications?

Choose the statement that most accurately explains how progressive enhancement works in Svelte.

A Svelte uses progressive enhancement by disabling JavaScript features if the user prefers reduced motion.

B Svelte apps always require JavaScript; progressive enhancement is not applicable.

C Progressive enhancement in Svelte means loading all components on the server and never using client-side JavaScript.

D Progressive enhancement means providing basic HTML content that works without JavaScript, then enhancing it with Svelte's reactive features when JS is enabled.

💡 Hint

Think about how Svelte can deliver content that works with or without JavaScript.

Progressive enhancement in Svelte means starting with simple HTML that works without JavaScript, then adding interactivity and reactivity when JavaScript is available.