📚 Comprehensive Educational Component Library
Interactive Learning Components for Modern Education
Testing 11 educational component types with comprehensive examples
1. TEXT BLOCK
Component Type: TEXT_BLOCK
Learn the basics of accessing an Airtable database using MCP, including key concepts and initial setup.
2. IMAGE GALLERY
Component Type: IMAGE_GALLERY
3. TEXT BLOCK
Component Type: TEXT_BLOCK
Explore the intricacies of querying Airtable databases using MCP, including advanced query techniques and handling JSON responses.
4. SANDBOX CODE
Component Type: SANDBOX_CODE
Code Sandbox
Interactive code editor
Click "Run" to execute code...
5. TEXT BLOCK
Component Type: TEXT_BLOCK
Learn about common mistakes made when querying Airtable databases and how to avoid them.
6. CODE BLOCK
Component Type: CODE_BLOCK
const airtable = require('airtable');
const base = airtable.base('app123456');7. PROCESS FLOW
Component Type: PROCESS_FLOW
Unknown Component
Component type "PROCESS_FLOW" is not supported.
View Component Data
{
"id": 2035,
"section_id": "visual-learning",
"section_name": "Visual Learning: Airtable Structure",
"section_icon": "🖼️",
"section_description": "Diagrams and visual explanations of Airtable's structure and querying process.",
"estimated_time": 15,
"component_type": "PROCESS_FLOW",
"variant": "query-process",
"display_order": 2,
"component_data": {
"steps": [
"Connect to Airtable",
"Formulate query",
"Retrieve data"
]
},
"created_at": "2025-07-30T13:00:54.000000Z",
"updated_at": "2025-07-30T13:00:54.000000Z"
}8. CODE BLOCK
Component Type: CODE_BLOCK
base('Table Name').select({
view: 'Grid view'
}).eachPage((records, fetchNextPage) => {
records.forEach(record => {
console.log('Retrieved', record.get('Field Name'));
});
fetchNextPage();
});9. QUIZ
Component Type: QUIZ
Unknown Component
Component type "QUIZ" is not supported.
View Component Data
{
"id": 2039,
"section_id": "hands-on-practice",
"section_name": "Hands-on Practice: Building Queries",
"section_icon": "🛠️",
"section_description": "Exercises and applications to practice building and executing queries.",
"estimated_time": 25,
"component_type": "QUIZ",
"variant": "query-quiz",
"display_order": 2,
"component_data": {
"questions": [
{
"question": "What is the correct method to retrieve data from Airtable?",
"options": [
"base().select()",
"base().get()",
"base().fetch()"
],
"answer": "base().select()"
}
]
},
"created_at": "2025-07-30T13:00:54.000000Z",
"updated_at": "2025-07-30T13:00:54.000000Z"
}10. BEFORE AFTER
Component Type: BEFORE_AFTER
Unknown Component
Component type "BEFORE_AFTER" is not supported.
View Component Data
{
"id": 2041,
"section_id": "common-mistakes",
"section_name": "Common Mistakes: Avoiding Pitfalls",
"section_icon": "⚠️",
"section_description": "What to avoid when accessing and querying Airtable databases.",
"estimated_time": 10,
"component_type": "BEFORE_AFTER",
"variant": "mistake-correction",
"display_order": 2,
"component_data": {
"before": "base().get()",
"after": "base().select()"
},
"created_at": "2025-07-30T13:00:54.000000Z",
"updated_at": "2025-07-30T13:00:54.000000Z"
}11. VIDEO
Component Type: VIDEO
Unknown Component
Component type "VIDEO" is not supported.
View Component Data
{
"id": 2033,
"section_id": "quick-overview",
"section_name": "Quick Overview: Accessing Airtable",
"section_icon": "⏱️",
"section_description": "Core concepts in accessing Airtable databases via MCP in 5 minutes.",
"estimated_time": 10,
"component_type": "VIDEO",
"variant": "overview",
"display_order": 3,
"component_data": {
"url": "https://www.example.com/overview-video"
},
"created_at": "2025-07-30T13:00:54.000000Z",
"updated_at": "2025-07-30T13:00:54.000000Z"
}