@pie-players/pie-assessment-toolkit 0.2.7 → 0.2.10

package/src/reference-layout/components/AssessmentHeader.svelte

@@ -1,250 +0,0 @@
-<script lang="ts">
-	
-	import type { AssessmentEntity } from '@pie-players/pie-players-shared';
-	import ToolColorScheme from '@pie-players/pie-tool-color-scheme';
-	import ToolTextToSpeech from '@pie-players/pie-tool-text-to-speech';
-	import { onMount } from 'svelte';
-import type { AssessmentPlayer } from '../../player/AssessmentPlayer';
-
-	let {
-		player,
-		assessment,
-		currentQuestion,
-		totalQuestions,
-		userName
-	}: {
-		player: AssessmentPlayer;
-		assessment: AssessmentEntity;
-		currentQuestion: number;
-		totalQuestions: number;
-		userName?: string;
-	} = $props();
-
-	let isFullscreen = $state(false);
-	const toolCoordinator = $derived(player.getToolCoordinator());
-	
-	// Accommodation tool visibility
-	let showTTS = $state(false);
-	let showColorScheme = $state(false);
-	let flagged = $state(false);
-
-	function updateAccommodationVisibility() {
-		showTTS = toolCoordinator.isToolVisible('tts-accommodation');
-		showColorScheme = toolCoordinator.isToolVisible('colorScheme');
-	}
-
-	onMount(() => {
-		const unsubscribe = toolCoordinator.subscribe(() => {
-			updateAccommodationVisibility();
-		});
-		updateAccommodationVisibility();
-		return unsubscribe;
-	});
-
-	function toggleFullscreen() {
-		if (!document.fullscreenElement) {
-			document.documentElement.requestFullscreen().then(() => {
-				isFullscreen = true;
-			});
-		} else {
-			document.exitFullscreen().then(() => {
-				isFullscreen = false;
-			});
-		}
-	}
-
-	function handleAction(action: string) {
-		// Placeholder: host products can intercept by listening to toolkit events,
-		// or swap this component with their own header.
-		console.log('[AssessmentHeader] action:', action);
-	}
-</script>
-
-<header class="assessment-header">
-	<!-- Left: Assessment Title -->
-	<div class="header-left">
-		<h1 class="assessment-title">{assessment?.name || 'Assessment'}</h1>
-		<span class="question-count">{totalQuestions} Questions</span>
-	</div>
-
-	<!-- Center: Assessment-level actions -->
-	<div class="header-center">
-		<button class="action-button" onclick={() => handleAction('overall-instructions')}>
-			Overall Instructions
-		</button>
-		<button class="action-button" onclick={() => handleAction('resources')}>
-			Resources
-		</button>
-		<button class="action-button" onclick={() => handleAction('review-summary')}>
-			Review Summary
-		</button>
-		<button class="action-button" onclick={() => handleAction('finish-later')}>
-			Finish Later
-		</button>
-		<button
-			class="action-button flag"
-			class:active={flagged}
-			onclick={() => (flagged = !flagged)}
-			aria-pressed={flagged}
-		>
-			Flag Question
-		</button>
-	</div>
-
-	<!-- Right: User Info and Accommodations -->
-	<div class="header-right">
-		<span class="user-name">{userName || 'Student Name'}</span>
-		<div class="accommodations">
-			<!-- Audio (TTS) -->
-			<div class="accommodation-item">
-				<button
-					class="accommodation-button"
-					class:active={showTTS}
-					onclick={() => {
-						toolCoordinator.toggleTool('tts-accommodation');
-						updateAccommodationVisibility();
-					}}
-					aria-label="Toggle audio/text-to-speech"
-				>
-					Audio
-				</button>
-			</div>
-
-			<!-- Contrast -->
-			<div class="accommodation-item">
-				<button
-					class="accommodation-button"
-					class:active={showColorScheme}
-					onclick={() => {
-						toolCoordinator.toggleTool('colorScheme');
-						updateAccommodationVisibility();
-					}}
-					aria-label="Toggle color contrast"
-				>
-					Contrast
-				</button>
-			</div>
-
-			<!-- Fullscreen -->
-			<div class="accommodation-item">
-				<button
-					class="accommodation-button"
-					onclick={toggleFullscreen}
-					aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-				>
-					Fullscreen
-				</button>
-			</div>
-		</div>
-	</div>
-	</header>
-
-	<!-- Render tools outside header (floating modals) -->
-	<ToolTextToSpeech visible={showTTS} toolId="tts-accommodation" coordinator={toolCoordinator} ttsService={player.getTTSService()} />
-	<ToolColorScheme visible={showColorScheme} toolId="colorScheme" coordinator={toolCoordinator} />
-
-<style>
-	.assessment-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.75rem 1rem;
-		background-color: var(--pie-background, #ffffff);
-		border-bottom: 1px solid var(--pie-border, #e0e0e0);
-		min-height: 56px;
-		gap: 1rem;
-	}
-
-	.header-left {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		min-width: 200px;
-	}
-
-	.header-center {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		flex: 1;
-		justify-content: center;
-		min-width: 0;
-	}
-
-	.action-button {
-		padding: 0.5rem 0.75rem;
-		background-color: transparent;
-		border: 1px solid var(--pie-border, #e0e0e0);
-		border-radius: 4px;
-		cursor: pointer;
-		font-size: 0.875rem;
-		color: var(--pie-text, #000);
-		white-space: nowrap;
-	}
-
-	.action-button:hover {
-		background-color: var(--pie-secondary-background, #f5f5f5);
-	}
-
-	.action-button.flag.active {
-		background-color: var(--pie-primary, #3f51b5);
-		color: #fff;
-		border-color: var(--pie-primary, #3f51b5);
-	}
-
-	.assessment-title {
-		margin: 0;
-		font-size: 1.125rem;
-		font-weight: 600;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.question-count {
-		font-size: 0.875rem;
-		color: var(--pie-text-secondary, #666);
-	}
-
-	.header-right {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		min-width: 300px;
-		justify-content: flex-end;
-	}
-
-	.user-name {
-		font-size: 0.875rem;
-		color: var(--pie-text, #000);
-		white-space: nowrap;
-	}
-
-	.accommodations {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-	}
-
-	.accommodation-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.25rem;
-	}
-
-	.accommodation-button {
-		padding: 0.5rem;
-		background-color: transparent;
-		border: 1px solid var(--pie-border, #e0e0e0);
-		border-radius: 4px;
-		cursor: pointer;
-		font-size: 0.875rem;
-		color: var(--pie-text, #000);
-	}
-
-	.accommodation-button:hover {
-		background-color: var(--pie-secondary-background, #f5f5f5);
-	}
-</style>
-

package/src/reference-layout/components/AssessmentNavigation.svelte

@@ -1,134 +0,0 @@
-<script lang="ts">
-	
-	
-	import type { AssessmentPlayer } from '../../player/AssessmentPlayer';
-import type { QuestionRef } from '../../player/qti-navigation';
-
-	let {
-		player,
-		currentIndex,
-		totalItems
-	}: {
-		player: AssessmentPlayer;
-		currentIndex: number;
-		totalItems: number;
-	} = $props();
-
-	function handleQuestionClick(index: number) {
-		player.navigate(index);
-	}
-
-	function isQuestionActive(index: number) {
-		return index === currentIndex;
-	}
-
-	const questionRefs = $derived.by<QuestionRef[]>(() => {
-		// best-effort: not all player implementations expose this, but our default does.
-		return (player as any)?.getQuestionRefs?.() ?? [];
-	});
-
-	// Simple “SchoolCity-ish” grouping: groups of 5 (1-5, 6-10, ...)
-	const groups = $derived.by(() => {
-		const n = totalItems ?? questionRefs.length ?? 0;
-		const size = 5;
-		const out: Array<{ start: number; end: number; label: string }> = [];
-		for (let i = 0; i < n; i += size) {
-			const start = i + 1;
-			const end = Math.min(n, i + size);
-			out.push({ start, end, label: start === end ? `${start}` : `${start}-${end}` });
-		}
-		return out;
-	});
-</script>
-
-<nav class="assessment-navigation">
-	<div class="navigation-content">
-		<!-- Dropdown (placeholder; sections can be layered in later) -->
-		<select
-			class="question-select"
-			onchange={(e) => {
-				const v = Number.parseInt((e.target as HTMLSelectElement).value, 10);
-				if (Number.isFinite(v)) handleQuestionClick(v);
-			}}
-			aria-label="All questions"
-		>
-			<option value={currentIndex}>All Questions</option>
-			{#each Array.from({ length: totalItems }) as _, i (i)}
-				<option value={i}>Question {i + 1}</option>
-			{/each}
-		</select>
-
-		<!-- Range buttons -->
-		<div class="range-buttons" aria-label="Question ranges">
-			{#each groups as g (g.label)}
-				<button
-					class="range-button"
-					class:active={currentIndex + 1 >= g.start && currentIndex + 1 <= g.end}
-					onclick={() => handleQuestionClick(g.start - 1)}
-					aria-label="Navigate to questions {g.label}"
-				>
-					{g.label}
-				</button>
-			{/each}
-		</div>
-	</div>
-</nav>
-
-<style>
-	.assessment-navigation {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		padding: 0.5rem 1rem;
-		background-color: var(--pie-background, #ffffff);
-		border-bottom: 1px solid var(--pie-border, #e0e0e0);
-		gap: 0.5rem;
-	}
-
-	.navigation-content {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		gap: 0.75rem;
-		align-items: center;
-		width: 100%;
-	}
-
-	.question-select {
-		padding: 0.5rem 0.75rem;
-		border: 1px solid var(--pie-border, #e0e0e0);
-		border-radius: 4px;
-		background: var(--pie-background, #fff);
-		font-size: 0.875rem;
-	}
-
-	.range-buttons {
-		display: flex;
-		gap: 0.5rem;
-		overflow-x: auto;
-		flex: 1;
-	}
-
-	.range-button {
-		padding: 0.5rem 0.75rem;
-		background-color: var(--pie-background, #ffffff);
-		border: 1px solid var(--pie-border, #e0e0e0);
-		border-radius: 4px;
-		cursor: pointer;
-		font-size: 0.875rem;
-		color: var(--pie-text, #000);
-		white-space: nowrap;
-		min-width: 56px;
-		text-align: center;
-	}
-
-	.range-button:hover {
-		background-color: var(--pie-secondary-background, #f5f5f5);
-	}
-
-	.range-button.active {
-		background-color: var(--pie-primary, #3f51b5);
-		color: white;
-		border-color: var(--pie-primary, #3f51b5);
-	}
-</style>
-

package/src/reference-layout/components/AssessmentToolsBar.svelte

@@ -1,176 +0,0 @@
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import ToolCalculator from '$lib/tags/tool-calculator/tool-calculator.svelte';
-	import ToolGraph from '$lib/tags/tool-graph/tool-graph.svelte';
-	import ToolLineReader from '$lib/tags/tool-line-reader/tool-line-reader.svelte';
-	import ToolMagnifier from '$lib/tags/tool-magnifier/tool-magnifier.svelte';
-	import ToolPeriodicTable from '$lib/tags/tool-periodic-table/tool-periodic-table.svelte';
-	import ToolProtractor from '$lib/tags/tool-protractor/tool-protractor.svelte';
-	import ToolRuler from '$lib/tags/tool-ruler/tool-ruler.svelte';
-	import type { AssessmentPlayer } from '../../player/AssessmentPlayer';
-
-	let {
-		player,
-		enabledTools = [
-			'calculator',
-			'graph',
-			'periodicTable',
-			'protractor',
-			'lineReader',
-			'magnifier',
-			'ruler'
-		]
-	}: {
-		player: AssessmentPlayer;
-		enabledTools?: string[];
-	} = $props();
-
-	const toolCoordinator = $derived(player.getToolCoordinator());
-
-	// Tool visibility state
-	let showCalculator = $state(false);
-	let showGraph = $state(false);
-	let showPeriodicTable = $state(false);
-	let showProtractor = $state(false);
-	let showLineReader = $state(false);
-	let showMagnifier = $state(false);
-	let showRuler = $state(false);
-
-	// Update visibility state from coordinator
-	function updateToolVisibility() {
-		if (!toolCoordinator) return;
-		showCalculator = toolCoordinator.isToolVisible('calculator');
-		showGraph = toolCoordinator.isToolVisible('graph');
-		showPeriodicTable = toolCoordinator.isToolVisible('periodicTable');
-		showProtractor = toolCoordinator.isToolVisible('protractor');
-		showLineReader = toolCoordinator.isToolVisible('lineReader');
-		showMagnifier = toolCoordinator.isToolVisible('magnifier');
-		showRuler = toolCoordinator.isToolVisible('ruler');
-	}
-
-	function toggleTool(toolId: string) {
-		toolCoordinator.toggleTool(toolId);
-		// Update visibility after toggle
-		updateToolVisibility();
-	}
-
-	// Subscribe to tool coordinator changes
-	let unsubscribe: (() => void) | null = null;
-
-	onMount(() => {
-		if (toolCoordinator) {
-			updateToolVisibility();
-			unsubscribe = toolCoordinator.subscribe(() => {
-				updateToolVisibility();
-			});
-		}
-	});
-
-	onDestroy(() => {
-		unsubscribe?.();
-	});
-
-	const toolButtons = $derived([
-		{ id: 'calculator', label: 'Calculator', icon: '#', visible: showCalculator, enabled: enabledTools.includes('calculator') },
-		{ id: 'graph', label: 'Graph', icon: '📈', visible: showGraph, enabled: enabledTools.includes('graph') },
-		{ id: 'periodicTable', label: 'Periodic Table', icon: '△', visible: showPeriodicTable, enabled: enabledTools.includes('periodicTable') },
-		{ id: 'protractor', label: 'Protractor', icon: '∠', visible: showProtractor, enabled: enabledTools.includes('protractor') },
-		{ id: 'lineReader', label: 'Line Reader', icon: '—', visible: showLineReader, enabled: enabledTools.includes('lineReader') },
-		{ id: 'magnifier', label: 'Text Magnifier', icon: '🔍', visible: showMagnifier, enabled: enabledTools.includes('magnifier') },
-		{ id: 'ruler', label: 'Ruler', icon: '📏', visible: showRuler, enabled: enabledTools.includes('ruler') }
-	]);
-</script>
-
-<div class="assessment-tools-bar">
-	<div class="tools-buttons">
-		{#each toolButtons as tool}
-			{#if tool.enabled}
-				<button
-					class="tool-button"
-					class:active={tool.visible}
-					onclick={() => toggleTool(tool.id)}
-					title={tool.label}
-					aria-label={tool.label}
-					aria-pressed={tool.visible}
-				>
-					<span class="tool-icon">{tool.icon}</span>
-					<span class="tool-label">{tool.label}</span>
-				</button>
-			{/if}
-		{/each}
-	</div>
-</div>
-
-<!-- Tool Instances - Rendered outside bar for floating modals/overlays -->
-{#if enabledTools.includes('calculator')}
-	<ToolCalculator visible={showCalculator} toolId="calculator" coordinator={toolCoordinator} desmosProvider={player.getDesmosProvider()} tiProvider={player.getTIProvider()} />
-{/if}
-{#if enabledTools.includes('graph')}
-	<ToolGraph visible={showGraph} toolId="graph" coordinator={toolCoordinator} />
-{/if}
-{#if enabledTools.includes('periodicTable')}
-	<ToolPeriodicTable visible={showPeriodicTable} toolId="periodicTable" coordinator={toolCoordinator} />
-{/if}
-{#if enabledTools.includes('protractor')}
-	<ToolProtractor visible={showProtractor} toolId="protractor" coordinator={toolCoordinator} />
-{/if}
-{#if enabledTools.includes('lineReader')}
-	<ToolLineReader visible={showLineReader} toolId="lineReader" coordinator={toolCoordinator} />
-{/if}
-{#if enabledTools.includes('magnifier')}
-	<ToolMagnifier visible={showMagnifier} toolId="magnifier" coordinator={toolCoordinator} />
-{/if}
-{#if enabledTools.includes('ruler')}
-	<ToolRuler visible={showRuler} toolId="ruler" coordinator={toolCoordinator} />
-{/if}
-
-<style>
-	.assessment-tools-bar {
-		display: flex;
-		align-items: center;
-		padding: 0.75rem 1rem;
-		background-color: var(--pie-background, #ffffff);
-		border-top: 1px solid var(--pie-border, #e0e0e0);
-		min-height: 60px;
-	}
-
-	.tools-buttons {
-		display: flex;
-		gap: 0.5rem;
-		flex-wrap: wrap;
-		align-items: center;
-	}
-
-	.tool-button {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		background-color: var(--pie-background, #ffffff);
-		border: 1px solid var(--pie-border, #e0e0e0);
-		border-radius: 4px;
-		cursor: pointer;
-		font-size: 0.875rem;
-		color: var(--pie-text, #000);
-		white-space: nowrap;
-	}
-
-	.tool-button:hover {
-		background-color: var(--pie-secondary-background, #f5f5f5);
-	}
-
-	.tool-button.active {
-		background-color: var(--pie-primary, #3f51b5);
-		color: white;
-		border-color: var(--pie-primary, #3f51b5);
-	}
-
-	.tool-icon {
-		font-size: 1rem;
-	}
-
-	.tool-label {
-		font-size: 0.875rem;
-	}
-</style>
-