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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Svelte component that displays a greeting.

Svelte

<script>
  let name = "World";
</script>

<h1>Hello, [1]!</h1>

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

Atitle

Bname

Cgreeting

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not declared in the script.

Forgetting to use curly braces to insert variables in the markup.

The variable name holds the greeting name, so we use it inside the curly braces to display the message.

2fill in blank

medium

Complete the code to bind the input value to the name variable in a Svelte component.

Svelte

<script>
  let name = "";
</script>

<input type="text" [1]={name} placeholder="Enter your name" />
<p>Hello, {name}!</p>

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

Abind:value

Bvalue

Cbind:name

Dbind

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value attribute which does not update the variable.

Using incorrect binding syntax like bind:name.

In Svelte, bind:value connects the input's value to the variable, updating it as the user types.

3fill in blank

hard

Fix the error in the Svelte component to correctly import and use a child component named Button.

Svelte

<script>
  import [1] from './Button.svelte';
</script>

<[1] />

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

AButton

Bbutton

CbuttonComponent

DBtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components.

Mismatch between import name and usage tag.

Component names in Svelte must start with a capital letter and match the import name exactly.

4fill in blank

hard

Fill both blanks to create a Svelte component that passes a label prop to a child Button component.

Svelte

<script>
  import Button from './Button.svelte';
  let buttonLabel = "Click me";
</script>

<Button [1]=[2] />

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

Alabel

BbuttonLabel

Ctext

DlabelText

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names that the child component does not expect.

Passing string literals instead of variables.

The Button component expects a prop named label. We pass the variable buttonLabel to it.

5fill in blank

hard

Fill all three blanks to create a Svelte component that conditionally shows a message when showMessage is true and uses a slot for content.

Svelte

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

{#if [1]
  <div aria-live="polite">[2]</div>
{/if}

<slot>[3]</slot>

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

AshowMessage

B"Hello from Svelte!"

C"Default slot content"

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names in the condition.

Forgetting quotes around string content.

Not using slot correctly.

The {#if} block checks showMessage. The message is shown inside the div. The slot shows default content if no content is passed.

Practice

1. Why are components considered the building blocks in Svelte?

easy

A. Because they break the app into small, manageable parts

B. Because they only handle CSS styling

C. Because they replace JavaScript functions

D. Because they are only used for routing

Solution

1. Step 1: Understand the role of components

   Components divide the app into smaller parts that are easier to manage and understand.

2. Step 2: Recognize the benefits of components

   This division helps in reusing code and updating parts without affecting the whole app.

3. Final Answer:

   Because they break the app into small, manageable parts -> Option A

4. Quick Check:

   Components = small parts [OK]

Hint: Components split app into pieces for easy management [OK]

Common Mistakes:

• Thinking components only handle CSS
• Believing components replace JavaScript functions
• Assuming components are only for routing

2. Which of the following is the correct way to define a Svelte component file?

easy

A. A JavaScript file with .js extension only

B. Separate files for HTML, CSS, and JavaScript only

C. A CSS file with .css extension only

D. A file combining HTML, CSS, and JavaScript in one .svelte file

Solution

1. Step 1: Identify Svelte component structure

   Svelte components combine HTML, CSS, and JavaScript in a single .svelte file for simplicity.

2. Step 2: Compare with other options

   Other options separate concerns or use only one language, which is not how Svelte components work.

3. Final Answer:

   A file combining HTML, CSS, and JavaScript in one .svelte file -> Option D

4. Quick Check:

   Svelte = combined file [OK]

Hint: Svelte uses one file for HTML, CSS, JS [OK]

Common Mistakes:

• Thinking Svelte requires separate files for each language
• Confusing Svelte components with plain JS or CSS files
• Assuming components are only JavaScript

3. Given this Svelte component code:

<script>
  export let name = 'Friend';
</script>
<h1>Hello {name}!</h1>

What will be displayed if used as <Greeting name="Anna" />?

medium

A. Hello {name}!

B. Hello Friend!

C. Hello Anna!

D. Error: name not defined

Solution

1. Step 1: Understand prop passing in Svelte

   The component exports a variable name with default 'Friend'. Passing name="Anna" overrides this default.

2. Step 2: Evaluate the rendered output

   The {name} in the template will show 'Anna' because the prop was passed.

3. Final Answer:

   Hello Anna! -> Option C

4. Quick Check:

   Prop passed = displayed value [OK]

Hint: Passed props override defaults in Svelte [OK]

Common Mistakes:

• Ignoring the passed prop and using default
• Thinking {name} prints literally
• Assuming an error occurs without explicit declaration

4. What is wrong with this Svelte component code?

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

medium

A. Missing semicolons cause error

B. Event handler syntax should not use quotes

C. count variable should be exported

D. Function increment must be async

Solution

1. Step 1: Check event handler syntax in Svelte

   In Svelte, event handlers use on:event={handler} without quotes around the handler.

2. Step 2: Identify the error in code

   The code uses on:click="increment()" with quotes, which is incorrect and causes a syntax error.

3. Final Answer:

   Event handler syntax should not use quotes -> Option B

4. Quick Check:

   Event handler = no quotes [OK]

Hint: Use curly braces, no quotes for event handlers [OK]

Common Mistakes:

• Adding quotes around event handlers
• Thinking semicolons are mandatory in Svelte
• Believing variables must be exported to update

5. You want to create a reusable button component in Svelte that changes its label based on a passed prop and applies a CSS style only inside the component. Which of these is the best approach?

hard

A. Create a .svelte file combining HTML, CSS scoped to the component, and export a label prop

B. Write HTML and CSS in separate files and import them into a JavaScript file

C. Use global CSS and hardcode the label inside the component without props

D. Create a JavaScript function that returns HTML string with inline styles

Solution

1. Step 1: Understand Svelte component best practices

   Svelte components combine HTML, CSS scoped locally, and JavaScript in one file, making them reusable and encapsulated.

2. Step 2: Match requirements to approach

   Exporting a label prop allows dynamic text, and scoped CSS ensures styles don't leak outside the component.

3. Final Answer:

   Create a .svelte file combining HTML, CSS scoped to the component, and export a label prop -> Option A

4. Quick Check:

   Reusable + scoped CSS + props = Create a .svelte file combining HTML, CSS scoped to the component, and export a label prop [OK]

Hint: Use .svelte file with props and scoped CSS [OK]

Common Mistakes:

• Using global CSS causing style conflicts
• Hardcoding labels losing reusability
• Separating files unnecessarily in Svelte