@pie-players/pie-tool-answer-eliminator 0.3.64 → 0.3.65

package/README.md

@@ -213,6 +213,23 @@ Elimination styling is applied by a pluggable `EliminationStrategy` built on the
 - `strikethrough` (default): a `::highlight(pie-answer-eliminated-<id>)` rule renders a line-through over the choice label.
 - `mask`: a `::highlight(pie-answer-masked-<id>)` rule dims and blurs the choice.
 
+Images need separate treatment: they are replaced elements, so neither `::highlight()` nor `text-decoration` paints on them and a picture choice would look untouched. The `strikethrough` strategy therefore wraps each `img` in the eliminated choice in a `span.pie-answer-eliminator-image-strike` (marked with `data-pie-answer-eliminator-image-strike`) and overlays a decorative, `pointer-events: none` SVG that draws an X corner to corner — upper-left to lower-right and lower-left to upper-right. Restoring the choice unwraps the image and returns the DOM to its original shape. Each diagonal is painted over a wider light casing line (`--pie-answer-eliminator-image-strike-casing-color`) so it stays legible over dark artwork.
+
+MathJax-rendered math needs its own mark for the same reason. MathJax's CHTML output draws each glyph as an `mjx-c` element with empty `textContent` (the character comes from `::before` generated content, which belongs to no Range), and its SVG output has no text at all — so the highlight had nothing to decorate and a math-only choice looked untouched. For each `mjx-container` in the eliminated choice, the `strikethrough` strategy marks the inner `mjx-math` box with `pie-answer-eliminator-math-strike` plus one of two modifiers, and the theme paints it:
+
+| expression | mark | `data-pie-answer-eliminator-math-strike` |
+| --- | --- | --- |
+| single row of symbols | centred line-through, as the prose gets | `line` |
+| contains a fraction bar or table rule | diagonals, as an eliminated image gets | `cross` |
+
+A centred line on a fraction lands on the math axis — exactly where the fraction bar already sits — so it reads as a recoloured bar rather than an elimination. The split is structural (`mjx-mfrac`, `mjx-mtable`), not height-based: an inline `a/b` is only 1.16× its font size, indistinguishable in height from a radical or a parenthesised row, yet it is precisely the colliding case. Radicals and stacked limits keep the line, since their bars sit at the top or the strike simply crosses the base.
+
+The inner `mjx-math` box is the paint target, not the container: for inline math `mjx-container` is `display: inline`, so its rect is the surrounding line box while the expression itself overflows it — a fraction sticks out several pixels above and below.
+
+Only MathJax containers are marked: natively rendered MathML keeps real text in `mi`/`mn`/`mo`, so the highlight already strikes every token there.
+
+All three treatments — the text line-through, the diagonals over an image, the line over math — are drawn in one colour, `--pie-answer-eliminator-strike-color` (defaulting to `--pie-incorrect`), so a choice mixing prose, pictures, and math reads as a single strike and can be restyled from one place.
+
 For browsers without the Highlight API, each strategy falls back to a class on the choice container. Either way the eliminated choice also receives ARIA hooks (`data-pie-answer-eliminated`, plus `aria-disabled`/`aria-hidden` and an offscreen "(eliminated)" announcement) for assistive technology.
 
 ### 4. Toggle Behavior

package/dist/index.d.ts

@@ -1,7 +1,4 @@
-/**
- * pie-tool-answer-eliminator - PIE Assessment Tool
- *
- * This package exports a web component built from Svelte.
- * Import the built version for CDN usage, or the .svelte source for Svelte projects.
- */
-export { AdapterRegistry } from './adapters/adapter-registry.js';
+export {}
+import PieToolAnswerEliminator from './tool-answer-eliminator.svelte.js'
+export default PieToolAnswerEliminator
+export {}

package/dist/strategies/strikethrough-strategy.d.ts

