-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (128 loc) · 4.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AbstractContentViewer</title>
<script type="application/javascript">
/**
dont delete!
**/
function init() {
window.data = getData();
setXapiObjectGetter(getXapiObject);
registerOnSubmitListener(onSubmit);
}
/**
dont delete!
**/
function updateLayout() {
propagateLayoutChanges();
}
/**
dont delete!
**/
function sendStatement(stmt) {
sendXapiStatement(stmt);
}
</script>
<!-- EDIT css for custom styling
NOTE: you can use Material-css classes for styling
Source: https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/bootstrap-elements.html
-->
<style type ="text/css">
</style>
<!-- EDIT css for custom styling -->
</head>
<body>
<!-- EDIT html for card display
for example:
<div id="description"></div>
<div id="answers"></div>
<div id="contextContainer">
<button id="showContextHeader" class="btn btn-primary" onclick="showHideContext()"></button>
<p id="contextContentContainer"></p>
</div>
-->
<h1 id="title"></h1>
<!-- EDIT html for card display -->
<!-- EDIT card logic -->
<script type="application/javascript">
/**
function setContent() -> display content (write data from dataobject to DOM Elements)
for example:
document.getElementById('title').innerHTML = data.title;
**/
function setContent(){}
/**
function getXapiObject() used to build XAPI-Object
for syntax: https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md
for example:
return {
"definition": {
"description": {
"en-US": window.data.description
},
"type": "http://adlnet.gov/expapi/activities/cmi.interaction",
"interactionType": "fill-in",
"correctResponsesPattern":
getAllCombinations(window.data.answers).map(function(e){ return e.join("[,]") })
}
}
**/
function getXapiObject(){}
/**
function onInteraction() -> should be called (event listener) everytime user klicks, writes, moves.. something
must send statement on interaction! e.g.:
var stmt = {};
// actor is set by hosting application
stmt.actor = undefined;
stmt.verb = {
"id": "http://adlnet.gov/expapi/verbs/interacted",
"display": {
"de-DE": "interagierte",
"en-US": "interacted",
"fr-FR": "a interagi",
"es-ES": "interactuó"
}
};
stmt.object = getXapiObject();
stmt.result = {
response: getCurrentAnswers()
};
sendStatement(stmt);
**/
function onInteraction(){}
/**
function onSubmit() -> is called when user klicks 'submit'-Button @card
has 2 states: display correct answer -> submit icon changes to "revert" -> revert to original state
Must send Statement on submit! e.g.:
var stmt = {};
// actor is set by hosting application
stmt.actor = undefined;
stmt.verb = {
"id": "http://adlnet.gov/expapi/verbs/answered",
"display": {
"de-DE": "beantwortete",
"en-US": "answered",
"fr-FR": "a répondu",
"es-ES": "contestó"
}
};
stmt.object = getXapiObject();
stmt.result = {
response: getCurrentAnswers(),
success: checkIfCurrentAnswersCorrect()
};
sendStatement(stmt);
**/
function onSubmit(){}
/**
function init() -> dont delete! used for initialization.
**/
init();
setContent();
updateLayout();
</script>
<!-- EDIT card logic -->
</body>
</html>