<!--
  Mockup Quiz Block Snippets — reference fragments
  ================================================
  Reusable HTML fragments. Pick what fits; not all blocks are required in
  every mockup. See `skills/course-mockup/SKILL.md` §Principles vs
  Presentation for the non-negotiables; everything below is presentation
  convention IDs adapt freely.

  Fragments for the KEEP / REPLACE / ADD blocks rendered into the quiz
  mockup description (see `quiz-mockup-template.html`). Copy the relevant
  block, substitute placeholders, and concatenate into the parent
  template's {{KEEP_BLOCKS}} or {{REPLACE_ADD_BLOCKS}} slot.

  The badge/chip strings below are mirrored in
  `scripts/build_mockup_quiz.py` and `scripts/preflight_checks.py` as
  CANONICAL_KEEP_BADGE etc. The `badge_style_mismatch` preflight warns
  (non-blocking) on drift; IDs can override.
-->

<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- KEEP chip — ASU green #78BE20                                        -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<span style="display:inline-block; background:#78BE20; color:#191919; padding:3px 9px; border-radius:4px; font-size:12px;">KEEP</span>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- REPLACE chip — ASU maroon #8C1D40                                    -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<span style="display:inline-block; background:#8C1D40; color:#FFFFFF; padding:3px 9px; border-radius:4px; font-size:12px;">REPLACE</span>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- ADD chip — ASU gold #FFC627 with black text                          -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<span style="display:inline-block; background:#FFC627; color:#191919; padding:3px 9px; border-radius:4px; font-size:12px;">ADD</span>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- NOTE inline maroon call-out — plain <strong>, no pill                -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<p><strong style="color:#8C1D40;">NOTE:</strong> {{NOTE_TEXT}}</p>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- LLM attribution badge — REQUIRED on every generated example draft    -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<p><strong style="color:#8C1D40;">Example Generated by Claude Opus 4.7. Please validate content before using:</strong></p>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- Example code block — green-highlight pattern for the correct answer  -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<!--
  Use white-space:pre-wrap so Canvas does not overflow the page width.
  Highlight ONLY the correct-answer line via the inline <span> below.
  Wrap each non-answer choice with a leading 4-space indent so the column
  reads cleanly when faculty copy/paste the block.
-->
<pre style="white-space:pre-wrap;word-wrap:break-word;background:#f6f8fa;padding:12px;border-radius:4px;font-size:13px;"><code>{{QUESTION_STEM_TEXT}}

    A. {{DISTRACTOR_A}}
    B. {{DISTRACTOR_B}}
<span style="background:#d8f5c2;">    C. {{CORRECT_ANSWER}}    ← correct</span>
    D. {{DISTRACTOR_D}}
</code></pre>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- KEEP BLOCK — ≤2 sentences, no example draft                          -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<!--
  Placeholders:
    {{N}}                  — question number on the live quiz
    {{Q_EXCERPT}}          — verbatim live question excerpt (≤1 sentence)
    {{MLO_ID}}             — e.g., MLO3.2
    {{ALIGNMENT_WHY}}      — one short sentence on why it aligns
-->
<p><span style="display:inline-block; background:#78BE20; color:#191919; padding:3px 9px; border-radius:4px; font-size:12px;">KEEP</span> <strong>Question {{N}}</strong></p>
<p><em>{{Q_EXCERPT}}</em></p>
<p>Aligns with {{MLO_ID}}. {{ALIGNMENT_WHY}}</p>


<!-- ───────────────────────────────────────────────────────────────────── -->
<!-- REPLACE / ADD BLOCK — 4 parts, ≤4 sentences body + example           -->
<!-- ───────────────────────────────────────────────────────────────────── -->
<!--
  Use the REPLACE chip when the live quiz has a misaligned item at this
  question number; use the ADD chip when no live question exists for the
  evidence target. Otherwise the four-part structure is identical.

  EVIDENCE_TYPE must be EXACTLY one of (canonical, see
  `scripts/alignment_validator.py` LANE_EVIDENCE_TYPES):
    - Verb mismatch
    - Evidence absence
    - Format mismatch
    - Weight inversion
    - Practice loop missing

  Placeholders:
    {{CHIP_HTML}}          — KEEP / REPLACE / ADD chip span (above)
    {{N}}                  — question number (or "new" for ADD)
    {{Q_EXCERPT}}          — verbatim live Q excerpt; omit for pure ADD
    {{EVIDENCE_TYPE}}      — one of the 5 canonical labels above
    {{GAP_STATEMENT}}      — one-sentence plain-English gap statement
    {{MLO_ID}}             — e.g., MLO3.2
    {{MLO_VERBATIM}}       — exact MLO text, quoted
    {{RESPONSE_FORMAT}}    — plain-English response format using the
                             verbatim MLO verb (no compound nouns)
    {{EXAMPLE_CODE_BLOCK}} — the <pre><code>…</code></pre> example above
-->
<p>{{CHIP_HTML}} <strong>Question {{N}}</strong></p>
<p><em>{{Q_EXCERPT}}</em></p>
<p><strong>{{EVIDENCE_TYPE}}:</strong> {{GAP_STATEMENT}}. {{MLO_ID}} says: <em>"{{MLO_VERBATIM}}"</em> {{RESPONSE_FORMAT}}</p>
<p><strong style="color:#8C1D40;">Example Generated by Claude Opus 4.7. Please validate content before using:</strong></p>
{{EXAMPLE_CODE_BLOCK}}
