What is Astro - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Astro component.

Astro

---
const title = "Welcome to [1]!";
---
<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

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

AVue

BSvelte

CAstro

DReact

Attempts:

3 left

💡 Hint

Common Mistakes

Using other framework names like React or Vue instead of Astro.

The code sets the title using the Astro framework name. Astro is a modern framework for building fast websites.

2fill in blank

medium

Complete the code to import a component in Astro.

Astro

---
import Header from '[1]';
---
<Header />

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

A./Header.jsx

B./Header.astro

C./Header.js

D./Header.vue

Attempts:

3 left

💡 Hint

Common Mistakes

Importing with '.jsx' or '.js' instead of '.astro'.

Astro components use the .astro file extension. Importing with .astro is correct.

3fill in blank

hard

Fix the error in the Astro component frontmatter syntax.

Astro

---
const message = 'Hello from [1]!'
---
<p>{message}</p>

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

AAstro;

Bastro

CAstro

DAstro!

Attempts:

3 left

💡 Hint

Common Mistakes

Adding semicolons or exclamation marks outside the string incorrectly.

The string should be properly closed and the message assigned correctly. 'Astro!' with exclamation mark inside the string is correct.

4fill in blank

hard

Fill both blanks to create a reactive variable and display it in Astro.

Astro

---
let count = 0;
function increment() {
  count [1] 1;
}
---
<button on:click={increment}>Click me</button>
<p>Count: {count[2]</p>

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

A+=

B-=

C()

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' instead of '+=' to increment.

Using square brackets instead of parentheses for variable display.

Use '+=' to increase count by 1 and '()' to call the variable in JSX-like syntax.

5fill in blank

hard

Fill all three blanks to create a simple Astro page with a title, a script, and a heading.

Astro

---
const title = '[1]';
---
<html>
  <head><title>{title}</title></head>
  <body>
    <h1>[2]</h1>
    <script type='module'>
      console.log('[3]');
    </script>
  </body>
</html>

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

AWelcome to Astro

B{title}

CPage loaded

DHello World

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain text instead of variable for heading.

Logging the wrong message in the script.

The title is set to 'Welcome to Astro', the heading displays the title variable, and the script logs 'Page loaded'.

Practice

1. What is the main purpose of Astro?

easy

A. To design desktop software

B. To create mobile apps only

C. To manage databases efficiently

D. To build fast websites by sending less code to the browser

Solution

1. Step 1: Understand Astro's goal

   Astro focuses on making websites load faster by reducing the amount of code sent to users' browsers.

2. Step 2: Compare options with Astro's purpose

   The options describing desktop software, mobile apps only, and database management are unrelated tasks, which Astro does not specialize in.

3. Final Answer:

   To build fast websites by sending less code to the browser -> Option D

4. Quick Check:

   Astro purpose = fast websites with less code [OK]

Hint: Astro is about fast websites with less browser code [OK]

Common Mistakes:

• Thinking Astro is for mobile apps
• Confusing Astro with database tools
• Assuming Astro builds desktop software

2. Which of the following is a correct way to write an Astro component file?

easy

A. <Component>Hello</Component> <script>export default {};</script>

B. function Component() { return <div>Hello</div>; }

C. <div>Hello</div>

D. <Component>Hello</Component>

Solution

1. Step 1: Identify Astro component structure

   Astro components combine HTML markup with a <script> block exporting default to define behavior.

2. Step 2: Check options for correct Astro syntax

   <Component>Hello</Component> <script>export default {};</script> shows HTML markup with a <script> exporting default, which is correct. <Component>Hello</Component> lacks script, B is React style, C is just HTML without component structure.

3. Final Answer:

   <Component>Hello</Component> <script>export default {};</script> -> Option A

4. Quick Check:

   Astro component = HTML + export default script [OK]

Hint: Astro components need HTML plus export default script [OK]

Common Mistakes:

• Using React function syntax instead of Astro
• Writing only HTML without export default
• Missing the script block in component

3. Given this Astro component code:

<script>
  export let name = 'Friend';
</script>

<h1>Hello, {name}!</h1>

What will be the rendered output if no props are passed?

medium

A. Hello, Friend!

B. Hello, !

C. Hello, {name}!

D. Error: name is undefined

Solution

1. Step 1: Understand default prop value in Astro

   The variable name has a default value 'Friend' if no prop is passed.

2. Step 2: Predict rendered output with default value

   Since no prop is passed, name remains 'Friend', so the output is <h1>Hello, Friend!</h1>.

3. Final Answer:

   <h1>Hello, Friend!</h1> -> Option A

4. Quick Check:

   Default prop used = Hello, Friend! [OK]

Hint: Default props show if no value passed [OK]

Common Mistakes:

• Assuming empty string if no prop
• Expecting error for missing prop
• Rendering literal {name} instead of value

4. Identify the error in this Astro component code:

<script>
  let count = 0;
</script>

<button onClick={() => count++}>Click</button>
<p>Count: {count}</p>

medium

A. The variable 'count' should be declared with 'export let' to update

B. The JSX arrow function syntax is invalid in Astro components

C. The event handler syntax should be 'on:click' instead of 'onClick' in Astro

D. Astro does not support buttons inside components

Solution

1. Step 1: Check event handler syntax in Astro

   Astro uses 'on:event' syntax, so 'onClick' is incorrect and should be 'on:click'.

2. Step 2: Verify other code parts

   Variable declaration is fine; arrow functions are allowed in event handlers; buttons are supported in Astro components.

3. Final Answer:

   The event handler syntax should be 'on:click' instead of 'onClick' in Astro -> Option C

4. Quick Check:

   Astro event syntax = on:event [OK]

Hint: Use 'on:click' not 'onClick' for events in Astro [OK]

Common Mistakes:

• Using React-style 'onClick' instead of 'on:click'
• Thinking variables must be exported to update
• Believing Astro disallows buttons

5. You want to create a simple Astro page that shows a list of names passed as a prop and highlights names longer than 5 letters. Which approach fits best?

hard

A. Use React inside Astro and manage state with useState hook for the list

B. Use an Astro component with a <script> block to receive the list, then use a map in the markup with a condition to add a CSS class for long names

C. Write plain HTML with no scripting and manually highlight names

D. Create a server-side API to filter names before sending to Astro

Solution

1. Step 1: Understand Astro's component capabilities

   Astro supports scripting inside components to receive props and render dynamic lists with conditions.

2. Step 2: Evaluate options for best fit

   Using an Astro component with a <script> block to receive the list, then a map in the markup with a condition to add a CSS class for long names uses Astro's built-in features to map and conditionally style names, which is simple and efficient. Using React inside Astro adds unnecessary complexity, writing plain HTML with no scripting is static, and creating a server-side API is overkill for this task.

3. Final Answer:

   Use an Astro component with a <script> block to receive the list, then use a map in the markup with a condition to add a CSS class for long names -> Option B

4. Quick Check:

   Astro dynamic list with condition = Use an Astro component with a <script> block to receive the list, then use a map in the markup with a condition to add a CSS class for long names [OK]

Hint: Use Astro script + map + condition for dynamic lists [OK]

Common Mistakes:

• Ignoring Astro's scripting and using static HTML
• Adding React unnecessarily inside Astro
• Overcomplicating with server APIs for simple UI