forked from 6004x/jade
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathedx_demo.html
100 lines (86 loc) · 3.25 KB
/
edx_demo.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
<!DOCTYPE html>
<html>
<head>
<style>
.edx-input {
width: 200px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//edge.edx.org/c4x/MITx/6.MITx/asset/jschannel.js"></script>
<script type="text/javascript">
var edx_demo = (function () {
var input_field; // example interaction: a single input field
// return JSON representation to be used by server-side grader
function getGrade() {
// example: return value of input field
var grade = {};
if (input_field) grade.value = input_field.val();
return JSON.stringify(grade);
}
// return JSON representation of persistent state
function getState() {
// example: return value of input field
var state = {};
if (input_field) state.value = input_field.val();
return JSON.stringify(state);
}
// process incoming state from jsinput framework
// This function will be called with 1 argument when JSChannel is not used,
// 2 otherwise. In the latter case, the first argument is a transaction
// object that will not be used here (see http://mozilla.github.io/jschannel/docs/)
function setState() {
var stateStr = arguments.length === 1 ? arguments[0] : arguments[1];
// jsinput gets anxious if we don't respond quickly, so come back to
// initialization after we've returned and made jsinput happy.
setTimeout(function () { initialize(JSON.parse(stateStr)); },1);
}
// use provided state object to initialize demo state. If state is undefined,
// perform default initialization
function initialize(state) {
if (input_field) input_field.val(state.value);
}
// set up editor inside of div's with class "jade"
function setup() {
// Establish a channel only if this application is embedded in an iframe.
// This will let the parent window communicate with this application using
// RPC and bypass SOP restrictions.
if (window.parent !== window) {
channel = Channel.build({
window: window.parent,
origin: "*",
scope: "JSInput"
});
channel.bind("getGrade", getGrade);
channel.bind("getState", getState);
channel.bind("setState", setState);
}
// look for nodes of class edx_demo and set them up
$('.edx_demo').each(function(index, div) {
$(div).empty(); // start with a clean slate
// example: a simple input field
input_field = $('<input type="text" class="edx-input"></input>');
$(div).append('Please enter a number: ',input_field);
});
}
//////////////////////////////////////////////////////////////////////
//
// Module exports
//
//////////////////////////////////////////////////////////////////////
return {
setup: setup, // called to initialize jade editors on this page
// communication to/from edX jsinput framework
getState: getState,
setState: setState,
getGrade: getGrade
};
}());
// set up any demo DIVs
$(document).ready(edx_demo.setup);
</script>
</head>
<body>
<div class="edx_demo"></div>
</body>
</html>