@pie-players/pie-tool-answer-eliminator 0.2.0

package/dist/tool-answer-eliminator.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('vite').UserConfig;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/dist/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAKA,wBAmCG"}

package/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+// Re-export AdapterRegistry for auto-hide detection
+export { AdapterRegistry } from "./adapters/adapter-registry";
+
+// Re-export any TypeScript types defined in the package

package/package.json

@@ -0,0 +1,69 @@
+{
+	"name": "@pie-players/pie-tool-answer-eliminator",
+	"version": "0.2.0",
+	"type": "module",
+	"description": "Answer eliminator tool for PIE assessment player - supports process-of-elimination test-taking strategy",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pie-framework/pie-players.git"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"keywords": [
+		"pie",
+		"assessment",
+		"tool",
+		"answer-eliminator",
+		"test-strategy",
+		"wcag",
+		"accessibility"
+	],
+	"svelte": "./tool-answer-eliminator.svelte",
+	"main": "./dist/tool-answer-eliminator.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/tool-answer-eliminator.js",
+			"svelte": "./tool-answer-eliminator.svelte"
+		},
+		"./adapters/adapter-registry": {
+			"types": "./adapters/adapter-registry.ts",
+			"import": "./adapters/adapter-registry.ts"
+		}
+	},
+	"files": [
+		"dist",
+		"tool-answer-eliminator.svelte",
+		"index.ts",
+		"package.json",
+		"answer-eliminator-core.ts",
+		"adapters/",
+		"strategies/"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"license": "MIT",
+	"unpkg": "./dist/tool-answer-eliminator.js",
+	"jsdelivr": "./dist/tool-answer-eliminator.js",
+	"dependencies": {
+		"@pie-players/pie-assessment-toolkit": "workspace:*",
+		"@pie-players/pie-players-shared": "workspace:*"
+	},
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"typecheck": "tsc --noEmit",
+		"lint": "biome check ."
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.3.10",
+		"@sveltejs/vite-plugin-svelte": "^6.1.4",
+		"svelte": "^5.16.1",
+		"typescript": "^5.7.0",
+		"vite": "^7.0.8",
+		"vite-plugin-dts": "^4.5.3"
+	}
+}

package/strategies/elimination-strategy.ts

@@ -0,0 +1,47 @@
+/**
+ * Strategy interface for visual elimination styles
+ * Uses CSS Custom Highlight API for zero DOM mutation
+ */
+export interface EliminationStrategy {
+	/** Strategy name */
+	readonly name: string;
+
+	/**
+	 * Apply elimination visual to a choice
+	 * @param choiceId - Unique identifier for this choice
+	 * @param range - DOM Range covering the choice content
+	 */
+	apply(choiceId: string, range: Range): void;
+
+	/**
+	 * Remove elimination visual from a choice
+	 * @param choiceId - Unique identifier for this choice
+	 */
+	remove(choiceId: string): void;
+
+	/**
+	 * Check if a choice is currently eliminated
+	 * @param choiceId - Unique identifier for this choice
+	 */
+	isEliminated(choiceId: string): boolean;
+
+	/**
+	 * Clear all eliminations
+	 */
+	clearAll(): void;
+
+	/**
+	 * Get all eliminated choice IDs
+	 */
+	getEliminatedIds(): string[];
+
+	/**
+	 * Initialize strategy (inject CSS, etc.)
+	 */
+	initialize(): void;
+
+	/**
+	 * Cleanup strategy (remove CSS, etc.)
+	 */
+	destroy(): void;
+}

package/strategies/mask-strategy.ts

