Learning Objectives

The Learning Objectives component helps educators clearly communicate what students will achieve in a lesson. It features a clean, professional design with optional interactive progress tracking and supports both traditional array syntax and modern markdown syntax.

Quick Start

Markdown Syntax (Recommended)

The easiest way to use the component is with markdown syntax:

Getting Started

• ➤ Install the Astro Nebula UI package
• ➤ Import the LearningObjectives component
• ➤ Write your objectives using markdown lists
• ➤ Add interactive mode for student progress tracking

---
import { LearningObjectives } from 'astro-nebula-ui';
---

<LearningObjectives title="Getting Started">
- Install the **Astro Nebula UI** package
- Import the `LearningObjectives` component
- Write your objectives using *markdown* lists
- Add `interactive` mode for student progress tracking
</LearningObjectives>

Array Syntax (Traditional)

You can also pass objectives as an array prop:

Web Development Basics

• ➤ Understand HTML structure and semantics
• ➤ Style websites with CSS
• ➤ Add interactivity with JavaScript
• ➤ Deploy your first website

<LearningObjectives
  title="Web Development Basics"
  objectives={[
    "Understand HTML structure and semantics",
    "Style websites with CSS",
    "Add interactivity with JavaScript",
    "Deploy your first website"
  ]}
/>

Interactive Mode

Enable interactive mode to allow students to check off completed objectives and track their progress:

JavaScript Fundamentals

0 of 5

• Learn about variables and data types
• Understand function declarations and expressions
• Master array and object manipulation
• Handle DOM events and user interactions
• Debug code using browser developer tools

<LearningObjectives title="JavaScript Fundamentals" interactive showProgress>
- Learn about **variables** and data types
- Understand *function* declarations and expressions
- Master `array` and `object` manipulation
- Handle DOM events and user interactions
- Debug code using browser developer tools
</LearningObjectives>

Visual Variants

The component supports three different visual styles to match your content design:

Default Variant (Recommended)

Course Overview

• ➤ Complete the foundational modules
• ➤ Practice with hands-on exercises
• ➤ Build a capstone project

Outline Variant

Advanced Topics

• ➤ Implement advanced patterns
• ➤ Optimize for performance
• ➤ Deploy to production environments

Minimal Variant

Quick Reference

• ➤ Review key concepts
• ➤ Practice core skills
• ➤ Apply knowledge

<!-- Default variant - Full styling with background -->
<LearningObjectives title="Course Overview">
- Complete the foundational modules
- Practice with hands-on exercises
- Build a capstone project
</LearningObjectives>

<!-- Outline variant - Accent border, transparent background -->
<LearningObjectives title="Advanced Topics" variant="outline">
- Implement **advanced patterns**
- Optimize for *performance*
- Deploy to `production` environments
</LearningObjectives>

<!-- Minimal variant - Clean, minimal styling -->
<LearningObjectives title="Quick Reference" variant="minimal">
- Review key concepts
- Practice core skills
- Apply knowledge
</LearningObjectives>

Component API

Prop	Type	Default	Description
title	string	"Learning Objectives"	The title displayed at the top of the component
objectives	string[]	[]	Array of objective strings (optional when using markdown)
interactive	boolean	false	Enable checkboxes for progress tracking
variant	"default" | "outline" | "minimal"	"default"	Visual style variant
showProgress	boolean	false	Show progress bar (requires interactive={true})
id	string	auto-generated	Custom ID for localStorage and accessibility

Input Methods

The component supports two flexible ways to provide objectives:

1. Markdown Syntax (Recommended)

Write objectives as a markdown list inside the component body:

<LearningObjectives title="My Lesson">
- First objective with **bold** text
- Second objective with *emphasis*
- Third objective with `code` snippets
</LearningObjectives>

Supported Formatting:

• **text** → Bold text
• *text* → Italic text
• `text` → Code text

2. Array Syntax (Traditional)

Pass objectives as an array prop (useful for dynamic content):

<LearningObjectives
  title="My Lesson"
  objectives={["First objective", "Second objective", "Third objective"]}
/>

Tip

When to use each method:

• Markdown: Best for static content, easier to write and maintain
• Array: Best for dynamic content generated from data or CMS

Real-World Examples

Course Introduction

Course Introduction - What You'll Master

0 of 5

• Navigate the learning platform effectively
• Understand course structure and expectations
• Connect with classmates and instructors
• Set up your development environment
• Complete your first coding exercise

Technical Deep Dive

Database Design Principles

0 of 5

• Design normalized database schemas
• Implement primary and foreign key relationships
• Write efficient SQL queries with proper indexing
• Optimize database performance and query execution
• Handle data integrity constraints and transactions

Quick Reference Card

React Hooks - Key Takeaways

• ➤ Use useState for component state management
• ➤ Apply useEffect for side effects and cleanup
• ➤ Optimize with useMemo and useCallback when needed
• ➤ Create custom hooks for reusable logic

Multiple Learning Modules

The component supports multiple instances on the same page with independent progress tracking:

Module 1: HTML Foundations

• Learn semantic HTML structure
• Master form elements and validation
• Understand accessibility best practices

Module 2: CSS Styling

• Style layouts with Flexbox and Grid
• Create responsive designs with media queries
• Implement CSS animations and transitions

<!-- Each module has independent progress tracking -->
<LearningObjectives title="Module 1: HTML Foundations" interactive id="module-1">
- Learn **semantic** HTML structure
- Master form elements and validation
- Understand `accessibility` best practices
</LearningObjectives>

<LearningObjectives title="Module 2: CSS Styling" interactive id="module-2">
- Style layouts with **Flexbox** and **Grid**
- Create *responsive* designs with media queries
- Implement `CSS animations` and transitions
</LearningObjectives>