Build a complete training course with modules, lesson plans, quizzes, hands-on exercises, and certification criteria for any subject.
This document outlines the comprehensive design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Training Course Builder" platform. The goal is to create an intuitive, powerful, and scalable tool that enables users to effortlessly construct complete training courses, including modules, lesson plans, quizzes, hands-on exercises, and certification criteria, for any subject matter.
The Training Course Builder will provide the following core functionalities:
* Create New Course: Define course title, description, target audience, overall learning objectives.
* Edit/Delete Course: Modify course details or remove a course.
* Course Status: Draft, Published, Archived.
* Course Overview: Dashboard displaying all created courses with their status and key metrics (e.g., number of modules, lessons).
* Add/Edit/Delete Modules: Organize courses into logical sections.
* Reorder Modules: Drag-and-drop functionality for intuitive sequencing.
* Module Description: Provide context for each module.
* Add/Edit/Delete Lessons: Create individual learning units within modules.
* Lesson Types: Support various content types (Text, Video Embed, Quiz, Hands-on Exercise, File Download).
* Reorder Lessons: Drag-and-drop functionality within modules.
* Lesson Content Editor:
* Rich Text Editor (WYSIWYG): For text-based lessons, supporting headings, paragraphs, lists, bold, italics, links, images, tables, code blocks.
* Video Embed: Support for popular platforms (YouTube, Vimeo, custom MP4).
* File Uploads: For supplementary resources (PDFs, documents, spreadsheets).
* Question Types: Multiple Choice (single/multiple answer), True/False, Short Answer, Matching.
* Question Bank: Ability to create and reuse questions across quizzes.
* Quiz Settings: Set passing score, time limits, number of attempts, feedback options (immediate/after completion).
* Automated Grading: For objective questions.
* Answer Explanations: Provide feedback for correct/incorrect answers.
* Exercise Description: Clear instructions and context.
* Submission Methods: Text input, file upload, external link submission.
* Rubric/Evaluation Criteria: Define how exercises will be graded (for manual grading).
* Expected Outcomes: Clearly state what the learner should achieve.
* Flexible Criteria: Define conditions for course completion and certification (e.g., "Complete all modules," "Pass all quizzes with 80% or higher," "Submit all hands-on exercises," "Pass final project").
* Certificate Template Selection: Basic options for certificate design (future enhancement).
* Student View: Toggle to preview the course content exactly as a student would see it.
* Responsive Preview: Check how the course renders on different devices (desktop, tablet, mobile).
* Publish Course: Make the course available to learners.
* Export Options: Generate course content in formats like PDF, SCORM (Shareable Content Object Reference Model) package, or web-ready HTML.
* Database: Relational database (e.g., PostgreSQL, MySQL) for structured data (courses, modules, lessons, users) and potentially NoSQL (e.g., MongoDB) for rich content or activity logs.
* API: RESTful API for communication between frontend and backend.
* Cloud Hosting: Utilize scalable cloud services (AWS, Azure, GCP) for reliability and performance.
* Framework: Modern JavaScript framework (React, Vue, or Angular) for a dynamic and interactive user interface.
* State Management: Efficient handling of application state (e.g., Redux, Vuex, Context API).
Course Table: * course_id (PK)
* title
* description
* target_audience
* learning_objectives (JSON array or text)
* status (Enum: 'draft', 'published', 'archived')
* created_at, updated_at
Module Table: * module_id (PK)
* course_id (FK)
* title
* description
* order_index
Lesson Table: * lesson_id (PK)
* module_id (FK)
* title
* lesson_type (Enum: 'text', 'video', 'quiz', 'exercise', 'file')
* content (JSON or long text, stores rich text, video URL, file_id, quiz_id, exercise_id)
* order_index
Quiz Table: * quiz_id (PK)
* title
* description
* passing_score
* time_limit_minutes (Optional)
* num_attempts (Optional)
* feedback_type (Enum: 'immediate', 'after_completion')
Question Table: * question_id (PK)
* quiz_id (FK)
* question_text
* question_type (Enum: 'mcq_single', 'mcq_multiple', 'true_false', 'short_answer', 'matching')
* options (JSON array for MCQ/Matching)
* correct_answer (JSON array or text)
* explanation
Exercise Table: * exercise_id (PK)
* title
* description
* instructions
* expected_outcome
* submission_method (Enum: 'text', 'file_upload', 'external_link')
* evaluation_criteria (Text or JSON)
Certification Table: * certification_id (PK)
* course_id (FK)
* criteria (JSON or text defining rules)
* template_id (FK to a certificate template)
File Table: * file_id (PK)
* filename
* url (S3, Azure Blob, etc.)
* mime_type
* uploaded_by (FK to User)
* created_at
The following describes key screens and their components.
* Header:
* PantheraHive Logo (top-left).
* User Avatar/Name (top-right, dropdown for settings, logout).
* "Help" button.
* Main Content:
* "My Courses" Title.
* "Create New Course" Button: Prominently displayed.
* Search Bar: Filter courses by title.
* Course Cards/List: Each card represents a course.
* Course Title.
* Short Description.
* Status (Draft/Published/Archived).
* Number of Modules/Lessons.
* "Edit Course" Button.
* "Preview" Button.
* "..." Menu for more options (Duplicate, Archive, Delete).
* Pagination/Scrolling: If many courses exist.
* Header:
* Course Title (editable).
* "Save" Button (with autosave indicator).
* "Preview Course" Button.
* "Publish/Unpublish" Toggle/Button.
* "Settings" (Cog icon for course-level details, certification).
* "Exit Editor" Button.
* Left Sidebar (Course Outline):
* Course Details Section: Course Title, Description, Objectives.
* Module List:
* Each module is expandable/collapsible.
* "Add Module" Button.
* Module Item: Module Title.
* "..." Menu (Edit Module, Delete Module).
* Lesson List (nested under module):
* "Add Lesson" Button.
* Lesson Item: Lesson Title.
* Icon indicating lesson type (text, quiz, exercise).
* "..." Menu (Edit Lesson, Delete Lesson).
* Drag-and-Drop: Enabled for reordering modules and lessons.
* Main Content Area (Editor Panel):
* Contextual Editor: Content changes based on the selected item in the Left Sidebar (Course, Module, Lesson, Quiz, Exercise, Certification).
* Default: Displays Course Overview/Settings when no specific module/lesson is selected.
* Lesson Title Input Field.
* Lesson Type Selector: Dropdown/Tabs (Text, Video, Quiz, Exercise, File).
* Rich Text Editor (WYSIWYG):
* Toolbar with common formatting options (bold, italic, underline, lists, headings, links, images, video embed, tables, code block).
* Main content editing area.
* "Add Resources" Button: Opens a modal for uploading files or linking external resources.
* Save/Cancel Buttons (or rely on autosave).
* Quiz Title Input.
* Quiz Description Textarea.
* Quiz Settings Section:
* Passing Score (percentage input).
* Time Limit (optional, minutes input).
* Number of Attempts (optional, numeric input).
* Feedback Type (radio buttons: Immediate, After Completion).
* "Add Question" Button.
* Question List:
* Each question displayed as a card/block.
* Question Card:
* Question Type selector (Dropdown: MCQ Single, MCQ Multiple, True/False, Short Answer, Matching).
* Question Text Input.
* Specific Inputs based on Type:
* MCQ: "Add Option" button, input fields for options, radio/checkbox for correct answer.
*
This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Training Course Builder" platform. This comprehensive guide will serve as the blueprint for development, ensuring a professional, intuitive, and highly functional tool for creating engaging educational content.
The Training Course Builder is designed to empower educators, instructional designers, and content creators to build and manage comprehensive training courses from scratch.
* Create, edit, delete, duplicate, and archive courses.
* Set course title, description, category, target audience, and learning objectives.
* Define course status (Draft, Published, Archived).
* Assign course creators/contributors.
* Create, edit, delete, and reorder modules within a course.
* Set module title and description.
* Indicate module prerequisites (optional).
* Create, edit, delete, and reorder lessons within modules.
* Support for multiple lesson content types:
* Text/HTML: Rich text editor with formatting options, image embeds, links.
* Video: Embed from platforms (YouTube, Vimeo) or direct upload (with transcoding).
* Audio: Embed or direct upload.
* PDF/Document: Upload and display.
* Interactive Content: SCORM/xAPI package upload, H5P integration (optional).
* Attach supplementary files (e.g., handouts, templates).
* Estimate lesson duration.
* Create quizzes for lessons or modules.
* Support for various question types:
* Multiple Choice (single/multiple correct answers)
* True/False
* Short Answer/Text Input
* Matching
* Drag-and-Drop (e.g., ordering, categorization)
* Set correct answers, provide explanations/feedback.
* Define passing score, time limits, and number of attempts.
* Randomize question order.
* Define exercise instructions, objectives, and expected outcomes.
* Specify submission types (e.g., file upload, text input, URL link).
* Create rubrics or grading criteria for assessment.
* Provide example solutions or reference materials.
* Define requirements for course completion and certification (e.g., complete all modules, pass all quizzes with X%, submit all exercises).
* Design and upload custom certificate templates (with dynamic fields for learner name, course title, date).
* Upload, store, and manage media files (images, videos, audio, documents).
* Categorize and tag assets for easy search and reuse.
* Preview individual lessons, quizzes, exercises, modules, or the entire course from a learner's perspective.
* Control course visibility and availability to learners.
* Track changes to course content, allowing rollback to previous versions.
* Full access to all course builder features.
* Can create, edit, publish, archive any course.
* Manages users and their roles within the builder.
* Can create, edit, and manage courses they are assigned to.
* Can publish courses they create/manage.
* Can create and edit lessons, quizzes, exercises within assigned modules/courses.
* Cannot publish courses or define certification criteria.
* Login to Builder Dashboard.
* Click "Create New Course."
* Enter Course Details (Title, Description, Category).
* Add Modules (Title, Description).
* Within each Module:
* Add Lessons (select content type, add content).
* Add Quizzes (define questions, answers, settings).
* Add Hands-on Exercises (define instructions, criteria).
* Define Certification Criteria.
* Preview Course.
* Publish Course.
* Login to Builder Dashboard.
* Select "My Courses" or search for a course.
* Click "Edit Course."
* Navigate through the course structure (modules, lessons) using a sidebar.
* Select a specific element (lesson, quiz) to edit in the main content area.
* Save Changes (auto-save recommended).
* Republish (if already published) or Publish (if in Draft).
id, title, description, category, status (draft, published, archived), creator_id, created_at, updated_at, learning_objectives, target_audienceid, course_id, title, description, order, prerequisites (array of module IDs)id, module_id, title, content_type (text, video, audio, pdf, scorm), content_data (JSON or URL), order, estimated_duration, attachments (array of asset IDs)id, module_id (or lesson_id), title, description, pass_score, time_limit, max_attempts, randomize_questionsid, quiz_id, question_text, question_type (mcq_single, mcq_multiple, true_false, short_answer, matching), options (JSON array), correct_answer (JSON or string), explanationid, module_id (or lesson_id), title, description, instructions, submission_type (text, file_upload, url), grading_criteria (JSON)id, course_id, title, description, requirements (JSON), template_idid, filename, url, type (image, video, audio, document), uploaded_by, uploaded_atid, name, email, role (admin, creator, contributor)The following descriptions outline the layout and key components for essential screens within the Training Course Builder.
* Left Sidebar (Persistent):
* Navigation: "Dashboard", "My Courses", "Content Library", "Settings", "Help".
* User Profile/Avatar.
* Main Content Area:
* Header: "Welcome, [User Name]!"
* Quick Actions: Large, prominent buttons for "Create New Course", "Upload Content", "View Published Courses".
* Course Overview Cards: Grid or list view of recent courses (e.g., "In Progress," "Drafts," "Published"). Each card shows course title, status, last updated, and quick action buttons (Edit, Preview, Publish).
* Activity Feed (Optional): Recent edits by collaborators, course status changes.
* Left Sidebar (Course Structure Navigator):
* Tree-like collapsible/expandable view of the course:
* Course Title (top level)
* Modules (nested under course)
* Lessons/Quizzes/Exercises (nested under modules)
* + button next to Course/Module for "Add Module" / "Add Lesson/Quiz/Exercise".
* Drag-and-drop functionality for reordering modules/lessons.
* Middle Column (Content Editing Area):
* Dynamic area that changes based on the selected item in the left sidebar.
* If Course Selected: Course details form (Title, Description, Objectives, Category, Certification Criteria).
* If Module Selected: Module title/description editor, module settings.
* If Lesson Selected: Rich Text Editor, media embed options, attachment uploader, lesson duration input.
* If Quiz Selected: Quiz settings (passing score, time limit), list of questions with "Add Question" button.
* If Exercise Selected: Instructions editor, submission type selector, rubric builder.
* Right Sidebar (Contextual Tools/Preview):
* For any selected item: "Save" button (or auto-save indicator), "Preview" button.
* For Course: "Publish/Unpublish" button, "Share" options.
* For Content: "Content Library" access, templating options.
* Quiz Header: Quiz Title, Description, Settings (Pass Score, Time Limit, Attempts, Randomize Questions).
* Question List: Scrollable list of existing questions. Each item shows question type, partial text, and action buttons (Edit, Duplicate, Delete, Reorder handle).
* "Add New Question" Button: Prominently displayed, leading to a modal or inline form.
* Question Editor (Modal/Inline):
* Question Type Selector: Dropdown/radio buttons (MCQ, True/False, Short Answer, Matching).
* Question Text Input: Rich text editor.
* Options Input (for MCQ/Matching): Dynamic input fields for options, radio buttons/checkboxes for correct answer selection.
* Correct Answer Input (for Short Answer): Text field.
* Explanation/Feedback Input: Rich text editor.
* "Save Question" / "Cancel" buttons.
* Header: "Content Library".
* Search Bar & Filters: Filter by type (Image, Video, Document), tags, date uploaded.
* "Upload New Asset" Button: Opens a file upload modal.
* Asset Grid/List View: Displays thumbnails/icons of uploaded assets. Each item shows filename, type, upload date.
* Asset Details (Modal on click): Larger preview, metadata (tags, description), options to edit metadata, delete, or get shareable link.
A professional, accessible, and clean color palette is essential for a productive user experience.
#007bff (or a similar vibrant, trustworthy blue)Usage:* Main call-to-action buttons, primary navigation highlights, active states, brand elements.
#0056b3 (or a slightly darker shade of primary blue/teal)Usage
This document outlines the detailed design specifications, wireframe descriptions, color palettes, and user experience (UX) recommendations for the "Training Course Builder" platform. The goal is to create an intuitive, engaging, and professional learning environment that effectively delivers course content across various subjects.
* Font Family: Montserrat (modern, strong, legible) or Open Sans (clean, versatile).
* Weight: Semi-bold to bold for emphasis.
* Usage: Course titles, module titles, section headers.
* Font Family: Lato (highly readable, friendly) or Roboto (neutral, optimized for screens).
* Weight: Regular.
* Usage: Lesson content, descriptions, instructions, quiz questions.
* Font Family: Inherit from Body Text or a slightly condensed version for efficiency.
* Weight: Medium to Semi-bold for clarity and clickability.
* H1: 32-48px (responsive)
* H2: 24-36px
* H3: 20-28px
* Body Text: 16-18px (optimized for readability)
* Line Height: 1.5-1.6 for body text to improve readability.
* Paragraph Spacing: Consistent spacing between paragraphs (e.g., 1em) for better content breaks.
* Course Thumbnails: Engaging, representative images or custom graphics.
* Lesson Media: Integrated videos, infographics, diagrams.
* Style: Consistent, modern, outlined or filled (flat design preferred).
* Set: Utilize a single, cohesive icon set (e.g., Font Awesome, Material Icons, or a custom set).
* Usage: Navigation, progress indicators, interactive elements (e.g., "next lesson," "play video," "download resource"), feedback (correct/incorrect).
* Primary Action: Solid fill with rounded corners, contrasting text color. Clear hover and active states (e.g., slight darkening/lightening of fill, subtle shadow).
* Secondary Action: Outlined buttons with transparent fill, primary brand color border and text.
* Tertiary/Text Links: Underlined on hover or distinct color.
* Global Navigation: Fixed header or sidebar (responsive), clear active states.
* Course Navigation: Hierarchical list (accordion or expandable tree) showing modules and lessons.
<nav>, <main>, <article>, <aside>) for screen reader compatibility.The following describes key screens and their layout, focusing on functionality and information hierarchy.
* Logo (left), Search bar (center/right), User profile/avatar (far right with dropdown for settings, logout).
* Global navigation (e.g., "Dashboard", "Browse Courses", "My Certificates").
* "Continue Learning" Section: Prominently displays the most recently accessed course with a large "Continue" button and progress bar.
* "My Courses" Section:
* Each course represented by a card: Course thumbnail, title, instructor, current progress bar, "Resume" or "Start Course" button.
* Filtering/sorting options (e.g., "In Progress", "Completed", "Newest").
* "Announcements/Updates" (Optional): Small section for platform-wide or course-specific notifications.
* Large course title, instructor name, short description.
* "Enroll/Start Course" button, "Add to Wishlist" (if applicable).
* Course statistics (e.g., "X students enrolled", "Y hours of content").
* "About This Course": Detailed description, learning objectives, target audience.
* "Course Modules": Expandable list of modules. Each module shows its title, number of lessons, and estimated time. Clicking expands to show lesson titles.
* "Instructor Bio": Photo, name, brief bio, social links.
* "Reviews" (Optional): User ratings and testimonials.
* Course image/video preview.
* Price/Enrollment options.
* Key features/benefits (e.g., "Downloadable Resources", "Certificate of Completion").
* Course Title: At the top.
* Module List: Expandable list.
* Each module: Title, progress indicator.
* Each lesson: Title, icon indicating lesson type (video, text, quiz, exercise), completion status (checkmark/empty circle).
* Current lesson highlighted.
* Lesson Title: Prominent.
* Content Display:
* Video Lessons: Large embedded video player, controls.
* Text Lessons: Rich text editor content, images, code blocks.
* Interactive Elements: Embedded simulations, interactive diagrams.
* Resources Section: Downloadable files, external links.
* Discussion/Comments (Optional): Area below content.
* Navigation Buttons: "Previous Lesson", "Next Lesson", "Mark as Complete" (if not automatic).
* Question text (clear and concise).
* Associated media (image, video) if relevant.
* Answer options: Radio buttons (single choice), checkboxes (multiple choice), text input (short answer), dropdowns.
* Feedback (after submission/per question): Green for correct, red for incorrect, explanation.
* Detailed step-by-step instructions.
* Required tools/software.
* Expected outcome/deliverables.
* Reference materials (links, code snippets).
* Code Editor (for programming exercises): Syntax highlighting, line numbers.
* File Upload: Drag-and-drop or browse functionality.
* Text Input: For written responses or reports.
* Preview Area (if applicable): For design or web development tasks.
* High-resolution image of the certificate, clearly showing:
* Course Title
* Learner's Name
* Date of Completion
* Instructor/Institution Signature/Logo
* Unique Certificate ID (for verification)
* Options to "Download PDF", "Share to LinkedIn", "Print".
The chosen palettes aim for professionalism, readability, and a modern feel, with flexibility for client branding.
#0056B3 (A professional, deep blue - often associated with trust and knowledge)* Usage: Main CTA buttons, active navigation states, primary headers, brand accents.
#007BFF (A slightly brighter, more vibrant blue)* Usage: Hover states for primary buttons, progress bar fill, key highlights.
#28A745 (A confident, engaging green)* Usage: Success messages, completion indicators, positive feedback.
#F8F9FA (Very light grey - clean, minimal background for main content areas)#FFFFFF (Pure white - for content cards, modals, lesson backgrounds)#212529 (Dark charcoal grey - highly readable for main body text)#6C757D (Medium grey - for less critical information, descriptions, footnotes)#DEE2E6 (Light grey - for subtle separation of elements)#28A745 (Green - for correct answers, successful actions)#FFC107 (Amber - for important notices, pending actions)#DC3545 (Red - for incorrect answers, error messages, failed actions)#17A2B8 (Cyan - for informational messages)Example Palette Usage:
#FFFFFF#F8F9FA#0056B3, Text #FFFFFF#DEE2E6, Fill #007BFF#28A745#DC3545