{
  "title": "MicroSim File Relationship Diagram",
  "description": "Block diagram showing how the three core MicroSim files (index.md, main.html, metadata.json) relate to each other and integrate into the MkDocs intelligent textbook architecture, including security boundaries and metadata flows",
  "subject": "Educational Technology",
  "creator": "Claude AI with Mermaid Generator Skill",
  "date": "2025-11-17",
  "type": "Interactive Workflow Diagram",
  "format": "text/html",
  "language": "en-US",
  "coverage": "Introductory",
  "rights": "CC BY-NC-SA 4.0",
  "audience": "Undergraduate",
  "diagram_type": "block-diagram",
  "direction": "TD",
  "node_count": "7",
  "edge_count": "6",
  "concepts": [
    "MkDocs Integration",
    "MicroSim Architecture",
    "iframe Security",
    "Dublin Core Metadata",
    "Document Object Model",
    "Sandbox Isolation",
    "p5.js Visualization",
    "Learning Management Systems"
  ],
  "bloom_taxonomy": "Understand",
  "version": "1.0",
  "educational_context": "This diagram helps students and developers understand the technical architecture behind MicroSims in intelligent textbooks, including how files relate, security boundaries work, and external systems integrate.",
  "prerequisites": [
    "Basic understanding of HTML",
    "Familiarity with file systems",
    "Web browser concepts"
  ],
  "learning_objectives": [
    "Understand the three-file structure of a MicroSim package",
    "Recognize the role of iframes in providing security isolation",
    "Explain how metadata enables discovery and LMS integration",
    "Trace the flow from navigation to interactive simulation"
  ],
  "components": {
    "documentation": [
      "index.md",
      "MkDocs Navigation"
    ],
    "integration": [
      "iframe element"
    ],
    "simulation": [
      "main.html",
      "p5.js rendering"
    ],
    "metadata": [
      "metadata.json"
    ],
    "external": [
      "Learning Management System"
    ]
  },
  "color_scheme": {
    "documentation": "#4dabf7",
    "integration": "#ff922b",
    "code": "#51cf66",
    "simulation": "#ff6b6b",
    "metadata": "#cc5de8",
    "navigation": "#e9ecef"
  },
  "technical_specifications": {
    "library": "Mermaid.js",
    "version": "10.x",
    "rendering_mode": "SVG",
    "interactive_features": [
      "zoom",
      "pan",
      "export"
    ],
    "responsive": true
  },
  "visualizationType": [
    "3d-model",
    "animation",
    "diagram",
    "graph",
    "interactive-demo",
    "map",
    "network",
    "simulation"
  ],
  "learningObjectives": [
    "Identify the distinct roles of index.md, main.html, and metadata.json in a MicroSim package",
    "Explain how the iframe element creates a security boundary that isolates simulation code from the parent MkDocs page DOM",
    "Trace the path a student follows from MkDocs navigation through the index.md documentation page to the running p5.js simulation in main.html",
    "Describe how Dublin Core metadata in metadata.json enables faceted search discovery and Learning Management System integration"
  ],
  "bloomsTaxonomy": [
    "Understand",
    "Apply",
    "Analyze"
  ],
  "pedagogical": {
    "pattern": "exploration",
    "bloomAlignment": [
      "understand",
      "apply",
      "analyze"
    ],
    "bloomVerbs": [
      "classify",
      "describe",
      "explain",
      "summarize",
      "apply"
    ],
    "pacing": "self-paced",
    "supportsPrediction": true,
    "dataVisibility": "medium",
    "feedbackType": [
      "immediate",
      "corrective",
      "explanatory"
    ],
    "interactionStyle": "observe"
  }
}