nicholas@755
|
1 /**
|
nicholas@755
|
2 * ape.js
|
nicholas@755
|
3 * Create the APE interface
|
nicholas@755
|
4 */
|
nicholas@755
|
5
|
nicholas@755
|
6
|
nicholas@755
|
7 // Once this is loaded and parsed, begin execution
|
nicholas@755
|
8 loadInterface();
|
nicholas@755
|
9
|
nicholas@755
|
10 function loadInterface() {
|
nicholas@755
|
11
|
nicholas@755
|
12 // Get the dimensions of the screen available to the page
|
nicholas@755
|
13 var width = window.innerWidth;
|
nicholas@755
|
14 var height = window.innerHeight;
|
nicholas@755
|
15
|
nicholas@755
|
16 // The injection point into the HTML page
|
nicholas@755
|
17 interfaceContext.insertPoint = document.getElementById("topLevelBody");
|
nicholas@755
|
18 var testContent = document.createElement('div');
|
nicholas@755
|
19
|
nicholas@755
|
20 testContent.id = 'testContent';
|
nicholas@755
|
21
|
nicholas@755
|
22 // Bindings for interfaceContext
|
nicholas@755
|
23 Interface.prototype.checkAllPlayed = function()
|
nicholas@755
|
24 {
|
nicholas@755
|
25 hasBeenPlayed = audioEngineContext.checkAllPlayed();
|
nicholas@755
|
26 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet
|
nicholas@755
|
27 {
|
nicholas@755
|
28 str = "";
|
nicholas@755
|
29 if (hasBeenPlayed.length > 1) {
|
nicholas@755
|
30 for (var i=0; i<hasBeenPlayed.length; i++) {
|
nicholas@755
|
31 str = str + hasBeenPlayed[i];
|
nicholas@755
|
32 if (i < hasBeenPlayed.length-2){
|
nicholas@755
|
33 str += ", ";
|
nicholas@755
|
34 } else if (i == hasBeenPlayed.length-2) {
|
nicholas@755
|
35 str += " or ";
|
nicholas@755
|
36 }
|
nicholas@755
|
37 }
|
nicholas@755
|
38 alert('You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
|
nicholas@755
|
39 } else {
|
nicholas@755
|
40 alert('You have not played fragment ' + hasBeenPlayed[0] + ' yet. Please listen, rate and comment all samples before submitting.');
|
nicholas@755
|
41 }
|
nicholas@755
|
42 return false;
|
nicholas@755
|
43 }
|
nicholas@755
|
44 return true;
|
nicholas@755
|
45 };
|
nicholas@755
|
46
|
nicholas@755
|
47 Interface.prototype.checkAllMoved = function() {
|
nicholas@755
|
48 var state = true;
|
nicholas@755
|
49 var str = 'You have not moved the following sliders. ';
|
nicholas@755
|
50 for (var i=0; i<this.interfaceSliders.length; i++)
|
nicholas@755
|
51 {
|
nicholas@755
|
52 var interfaceTID = [];
|
nicholas@755
|
53 for (var j=0; j<this.interfaceSliders[i].metrics.length; j++)
|
nicholas@755
|
54 {
|
nicholas@755
|
55 if (this.interfaceSliders[i].metrics[j].wasMoved == false)
|
nicholas@755
|
56 {
|
nicholas@755
|
57 state = false;
|
nicholas@755
|
58 interfaceTID.push(j);
|
nicholas@755
|
59 }
|
nicholas@755
|
60 }
|
nicholas@755
|
61 if (interfaceTID.length != 0)
|
nicholas@755
|
62 {
|
nicholas@755
|
63 var interfaceName = this.interfaceSliders[i].interfaceObject.title;
|
nicholas@755
|
64 if (interfaceName == undefined) {
|
nicholas@755
|
65 str += 'On axis '+String(i+1)+' you must move ';
|
nicholas@755
|
66 } else {
|
nicholas@755
|
67 str += 'On axis "'+interfaceName+'" you must move ';
|
nicholas@755
|
68 }
|
nicholas@755
|
69 if (interfaceTID.length == 1)
|
nicholas@755
|
70 {
|
nicholas@755
|
71 str += 'slider '+interfaceTID[0]+'. ';
|
nicholas@755
|
72 }
|
nicholas@755
|
73 else {
|
nicholas@755
|
74 str += 'sliders ';
|
nicholas@755
|
75 for (var k=0; k<interfaceTID.length-1; k++)
|
nicholas@755
|
76 {
|
nicholas@755
|
77 str += interfaceTID[k]+', ';
|
nicholas@755
|
78 }
|
nicholas@755
|
79 str += interfaceTID[interfaceTID.length-1] +'. ';
|
nicholas@755
|
80 }
|
nicholas@755
|
81 }
|
nicholas@755
|
82 }
|
nicholas@755
|
83 if (state != true)
|
nicholas@755
|
84 {
|
nicholas@755
|
85 alert(str);
|
nicholas@755
|
86 console.log(str);
|
nicholas@755
|
87 }
|
nicholas@755
|
88 return state;
|
nicholas@755
|
89 };
|
nicholas@755
|
90
|
nicholas@755
|
91 Interface.prototype.checkAllCommented = function() {
|
nicholas@755
|
92 var audioObjs = audioEngineContext.audioObjects;
|
nicholas@755
|
93 var audioHolder = testState.stateMap[testState.stateIndex];
|
nicholas@755
|
94 var state = true;
|
nicholas@755
|
95 if (audioHolder.elementComments) {
|
nicholas@755
|
96 var strNums = [];
|
nicholas@755
|
97 for (var i=0; i<audioObjs.length; i++)
|
nicholas@755
|
98 {
|
nicholas@755
|
99 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) {
|
nicholas@755
|
100 state = false;
|
nicholas@755
|
101 strNums.push(i);
|
nicholas@755
|
102 }
|
nicholas@755
|
103 }
|
nicholas@755
|
104 if (state == false) {
|
nicholas@755
|
105 if (strNums.length > 1) {
|
nicholas@755
|
106 var str = "";
|
nicholas@755
|
107 for (var i=0; i<strNums.length; i++) {
|
nicholas@755
|
108 str = str + strNums[i];
|
nicholas@755
|
109 if (i < strNums.length-2){
|
nicholas@755
|
110 str += ", ";
|
nicholas@755
|
111 } else if (i == strNums.length-2) {
|
nicholas@755
|
112 str += " or ";
|
nicholas@755
|
113 }
|
nicholas@755
|
114 }
|
nicholas@755
|
115 alert('You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
|
nicholas@755
|
116 } else {
|
nicholas@755
|
117 alert('You have not commented on fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.');
|
nicholas@755
|
118 }
|
nicholas@755
|
119 }
|
nicholas@755
|
120 }
|
nicholas@755
|
121 return state;
|
nicholas@755
|
122 };
|
nicholas@755
|
123
|
nicholas@755
|
124 Interface.prototype.checkScaleRange = function()
|
nicholas@755
|
125 {
|
nicholas@755
|
126 var audioObjs = audioEngineContext.audioObjects;
|
nicholas@755
|
127 var audioHolder = testState.stateMap[testState.stateIndex];
|
nicholas@755
|
128 var state = true;
|
nicholas@755
|
129 var str = '';
|
nicholas@755
|
130 for (var i=0; i<this.interfaceSliders.length; i++)
|
nicholas@755
|
131 {
|
nicholas@755
|
132 var minScale;
|
nicholas@755
|
133 var maxScale;
|
nicholas@755
|
134 var interfaceObject = interfaceContext.interfaceSliders[0].interfaceObject;
|
nicholas@755
|
135 for (var j=0; j<interfaceObject.options.length; j++)
|
nicholas@755
|
136 {
|
nicholas@755
|
137 if (interfaceObject.options[j].check == "scalerange") {
|
nicholas@755
|
138 minScale = interfaceObject.options[j].min;
|
nicholas@755
|
139 maxScale = interfaceObject.options[j].max;
|
nicholas@755
|
140 break;
|
nicholas@755
|
141 }
|
nicholas@755
|
142 }
|
nicholas@755
|
143 var minRanking = convSliderPosToRate(this.interfaceSliders[i].sliders[0]);
|
nicholas@755
|
144 var maxRanking = minRanking;
|
nicholas@755
|
145 for (var j=1; j<this.interfaceSliders[i].sliders.length; j++)
|
nicholas@755
|
146 {
|
nicholas@755
|
147 var ranking = convSliderPosToRate(this.interfaceSliders[i].sliders[j]);
|
nicholas@755
|
148 if (ranking < minRanking)
|
nicholas@755
|
149 {
|
nicholas@755
|
150 minRanking = ranking;
|
nicholas@755
|
151 } else if (ranking > maxRanking)
|
nicholas@755
|
152 {
|
nicholas@755
|
153 maxRanking = ranking;
|
nicholas@755
|
154 }
|
nicholas@755
|
155 }
|
nicholas@755
|
156 if (minRanking > minScale || maxRanking < maxScale)
|
nicholas@755
|
157 {
|
nicholas@755
|
158 state = false;
|
nicholas@755
|
159 str += 'On axis "'+this.interfaceSliders[i].interfaceObject.title+'" you have not used the full width of the scale. ';
|
nicholas@755
|
160 }
|
nicholas@755
|
161 }
|
nicholas@755
|
162 if (state != true)
|
nicholas@755
|
163 {
|
nicholas@755
|
164 alert(str);
|
nicholas@755
|
165 console.log(str);
|
nicholas@755
|
166 }
|
nicholas@755
|
167 return state;
|
nicholas@755
|
168 };
|
nicholas@755
|
169
|
nicholas@755
|
170 Interface.prototype.objectSelected = null;
|
nicholas@755
|
171 Interface.prototype.objectMoved = false;
|
nicholas@755
|
172 Interface.prototype.selectObject = function(object)
|
nicholas@755
|
173 {
|
nicholas@755
|
174 if (this.objectSelected == null)
|
nicholas@755
|
175 {
|
nicholas@755
|
176 this.objectSelected = object;
|
nicholas@755
|
177 this.objectMoved = false;
|
nicholas@755
|
178 }
|
nicholas@755
|
179 };
|
nicholas@755
|
180 Interface.prototype.moveObject = function()
|
nicholas@755
|
181 {
|
nicholas@755
|
182 if (this.objectMoved == false)
|
nicholas@755
|
183 {
|
nicholas@755
|
184 this.objectMoved = true;
|
nicholas@755
|
185 }
|
nicholas@755
|
186 };
|
nicholas@755
|
187 Interface.prototype.releaseObject = function()
|
nicholas@755
|
188 {
|
nicholas@755
|
189 this.objectSelected = null;
|
nicholas@755
|
190 this.objectMoved = false;
|
nicholas@755
|
191 };
|
nicholas@755
|
192 Interface.prototype.getSelectedObject = function()
|
nicholas@755
|
193 {
|
nicholas@755
|
194 return this.objectSelected;
|
nicholas@755
|
195 };
|
nicholas@755
|
196 Interface.prototype.hasSelectedObjectMoved = function()
|
nicholas@755
|
197 {
|
nicholas@755
|
198 return this.objectMoved;
|
nicholas@755
|
199 };
|
nicholas@755
|
200
|
nicholas@755
|
201 // Bindings for slider interfaces
|
nicholas@755
|
202 Interface.prototype.interfaceSliders = [];
|
nicholas@755
|
203
|
nicholas@755
|
204 // Bindings for audioObjects
|
nicholas@755
|
205
|
nicholas@755
|
206 // Create the top div for the Title element
|
nicholas@755
|
207 var titleAttr = specification.title;
|
nicholas@755
|
208 var title = document.createElement('div');
|
nicholas@755
|
209 title.className = "title";
|
nicholas@755
|
210 title.align = "center";
|
nicholas@755
|
211 var titleSpan = document.createElement('span');
|
nicholas@755
|
212
|
nicholas@755
|
213 // Set title to that defined in XML, else set to default
|
nicholas@755
|
214 if (titleAttr != undefined) {
|
nicholas@755
|
215 titleSpan.textContent = titleAttr;
|
nicholas@755
|
216 } else {
|
nicholas@755
|
217 titleSpan.textContent = 'Listening test';
|
nicholas@755
|
218 }
|
nicholas@755
|
219 // Insert the titleSpan element into the title div element.
|
nicholas@755
|
220 title.appendChild(titleSpan);
|
nicholas@755
|
221
|
nicholas@755
|
222 // Create Interface buttons!
|
nicholas@755
|
223 var interfaceButtons = document.createElement('div');
|
nicholas@755
|
224 interfaceButtons.id = 'interface-buttons';
|
nicholas@755
|
225
|
nicholas@755
|
226 // Create playback start/stop points
|
nicholas@755
|
227 var playback = document.createElement("button");
|
nicholas@755
|
228 playback.innerHTML = 'Stop';
|
nicholas@755
|
229 playback.id = 'playback-button';
|
nicholas@755
|
230 // onclick function. Check if it is playing or not, call the correct function in the
|
nicholas@755
|
231 // audioEngine, change the button text to reflect the next state.
|
nicholas@755
|
232 playback.onclick = function() {
|
nicholas@755
|
233 if (audioEngineContext.status == 1) {
|
nicholas@755
|
234 audioEngineContext.stop();
|
nicholas@755
|
235 this.innerHTML = 'Stop';
|
nicholas@755
|
236 var time = audioEngineContext.timer.getTestTime();
|
nicholas@755
|
237 console.log('Stopped at ' + time); // DEBUG/SAFETY
|
nicholas@755
|
238 }
|
nicholas@755
|
239 };
|
nicholas@755
|
240 // Create Submit (save) button
|
nicholas@755
|
241 var submit = document.createElement("button");
|
nicholas@755
|
242 submit.innerHTML = 'Submit';
|
nicholas@755
|
243 submit.onclick = buttonSubmitClick;
|
nicholas@755
|
244 submit.id = 'submit-button';
|
nicholas@755
|
245 // Append the interface buttons into the interfaceButtons object.
|
nicholas@755
|
246 interfaceButtons.appendChild(playback);
|
nicholas@755
|
247 interfaceButtons.appendChild(submit);
|
nicholas@755
|
248
|
nicholas@755
|
249 var sliderHolder = document.createElement("div");
|
nicholas@755
|
250 sliderHolder.id = "slider-holder";
|
nicholas@755
|
251
|
nicholas@755
|
252
|
nicholas@755
|
253 // Global parent for the comment boxes on the page
|
nicholas@755
|
254 var feedbackHolder = document.createElement('div');
|
nicholas@755
|
255 feedbackHolder.id = 'feedbackHolder';
|
nicholas@755
|
256
|
nicholas@755
|
257 testContent.style.zIndex = 1;
|
nicholas@755
|
258 interfaceContext.insertPoint.innerHTML = null; // Clear the current schema
|
nicholas@755
|
259
|
nicholas@755
|
260 // Inject into HTML
|
nicholas@755
|
261 testContent.appendChild(title); // Insert the title
|
nicholas@755
|
262 testContent.appendChild(interfaceButtons);
|
nicholas@755
|
263 testContent.appendChild(sliderHolder);
|
nicholas@755
|
264 testContent.appendChild(feedbackHolder);
|
nicholas@755
|
265 interfaceContext.insertPoint.appendChild(testContent);
|
nicholas@755
|
266
|
nicholas@755
|
267 // Load the full interface
|
nicholas@755
|
268 testState.initialise();
|
nicholas@755
|
269 testState.advanceState();
|
nicholas@755
|
270
|
nicholas@755
|
271 }
|
nicholas@755
|
272
|
nicholas@755
|
273 function loadTest(audioHolderObject)
|
nicholas@755
|
274 {
|
nicholas@755
|
275 var width = window.innerWidth;
|
nicholas@755
|
276 var height = window.innerHeight;
|
nicholas@755
|
277 var id = audioHolderObject.id;
|
nicholas@755
|
278
|
nicholas@755
|
279 interfaceContext.interfaceSliders = [];
|
nicholas@755
|
280
|
nicholas@755
|
281 var feedbackHolder = document.getElementById('feedbackHolder');
|
nicholas@755
|
282 var sliderHolder = document.getElementById('slider-holder');
|
nicholas@755
|
283 feedbackHolder.innerHTML = null;
|
nicholas@755
|
284 sliderHolder.innerHTML = null;
|
nicholas@755
|
285
|
nicholas@755
|
286 var interfaceObj = audioHolderObject.interfaces;
|
nicholas@755
|
287 for (var k=0; k<interfaceObj.length; k++) {
|
nicholas@755
|
288 // Create the div box to center align
|
nicholas@755
|
289 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k]));
|
nicholas@755
|
290 for (var i=0; i<interfaceObj[k].options.length; i++)
|
nicholas@755
|
291 {
|
nicholas@755
|
292 if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'playhead')
|
nicholas@755
|
293 {
|
nicholas@755
|
294 var playbackHolder = document.getElementById('playback-holder');
|
nicholas@755
|
295 if (playbackHolder == null)
|
nicholas@755
|
296 {
|
nicholas@755
|
297 playbackHolder = document.createElement('div');
|
nicholas@755
|
298 playbackHolder.style.width = "100%";
|
nicholas@755
|
299 playbackHolder.align = 'center';
|
nicholas@755
|
300 playbackHolder.appendChild(interfaceContext.playhead.object);
|
nicholas@755
|
301 feedbackHolder.appendChild(playbackHolder);
|
nicholas@755
|
302 }
|
nicholas@755
|
303 } else if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'page-count')
|
nicholas@755
|
304 {
|
nicholas@755
|
305 var pagecountHolder = document.getElementById('page-count');
|
nicholas@755
|
306 if (pagecountHolder == null)
|
nicholas@755
|
307 {
|
nicholas@755
|
308 pagecountHolder = document.createElement('div');
|
nicholas@755
|
309 pagecountHolder.id = 'page-count';
|
nicholas@755
|
310 }
|
nicholas@755
|
311 pagecountHolder.innerHTML = '<span>Test '+(audioHolderObject.presentedId+1)+' of '+specification.audioHolders.length+'</span>';
|
nicholas@755
|
312 var inject = document.getElementById('interface-buttons');
|
nicholas@755
|
313 inject.appendChild(pagecountHolder);
|
nicholas@755
|
314 }
|
nicholas@755
|
315 }
|
nicholas@755
|
316 }
|
nicholas@755
|
317
|
nicholas@755
|
318 var commentBoxPrefix = "Comment on track";
|
nicholas@755
|
319
|
nicholas@755
|
320 var commentShow = audioHolderObject.elementComments;
|
nicholas@755
|
321
|
nicholas@755
|
322 var loopPlayback = audioHolderObject.loop;
|
nicholas@755
|
323
|
nicholas@755
|
324 currentTestHolder = document.createElement('audioHolder');
|
nicholas@755
|
325 currentTestHolder.id = audioHolderObject.id;
|
nicholas@755
|
326 currentTestHolder.repeatCount = audioHolderObject.repeatCount;
|
nicholas@755
|
327
|
nicholas@755
|
328 // Find all the audioElements from the audioHolder
|
nicholas@755
|
329 $(audioHolderObject.audioElements).each(function(index,element){
|
nicholas@755
|
330 // Find URL of track
|
nicholas@755
|
331 // In this jQuery loop, variable 'this' holds the current audioElement.
|
nicholas@755
|
332
|
nicholas@755
|
333 // Now load each audio sample. First create the new track by passing the full URL
|
nicholas@755
|
334 var trackURL = audioHolderObject.hostURL + element.url;
|
nicholas@755
|
335 var audioObject = audioEngineContext.newTrack(element);
|
nicholas@755
|
336
|
nicholas@755
|
337 var node = interfaceContext.createCommentBox(audioObject);
|
nicholas@755
|
338
|
nicholas@755
|
339 // Create a slider per track
|
nicholas@755
|
340 audioObject.interfaceDOM = new sliderObject(audioObject,interfaceObj);
|
nicholas@755
|
341 audioObject.metric.initialPosition = convSliderPosToRate(audioObject.interfaceDOM.trackSliderObjects[0]);
|
nicholas@755
|
342 if (audioObject.state == 1)
|
nicholas@755
|
343 {
|
nicholas@755
|
344 audioObject.interfaceDOM.enable();
|
nicholas@755
|
345 }
|
nicholas@755
|
346
|
nicholas@755
|
347 });
|
nicholas@755
|
348
|
nicholas@755
|
349 $('.track-slider').mousedown(function(event) {
|
nicholas@755
|
350 interfaceContext.selectObject($(this)[0]);
|
nicholas@755
|
351 });
|
nicholas@755
|
352
|
nicholas@755
|
353 $('.track-slider').mousemove(function(event) {
|
nicholas@755
|
354 event.preventDefault();
|
nicholas@755
|
355 });
|
nicholas@755
|
356
|
nicholas@755
|
357 $('.slider').mousemove(function(event) {
|
nicholas@755
|
358 event.preventDefault();
|
nicholas@755
|
359 var obj = interfaceContext.getSelectedObject();
|
nicholas@755
|
360 if (obj == null) {return;}
|
nicholas@755
|
361 $(obj).css("left",event.clientX + "px");
|
nicholas@755
|
362 interfaceContext.moveObject();
|
nicholas@755
|
363 });
|
nicholas@755
|
364
|
nicholas@755
|
365 $(document).mouseup(function(event){
|
nicholas@755
|
366 event.preventDefault();
|
nicholas@755
|
367 var obj = interfaceContext.getSelectedObject();
|
nicholas@755
|
368 if (obj == null) {return;}
|
nicholas@755
|
369 var interfaceID = obj.parentElement.getAttribute("interfaceid");
|
nicholas@755
|
370 var trackID = obj.getAttribute("trackindex");
|
nicholas@755
|
371 if (interfaceContext.hasSelectedObjectMoved() == true)
|
nicholas@755
|
372 {
|
nicholas@755
|
373 var l = $(obj).css("left");
|
nicholas@755
|
374 var id = obj.getAttribute('trackIndex');
|
nicholas@755
|
375 var time = audioEngineContext.timer.getTestTime();
|
nicholas@755
|
376 var rate = convSliderPosToRate(obj);
|
nicholas@755
|
377 audioEngineContext.audioObjects[id].metric.moved(time,rate);
|
nicholas@755
|
378 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate);
|
nicholas@755
|
379 console.log("slider "+id+" moved to "+rate+' ('+time+')');
|
nicholas@755
|
380 } else {
|
nicholas@755
|
381 var id = Number(obj.attributes['trackIndex'].value);
|
nicholas@755
|
382 //audioEngineContext.metric.sliderPlayed(id);
|
nicholas@755
|
383 audioEngineContext.play(id);
|
nicholas@755
|
384 // Currently playing track red, rest green
|
nicholas@755
|
385
|
nicholas@755
|
386 $('.track-slider').removeClass('track-slider-playing');
|
nicholas@755
|
387 var name = ".track-slider-"+obj.getAttribute("trackindex");
|
nicholas@755
|
388 $(name).addClass('track-slider-playing');
|
nicholas@755
|
389 $('.comment-div').removeClass('comment-box-playing');
|
nicholas@755
|
390 $('#comment-div-'+id).addClass('comment-box-playing');
|
nicholas@755
|
391 var outsideReference = document.getElementById('outside-reference');
|
nicholas@755
|
392 if (outsideReference != undefined)
|
nicholas@755
|
393 $(outsideReference).removeClass('track-slider-playing');
|
nicholas@755
|
394 }
|
nicholas@755
|
395 interfaceContext.releaseObject();
|
nicholas@755
|
396 });
|
nicholas@755
|
397
|
nicholas@755
|
398
|
nicholas@755
|
399 if (commentShow) {
|
nicholas@755
|
400 interfaceContext.showCommentBoxes(feedbackHolder,true);
|
nicholas@755
|
401 }
|
nicholas@755
|
402
|
nicholas@755
|
403 $(audioHolderObject.commentQuestions).each(function(index,element) {
|
nicholas@755
|
404 var node = interfaceContext.createCommentQuestion(element);
|
nicholas@755
|
405 feedbackHolder.appendChild(node.holder);
|
nicholas@755
|
406 });
|
nicholas@755
|
407
|
nicholas@755
|
408 // Construct outside reference;
|
nicholas@755
|
409 if (audioHolderObject.outsideReference != null) {
|
nicholas@755
|
410 var outsideReferenceHolder = document.createElement('div');
|
nicholas@755
|
411 outsideReferenceHolder.id = 'outside-reference';
|
nicholas@755
|
412 outsideReferenceHolder.className = 'outside-reference';
|
nicholas@755
|
413 outsideReferenceHolderspan = document.createElement('span');
|
nicholas@755
|
414 outsideReferenceHolderspan.textContent = 'Reference';
|
nicholas@755
|
415 outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
|
nicholas@755
|
416
|
nicholas@755
|
417 var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference);
|
nicholas@755
|
418
|
nicholas@755
|
419 outsideReferenceHolder.onclick = function(event)
|
nicholas@755
|
420 {
|
nicholas@755
|
421 audioEngineContext.play(audioEngineContext.audioObjects.length-1);
|
nicholas@755
|
422 $('.track-slider').removeClass('track-slider-playing');
|
nicholas@755
|
423 $('.comment-div').removeClass('comment-box-playing');
|
nicholas@755
|
424 if (event.currentTarget.nodeName == 'DIV') {
|
nicholas@755
|
425 $(event.currentTarget).addClass('track-slider-playing');
|
nicholas@755
|
426 } else {
|
nicholas@755
|
427 $(event.currentTarget.parentElement).addClass('track-slider-playing');
|
nicholas@755
|
428 }
|
nicholas@755
|
429 };
|
nicholas@755
|
430
|
nicholas@755
|
431 document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
|
nicholas@755
|
432 }
|
nicholas@755
|
433
|
nicholas@755
|
434
|
nicholas@755
|
435 //testWaitIndicator();
|
nicholas@755
|
436 }
|
nicholas@755
|
437
|
nicholas@755
|
438 function interfaceSliderHolder(interfaceObject)
|
nicholas@755
|
439 {
|
nicholas@755
|
440 this.sliders = [];
|
nicholas@755
|
441 this.metrics = [];
|
nicholas@755
|
442 this.id = document.getElementsByClassName("sliderCanvasDiv").length;
|
nicholas@755
|
443 this.name = interfaceObject.name;
|
nicholas@755
|
444 this.interfaceObject = interfaceObject;
|
nicholas@755
|
445 this.sliderDOM = document.createElement('div');
|
nicholas@755
|
446 this.sliderDOM.className = 'sliderCanvasDiv';
|
nicholas@755
|
447 this.sliderDOM.id = 'sliderCanvasHolder-'+this.id;
|
nicholas@755
|
448
|
nicholas@755
|
449 var pagetitle = document.createElement('div');
|
nicholas@755
|
450 pagetitle.className = "pageTitle";
|
nicholas@755
|
451 pagetitle.align = "center";
|
nicholas@755
|
452 var titleSpan = document.createElement('span');
|
nicholas@755
|
453 titleSpan.id = "pageTitle-"+this.id;
|
nicholas@755
|
454 if (interfaceObject.title != undefined && typeof interfaceObject.title == "string")
|
nicholas@755
|
455 {
|
nicholas@755
|
456 titleSpan.textContent = interfaceObject.title;
|
nicholas@755
|
457 } else {
|
nicholas@755
|
458 titleSpan.textContent = "Axis "+String(this.id+1);
|
nicholas@755
|
459 }
|
nicholas@755
|
460 pagetitle.appendChild(titleSpan);
|
nicholas@755
|
461 this.sliderDOM.appendChild(pagetitle);
|
nicholas@755
|
462
|
nicholas@755
|
463 // Create the slider box to hold the slider elements
|
nicholas@755
|
464 this.canvas = document.createElement('div');
|
nicholas@755
|
465 if (this.name != undefined)
|
nicholas@755
|
466 this.canvas.id = 'slider-'+this.name;
|
nicholas@755
|
467 else
|
nicholas@755
|
468 this.canvas.id = 'slider-'+this.id;
|
nicholas@755
|
469 this.canvas.setAttribute("interfaceid",this.id);
|
nicholas@755
|
470 this.canvas.className = 'slider';
|
nicholas@755
|
471 this.canvas.align = "left";
|
nicholas@755
|
472 this.canvas.addEventListener('dragover',function(event){
|
nicholas@755
|
473 event.preventDefault();
|
nicholas@755
|
474 event.dataTransfer.effectAllowed = 'none';
|
nicholas@755
|
475 event.dataTransfer.dropEffect = 'copy';
|
nicholas@755
|
476 return false;
|
nicholas@755
|
477 },false);
|
nicholas@755
|
478 var sliderMargin = document.createAttribute('marginsize');
|
nicholas@755
|
479 sliderMargin.nodeValue = 42; // Set default margins to 42px either side
|
nicholas@755
|
480 // Must have a known EXACT width, as this is used later to determine the ratings
|
nicholas@755
|
481 var w = (Number(sliderMargin.nodeValue)+8)*2;
|
nicholas@755
|
482 this.canvas.style.width = window.innerWidth - w +"px";
|
nicholas@755
|
483 this.canvas.style.marginLeft = sliderMargin.nodeValue +'px';
|
nicholas@755
|
484 this.canvas.setAttributeNode(sliderMargin);
|
nicholas@755
|
485 this.sliderDOM.appendChild(this.canvas);
|
nicholas@755
|
486
|
nicholas@755
|
487 // Create the div to hold any scale objects
|
nicholas@755
|
488 this.scale = document.createElement('div');
|
nicholas@755
|
489 this.scale.className = 'sliderScale';
|
nicholas@755
|
490 this.scale.id = 'sliderScaleHolder-'+this.id;
|
nicholas@755
|
491 this.scale.align = 'left';
|
nicholas@755
|
492 this.sliderDOM.appendChild(this.scale);
|
nicholas@755
|
493 var positionScale = this.canvas.style.width.substr(0,this.canvas.style.width.length-2);
|
nicholas@755
|
494 var offset = Number(this.canvas.attributes['marginsize'].value);
|
nicholas@755
|
495 for (var index=0; index<interfaceObject.scale.length; index++)
|
nicholas@755
|
496 {
|
nicholas@755
|
497 var scaleObj = interfaceObject.scale[index];
|
nicholas@755
|
498 var value = document.createAttribute('value');
|
nicholas@755
|
499 var position = Number(scaleObj[0])*0.01;
|
nicholas@755
|
500 value.nodeValue = position;
|
nicholas@755
|
501 var pixelPosition = (position*positionScale)+offset;
|
nicholas@755
|
502 var scaleDOM = document.createElement('span');
|
nicholas@755
|
503 scaleDOM.textContent = scaleObj[1];
|
nicholas@755
|
504 this.scale.appendChild(scaleDOM);
|
nicholas@755
|
505 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
|
nicholas@755
|
506 scaleDOM.setAttributeNode(value);
|
nicholas@755
|
507 }
|
nicholas@755
|
508
|
nicholas@755
|
509 var dest = document.getElementById("slider-holder");
|
nicholas@755
|
510 dest.appendChild(this.sliderDOM);
|
nicholas@755
|
511
|
nicholas@755
|
512 this.createSliderObject = function(audioObject)
|
nicholas@755
|
513 {
|
nicholas@755
|
514 var trackObj = document.createElement('div');
|
nicholas@755
|
515 trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id;
|
nicholas@755
|
516 trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id;
|
nicholas@755
|
517 trackObj.setAttribute('trackIndex',audioObject.id);
|
nicholas@755
|
518 trackObj.innerHTML = '<span>'+audioObject.id+'</span>';
|
nicholas@755
|
519 if (this.name != undefined) {
|
nicholas@755
|
520 trackObj.setAttribute('interface-name',this.name);
|
nicholas@755
|
521 } else {
|
nicholas@755
|
522 trackObj.setAttribute('interface-name',this.id);
|
nicholas@755
|
523 }
|
nicholas@755
|
524 var offset = Number(this.canvas.attributes['marginsize'].value);
|
nicholas@755
|
525 // Distribute it randomnly
|
nicholas@755
|
526 var w = window.innerWidth - (offset+8)*2;
|
nicholas@755
|
527 w = Math.random()*w;
|
nicholas@755
|
528 w = Math.floor(w+(offset+8));
|
nicholas@755
|
529 trackObj.style.left = w+'px';
|
nicholas@755
|
530 this.canvas.appendChild(trackObj);
|
nicholas@755
|
531 this.sliders.push(trackObj);
|
nicholas@755
|
532 this.metrics.push(new metricTracker(this));
|
nicholas@755
|
533 this.metrics[this.metrics.length-1].initialPosition = convSliderPosToRate(trackObj);
|
nicholas@755
|
534 return trackObj;
|
nicholas@755
|
535 };
|
nicholas@755
|
536
|
nicholas@755
|
537 this.resize = function(event)
|
nicholas@755
|
538 {
|
nicholas@755
|
539 var holdValues = [];
|
nicholas@755
|
540 for (var index = 0; index < this.sliders.length; index++)
|
nicholas@755
|
541 {
|
nicholas@755
|
542 holdValues.push(convSliderPosToRate(this.sliders[index]));
|
nicholas@755
|
543 }
|
nicholas@755
|
544 var width = event.target.innerWidth;
|
nicholas@755
|
545 var sliderDiv = this.canvas;
|
nicholas@755
|
546 var sliderScaleDiv = this.scale;
|
nicholas@755
|
547 var marginsize = Number(sliderDiv.attributes['marginsize'].value);
|
nicholas@755
|
548 var w = (marginsize+8)*2;
|
nicholas@755
|
549 sliderDiv.style.width = width - w + 'px';
|
nicholas@755
|
550 var width = width - w;
|
nicholas@755
|
551 // Move sliders into new position
|
nicholas@755
|
552 for (var index = 0; index < this.sliders.length; index++)
|
nicholas@755
|
553 {
|
nicholas@755
|
554 var pos = holdValues[index];
|
nicholas@755
|
555 var pix = pos * width;
|
nicholas@755
|
556 this.sliders[index].style.left = pix+marginsize+'px';
|
nicholas@755
|
557 }
|
nicholas@755
|
558
|
nicholas@755
|
559 // Move scale labels
|
nicholas@755
|
560 for (var index = 0; index < this.scale.children.length; index++)
|
nicholas@755
|
561 {
|
nicholas@755
|
562 var scaleObj = this.scale.children[index];
|
nicholas@755
|
563 var position = Number(scaleObj.attributes['value'].value);
|
nicholas@755
|
564 var pixelPosition = (position*width)+marginsize;
|
nicholas@755
|
565 scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px';
|
nicholas@755
|
566 }
|
nicholas@755
|
567 };
|
nicholas@755
|
568 }
|
nicholas@755
|
569
|
nicholas@755
|
570 function sliderObject(audioObject,interfaceObjects) {
|
nicholas@755
|
571 // Create a new slider object;
|
nicholas@755
|
572 this.parent = audioObject;
|
nicholas@755
|
573 this.trackSliderObjects = [];
|
nicholas@755
|
574 for (var i=0; i<interfaceContext.interfaceSliders.length; i++)
|
nicholas@755
|
575 {
|
nicholas@755
|
576 var trackObj = interfaceContext.interfaceSliders[i].createSliderObject(audioObject);
|
nicholas@755
|
577 this.trackSliderObjects.push(trackObj);
|
nicholas@755
|
578 }
|
nicholas@755
|
579
|
nicholas@755
|
580 // Onclick, switch playback to that track
|
nicholas@755
|
581
|
nicholas@755
|
582 this.enable = function() {
|
nicholas@755
|
583 if (this.parent.state == 1)
|
nicholas@755
|
584 {
|
nicholas@755
|
585 $(this.trackSliderObjects).each(function(i,trackObj){
|
nicholas@755
|
586 $(trackObj).removeClass('track-slider-disabled');
|
nicholas@755
|
587 });
|
nicholas@755
|
588 }
|
nicholas@755
|
589 };
|
nicholas@755
|
590
|
nicholas@755
|
591 this.exportXMLDOM = function(audioObject) {
|
nicholas@755
|
592 // Called by the audioObject holding this element. Must be present
|
nicholas@755
|
593 var obj = [];
|
nicholas@755
|
594 $(this.trackSliderObjects).each(function(i,trackObj){
|
nicholas@755
|
595 var node = document.createElement('value');
|
nicholas@755
|
596 node.setAttribute("inteerface-name",trackObj.getAttribute("interface-name"));
|
nicholas@755
|
597 node.textContent = convSliderPosToRate(trackObj);
|
nicholas@755
|
598 obj.push(node);
|
nicholas@755
|
599 });
|
nicholas@755
|
600
|
nicholas@755
|
601 return obj;
|
nicholas@755
|
602 };
|
nicholas@755
|
603 this.getValue = function() {
|
nicholas@755
|
604 return convSliderPosToRate(this.trackSliderObj);
|
nicholas@755
|
605 };
|
nicholas@755
|
606 }
|
nicholas@755
|
607
|
nicholas@755
|
608 function buttonSubmitClick()
|
nicholas@755
|
609 {
|
nicholas@755
|
610 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options;
|
nicholas@755
|
611 var canContinue = true;
|
nicholas@755
|
612
|
nicholas@755
|
613 // Check that the anchor and reference objects are correctly placed
|
nicholas@755
|
614 if (interfaceContext.checkHiddenAnchor() == false) {return;}
|
nicholas@755
|
615 if (interfaceContext.checkHiddenReference() == false) {return;}
|
nicholas@755
|
616
|
nicholas@755
|
617 for (var i=0; i<checks.length; i++) {
|
nicholas@755
|
618 if (checks[i].type == 'check')
|
nicholas@755
|
619 {
|
nicholas@755
|
620 switch(checks[i].check) {
|
nicholas@755
|
621 case 'fragmentPlayed':
|
nicholas@755
|
622 // Check if all fragments have been played
|
nicholas@755
|
623 var checkState = interfaceContext.checkAllPlayed();
|
nicholas@755
|
624 if (checkState == false) {canContinue = false;}
|
nicholas@755
|
625 break;
|
nicholas@755
|
626 case 'fragmentFullPlayback':
|
nicholas@755
|
627 // Check all fragments have been played to their full length
|
nicholas@755
|
628 var checkState = interfaceContext.checkFragmentsFullyPlayed();
|
nicholas@755
|
629 if (checkState == false) {canContinue = false;}
|
nicholas@755
|
630 break;
|
nicholas@755
|
631 case 'fragmentMoved':
|
nicholas@755
|
632 // Check all fragment sliders have been moved.
|
nicholas@755
|
633 var checkState = interfaceContext.checkAllMoved();
|
nicholas@755
|
634 if (checkState == false) {canContinue = false;}
|
nicholas@755
|
635 break;
|
nicholas@755
|
636 case 'fragmentComments':
|
nicholas@755
|
637 // Check all fragment sliders have been moved.
|
nicholas@755
|
638 var checkState = interfaceContext.checkAllCommented();
|
nicholas@755
|
639 if (checkState == false) {canContinue = false;}
|
nicholas@755
|
640 break;
|
nicholas@755
|
641 case 'scalerange':
|
nicholas@755
|
642 // Check the scale is used to its full width outlined by the node
|
nicholas@755
|
643 var checkState = interfaceContext.checkScaleRange();
|
nicholas@755
|
644 if (checkState == false) {canContinue = false;}
|
nicholas@755
|
645 break;
|
nicholas@755
|
646 }
|
nicholas@755
|
647
|
nicholas@755
|
648 }
|
nicholas@755
|
649 if (!canContinue) {break;}
|
nicholas@755
|
650 }
|
nicholas@755
|
651
|
nicholas@755
|
652 if (canContinue) {
|
nicholas@755
|
653 if (audioEngineContext.status == 1) {
|
nicholas@755
|
654 var playback = document.getElementById('playback-button');
|
nicholas@755
|
655 playback.click();
|
nicholas@755
|
656 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
|
nicholas@755
|
657 } else
|
nicholas@755
|
658 {
|
nicholas@755
|
659 if (audioEngineContext.timer.testStarted == false)
|
nicholas@755
|
660 {
|
nicholas@755
|
661 alert('You have not started the test! Please click a fragment to begin the test!');
|
nicholas@755
|
662 return;
|
nicholas@755
|
663 }
|
nicholas@755
|
664 }
|
nicholas@755
|
665 testState.advanceState();
|
nicholas@755
|
666 }
|
nicholas@755
|
667 }
|
nicholas@755
|
668
|
nicholas@755
|
669 function convSliderPosToRate(trackSlider)
|
nicholas@755
|
670 {
|
nicholas@755
|
671 var slider = trackSlider.parentElement;
|
nicholas@755
|
672 var w = slider.style.width;
|
nicholas@755
|
673 var marginsize = Number(slider.attributes['marginsize'].value);
|
nicholas@755
|
674 var maxPix = w.substr(0,w.length-2);
|
nicholas@755
|
675 var pix = trackSlider.style.left;
|
nicholas@755
|
676 pix = pix.substr(0,pix.length-2);
|
nicholas@755
|
677 var rate = (pix-marginsize)/maxPix;
|
nicholas@755
|
678 return rate;
|
nicholas@755
|
679 }
|
nicholas@755
|
680
|
nicholas@755
|
681 function resizeWindow(event){
|
nicholas@755
|
682 // Function called when the window has been resized.
|
nicholas@755
|
683 // MANDATORY FUNCTION
|
nicholas@755
|
684
|
nicholas@755
|
685 // Resize the slider objects
|
nicholas@755
|
686 for (var i=0; i<interfaceContext.interfaceSliders.length; i++)
|
nicholas@755
|
687 {
|
nicholas@755
|
688 interfaceContext.interfaceSliders[i].resize(event);
|
nicholas@755
|
689 }
|
nicholas@755
|
690 }
|
nicholas@755
|
691
|
nicholas@755
|
692 function pageXMLSave(store, testXML)
|
nicholas@755
|
693 {
|
nicholas@755
|
694 // MANDATORY
|
nicholas@755
|
695 // Saves a specific test page
|
nicholas@755
|
696 // You can use this space to add any extra nodes to your XML <audioHolder> saves
|
nicholas@755
|
697 // Get the current <audioHolder> information in store (remember to appendChild your data to it)
|
nicholas@755
|
698 if (interfaceContext.interfaceSliders.length == 1)
|
nicholas@755
|
699 {
|
nicholas@755
|
700 // If there is only one axis, there only needs to be one metric return
|
nicholas@755
|
701 return;
|
nicholas@755
|
702 }
|
nicholas@755
|
703 var audioelements = store.getElementsByTagName("audioelement");
|
nicholas@755
|
704 for (var i=0; i<audioelements.length; i++)
|
nicholas@755
|
705 {
|
nicholas@755
|
706 // Have to append the metric specific nodes
|
nicholas@755
|
707 if (testXML.outsideReference == null || testXML.outsideReference.id != audioelements[i].id)
|
nicholas@755
|
708 {
|
nicholas@755
|
709 var inject = audioelements[i].getElementsByTagName("metric");
|
nicholas@755
|
710 if (inject.length == 0)
|
nicholas@755
|
711 {
|
nicholas@755
|
712 inject = document.createElement("metric");
|
nicholas@755
|
713 } else {
|
nicholas@755
|
714 inject = inject[0];
|
nicholas@755
|
715 }
|
nicholas@755
|
716 for (var k=0; k<interfaceContext.interfaceSliders.length; k++)
|
nicholas@755
|
717 {
|
nicholas@755
|
718 var node = interfaceContext.interfaceSliders[k].metrics[i].exportXMLDOM();
|
nicholas@755
|
719 var mrnodes = node.getElementsByTagName("metricresult");
|
nicholas@755
|
720 for (var j=0; j<mrnodes.length; j++)
|
nicholas@755
|
721 {
|
nicholas@755
|
722 var name = mrnodes[j].getAttribute("name");
|
nicholas@755
|
723 if (name == "elementTracker" || name == "elementTrackerFull" || name == "elementInitialPosition" || name == "elementFlagMoved")
|
nicholas@755
|
724 {
|
nicholas@755
|
725 mrnodes[j].setAttribute("interface-name",interfaceContext.interfaceSliders[k].name);
|
nicholas@755
|
726 mrnodes[j].setAttribute("interface-id",k);
|
nicholas@755
|
727 inject.appendChild(mrnodes[j]);
|
nicholas@755
|
728 }
|
nicholas@755
|
729 }
|
nicholas@755
|
730 }
|
nicholas@755
|
731 }
|
nicholas@755
|
732 }
|
nicholas@755
|
733 } |