@pie-players/pie-tool-answer-eliminator 0.3.43 → 0.3.44

package/strategies/strikethrough-strategy.ts

@@ -1,223 +0,0 @@
-import type { EliminationStrategy } from "./elimination-strategy.js";
-
-/**
- * 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 {
-	private static readonly HIGHLIGHT_STYLE_PREFIX =
-		"pie-answer-eliminator-highlight-";
-	private static readonly HIGHLIGHT_NAME_PREFIX = "pie-answer-eliminated-";
-	private static readonly FALLBACK_CLASS =
-		"pie-answer-eliminator-eliminated-fallback";
-	private static readonly SR_CLASS = "pie-answer-eliminator-sr-announcement";
-	private static readonly CHOICE_HOOK_ATTR =
-		"data-pie-answer-eliminator-choice";
-	private static readonly LABEL_HOOK_ATTR = "data-pie-answer-eliminator-label";
-	private static readonly ELIMINATED_ATTR = "data-pie-answer-eliminated";
-	private static readonly ELIMINATED_ID_ATTR = "data-pie-answer-eliminated-id";
-
-	readonly name = "strikethrough";
-
-	private highlights = new Map<string, Highlight>();
-	private ranges = new Map<string, Range>();
-	private fallbackContainers = new Map<string, HTMLElement>();
-
-	initialize(): void {
-		// Check browser support
-		if (!this.isSupported()) {
-			console.warn("CSS Custom Highlight API not supported, using fallback");
-		}
-	}
-
-	destroy(): void {
-		this.clearAll();
-	}
-
-	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(
-			`${StrikethroughStrategy.HIGHLIGHT_NAME_PREFIX}${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(
-			`${StrikethroughStrategy.HIGHLIGHT_NAME_PREFIX}${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);
-		this.fallbackContainers.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);
-		}
-		this.fallbackContainers.clear();
-	}
-
-	getEliminatedIds(): string[] {
-		return Array.from(this.highlights.keys());
-	}
-
-	private isSupported(): boolean {
-		return typeof CSS !== "undefined" && "highlights" in CSS;
-	}
-
-	private injectHighlightCSS(choiceId: string): void {
-		const styleId = `${StrikethroughStrategy.HIGHLIGHT_STYLE_PREFIX}${choiceId}`;
-		if (document.getElementById(styleId)) return;
-
-		const style = document.createElement("style");
-		style.id = styleId;
-		style.textContent = `
-      ::highlight(pie-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(
-				`${StrikethroughStrategy.HIGHLIGHT_STYLE_PREFIX}${choiceId}`,
-			)
-			?.remove();
-	}
-
-	private addAriaAttributes(range: Range): void {
-		// Find the choice container element
-		const container = this.findChoiceContainer(range);
-		if (!container) return;
-
-		container.setAttribute(StrikethroughStrategy.ELIMINATED_ATTR, "true");
-		container.setAttribute("aria-disabled", "true");
-
-		// Add screen reader announcement
-		const label = this.resolveLabelElement(container);
-		if (label && !label.querySelector(`.${StrikethroughStrategy.SR_CLASS}`)) {
-			const announcement = document.createElement("span");
-			announcement.className = StrikethroughStrategy.SR_CLASS;
-			announcement.textContent = " (eliminated)";
-			label.appendChild(announcement);
-		}
-	}
-
-	private removeAriaAttributes(range: Range): void {
-		const container = this.findChoiceContainer(range);
-		if (!container) return;
-
-		container.removeAttribute(StrikethroughStrategy.ELIMINATED_ATTR);
-		container.removeAttribute("aria-disabled");
-
-		// Remove screen reader announcement
-		const announcement = container.querySelector(
-			`.${StrikethroughStrategy.SR_CLASS}`,
-		);
-		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.getAttribute(StrikethroughStrategy.CHOICE_HOOK_ATTR) === "true"
-			) {
-				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(StrikethroughStrategy.FALLBACK_CLASS);
-		container.setAttribute(StrikethroughStrategy.ELIMINATED_ATTR, "true");
-		container.setAttribute(StrikethroughStrategy.ELIMINATED_ID_ATTR, choiceId);
-		this.fallbackContainers.set(choiceId, container);
-		this.addAriaAttributes(range);
-	}
-
-	private removeFallback(choiceId: string): void {
-		const container = this.fallbackContainers.get(choiceId);
-		if (!container) return;
-
-		container.classList.remove(StrikethroughStrategy.FALLBACK_CLASS);
-		container.removeAttribute(StrikethroughStrategy.ELIMINATED_ATTR);
-		container.removeAttribute(StrikethroughStrategy.ELIMINATED_ID_ATTR);
-
-		// Create fake range for aria removal
-		const range = document.createRange();
-		range.selectNodeContents(container);
-		this.removeAriaAttributes(range);
-		this.fallbackContainers.delete(choiceId);
-	}
-
-	private resolveLabelElement(container: HTMLElement): HTMLElement | null {
-		return (
-			container.querySelector<HTMLElement>(
-				`[${StrikethroughStrategy.LABEL_HOOK_ATTR}="true"]`,
-			) || container.querySelector<HTMLElement>("label")
-		);
-	}
-}

package/tool-answer-eliminator.svelte

@@ -1,223 +0,0 @@
-<svelte:options
-	customElement={{
-		tag: 'pie-tool-answer-eliminator',
-		shadow: 'open',
-		props: {
-			visible: { type: 'Boolean', attribute: 'visible' },
-			toolId: { type: 'String', attribute: 'tool-id' },
-			strategy: { type: 'String', attribute: 'strategy' },
-			alwaysOn: { type: 'Boolean', attribute: 'always-on' },
-			buttonAlignment: { type: 'String', attribute: 'button-alignment' },
-			scopeElement: { type: 'Object', reflect: false },
-
-			// Store integration (JS properties only)
-			elementToolStateStore: { type: 'Object', reflect: false },
-			globalElementId: { type: 'String', reflect: false }
-		}
-	}}
-/>
-
-<!-- Answer Eliminator Tool - Process-of-Elimination Support (Inline Toggle Mode)
-
-  Allows students to mark answer choices as "eliminated" during test-taking,
-  supporting the process-of-elimination strategy.
-
-  **Interaction Pattern (Industry Standard):**
-  - Student toggles tool ON via toolbar button
-  - Small elimination buttons (X) appear next to each answer choice
-  - Student clicks X buttons to eliminate/restore choices
-  - Tool can be toggled OFF to hide all elimination buttons
-  - OR can be "always-on" via student profile (alwaysOn prop)
-
-  **Features:**
-  - Modern CSS Custom Highlight API (zero DOM mutation, 10-15x faster)
-  - Generic adapter pattern (works with multiple-choice, EBSR, inline-dropdown)
-  - Strikethrough visual (WCAG 2.2 AA compliant, best for accessibility)
-  - localStorage persistence across question navigation
-  - Keyboard accessible with proper ARIA attributes
-
-  **WCAG 2.2 Level AA Compliant:**
-  - 1.3.1 Info and Relationships (maintains structure)
-  - 2.4.3 Focus Order (no layout shift)
-  - 3.3.1 Error Identification (easy to identify/correct)
-  - 4.1.2 Name, Role, Value (proper ARIA)
--->
-
-<script lang="ts">
-	
-	import {
-		connectToolRuntimeContext,
-		connectToolShellContext,
-		ZIndexLayer,
-	} from '@pie-players/pie-assessment-toolkit';
-	import type {
-		AssessmentToolkitShellContext,
-		AssessmentToolkitRuntimeContext,
-		ToolCoordinatorApi,
-	} from '@pie-players/pie-assessment-toolkit';
-	import { onMount } from 'svelte';
-	import { AnswerEliminatorCore } from './answer-eliminator-core.js';
-
-	// Props
-	let {
-		visible = false,
-		toolId = 'answerEliminator',
-		strategy = 'strikethrough' as 'strikethrough' | 'mask' | 'gray',
-		alwaysOn = false, // Set true for profile-based accommodation
-		buttonAlignment = 'right' as 'left' | 'right' | 'inline', // Button placement: left, right, or inline with checkbox
-		scopeElement = null, // Container element to limit DOM queries (for multi-item pages)
-
-		// Store integration
-		elementToolStateStore = null, // ElementToolStateStore instance
-		globalElementId = '' // Composite key: "assessmentId:sectionId:itemId:elementId"
-	}: {
-		visible?: boolean;
-		toolId?: string;
-		strategy?: 'strikethrough' | 'mask' | 'gray';
-		alwaysOn?: boolean;
-		buttonAlignment?: 'left' | 'right' | 'inline';
-		scopeElement?: HTMLElement | null;
-		elementToolStateStore?: any;
-		globalElementId?: string;
-	} = $props();
-
-	// State
-	let contextHostElement = $state<HTMLElement | null>(null);
-	let runtimeContext = $state<AssessmentToolkitRuntimeContext | null>(null);
-	let shellContext = $state<AssessmentToolkitShellContext | null>(null);
-	const coordinator = $derived(
-		runtimeContext?.toolCoordinator as ToolCoordinatorApi | undefined,
-	);
-	let core = $state<AnswerEliminatorCore | null>(null);
-	let lastShellContextVersion = $state<number | null>(null);
-
-	// Track registration state
-	let registeredToolId = $state<string | null>(null);
-	let registeredCoordinator = $state<ToolCoordinatorApi | null>(null);
-
-	// Determine if tool should be active (either toggled on OR always-on mode)
-	let isActive = $derived(alwaysOn || visible);
-
-	$effect(() => {
-		if (!contextHostElement) return;
-		return connectToolRuntimeContext(contextHostElement, (value: AssessmentToolkitRuntimeContext) => {
-			runtimeContext = value;
-		});
-	});
-
-	$effect(() => {
-		if (!contextHostElement) return;
-		return connectToolShellContext(contextHostElement, (value: AssessmentToolkitShellContext) => {
-			shellContext = value;
-		});
-	});
-
-	function resolveQuestionRoot(): HTMLElement | null {
-		return scopeElement || shellContext?.scopeElement || null;
-	}
-
-	function initializeForCurrentQuestion() {
-		if (!isActive || !core) return;
-		const questionRoot = resolveQuestionRoot();
-
-		if (!questionRoot) {
-			console.warn('[AnswerEliminator] Missing shell scope context for question root');
-			return;
-		}
-
-		core.initializeForQuestion(questionRoot);
-	}
-
-	function handleItemChange() {
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				initializeForCurrentQuestion();
-			});
-		});
-	}
-
-	// Register with coordinator when it becomes available
-	$effect(() => {
-		if (!coordinator || !toolId) return;
-		if (
-			registeredCoordinator &&
-			registeredToolId &&
-			(registeredCoordinator !== coordinator || registeredToolId !== toolId)
-		) {
-			registeredCoordinator.unregisterTool(registeredToolId);
-			registeredCoordinator = null;
-			registeredToolId = null;
-		}
-		if (!registeredToolId) {
-			coordinator.registerTool(toolId, 'Answer Eliminator', undefined, ZIndexLayer.MODAL);
-			registeredCoordinator = coordinator;
-			registeredToolId = toolId;
-		}
-	});
-
-	// Update store integration when store props change
-	$effect(() => {
-		if (core && elementToolStateStore && globalElementId) {
-			core.setStoreIntegration(elementToolStateStore, globalElementId);
-		}
-	});
-
-	onMount(() => {
-		// Initialize core engine with configuration
-		core = new AnswerEliminatorCore(strategy, buttonAlignment);
-
-		// Set up store integration if provided
-		if (core && elementToolStateStore && globalElementId) {
-			core.setStoreIntegration(elementToolStateStore, globalElementId);
-		}
-
-		// Initialize for current question if active, otherwise ensure clean state
-		if (isActive) {
-			initializeForCurrentQuestion();
-		} else {
-			// If not active on mount, clear any leftover visual eliminations
-			core.cleanup();
-		}
-
-		return () => {
-			core?.destroy();
-			core = null;
-			if (registeredCoordinator && registeredToolId) {
-				registeredCoordinator.unregisterTool(registeredToolId);
-				registeredCoordinator = null;
-				registeredToolId = null;
-			}
-		};
-	});
-
-	$effect(() => {
-		const shellVersion = shellContext?.contextVersion ?? null;
-		if (shellVersion === null) return;
-		if (lastShellContextVersion === null) {
-			lastShellContextVersion = shellVersion;
-			return;
-		}
-		if (shellVersion === lastShellContextVersion) return;
-		lastShellContextVersion = shellVersion;
-		handleItemChange();
-	});
-
-	// Watch for visibility changes to show/hide elimination buttons
-	$effect(() => {
-		if (core) {
-			if (isActive) {
-				// Re-enable state restoration when tool is activated
-				core.enableStateRestoration();
-				initializeForCurrentQuestion();
-			} else {
-				// Hide all elimination buttons when tool is turned off
-				// This also disables state restoration
-				core.cleanup();
-			}
-		}
-	});
-</script>
-
-<!-- No visible UI - tool operates entirely through injected buttons next to choices -->
-<!-- The toolbar button visibility is managed by tool-toolbar.svelte -->
-<div bind:this={contextHostElement} style="display: none;" aria-hidden="true"></div>