Why components are the building blocks in Svelte - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte component code. What will be shown on the page when it runs?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Click me</button>
<p>Count: {count}</p>

A A button labeled 'Click me' and a paragraph showing 'Count: 0' initially, updating the count each click.

B A button labeled 'Click me' but the count never changes from 0 when clicked.

C A button labeled 'Click me' and a paragraph showing 'Count: 1' initially.

D Only a paragraph showing 'Count: 0' with no button visible.

💡 Hint

Think about how the count variable updates and how Svelte reacts to changes.

The component shows a button and a paragraph. Clicking the button runs the increment function, which updates the count variable. Svelte automatically updates the displayed count in the paragraph.

🧠 Conceptual

intermediate

Why are components considered building blocks in Svelte?

Which statement best explains why components are the building blocks in Svelte?

A Components replace the need for HTML and CSS entirely.

B Components are only used to style the page and do not contain logic.

C Components encapsulate markup, styles, and behavior, making code reusable and easier to manage.

D Components are only useful for large applications and not for small projects.

💡 Hint

Think about what a component contains and why that helps developers.

Components group together HTML, CSS, and JavaScript logic. This makes it easier to reuse parts of the UI and keep code organized.

📝 Syntax

advanced

Identify the syntax error in this Svelte component

What is the syntax error in the following Svelte component code?

Svelte

<script>
  let name = 'Alice'
</script>
<h1>Hello {name}</h1>

A Missing semicolon after let declaration causes a syntax error.

B The <script> tag must be self-closing in Svelte.

C Curly braces around {name} are incorrect in Svelte templates.

D No syntax error; the code is valid and will render 'Hello Alice'.

💡 Hint

Check if semicolons are required in Svelte script blocks.

In JavaScript, semicolons are optional. The code is valid and will render 'Hello Alice' correctly.

🔧 Debug

advanced

Why does this Svelte component not update the displayed message?

This component tries to update the message when the button is clicked, but the displayed text never changes. Why?

Svelte

<script>
  let message = 'Hello';
  function update() {
    message = 'Goodbye';
  }
</script>
<p>{message}</p>
<button on:click="update()">Change</button>

A The <p> tag cannot display variables in Svelte.

B The on:click attribute uses quotes and parentheses incorrectly; it should be on:click={update}.

C The function update is missing a return statement.

D The message variable is not reactive and cannot change after initialization.

💡 Hint

Look at how event handlers are attached in Svelte.

In Svelte, event handlers use curly braces without quotes or parentheses. Using quotes and parentheses treats it as a string, so the function is not called.

❓ state_output

expert

What is the final output after clicking the button twice?

Given this Svelte component, what will the paragraph show after clicking the button two times?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
    count += 1;
  }
</script>
<button on:click={increment}>Add Two</button>
<p>Count: {count}</p>

A Count: 4

B Count: 2

C Count: 1

D Count: 0

💡 Hint

Each click adds 2 to count. Two clicks add how much total?

Each click runs increment, adding 2 to count. Two clicks add 4 total, so count becomes 4.