@@ -0,0 +1,180 @@
+import type { EliminationStrategy } from "./elimination-strategy";
+
+/**
+ * Mask strategy using CSS Custom Highlight API
+ * Partially hides/grays eliminated choices
+ */
+export class MaskStrategy implements EliminationStrategy {
+	readonly name = "mask";
+
+	private highlights = new Map<string, Highlight>();
+	private ranges = new Map<string, Range>();
+
+	initialize(): void {
+		this.injectCSS();
+	}
+
+	destroy(): void {
+		this.clearAll();
+		this.removeCSS();
+	}
+
+	apply(choiceId: string, range: Range): void {
+		if (!this.isSupported()) {
+			this.applyFallback(choiceId, range);
+			return;
+		}
+
+		// Inject CSS for this specific highlight
+		this.injectHighlightCSS(choiceId);
+
+		const highlight = new Highlight(range);
+		CSS.highlights.set(`answer-masked-${choiceId}`, highlight);
+
+		this.highlights.set(choiceId, highlight);
+		this.ranges.set(choiceId, range);
+
+		this.addAriaAttributes(range);
+	}
+
+	remove(choiceId: string): void {
+		if (!this.isSupported()) {
+			this.removeFallback(choiceId);
+			return;
+		}
+
+		CSS.highlights.delete(`answer-masked-${choiceId}`);
+
+		// Remove CSS for this specific highlight
+		this.removeHighlightCSS(choiceId);
+
+		const range = this.ranges.get(choiceId);
+		if (range) {
+			this.removeAriaAttributes(range);
+		}
+
+		this.highlights.delete(choiceId);
+		this.ranges.delete(choiceId);
+	}
+
+	isEliminated(choiceId: string): boolean {
+		return this.highlights.has(choiceId);
+	}
+
+	clearAll(): void {
+		for (const choiceId of this.highlights.keys()) {
+			this.remove(choiceId);
+		}
+	}
+
+	getEliminatedIds(): string[] {
+		return Array.from(this.highlights.keys());
+	}
+
+	private isSupported(): boolean {
+		return typeof CSS !== "undefined" && "highlights" in CSS;
+	}
+
+	private injectCSS(): void {
+		const styleId = "answer-eliminator-mask-styles";
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement("style");
+		style.id = styleId;
+		// CSS Custom Highlight API: Each registered highlight gets its own ::highlight() selector
+		// We inject choice-specific styles dynamically in injectHighlightCSS()
+		style.textContent = `
+      /* Fallback */
+      .answer-masked-fallback {
+        opacity: 0.2;
+        filter: blur(2px);
+      }
+    `;
+
+		document.head.appendChild(style);
+	}
+
+	private injectHighlightCSS(choiceId: string): void {
+		const styleId = `answer-eliminator-mask-highlight-${choiceId}`;
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement("style");
+		style.id = styleId;
+		style.textContent = `
+      ::highlight(answer-masked-${choiceId}) {
+        opacity: 0.2;
+        filter: blur(2px);
+      }
+    `;
+		document.head.appendChild(style);
+	}
+
+	private removeHighlightCSS(choiceId: string): void {
+		document
+			.getElementById(`answer-eliminator-mask-highlight-${choiceId}`)
+			?.remove();
+	}
+
+	private removeCSS(): void {
+		document.getElementById("answer-eliminator-mask-styles")?.remove();
+	}
+
+	private addAriaAttributes(range: Range): void {
+		const container = this.findChoiceContainer(range);
+		if (!container) return;
+
+		container.setAttribute("data-eliminated", "true");
+		container.setAttribute("aria-hidden", "true");
+	}
+
+	private removeAriaAttributes(range: Range): void {
+		const container = this.findChoiceContainer(range);
+		if (!container) return;
+
+		container.removeAttribute("data-eliminated");
+		container.removeAttribute("aria-hidden");
+	}
+
+	private findChoiceContainer(range: Range): HTMLElement | null {
+		let element: HTMLElement | null = range.startContainer as HTMLElement;
+
+		// If startContainer is a text node, get its parent
+		if (element.nodeType === Node.TEXT_NODE) {
+			element = element.parentElement;
+		}
+
+		while (element && element !== document.body) {
+			if (element.classList?.contains("choice-input")) {
+				return element;
+			}
+			element = element.parentElement;
+		}
+
+		return null;
+	}
+
+	private applyFallback(choiceId: string, range: Range): void {
+		const container = this.findChoiceContainer(range);
+		if (!container) return;
+
+		container.classList.add("answer-masked-fallback");
+		container.setAttribute("data-eliminated", "true");
+		container.setAttribute("data-eliminated-id", choiceId);
+		this.addAriaAttributes(range);
+	}
+
+	private removeFallback(choiceId: string): void {
+		const container = document.querySelector(
+			`[data-eliminated-id="${choiceId}"]`,
+		);
+		if (!container) return;
+
+		container.classList.remove("answer-masked-fallback");
+		container.removeAttribute("data-eliminated");
+		container.removeAttribute("data-eliminated-id");
+
+		const range = document.createRange();
+		range.selectNodeContents(container);
+		this.removeAriaAttributes(range);
+	}
+}

