-
Notifications
You must be signed in to change notification settings - Fork 4
/
submitTests.html
228 lines (193 loc) · 7.15 KB
/
submitTests.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="Seann Ives" />
<meta name="Owner" content="Pearson" />
<meta name="Copyright" content="Copyright (c) 2013 Pearson. All rights reserved." />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="eCourses Author, Title" name="description" />
<!-- Bootstrap -->
<link href="css/bootstrap_plus.css" rel="stylesheet" media="screen">
<link href="css/widgets.css" rel="stylesheet">
<link href="css/learning-objective.css" rel="stylesheet">
<link href="css/eCourse-master.css" rel="stylesheet" media="screen">
<title class="setTitle"></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 leftCol">
<h2 class="setTitle">Can you rock?</h2>
<p>It's important to rock. Set the volume to the appropriate level using the slider below.</p>
<p>
<div id="t1slider"></div>
<div id="t1button"></div>
</p>
<div id="Q1here">
<h2 class="setTitle">Test SubmitManager w/ a question widget</h2>
</div>
<div id="numeric">
<p>2. A slightly more real numeric question implementation</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="js/jquery.touchSwipe.min.js"></script> -->
<script src="js/jquery-ui-1.10.2.custom.js"></script>
<script src="js/toc-structure.js"></script>
<script src="js/eCourse-master.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/widget-base.js"></script>
<script src="js/widget-button.js"></script>
<script src="js/widget-slider.js"></script>
<!-- widget-numeric is required with widget-slider, even if you don't want a readout, as you'll get an "Uncaught ReferenceError: Readout is not defined" error without it -->
<script src="js/widget-numeric.js"></script>
<script src="js/widget-radiogroup.js"></script>
<script src="js/widget-multiplechoicequestion.js"></script>
<script src="js/widget-numericquestion.js"></script>
<script src="js/eventmanager.js"></script>
<script src="js/submitmanager.js"></script>
<script src="js/answerman.js"></script>
<script src="js/fakeactivitydb.js"></script>
<script>
// create event manager
var eventManager = new EventManager();
///////////////////////////////////////////
// Test 1: One slider, one button. This is bogus because sliders aren't really a question type yet.
var t1Extent = [0, 11];
/* Seann Notes:
Apparently all sliders must live with a border surrounding them.
Also, your page explodes if you don't set things correctly (like if you
leave out startVal) or if you put in something bad in a value (like '0'
instead of '0.0' as a startVal) */
var t1Slide = new Slider ({
id: "t1Val",
startVal: 0.0,
minVal: t1Extent[0],
maxVal: t1Extent[1],
stepVal: .5,
label: "Volume:",
format: d3.format('5.2f'),
}, eventManager);
t1Slide.draw(d3.select("#t1slider"));
var t1Button = new Button ({
id: "t1Button",
text: "Submit"
}, eventManager);
t1Button.draw(d3.select("#t1slider"));
// set up a dummy object w/ a score request event that we will fire when the button is pressed
var dummyQ = { submitScoreRequestEventId: "t1ScoreRequest" };
/************************************************************************
* t1handleClick *//**
*
* t1handleClick is called from the event handler for the "submit" button,
* firing the dummy question's submitScoreRequestEvent
* This one is just for the slider
*************************************************************************/
function t1handleClick()
{
var slider = t1Slide.getValue();
var ans = slider == 11 ? "answer011" : slider == 0 ? "answer000": "answer001";
var submitAnsDetails =
{
question: dummyQ,
questionId: "SanVan003",
answerKey: ans,
responseCallback: t1HandleResponse
};
// fire off the submit method of the SubmitManager, sending value from Slider
eventManager.publish(dummyQ.submitScoreRequestEventId, submitAnsDetails);
}
/************************************************************************
* t1HandleResponse *//**
*
* t1handleResponse is called from the event handler for the submitManager
* when it returns a response after sending the student's submission off
* for processing. It plops the response into the resultDisplay Readout.
*
* @param eventDetails These are the keyed values returned by
* the event:
* grade: 0..1
* response: string response
*************************************************************************/
function t1HandleResponse(responseDetails)
{
SubmitManager.appendResponseWithDefaultFormatting(t1Button.lastdrawn.container, responseDetails);
}
// subscribe to the "submit" button press
eventManager.subscribe(t1Button.pressedEventId, t1handleClick);
// create submit manager
var t1SubmitManagerConfig = {
//id: 't1sm',
sequenceNodeID: 'SanVan003',
container: t1Button.lastdrawn.container
};
var submitManager = new SubmitManager(eventManager, new AnswerMan());
// Get the submit manager to handle scoring requests from the dummy slider question
submitManager.handleRequestsFrom(dummyQ);
/* wish I could use the d3 method to read JSON but cross origin requests error prevents it
d3.json("js/fakeactivitydb.js", function(error, json) {
if (error) return console.warn(error);
data = json;
console.log(data);
});
*/
/*
TODO:
- Leslie's example: https://dl.dropboxusercontent.com/u/89342193/NeffLiveDemo/assess_12.1.html
- extract as much of this configuration stuff into a dynamic js "builder" script with config
*/
//------------------- Q1 Test --------------------
var Q1Choices = [
{
content: "Because she turned me into a newt.",
answerKey: "newt"
},
{
content: "Because she has a long nose.",
answerKey: "nose"
},
{
content: "Because she floats on water.",
answerKey: "floats"
},
{
content: "Because she's afraid of daylight.",
answerKey: "daylight"
}
];
// Test a select one question using a radio group widget
var Q1 = new MultipleChoiceQuestion({
id: "Q1",
questionId: "SanVan004",
question: "How do you *know* she's a witch?",
choices: Q1Choices,
order: "randomized",
widget: RadioGroup,
widgetConfig: { numberFormat: "latin-upper" },
}, eventManager);
submitManager.handleRequestsFrom(Q1);
Q1.draw(d3.select("#Q1here"));
// More real slider
var QDec = new NumericQuestion({
questionId: "louder",
question: "How high does it go?",
widget: Slider,
widgetConfig: {
startVal: 15,
minVal: 10.0,
maxVal: 18.0,
stepVal: .1,
label: "Level:",
format: d3.format('5.1f'),
} ,
}, eventManager);
QDec.draw(d3.select("#numeric"));
submitManager.handleRequestsFrom(QDec);
</script>
</body>
</html>