Code owners
Assign users and groups as approvers for specific file changes. Learn more.
index.html 4.19 KiB
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Player</title>
<script id="meta_data" type="application/ld+json">
{
"$schema": "https://raw.githubusercontent.com/verona-interfaces/metadata/master/verona-module-metadata.json",
"type": "player",
"id": "verona-player-aspect",
"version": "placeholder",
"specVersion": "4.0.0",
"name": [{
"lang": "de",
"value": "Verona-Player (Aspect)"
}],
"maintainer": {
"name": [
{
"lang": "de",
"value": "IQB - Institut zur Qualitätsentwicklung im Bildungswesen"
}
],
"url": "https://www.iqb.hu-berlin.de",
"email": "iqb-tbadev@hu-berlin.de"
},
"description": [
{
"lang": "de",
"value": "TODO"
}
],
"repository": {
"type": "git",
"url": "https://github.com/iqb-berlin/verona-modules-apect"
}
}
</script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/common-styles.css" rel="stylesheet">
<link href="assets/roboto.css" rel="stylesheet">
<link href="assets/ptsans.css" rel="stylesheet">
<link href="assets/notoSansSymbols2.css" rel="stylesheet">
<link href="assets/material-icons.css" rel="stylesheet">
</head>
<body>
<aspect-player></aspect-player>
<div style="position: absolute; bottom: 20px; right: 20px; z-index: 100">
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<h4>Load Unit Definition</h4>
<input type='file' id='fileInput' accept='.json,application/json'>
<input type='button' value='Load separate' onclick='loadUnitDefinition("separate");'>
<input type='button' value='Load snap' onclick='loadUnitDefinition("concat-scroll-snap");'>
<input type='button' value='Load scroll' onclick='loadUnitDefinition("concat-scroll");'>
</fieldset>
</form>
<button onclick='denyNavigation();'>Deny Navigation</button>
<button onclick='toPage(0);'>1</button>
<button onclick='toPage(1);'>2</button>
<button onclick='toPage(2);'>3</button>
<button onclick='toPage(3);'>4</button>
<select name="stateReportPolicy" id="stateReportPolicy">
<option value="none">none</option>
<option value="eager">eager</option>
<option value="on-demand">on-demand</option>
</select>
<!-- <button onclick='takeUnitStateSnapshot();'>Take Snapshot</button>--></div>
</body>
<script type="text/javascript">
denyNavigation = () => {
window.postMessage({
type: 'vopNavigationDeniedNotification',
sessionId: 'dev',
reason: ['presentationIncomplete', 'responsesIncomplete']
}, '*');
}
toPage = (page) => {
window.postMessage({
type: 'vopPageNavigationCommand',
sessionId: 'dev',
target: page
}, '*');
}
loadUnitDefinition = (pagingMode) => {
const setStartData = (e) => {
window.postMessage({
type: 'vopStartCommand',
sessionId: 'dev',
unitDefinition: e.target.result,
unitState: {
dataParts: unitStateSnapshot
},
playerConfig: {
stateReportPolicy: document.getElementById('stateReportPolicy').value,
pagingMode: pagingMode, //concat-scroll, separate, concat-scroll-snap
logPolicy: 'rich',
startPage: '0',
enabledNavigationTargets: ['next']
}
}, '*');
}
const input = document.getElementById('fileInput');
if (!input['files'][0]) {
alert("Please choose a file before clicking 'Load'");
} else {
const fileReader = new FileReader();
fileReader.onload = setStartData;
fileReader.readAsText(input['files'][0]);
}
}
let unitStateData = {};
window.addEventListener("message", (event) => {
if (event.data.type === 'vopStateChangedNotification') {
unitStateData = Object.assign(unitStateData, event.data.unitState?.dataParts);
}
console.log('dev-player: unitStateData', unitStateData);
});
let unitStateSnapshot = {};
takeUnitStateSnapshot = () => {
unitStateSnapshot = unitStateData;
};
</script>
</html>