educational-element-mapper-v1.0.0.js•9.7 kB
/**
* @document Educational Content Element Mapping Engine
* @version 1.0.0
* @status active
* @author Claude Desktop
* @created 2025-06-29
* @last_updated 2025-06-29
* @description Maps educational content types to optimal Composer elements
*/
// =============================================================================
// EDUCATIONAL CONTENT ELEMENT MAPPING ENGINE
// =============================================================================
/**
* Content Element Mapping Rules based on Fotossíntese composition analysis
*/
class EducationalElementMapper {
constructor() {
this.subjectThemes = {
'science': { primary: '#228B22', secondary: '#32CD32', accent: '#F0FFF0' },
'mathematics': { primary: '#4169E1', secondary: '#1E90FF', accent: '#F0F8FF' },
'language_arts': { primary: '#8B4513', secondary: '#D2691E', accent: '#FFF8DC' },
'social_studies': { primary: '#B8860B', secondary: '#DAA520', accent: '#FFFACD' },
'general': { primary: '#2F4F4F', secondary: '#708090', accent: '#F5F5F5' }
};
}
/**
* Map content type to optimal Composer element
*/
mapContentToElement(contentType, content, context = {}) {
const mappings = {
// Headers and Objectives
'learning_objectives': () => this.createObjectivesElement(content, context),
'lesson_introduction': () => this.createHeaderElement(content, context),
'section_header': () => this.createTextHeaderElement(content, context),
// Core Content
'concept_explanation': () => this.createConceptElement(content, context),
'process_description': () => this.createProcessElement(content, context),
'definition': () => this.createDefinitionElement(content, context),
// Structured Content
'ingredient_list': () => this.createNumberedListElement(content, context),
'steps_process': () => this.createNumberedListElement(content, context),
'key_points': () => this.createBulletListElement(content, context),
'checklist': () => this.createCheckboxListElement(content, context),
// Interactive Content
'quiz_multiple_choice': () => this.createQuizElement(content, context),
'quiz_true_false': () => this.createTrueFalseQuizElement(content, context),
'interactive_diagram': () => this.createHotspotElement(content, context),
// Visual Content
'diagram_with_labels': () => this.createImageElement(content, context),
'process_timeline': () => this.createTimelineElement(content, context),
'image_gallery': () => this.createGalleryElement(content, context),
// Assessment
'knowledge_check': () => this.createQuizElement(content, context),
'reflection_questions': () => this.createReflectionElement(content, context),
'summary': () => this.createSummaryElement(content, context)
};
return mappings[contentType] ? mappings[contentType]() : this.createDefaultTextElement(content, context);
}
/**
* Create learning objectives element (based on fotossíntese pattern)
*/
createObjectivesElement(content, context) {
const theme = this.getSubjectTheme(context.subject);
const objectives = Array.isArray(content.objectives) ? content.objectives : [];
const objectivesList = objectives.map(obj =>
`<li><strong>${obj.action}</strong> ${obj.description}</li>`
).join('');
return {
id: this.generateElementId('text-objetivos'),
type: 'text-2',
content_title: 'Objetivos da Aula',
padding_top: 35,
padding_bottom: 35,
background_color: '#FFFFFF',
text: `<h1><span style="color: ${theme.primary}; font-size: 30px;">🎯 Objetivos da Aula</span></h1>
<div style="background: linear-gradient(135deg, ${theme.accent} 0%, #FFFFFF 100%); padding: 25px; border-radius: 15px; border: 3px solid ${theme.primary}; margin: 20px 0;">
<p><span style="font-size: 18px; color: #2F4F4F;">Ao final desta aula, você será capaz de:</span></p>
<ul style="line-height: 1.8; margin-left: 20px; color: #2F4F4F;">${objectivesList}</ul>
<div style="background-color: ${theme.accent}; padding: 15px; border-left: 4px solid ${theme.primary}; margin: 20px 0; border-radius: 5px;">
<p><strong style="color: ${theme.primary};">💡 Curiosidade:</strong>
<span style="color: #2F4F4F;">${content.curiosity || 'Você está pronto para uma jornada de descobertas!'}</span></p>
</div>
</div>`,
dam_assets: []
};
}
/**
* Create header element (based on fotossíntese pattern)
*/
createHeaderElement(content, context) {
const theme = this.getSubjectTheme(context.subject);
return {
id: this.generateElementId('header'),
type: 'head-1',
content_title: 'Cabeçalho Principal',
primary_color: '#FFFFFF',
secondary_color: theme.primary,
category: `<p>${context.subject_display || 'Educação'} - ${context.grade || '7º Ano'}</p>`,
background_image: content.background_image || this.getDefaultBackgroundImage(context.subject),
avatar: content.avatar || this.getDefaultAvatar(),
avatar_border_color: theme.secondary,
author_name: `<p>${content.author || 'Professor Claude'}</p>`,
author_office: `<p>${context.subject_display || 'Educação'}</p>`,
show_category: true,
show_author_name: true,
show_divider: true,
dam_assets: []
};
}
/**
* Create concept explanation element
*/
createConceptElement(content, context) {
const theme = this.getSubjectTheme(context.subject);
return {
id: this.generateElementId('text-conceito'),
type: 'text-2',
content_title: content.title || 'Conceito Principal',
padding_top: 35,
padding_bottom: 35,
background_color: '#FFFFFF',
text: `<h1><span style="color: ${theme.primary}; font-size: 30px;">${content.icon || '🎓'} ${content.title}</span></h1>
<p style="font-size: 18px; line-height: 1.6; color: #2F4F4F;">${content.introduction}</p>
${content.etymology ? `<div style="background-color: #F5F5DC; padding: 20px; border-radius: 10px; margin: 20px 0;">
<h3 style="color: #8B4513; margin-top: 0;">📚 Etimologia da palavra</h3>
<p style="color: #2F4F4F;">${content.etymology}</p>
</div>` : ''}
<p style="color: #2F4F4F;">${content.explanation}</p>`,
dam_assets: []
};
}
/**
* Create numbered list element (for ingredients, steps, etc.)
*/
createNumberedListElement(content, context) {
const theme = this.getSubjectTheme(context.subject);
const items = content.items.map(item => ({
id: this.generateElementId('item'),
text: `<p><strong style="color: ${item.color || theme.secondary};">${item.icon || '•'} ${item.title}</strong><br>
<span style="color: #2F4F4F;">${item.description}</span></p>`,
image: item.image || null,
video: item.video || null
}));
return {
id: this.generateElementId('list-componentes'),
type: 'list-1',
content_title: content.title,
padding_top: 35,
padding_bottom: 35,
background_color: '#FFFFFF',
primary_color: theme.primary,
secondary_color: '#FFFFFF',
items: items,
dam_assets: []
};
}
/**
* Get subject theme colors
*/
getSubjectTheme(subject) {
const subjectMap = {
'ciências': 'science',
'biologia': 'science',
'química': 'science',
'física': 'science',
'matemática': 'mathematics',
'português': 'language_arts',
'história': 'social_studies',
'geografia': 'social_studies'
};
const themeKey = subjectMap[subject?.toLowerCase()] || 'general';
return this.subjectThemes[themeKey];
}
/**
* Generate unique element ID
*/
generateElementId(prefix) {
const timestamp = Date.now().toString().slice(-6);
return `${prefix}-${timestamp}`;
}
/**
* Get default background image for subject
*/
getDefaultBackgroundImage(subject) {
const backgrounds = {
'science': 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1200&h=600&fit=crop&crop=entropy&auto=format',
'mathematics': 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=1200&h=600&fit=crop&crop=entropy&auto=format',
'language_arts': 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=1200&h=600&fit=crop&crop=entropy&auto=format',
'social_studies': 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&h=600&fit=crop&crop=entropy&auto=format'
};
return backgrounds[subject] || backgrounds['science'];
}
/**
* Get default avatar
*/
getDefaultAvatar() {
return 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face&auto=format';
}
/**
* Create default text element
*/
createDefaultTextElement(content, context) {
const theme = this.getSubjectTheme(context.subject);
return {
id: this.generateElementId('text-default'),
type: 'text-2',
content_title: content.title || 'Conteúdo',
padding_top: 35,
padding_bottom: 35,
background_color: '#FFFFFF',
text: `<h2 style="color: ${theme.primary};">${content.title || 'Conteúdo'}</h2>
<p style="color: #2F4F4F; line-height: 1.6;">${content.text || content}</p>`,
dam_assets: []
};
}
}
// Export for use in composition generation
export { EducationalElementMapper };
console.log('✅ Educational Element Mapper loaded');
console.log('🎯 Ready for content-to-element mapping');