Built from scratch to replicate the core capabilities of enterprise authoring tools like Articulate Storyline and Adobe Captivate, this custom single-page e-learning engine eliminates heavyweight proprietary runtimes in favor of lightweight, semantic code. The project mirrors complex slide layering, branching navigation, dynamic gating states, and bi-directional CMI data pass-backs using clean web primitives. Grounded in ADDIE and military Systems Approach to Training (SAT) doctrines, it demonstrates how rigorous instructional design pairs with modern UI/UX—scaffolding complex learning objectives through progressive disclosure, active retrieval practice, and fully responsive, Section 508-compliant assessment architecture.
// INSTRUCTIONAL ECOSYSTEM
TLO Mastery & LMS Ready
Emulating Storyline-style trigger conditions and variables using zero-dependency JavaScript. Features responsive dark-canvas styling, embedded vector timelines, and bi-directional LMS communication.
Role
Instructional Systems Designer
Methodology
ADDIE / TRNGCMD SAT Framework
Standards
SCORM 1.2 / 2004, Section 508
Target LMS
Moodle / MCeLE / Workday
Interactive Learning Module
Explore the interactive courseware below. Scroll within each page to review chronology, flora, and fauna, and submit the knowledge checks to unlock subsequent modules.
Mode: Gated
SLIDE 1 OF 18 // MESO-00
// Terminal Learning Objective (TLO)
The Age of Reptiles & Modern Dinosaurs
Welcome to the interactive Mesozoic courseware. Throughout this module series, you will examine the evolutionary trajectory of dinosaurs, prehistoric ecosystems, and the phylogenetic classification demonstrating why modern birds are living dinosaurs.
Target Learning Outcomes
Geochronology: Identify exact date ranges and boundaries for the Triassic, Jurassic, and Cretaceous periods.
Flora Evolution: Track the shift from gymnosperm/seed fern dominance to the Cretaceous angiosperm revolution.
Fauna Radiation: Distinguish early archosaurs, Jurassic megaherbivores, and Late Cretaceous apex predators.
Phylogenetic Cladistics: Understand why dinosaurs are reptiles, how birds evolved from theropods, and the biological distinction between avian and non-avian dinosaurs.
▶ INSTRUCTION: Scroll down through each section to absorb the material, click flashcards to reveal definitions, and click "Next" to progress.
// Module 1.1 • Vocabulary & Geochronology
The Triassic Period: Chronology & Climate
🗂 Key Module Vocabulary(Click cards to flip)
Pangea
Click to flip ↷
Pangea: The global supercontinent during the Late Paleozoic and Early Mesozoic, uniting all modern landmasses into a single landmass.
Carnian Pluvial Event
Click to flip ↷
Carnian Pluvial Event: A 2-million-year pulse of global rainfall and elevated humidity (~234–232 Ma) that spurred early dinosaur diversification.
Pseudosuchia
Click to flip ↷
Pseudosuchia: The crocodile-line branch of archosaurs that dominated terrestrial predatory and herbivore niches throughout the Triassic.
// Deep Time Relative Scale: Triassic Highlight (251.9 – 201.3 Ma)
The Triassic Period spans from 251.9 million to 201.3 million years ago (Ma). It opened immediately following the catastrophic Permian-Triassic Extinction Event ("The Great Dying"), which eradicated approximately 90% of marine species and 70% of land organisms.
Pangean Geography & Aridity
All major landmasses were merged into the giant C-shaped supercontinent Pangea, enveloped by the vast global ocean Panthalassa. The continental interior was intensely arid and hot, with immense desert basins and severe seasonal swings.
// Module 1.2 • Paleobotany
Triassic Flora: Gymnosperms & Seed Ferns
Triassic plant life was adapted to severe, moisture-stressed continental environments. Because flowering plants had not yet evolved, ecosystems were composed strictly of gymnosperms, seed ferns, and primitive spore-bearing plants.
Dominant Plant Groups
Seed Ferns (Pteridospermatophyta): Extinct seed plants such as Dicroidium dominated southern Pangea (Gondwana), providing the primary browse for early herbivores.
Early Conifers (Coniferales): Primitive voltzian conifers formed open woodlands in subpolar and highland zones.
Cycadophytes (Cycads & Bennettitales): Palm-like gymnosperms with tough, compound fronds dominated low-to-mid latitude plains.
Giant Horsetails (Sphenophytes): Plants such as Equisetites lined lakeshores and riparian drainage corridors.
// Module 1.3 • Vertebrate Paleontology
Triassic Fauna: Archosaurs & The First Dinosaurs
Contrary to popular depictions, dinosaurs were not the apex terrestrial rulers during most of the Triassic. They shared the land with diverse crocodile-line archosaurs that held the primary predatory and megaherbivore niches.
The Archosaur Divide
Pseudosuchians (Crocodile-Line Archosaurs): Dominated the Triassic. This clade included top quadrupeds like Postosuchus (rauisuchians), armored herbivorous aetosaurs, and semi-aquatic phytosaurs.
Avemetatarsalians (Bird-Line Archosaurs): The evolutionary lineage leading to pterosaurs (the first flying vertebrates) and true dinosaurs.
Early Dinosaur Pioneers (~230 Ma)
Herrerasaurus & Eoraptor: Agile, bipedal carnivores and omnivores from the Ischigualasto Formation of South America.
Coelophysis: A slender, hollow-boned early theropod built for speed and agile pack predation.
Plateosaurus: An early prosauropod (sauropodomorph) reaching 8–10 meters, marking the earliest shift toward large long-necked herbivory.
// Formative Assessment • Module 1
Triassic Knowledge Check
Select your answers below. You can change your choices freely until you click "Submit Answers" at the bottom.
1. What is the approximate geological timeframe for the Triassic Period?
A145.0 Ma – 66.0 Ma
B201.3 Ma – 145.0 Ma
C251.9 Ma – 201.3 Ma
D358.9 Ma – 298.9 Ma
2. Which plant group was a dominant floral component across Gondwana during the Triassic Period?
AAngiosperm magnolias
BSeed ferns (Dicroidium)
CFlowering orchard grasses
DBroadleaf deciduous oaks
3. Which statement accurately describes the ecological role of dinosaurs during the Middle to Late Triassic?
ADinosaurs were the undisputed apex predators and megaherbivores across every continent.
BDinosaurs lived entirely in marine environments alongside giant ichthyosaurs.
CDinosaurs were mostly small-to-medium bipedal animals living alongside dominant crocodile-line archosaurs.
DDinosaurs had fully displaced all other land reptiles immediately following the Permian extinction.
// Module 2.1 • Vocabulary & Geochronology
The Jurassic Period: Chronology & Continental Drift
🗂 Key Module Vocabulary(Click cards to flip)
Laurasia & Gondwana
Click to flip ↷
Laurasia & Gondwana: The two secondary northern and southern supercontinents formed when Pangea rifted apart during the Jurassic.
Thagomizer
Click to flip ↷
Thagomizer: The four-to-eight defensive spike arrangement located at the terminal end of a stegosaurid dinosaur's tail.
Pneumaticity
Click to flip ↷
Pneumaticity: The presence of hollow, air-filled cavities within sauropod and theropod vertebrae that dramatically lightened skeletal mass.
// Deep Time Relative Scale: Jurassic Highlight (201.3 – 145.0 Ma)
The Jurassic Period spanned from 201.3 million to 145.0 million years ago (Ma). Following the End-Triassic extinction that eliminated crurotarsan competitors, dinosaurs radiated into every terrestrial niche.
The Breakup of Pangea
Tectonic rifting split Pangea into two massive northern and southern landmasses: Laurasia (North America, Europe, Asia) and Gondwana (South America, Africa, Australia, Antarctica, India).
// Module 2.2 • Paleobotany
Jurassic Flora: High Canopies & Cycad Forests
Abundant rainfall and warm greenhouse temperatures produced towering, multi-story gymnosperm canopies capable of sustaining massive sauropod herds.
Forest Stratification
Upper Canopy (Conifers): Ancient representatives of Araucariaceae, Podocarpaceae, and Pinaceae reached heights exceeding 30 meters.
Mid-Story (Cycadophytes & Ginkgos): Bennettitaleans and true cycads formed dense sub-canopies alongside fan-leaved Ginkgo trees.
Understory (Tree Ferns & Horsetails): Enormous tree ferns and giant sphenophytes carpeted river valleys and flood basins.
The Jurassic witnessed the golden age of giant sauropods, heavily armored thyreophorans, and the evolutionary emergence of the first avians.
Iconic Terrestrial Lineages
Giant Sauropoda: Included long-tailed diplodocids (Diplodocus, Apatosaurus) and high-browsing brachiosaurids (Brachiosaurus).
Thyreophora (Stegosaurs): Quadrupedal herbivores sporting dorsal osteoderm plates and defensive tail spikes known as thagomizers.
Apex Theropods: Large carnivores with bladed teeth led by Allosaurus and horned Ceratosaurus.
Avian Origins:Archaeopteryx showed transitional anatomy with flight feathers, teeth, wing claws, and a long bony tail.
// Formative Assessment • Module 2
Jurassic Knowledge Check
Select your answers below and click "Submit Answers" when ready.
1. What is the approximate geological timeframe for the Jurassic Period?
A251.9 Ma – 201.3 Ma
B201.3 Ma – 145.0 Ma
C145.0 Ma – 66.0 Ma
D66.0 Ma – 2.6 Ma
2. How did the breakup of Pangea during the Jurassic Period influence global ecosystems and plant life?
AIt triggered immediate global glaciation, wiping out most conifer forests.
BIt opened oceanic seaways, creating a warmer, more humid climate that supported high-canopy conifer and cycad forests.
CIt caused total desertification across all continents, eliminating understory ferns.
DIt led directly to the first appearance and global dominance of flowering angiosperms.
3. Which combination of dinosaur clades represents classic terrestrial megafauna of the Late Jurassic?
ATyrannosaurus, Triceratops, and Ankylosaurus
BCoelophysis, Herrerasaurus, and Plateosaurus
CSauropods (Diplodocus), Stegosaurs (Stegosaurus), and Allosauroids (Allosaurus)
DHadrosaurs (Parasaurolophus), Ceratopsians, and Dromaeosaurs
// Module 3.1 • Vocabulary & Geochronology
The Cretaceous Period: Chronology & Epicontinental Seas
🗂 Key Module Vocabulary(Click cards to flip)
Angiosperms
Click to flip ↷
Angiosperms: Seed-bearing vascular flowering plants that evolved during the Early Cretaceous, rapidly overtaking gymnosperms.
Western Interior Seaway
Click to flip ↷
Western Interior Seaway: A massive inland sea that split North America into the landmasses Laramidia (west) and Appalachia (east).
Dental Battery
Click to flip ↷
Dental Battery: Hundreds of tightly packed, self-sharpening teeth in hadrosaurs and ceratopsians evolved to grind tough fibrous plants.
// Deep Time Relative Scale: Cretaceous Highlight (145.0 – 66.0 Ma)
The Cretaceous was the longest Mesozoic period, spanning from 145.0 million to 66.0 million years ago (Ma). It concluded with the catastrophic Chicxulub Asteroid Impact (K-Pg Extinction).
Continental Isolation & High Sea Levels
Continents fragmented toward modern outlines, isolating faunal populations. High global sea levels created shallow interior seaways, such as the Western Interior Seaway that bisected North America into Laramidia and Appalachia.
// Module 3.2 • Paleobotany
Cretaceous Flora: The Angiosperm Revolution
The Cretaceous witnessed the most significant botanical milestone in Earth's history: the origin and global ecological dominance of angiosperms (flowering plants).
The Angiosperm Terrestrial Revolution
Early Angiosperms (~130–125 Ma): Archaic flowering plants established footholds along disturbed riparian corridors.
Insect Co-Evolution: Flowers and nectar drove an evolutionary radiation of pollinating bees, wasps, beetles, and butterflies.
Herbivore Dental Adaptations: Fibrous angiosperms catalyzed complex, self-sharpening dental batteries in hadrosaurs and ceratopsians.
// Module 3.3 • Vertebrate Paleontology
Cretaceous Fauna: Peak Diversity & The K-Pg Extinction
The Cretaceous closed with the highest taxonomic diversity of dinosaurs in the fossil record, culminating in specialized armor, cranial frills, and giant apex carnivores.
Peak Dinosaur Clades
Ceratopsia (Horned Dinosaurs): Massive quadrupeds with defensive/display head frills and rostral horns (e.g., Triceratops).
Hadrosauridae (Duck-Billed Dinosaurs): Advanced herbivores with grinding dental batteries of hundreds of teeth and acoustic crests.
Ankylosauridae: Heavily armored tanks with bony osteoderm carapaces and tail clubs (e.g., Ankylosaurus).
Cladistics: A biological classification system that categorizes organisms based strictly on shared common ancestry and branching evolutionary lineages.
Monophyletic Group
Click to flip ↷
Monophyletic Group (Clade): A group consisting of an ancestral species and ALL of its descendants (e.g., Reptilia includes modern birds).
Avian Dinosaurs
Click to flip ↷
Avian Dinosaurs: Feathered, winged dinosaurs belonging to clade Aves—the only dinosaur lineage that survived the K-Pg extinction.
Are dinosaurs reptiles even though they are the direct ancestors of birds? Yes. Dinosaurs are reptiles, and under modern biological science, all birds are living dinosaurs and living reptiles.
Traditional (Linnaean) vs. Modern (Phylogenetic) Taxonomy
Traditional Linnaean System: Grouped animals by superficial physical traits (e.g., cold-blooded, scaly skin = reptile). It created an artificial separate class (Class Aves) that ignored common ancestry.
Modern Cladistics Rule: An organism never "outgrows" its ancestry. Because birds evolved within theropod dinosaurs, birds are classified as specialized theropod dinosaurs nested within clade Reptilia (Sauropsida).
// Module 4.2 • Evolutionary Morphology
The Theropod-to-Bird Transition
The boundary between "non-avian dinosaurs" and "birds" represents a smooth evolutionary gradient across tens of millions of years of theropod evolution.
Key Shared Anatomical Innovations
Pennaceous Feathers: Evolved initially in small coelurosaurian theropods (e.g., Sinosauropteryx, Velociraptor) for thermoregulation and visual sexual display long before powered flight.
Wishbone (Furcula): The fusion of clavicle bones to store kinetic energy during locomotion, present in Allosaurus and T. rex just as in modern turkeys.
Hollow Pneumatic Bones: Lightened skeletal structures with unidirectional respiratory air sacs first evolved in early saurischians to maximize oxygen uptake.
Swiveling Wrist Joints: Flexible semi-lunate carpal bones allowed raptors to snap their arms forward to seize prey—the exact mechanics later repurposed for the flight stroke.
// Module 4.3 • Extinction & Modern Survival
Avian vs. Non-Avian Dinosaurs
When the Chicxulub asteroid struck 66.0 million years ago, it did not drive all dinosaurs to extinction. It specifically eradicated non-avian dinosaurs.
Why Avian Dinosaurs Survived the K-Pg Boundary
Beak Adaptations & Seed Diet: After global wildfires and impact winter collapsed food chains, toothless beaked avians could forage on dormant seeds and subterranean plant roots.
Small Body Size & High Metabolic Efficiency: Miniature body plans required substantially fewer daily calories than large-bodied non-avian theropods and sauropods.
Ground/Burrowing Habits: Basal ground-dwelling bird lineages could shelter from thermal radiation and catastrophic firestorms.
Modern Biodiversity Reality
Today, with over 11,000 living species of birds, there are more than twice as many living species of dinosaurs on Earth as there are species of mammals (~6,400).
// Formative Assessment • Module 4
Avian Dinosaurs Knowledge Check
Select your answers below and click "Submit Answers" to unlock the Final Exam.
1. Under modern phylogenetic cladistics, why are birds classified as both dinosaurs and reptiles?
ABecause modern birds share cold-blooded metabolism with lizards
BBecause organisms never outgrow their ancestry; birds are direct theropod descendants nested within clade Reptilia
CBecause birds evolved directly from flying pterosaurs in the Late Jurassic
2. What was the original evolutionary function of feathers in small theropod dinosaurs prior to powered flight?
AThermoregulation (insulation) and visual courtship displays
BHigh-speed underwater jet-propulsion in ocean waters
CDefensive armor plating to deflect bites from apex predators
3. Which term accurately describes the group of dinosaurs that went completely extinct at the 66.0 Ma K-Pg boundary?
AAll avian dinosaurs
BNon-avian dinosaurs
CAll pseudosuchian dinosaurs
// Summative Assessment • Comprehensive Exam
Mesozoic & Paleobiological Final Examination
Answer all 8 questions below (2 per module). You can adjust any answer until you click "Submit Final Exam" to calculate your summative grade.
1. [Triassic] Which climatic phenomenon disrupted Pangea's arid interior ~234–232 Ma, spurring early dinosaur radiation?
AThe Carnian Pluvial Event
BThe Chicxulub Impact Winter
CThe Western Interior Inundation
2. [Triassic] What morphological feature distinguished early dinosaurs like Coelophysis and Herrerasaurus from primitive sprawling reptiles?
AAsymmetrical flight feathers and fused toothless beaks
BAn erect posture with an open-socket hip (perforate acetabulum)
CMulti-row grinding dental batteries for flowering plants
3. [Jurassic] What key botanical factor supported the extreme body mass and long neck evolution of macronarian sauropods?
ATowering high-canopy conifer forests (Araucariaceae and Pinaceae)
BWidespread broadleaf angiosperm fruit orchards
COpen savanna plains of low-growing turf grasses
4. [Jurassic] The Late Jurassic transitional fossil Archaeopteryx is famous for possessing which unique combination of traits?
AA toothless keratin beak, fused pygostyle, and lack of wing claws
BAvian flight feathers alongside theropod teeth, wing claws, and a bony tail
CQuadrupedal limbs, dermal thagomizer spikes, and turtle-like shells
5. [Cretaceous] Which major evolutionary shift occurred among flora during the Cretaceous, profoundly reshaping dinosaur feeding mechanics?
AThe origin and worldwide radiation of Angiosperms (flowering plants)
BThe complete takeover of southern continents by seed ferns (Dicroidium)
CThe total extinction of all cone-bearing conifers
6. [Cretaceous] Which geological boundary marker (~66.0 Ma) provides direct physical evidence of the Chicxulub asteroid impact?
AThick continental glacial tillite moraines
BA worldwide clay layer containing anomalous iridium and shocked quartz
CMassive Carnian pluvial sandstone formations
7. [Avian Dinosaurs] Under phylogenetic systematics (cladistics), why is it impossible for birds to 'stop' being dinosaurs?
AIn cladistics, groups are monophyletic: an organism always belongs to every ancestral clade it descended from
BBecause modern birds still possess ectothermic cold-blooded reptilian physiology
CBecause Linnaean classification mandates that reptiles and birds are identical classes
8. [Avian Dinosaurs] What physiological and anatomical advantage helped basal crown avian dinosaurs survive the K-Pg impact winter while non-avian dinosaurs perished?
AAquatic breathing gills and fully marine life cycles
BToothless beaks adapted for seed-eating, smaller caloric requirements, and ground-sheltering habits
CExtreme giant body mass allowing long multi-year starvation dormancy
Bridging established instructional design methodology with modern product design—evaluating ADDIE best practices directly against this project's technical implementation.
ADDIE Framework Best Practices
Effective courseware requires structured pedagogical scaffolding, active retrieval, and rigorous alignment between instructional goals and evaluations:
Analysis: Identify the target baseline and break down dense scientific taxonomy into discrete, consumable knowledge milestones.
Design: Construct a strict hierarchy mapping Enabling Learning Objectives (ELOs) to a measurable Terminal Learning Objective (TLO).
Development: Reduce extraneous cognitive load by segmenting complex narratives, front-loading terminology, and embedding formative checks.
Implementation: Ensure zero-friction deployment through standardized, lightweight SCORM/xAPI packaging compatible across modern LMS platforms.
Evaluation: Balance immediate diagnostic feedback with criterion-referenced summative testing to confirm objective mastery.
Project Alignment & Execution
How this custom e-learning module operationalizes each phase of the ADDIE lifecycle using native web technologies:
Objective Scaffolding (A/D): Mapped 4 cohesive modules—spanning Triassic, Jurassic, Cretaceous, and modern Avian Cladistics—culminating in an 8-question summative exam.
Front-Loaded Retrieval (D): Placed 3D flippable flashcards at the entry of each module, priming learners with essential vocabulary before they encounter complex text.
Cognitive Load UX (D): Replaced disjointed "click-to-advance" fragments with cohesive, in-frame scrollable layouts and unified SVG deep-time scales.
Formative Gating (D/E): Embedded 3-question knowledge checks at every stage, providing instant corrective feedback loops before unlocking downstream content.
LMS Telemetry (I/E): Built an engine that tracks slide completion, calculates scaled raw scores, and passes standard CMI variables directly into LMS gradebooks.
LMS Operations & SCORM Specifications
How custom web courseware packages communicate with enterprise Learning Management Systems like Moodle, MarineNet/MCeLE, and Workday Learning.
Standard / Metric
Data Parameter
Implementation & Tracking Method
SCORM 1.2 / 2004
cmi.core.lesson_status
Passes passed, completed, or incomplete based on quiz completion criteria.