"cardsort": proposed one-off XML for Runestone ingestion

[rbeezer]

We're moving the PreTeXt cardsort interactive off the dragndrop HTML representation and onto a one-off XML island, mirroring how matching already works: a <div data-component="cardsort"> containing a <script type="text/xml"> payload for the Runestone JS to parse (as HTML, per the same convention as matching).

Here's the full emitted payload for a sample cardsort (countries → confederations), which exercises every part of the format:

<script type="text/xml">
  <cardsort>
    <statement>
      <div class="para" id="cardsort-soccer-3-1">Sort each national team into the continental confederation it competes in.<div class="autopermalink" aria-hidden="true" data-description="Paragraph"><a tabindex="-1" href="#cardsort-soccer-3-1" title="Copy heading and permalink for Paragraph" aria-label="Copy heading and permalink for Paragraph">🔗</a></div>
</div>
    </statement>
    <feedback>
      <div class="para" id="cardsort-soccer-4-1">Each country belongs to exactly one continental confederation.</div>
    </feedback>
    <premise>
      <id>cardsort-soccer-p1</id>
      <label>
        <div class="para" id="cardsort-soccer-5-1-1-1">England</div>
      </label>
      <feedback-correct>Correct—England competes in <em class="emphasis">UEFA</em>.</feedback-correct>
      <feedback-incorrect>
        <div class="para" id="cardsort-soccer-5-1-1-3-1">Not quite.</div>
        <div class="para" id="cardsort-soccer-5-1-1-3-2">Of the <span class="process-math">\(6\)</span> FIFA confederations, England belongs to <em class="emphasis">UEFA</em>.</div>
      </feedback-incorrect>
    </premise>
    <premise>
      <id>cardsort-soccer-p2</id>
      <label>
        <div class="para" id="cardsort-soccer-5-1-2-1">France</div>
      </label>
      <feedback-correct/>
      <feedback-incorrect>France is European—look to <em class="emphasis">UEFA</em>.</feedback-incorrect>
    </premise>
    <premise>
      <id>cardsort-soccer-p3</id>
      <label>
        <div class="para" id="cardsort-soccer-5-2-1-1">USA</div>
      </label>
      <feedback-correct>Right! The United States plays in <em class="emphasis">CONCACAF</em>.</feedback-correct>
      <feedback-incorrect/>
    </premise>
    <premise>
      <id>cardsort-soccer-p4</id>
      <label>Egypt</label>
      <feedback-correct/>
      <feedback-incorrect/>
    </premise>
    <response>
      <id>cardsort-soccer-r1</id>
      <label>UEFA</label>
    </response>
    <response>
      <id>cardsort-soccer-r2</id>
      <label>CONCACAF</label>
    </response>
    <response>
      <id>cardsort-soccer-r3</id>
      <label>CAF</label>
    </response>
    <answer premise="cardsort-soccer-p1" response="cardsort-soccer-r1"/>
    <answer premise="cardsort-soccer-p2" response="cardsort-soccer-r1"/>
    <answer premise="cardsort-soccer-p3" response="cardsort-soccer-r2"/>
    <answer premise="cardsort-soccer-p4" response="cardsort-soccer-r3"/>
  </cardsort>
</script>

Structure:

• statement, feedback — the exercise prompt and overall feedback (rendered HTML).
• premise — one per card: a stable id, a label (rendered HTML), and per-premise feedback-correct / feedback-incorrect that are always present but may be empty (shown when the card is placed correctly / incorrectly). p2/p3 show the one-sided cases; p4 shows none.
• response — one per drop category: id + label.
• answer — the correct pairings, by id. Many-to-one is supported: p1 and p2 both map to r1 (UEFA).

Claude Opus 4.8, acting as a coding assistant for Rob Beezer