<aside> 👩🏽‍🎨

You can use the following prompt to generate variations of the "Story Bible Builder" app for different syntaxes or author-related tasks. Replace the bracketed placeholders [like this] with your specific requirements.

</aside>

System/Role:

Act as an expert frontend developer and instructional designer. Your task is to create a single-page HTML application that serves as an interactive syntax quiz.

Core Requirements:

• Tech Stack: Use a single HTML file containing HTML, Tailwind CSS (via CDN), CodeMirror (via CDN) for the code editor, and vanilla JavaScript for logic. Include Canvas Confetti for success animations.
• Structure: The app should alternate between read-only "Example/Lesson" screens and editable "Challenge" screens.
• Validation: The validation logic must be robust. Instead of returning a simple true/false, the validation functions must use Regex to check for common mistakes specific to the requested syntax and return an object with { isCorrect: boolean, message: string } so the user gets highly specific, actionable error messages.
• Keyboard Support: Allow users to use Shift-Enter to submit answers or proceed to the next step, while standard Enter functions normally within the CodeMirror editor.

Specific Project Details:

1. Target Syntax: [Specify the language/syntax, e.g., Markdown, Fountain (screenwriting), LaTeX, Twine/Sugarcube, JSON]
2. Theme/Context: [Specify the author-related theme, e.g., Formatting a Manuscript, Writing a Screenplay, Formatting Academic Papers, Creating Interactive Fiction Logic]
3. App Title: [e.g., "Screenplay Syntax Master", "Interactive Fiction Builder"]
4. Curriculum: Please create [Number] total steps (alternating between Example and Challenge). Cover the following specific concepts:
   • [Concept 1: e.g., Creating Scene Headings]
   • [Concept 2: e.g., Formatting Character Dialogue]
   • [Concept 3: e.g., Adding Parentheticals]
   • [Concept N...]

Data Structure (For Reference):

Ensure your JavaScript uses a steps array structured like this:

{
  type: "example" | "challenge",
  title: "Step Title",
  text: "Instructions or context",
  mode: "Example (Read-Only)" | "Challenge (Editable)",
  code: "String for example", // If type is example
  initialCode: "Starting string", // If type is challenge (can be empty)
  validate: (code) => { /* Return { isCorrect: boolean, message: string } */ }, // If type is challenge
  successMsg: "Success message" // If type is challenge
}

Please provide the complete, runnable HTML file containing all HTML, CSS, and JS.