package/strategies/strikethrough-strategy.ts

@@ -0,0 +1,239 @@
+import type { EliminationStrategy } from "./elimination-strategy";
+
+/**
+ * Strikethrough strategy using CSS Custom Highlight API
+ *
+ * Modern approach: Zero DOM mutation, uses browser-native highlighting
+ * Accessibility: Best for screen readers (text remains in DOM unchanged)
+ * WCAG Compliance: Maintains info structure (1.3.1), no layout shift (2.4.3)
+ */
+export class StrikethroughStrategy implements EliminationStrategy {
+	readonly name = "strikethrough";
+
+	private highlights = new Map<string, Highlight>();
+	private ranges = new Map<string, Range>();
+
+	initialize(): void {
+		// Check browser support
+		if (!this.isSupported()) {
+			console.warn("CSS Custom Highlight API not supported, using fallback");
+			return;
+		}
+
+		// Inject CSS for highlight styling
+		this.injectCSS();
+	}
+
+	destroy(): void {
+		this.clearAll();
+		this.removeCSS();
+	}
+
+	apply(choiceId: string, range: Range): void {
+		if (!this.isSupported()) {
+			this.applyFallback(choiceId, range);
+			return;
+		}
+
+		// Inject CSS for this specific highlight
+		this.injectHighlightCSS(choiceId);
+
+		// Create highlight for this range
+		const highlight = new Highlight(range);
+
+		// Register in CSS.highlights with unique name
+		CSS.highlights.set(`answer-eliminated-${choiceId}`, highlight);
+
+		// Track internally
+		this.highlights.set(choiceId, highlight);
+		this.ranges.set(choiceId, range);
+
+		// Add ARIA attributes to the choice element for screen readers
+		this.addAriaAttributes(range);
+	}
+
+	remove(choiceId: string): void {
+		if (!this.isSupported()) {
+			this.removeFallback(choiceId);
+			return;
+		}
+
+		// Remove from CSS.highlights
+		CSS.highlights.delete(`answer-eliminated-${choiceId}`);
+
+		// Remove CSS for this specific highlight
+		this.removeHighlightCSS(choiceId);
+
+		// Remove from internal tracking
+		const range = this.ranges.get(choiceId);
+		if (range) {
+			this.removeAriaAttributes(range);
+		}
+
+		this.highlights.delete(choiceId);
+		this.ranges.delete(choiceId);
+	}
+
+	isEliminated(choiceId: string): boolean {
+		return this.highlights.has(choiceId);
+	}
+
+	clearAll(): void {
+		// Remove all highlights
+		for (const choiceId of this.highlights.keys()) {
+			this.remove(choiceId);
+		}
+	}
+
+	getEliminatedIds(): string[] {
+		return Array.from(this.highlights.keys());
+	}
+
+	private isSupported(): boolean {
+		return typeof CSS !== "undefined" && "highlights" in CSS;
+	}
+
+	private injectCSS(): void {
+		const styleId = "answer-eliminator-strikethrough-styles";
+
+		// Don't inject if already exists
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement("style");
+		style.id = styleId;
+		// CSS Custom Highlight API: Each registered highlight gets its own ::highlight() selector
+		// Since we register highlights with names like 'answer-eliminated-{choiceId}',
+		// we need to inject CSS for each one dynamically, OR use a shared attribute approach.
+		// For performance, we inject a base style and add choice-specific styles dynamically.
+		style.textContent = `
+      /* Fallback for browsers without CSS Highlight API */
+      .answer-eliminated-fallback {
+        text-decoration: line-through;
+        text-decoration-thickness: 2px;
+        text-decoration-color: var(--pie-incorrect, #ff9800);
+        opacity: 0.6;
+      }
+
+      /* Screen reader only text */
+      .sr-announcement {
+        position: absolute;
+        left: -10000px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+    `;
+
+		document.head.appendChild(style);
+	}
+
+	private injectHighlightCSS(choiceId: string): void {
+		const styleId = `answer-eliminator-highlight-${choiceId}`;
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement("style");
+		style.id = styleId;
+		style.textContent = `
+      ::highlight(answer-eliminated-${choiceId}) {
+        text-decoration: line-through;
+        text-decoration-thickness: 2px;
+        text-decoration-color: var(--pie-incorrect, #ff9800);
+        opacity: 0.6;
+      }
+    `;
+		document.head.appendChild(style);
+	}
+
+	private removeHighlightCSS(choiceId: string): void {
+		document
+			.getElementById(`answer-eliminator-highlight-${choiceId}`)
+			?.remove();
+	}
+
+	private removeCSS(): void {
+		const style = document.getElementById(
+			"answer-eliminator-strikethrough-styles",
+		);
+		style?.remove();
+	}
+
+	private addAriaAttributes(range: Range): void {
+		// Find the choice container element
+		const container = this.findChoiceContainer(range);
+		if (!container) return;
+
+		container.setAttribute("data-eliminated", "true");
+		container.setAttribute("aria-disabled", "true");
+
+		// Add screen reader announcement
+		const label = container.querySelector(".label");
+		if (label && !label.querySelector(".sr-announcement")) {
+			const announcement = document.createElement("span");
+			announcement.className = "sr-announcement";
+			announcement.textContent = " (eliminated)";
+			label.appendChild(announcement);
+		}
+	}
+
+	private removeAriaAttributes(range: Range): void {
+		const container = this.findChoiceContainer(range);
+		if (!container) return;
+
+		container.removeAttribute("data-eliminated");
+		container.removeAttribute("aria-disabled");
+
+		// Remove screen reader announcement
+		const announcement = container.querySelector(".sr-announcement");
+		announcement?.remove();
+	}
+
+	private findChoiceContainer(range: Range): HTMLElement | null {
+		// Walk up from range start to find the choice container
+		let element: HTMLElement | null = range.startContainer as HTMLElement;
+
+		// If startContainer is a text node, get its parent
+		if (element.nodeType === Node.TEXT_NODE) {
+			element = element.parentElement;
+		}
+
+		while (element && element !== document.body) {
+			if (
+				element.classList?.contains("choice-input") ||
+				element.classList?.contains("corespring-checkbox") ||
+				element.classList?.contains("corespring-radio-button")
+			) {
+				return element;
+			}
+			element = element.parentElement;
+		}
+
+		return null;
+	}
+
+	// Fallback for browsers without CSS Highlight API
+	private applyFallback(choiceId: string, range: Range): void {
+		const container = this.findChoiceContainer(range);
+		if (!container) return;
+
+		container.classList.add("answer-eliminated-fallback");
+		container.setAttribute("data-eliminated", "true");
+		container.setAttribute("data-eliminated-id", choiceId);
+		this.addAriaAttributes(range);
+	}
+
+	private removeFallback(choiceId: string): void {
+		const container = document.querySelector(
+			`[data-eliminated-id="${choiceId}"]`,
+		);
+		if (!container) return;
+
+		container.classList.remove("answer-eliminated-fallback");
+		container.removeAttribute("data-eliminated");
+		container.removeAttribute("data-eliminated-id");
+
+		// Create fake range for aria removal
+		const range = document.createRange();
+		range.selectNodeContents(container);
+		this.removeAriaAttributes(range);
+	}
+}