Interactive Presentation Slides
6. Interactive Presentation Slides
<!--
Repurposed for Phase 1 launch: this doc used to cover Student ID Cards,
Certificates, Admit Cards, and Notices, plus Conceptual Infographics and
Presentation Slides. All but Presentation Slides are now isHidden
(lib/generators.ts) and not shown anywhere in the product, so this doc
narrows to the one tool from that set that is actually live, rather than
documenting tools a teacher cannot reach. See
docs/planning/phase1-tool-visibility-spec.md §2.4.
-->
Presentation Slides (/app/presentation-slides)
Generates a designed classroom slide deck from the chapter you choose, ready to present on a smartboard or projector, print, or download as PowerPoint (.pptx).
What you get:
- Curriculum-mapped slides: Built from the chapter you select in your confirmed textbook, with teacher speaker notes and discussion prompts for each slide.
- 15 publication-grade visual archetypes & Dynamic Context-Driven Blueprint: Rather than repetitive text bullets or a rigid fixed slide order, Shikshak AI dynamically composes slide layouts based on your chapter content, uploaded reference materials, selected teaching mode, and custom instructions—following the One Micro-Idea Per Slide and 65% clean breathing room (15–25 words per slide) keynote standard across 15 visual archetypes:
- Title & Chapter Roadmap (`title`, `timeline_roadmap`): Dark-mode executive hero covers and numbered journey roadmaps introducing the lecture or narrative arc.
- Dramatic Hooks, Quotes & Stat Callouts (`stat_callout`, `metric_shift`, `quote_callout`): Oversized typography for key metrics, before/after shifts, and high-stakes narrative or customer quotes.
- 2-Column Concept & Architecture Splits (`bullets`, `hub_spoke`, `step_tracker`, `split_content`): Asymmetric 2-column compositions pairing concise core concepts, horizontal pill tags, and bottom takeaway banners on the left with native vector hub-and-spoke diagrams, node topologies, or step pipelines on the right.
- Formulas, Vocabulary & Worked Examples (`equation_framework`, `vocabulary_cards`, `worked_example`): Dark-card equation callouts with variable breakdowns, plain-English dictionary cards with everyday analogies, and 3-step Problem → Action → Result case cards.
- Comparisons, Myth Checks & Formative Quizzes (`comparison_table`, `multi_cards`, `myth_vs_fact`, `quiz`): Structured side-by-side comparison matrices, multi-pillar cards, misconception vs. reality split cards, and interactive classroom check-for-understanding quizzes.
- Contextual Section Eyebrow Badges: Every slide features a context-aware uppercase category badge (e.g.,
CHAPTER ROADMAP,THE HOOK · CASE STUDY,CORE ARCHITECTURE,WORKED EXAMPLE,KEY FORMULA,REVISION CARD,CHECK FOR UNDERSTANDING, or authentic Devanagari in Nepali mode) displayed crisply in the web viewer and native PowerPoint exports. - Four Pedagogical Teaching Modes: Choose between Concept Breakdown (अवधारणा शिक्षण) for step-by-step mastery with 2-column architecture diagrams and formulas, Interactive Story & Hook (अन्तर्क्रियात्मक कथा) for suspenseful mystery hooks and chronological case studies, Executive Workshop & Case Study (कार्यशाला तथा केस स्टडी) for corporate training, frameworks, and action playbooks, or Exam Revision & Traps (परीक्षा पुनरावलोकन) for high-yield comparisons, misconceptions, and formative quizzes.
- Granular Deck Customization Controls:
- Slide Text Density: Choose Ultra-Minimal Keynote (15–25 words/slide), Balanced Classroom (30–45 words/slide), or Detailed Self-Study (50–70 words/slide).
- Example & Case Context: Choose Nepali Local Context, Global / Industry Case Studies, or Purely Theoretical / Text-Bound.
- Include Elements Checkboxes: Toggle Formulas & Equations, Real-World Case Studies, Misconception Checks, Interactive MCQs, and Discussion Prompts on or off.
- Custom Teacher Instructions & Storyline Blueprint: An expandable multi-line editor supporting everything from 1-line focus instructions to full 30-slide story blueprints.
- Nepali, English, or Bilingual: Nepali decks use authentic Devanagari numerals and क/ख/ग/घ for quiz options.
- High-Capacity Parallel Batch Generation (13 to 50 slides): Decks with 13 or more slides are generated concurrently in balanced parallel batches (at most 10 slides per batch) following an initial architectural outline, completing large 36–50 slide decks in roughly 40–60 seconds without serverless timeouts or duplicate credit charges.
- Flagship Keynote Design Systems & Instant Theme Switcher: Choose upfront or switch live inside the viewer between three flagship design systems—Academic Blueprint (प्राज्ञिक ब्लुप्रिन्ट) (dark navy constellation cover with crisp
#F7F9FClight body slides), Cinematic Dark (सिनेम्याटिक डार्क) (100% obsidian#080C14Apple/Netflix keynote aesthetic), and Executive Editorial (कार्यकारी सम्पादकीय) (midnight indigo#10193Cwith cyan#49D2F5accents and editorial serif headlines)—plus classic classroom themes (Forest Emerald, Modern Minimal, Classic Chalkboard, Sunset Coral, and Cyber Slate). - Edge-to-Edge Keynote Studio Workspace & Left Filmstrip: Full-width (100% viewport) edge-to-edge fixed-height presentation studio workspace with top title bar, compact 25% slimmer collapsible left-hand thumbnail rail (192px /
w-48with external numbering 1, 2, 3... and collapse toggle to maximize canvas width), clean 16:9 canvas stage centered with generous breathing space, docked teacher facilitation guide, and auto-closing export menu. - Branded Theme Switcher & Teacher Facilitation Notes: Switch slide palettes on the fly using the branded dropdown menu with live color swatches and dark mode support. Docked Teacher Facilitation Guide drawer displays slide-by-slide pedagogical talking points, discussion hooks ("Ask the class"), and interactive student activity prompts directly on screen with zero vertical scrolling required.
- Present fullscreen: use the arrow keys or Space to move between slides. Teacher notes stay off the projector.
- Pure 16:9 Full-Bleed PDF / Print Export: Click "Print all slides / सबै स्लाइड प्रिन्ट गर्नुहोस्" from the top bar or Download Menu to export a pure 16:9 widescreen (
13.333in × 7.5in) edge-to-edge full-bleed PDF slide deck anchored at(0, 0)with zero outer white margins, zero right-side clipping, and automatic filename matching your presentation title. - 1-Click PowerPoint Export with Native Vector Diagram Parity: A native, editable
.pptxpowered by vector shapes, cards, icons, chosen theme, and pictures. Complex diagrams (e.g. Hub & Spoke ecosystem models with generous radial card clearance, balanced multi-column cards, and formula frameworks) match the exact geometry and proportions of the web UI. In PowerPoint, quiz answers and teacher facilitation notes are placed neatly in presenter notes.
Using Custom Reference Materials, My Notebook & Smartphone Photos:
Educators can ground their presentation slide decks in their own lecture notes, saved notebook entries, or private publication textbook photos:
- Three Grounding Pathways: In Step 1: Classroom Context & Content Source, choose between Existing Textbooks (मौजुदा पाठ्यपुस्तक), From My Notebook (मेरो नोटबुकबाट), and New Upload (नयाँ अपलोड).
- From My Notebook (0 Extra Credits): 1-click generation from notes saved in My Notebook, including deep-linked notes from Study Notes Studio, university syllabi (e.g. TU BBA/BBS), and custom teacher documents.
- Academic Tier & Grade Range: Comprehensive academic support spanning Pre-Primary (Nursery/ECD), Grades 1–12, and Bachelors Years 1–4, with custom university degree labels automatically preserved.
- Ask Shikshak AI Co-Pilot: Built-in AI consultation directly on the presentation slides page to interactively refine slide count, pedagogical angle, and discussion activities before generating.
- Camera & File Upload: Use Take Photo (फोटो खिच्नुहोस्) to snap crisp pictures of textbook diagrams or lesson notes via desktop webcam or smartphone camera, or click Browse Files (फाइल छनोट गर्नुहोस्) to attach PDFs, DOCX files, PPTX decks, or images.
- 1-Click Remove All: Clear all attached materials in 1 click or delete individual files with the trash icon.
- Transparent Credit Cost & Extended Slide Counts (Up to 50 Slides): Slide-quantity-based dynamic credits (10 credits for 4–8 slides, 15 credits for 8–12 slides, 20 credits for 12–16 slides, 25 credits for 16–24 slides, 35 credits for 24–36 slides, and 50 credits for 36–50 slides) + 1 credit per attached photo/page for custom file uploads (up to 10 pages). From My Notebook uses 0 extra attachment fees.
- Targeted Slide Decks & Resilient Fast Generation: Presentation slides, visual diagrams, discussion hooks, and quiz items are strictly aligned with your uploaded materials and terminology, with automatic metadata normalization and multi-provider failover to prevent timeout interruptions.
Presentation Studio Controls & Vector Parity
- Fixed-Height Zero-Scroll Studio Workspace: Presentation decks open in an expansive, edge-to-edge Keynote Studio Workspace locked strictly to the viewport (
100dvh). Native CSS container-query scaling dynamically bounds the 16:9 canvas to available stage height and width with generous breathing space on all sides, keeping slide canvas, navigation pagination controls, and docked teacher facilitation notes all simultaneously visible on a single screen with zero vertical window scroll across laptops, monitors, projectors, and mobile devices. - Interactive Draggable Layout Resizing & Butter-Smooth Motion: Draggable splitters with enlarged 16px grab hit targets and hardware-synchronized display refresh (
requestAnimationFrame) allow teachers to customize their workspace with zero lag: - Horizontal Sidebar Splitter: Drag the right border of the slide filmstrip to adjust sidebar width (from 140px up to 340px, default 192px /
w-48). Double-click the splitter handle to snap back to default. - Vertical Notes Splitter: Drag the divider above the Teacher Notes drawer to expand or shrink drawer height (from 50px up to 340px, default 110px). The 16:9 slide canvas automatically adapts in real time to fit the remaining space without scrolling. Double-click to snap back.
- Zero-Stutter Dragging: CSS transitions on container geometries are suppressed during active drag and an invisible mouse-capture layer prevents cursor loss or accidental text selection.
- Vibrant Filmstrip Thumbnails & Canonical Scaling: Sidemenu thumbnails render with 100% full vibrant color (no dimmed opacity) and utilize decoupled canonical resolution scaling (
960×540at GPU transform scale). Slide layouts are mathematically derived in real time from the sidebar width, completely preventing layout blow-outs and guaranteeing pixel-perfect typography, badge alignment, and card layouts matching the active slide exactly without any horizontal or vertical clipping. - Universal In-Place & Modal Slide Editing:
- In-Place Canvas Editing: Click directly on Slide Titles, Subtitles, Bullet Points, and Key Vocabulary Terms to edit text in real time.
- Interactive Teacher Notes Editor: Type multi-line notes, talking points, discussion hooks ("Ask the class"), and student activity prompts directly inside the notes drawer.
- "Edit Slide" (स्लाइड सम्पादन) Modal: Click the "Edit Slide" button in the bottom navigation bar to open a structured editor for all 15 visual archetypes, including Quizzes (question, options A-D, correct answer, explanation), Worked Examples, Timelines, Hub & Spoke concepts, Comparison columns, and Stat Callouts.
- 1-Click "Save Changes" (परिवर्तन सुरक्षित गर्नुहोस्): Save your edits permanently to the database so customized presentations persist across reloads, downloads, and PowerPoint (.pptx) exports.
- Minimalist Action Bar: The top bar keeps strictly core presentation controls: Deck Title with subject and grade badge, Theme Dropdown, Save Changes, Present Fullscreen, Print All Slides, and Download Menu, removing visual clutter so educators focus entirely on teaching.
- Streamlined Docked Teacher Notes Drawer: Positioned directly below the slide controls without redundant headers, notes start flush from the left edge with a dedicated 1-click "Copy notes" button docked on the right, accompanied by classroom discussion hooks and interactive student activity prompts with internal scrolling for lengthy notes.
- Sidemenu Height & Scrollbar Synchronization: The left filmstrip drawer dynamically matches the exact height of the active 16:9 slide canvas via responsive tracking. Whenever a presentation contains multiple slides, a sleek emerald vertical scrollbar (
preview-scrollbar) activates, completely eliminating blank empty space below the slide. - High-Visibility Selected Slide Highlight: The currently active slide thumbnail features an unmistakable high-contrast green border (
border-2 border-primary bg-primary/10) with dedicated padding, ensuring the active indicator is never clipped by the scroll container. - Formula & Equation Pill Vector Parity: Mathematical and scientific variables in equation framework slides (e.g., $F = ma$, $m = 2\text{ kg}$, $a = 5\text{ m/s}^2$) form continuous, single-line horizontal pills with
whitespace-nowrapthat never break into vertical text stacks, matching PowerPoint (.pptx) vector layouts exactly. Raw markdown bold asterisks (**) are automatically cleaned from titles for publication-grade presentation typography. - Auto-Closing Download Menu: Selecting any export format (PowerPoint .pptx, PDF, Word, ZIP, or Copy Text) automatically dismisses the dropdown menu immediately upon click, preventing menus from lingering over the presentation canvas.
- Docked Teacher Facilitation Notes: Below the active slide, collapsible teacher facilitation notes provide pedagogical openers, discussion hooks, and interactive classroom prompts with a 1-click clipboard copy button.
- Direct In-Slide WYSIWYG Editing: Click directly on any text on the canvas — slide titles, subtitles, card headers, descriptions, timeline steps, equations, quotes, or vocabulary items — to edit content in place without opening separate dialogs.
- Multi-Level Undo & Redo (Ctrl+Z / Ctrl+Y): Revert or restore any slide edits, card modifications, or layout changes instantly using toolbar buttons or standard keyboard shortcuts.
- Flexible Typography & Card Density Scaling: Adjust slide text sizing on the fly with
A-/A+scale steppers (75% to 130%) and toggle card layout density (Compact,Normal,Spacious) to fit lesson depth perfectly. - Standardized Global Pagination: The clean, compact pagination layout from the keynote viewer (
[ ← Previous ] [ Next → ] [ 1 / N ]) is standardized across the entire platform, including My Plans (/my) and Teacher Dashboard Library (/dashboard/library), featuring centered controls with safe-area spacing that never obstructs floating AI chat launchers.
Pictures on slides
- Full-Bleed Widescreen Canvas by Default: Slides without illustrations render in 100% full widescreen width (
16:9) without reserving empty columns or displaying dashed placeholder boxes, ensuring zero cramped text or blank white space on screen and in PDF exports. - Illustration Studio & Prompt Verification: Clicking Add Image (10 credits) or Regenerate (10 credits) opens a transparent prompt preview dialog. You can review the exact description the model will draw, customize details in English or Nepali, or click "Refine with Shikshak AI" to brainstorm 2-3 pedagogical visual ideas with your AI co-pilot before spending credits.
- Transparent Credit Protection & Automatic Refund: Deducts 10 credits per generated illustration. If an image generation encounters an upstream issue or timeout, your 10 credits are automatically refunded immediately to your account balance, and the slide displays a clear status with a 1-click retry option.
- Instant Image Removal: If you no longer need an illustration on a slide, click the Remove (हटाउनुहोस्) button on hover to delete the image; the slide immediately expands back to full widescreen width.
- Text-Free Visual Clarity: Pictures never contain raw or distorted text: every word and label comes cleanly from your presentation typography and authentic Devanagari Unicode.
- Owner-Controlled: Only you (the educator who owns the deck) can generate, refine, or remove pictures. Viewers of a shared link see the completed presentation visuals.
3. Study Notes Studio (/dashboard/study-notes)
Study Notes Studio empowers educators from Nursery to Bachelor's level to generate comprehensive, publication-grade chapter notes and tailored visual diagrams.
- Notes-First Architecture (5 Credits / Chapter): Initial chapter generation produces in-depth pedagogical prose, formulas, comparison tables, Cornell note summaries, and exam-focused practice Q&As. The AI suggests intuitive visual concepts (
diagramDescription) for each key topic without forcing automatic image generation. - On-Demand Section Visuals (2 Credits / Diagram): Educators review the recommended visual concept on each subtopic card and click "Generate Visual Diagram" to open the diagram customizer. Choose from 6 proven archetypes (Flowchart, Cycle, Hierarchy, Comparison, Structure/Apparatus, Mindmap), edit prompt instructions, and generate responsive vector SVG diagrams on demand.
- Scholarly Print & Word (.docx) Exports: Complete course booklets or single chapter notes export cleanly to Microsoft Word with authentic Devanagari typography, printable tables, and compact academic sizing for A4 printing.
More visual and batch-print tools (ID cards, certificates, admit cards, notices, and standalone infographics) are in active development. See /pricing for what is live today and what is Coming Soon.
Shikshak AI can answer your specific questions instantly in Nepali, English, or Nepanglish.