@@ -15,10 +15,26 @@ export declare class StrikethroughStrategy implements EliminationStrategy {
     private static readonly LABEL_HOOK_ATTR;
     private static readonly ELIMINATED_ATTR;
     private static readonly ELIMINATED_ID_ATTR;
+    private static readonly IMAGE_WRAPPER_CLASS;
+    private static readonly IMAGE_WRAPPER_ATTR;
+    private static readonly IMAGE_OVERLAY_CLASS;
+    private static readonly IMAGE_LINE_CLASS;
+    private static readonly IMAGE_CASING_CLASS;
+    private static readonly MATH_STRIKE_CLASS;
+    private static readonly MATH_STRIKE_LINE_CLASS;
+    private static readonly MATH_STRIKE_CROSS_CLASS;
+    private static readonly MATH_STRIKE_ATTR;
+    private static readonly MATH_STACKED_SELECTOR;
+    private static readonly MATH_BOX_SELECTOR;
+    private static readonly MATH_SELECTOR;
+    private static readonly SVG_NS;
+    private static readonly BLOCK_DISPLAYS;
     readonly name = "strikethrough";
     private highlights;
     private ranges;
     private fallbackContainers;
+    private imageWrappers;
+    private mathTargets;
     initialize(): void;
     destroy(): void;
     apply(choiceId: string, range: Range): void;
@@ -34,5 +50,57 @@ export declare class StrikethroughStrategy implements EliminationStrategy {
     private findChoiceContainer;
     private applyFallback;
     private removeFallback;
+    /**
+     * Overlay every image in the eliminated choice with a diagonal X, drawn in
+     * the same strike colour as the text line-through.
+     *
+     * Images are replaced elements: `line-through` (and `::highlight()`) never
+     * paints on them, and they cannot carry a pseudo-element, so each image is
+     * wrapped in a positioned span that hosts an absolutely-positioned overlay.
+     * Wrapping keeps the overlay glued to the image through any later reflow —
+     * responsive resizing, late image `load`, zoom — with no observers.
+     */
+    private strikeImages;
+    private unstrikeImages;
+    /**
+     * Give MathJax-rendered math the same line-through the choice's text gets.
+     *
+     * `::highlight()` cannot reach it: MathJax's CHTML output draws every visible
+     * glyph as an `mjx-c` element with empty `textContent`, the character coming
+     * from `::before` generated content — which is part of no Range. (Its only
+     * real text is the `mjx-assistive-mml` copy of the source MathML, clipped to
+     * 1px for assistive tech, so the highlight paints it invisibly.) Its SVG
+     * output has no text at all. A math-only choice therefore looked identical to
+     * an un-eliminated one.
+     *
+     * Unlike an image, the rendered math box is a normal element that can carry a
+     * pseudo-element, so this only adds a class and lets CSS paint it — no
+     * wrapper, nothing restructured, and MathJax's own layout left alone.
+     *
+     * A single row of symbols gets the line-through the prose gets. An expression
+     * that draws horizontal rules of its own gets diagonals instead: a line
+     * centred on a fraction lands on the math axis, which is exactly where the
+     * fraction bar already sits, so it reads as a recoloured bar rather than as an
+     * elimination.
+     */
+    private strikeMath;
+    private unstrikeMath;
+    /**
+     * The element whose images belong to this elimination. Adapters build the
+     * range over the choice's own content (label or choice node), so its common
+     * ancestor is the right scope; the choice container is the fallback.
+     */
+    private resolveImageScope;
+    private wrapImage;
+    private fillsParentWidth;
+    private unwrapImage;
+    /**
+     * Corner-to-corner X sized to the wrapper. `preserveAspectRatio="none"`
+     * stretches the 100x100 viewBox onto any aspect ratio, and
+     * `vector-effect="non-scaling-stroke"` keeps both lines an even screen-space
+     * thickness under that non-uniform scale. The wider casing line under each
+     * red line keeps the X visible over dark or red imagery (WCAG 1.4.11).
+     */
+    private createImageStrikeOverlay;
     private resolveLabelElement;
 }