@pie-players/pie-assessment-toolkit 0.2.0

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

@@ -0,0 +1,250 @@
+<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

@@ -0,0 +1,134 @@
+<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

@@ -0,0 +1,176 @@
+<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>
+