comparison interfaces/ape.js @ 2696:2edf2fc6755c

#180. APE JSHinted
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Mon, 13 Mar 2017 10:42:37 +0000
parents f4a146282ef5
children 0562dcdfd5eb
comparison
equal deleted inserted replaced
2695:211364181d16 2696:2edf2fc6755c
1 /** 1 /**
2 * ape.js 2 * ape.js
3 * Create the APE interface 3 * Create the APE interface
4 */ 4 */
5 5
6 6 /*globals window,interfaceContext, document, audioEngineContext, console, $, Interface, testState, storage, specification */
7 /*globals metricTracker */
7 // Once this is loaded and parsed, begin execution 8 // Once this is loaded and parsed, begin execution
8 loadInterface(); 9 loadInterface();
9 10
10 function loadInterface() { 11 function loadInterface() {
11 12
19 20
20 testContent.id = 'testContent'; 21 testContent.id = 'testContent';
21 22
22 // Bindings for interfaceContext 23 // Bindings for interfaceContext
23 interfaceContext.checkAllPlayed = function () { 24 interfaceContext.checkAllPlayed = function () {
24 hasBeenPlayed = audioEngineContext.checkAllPlayed(); 25 var hasBeenPlayed = audioEngineContext.checkAllPlayed();
25 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet 26 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet
26 { 27 {
27 var str = ""; 28 var str = "";
28 if (hasBeenPlayed.length > 1) { 29 if (hasBeenPlayed.length > 1) {
29 for (var i = 0; i < hasBeenPlayed.length; i++) { 30 for (var i = 0; i < hasBeenPlayed.length; i++) {
51 var str = 'You have not moved the following sliders. '; 52 var str = 'You have not moved the following sliders. ';
52 for (var i = 0; i < this.interfaceSliders.length; i++) { 53 for (var i = 0; i < this.interfaceSliders.length; i++) {
53 var interfaceTID = []; 54 var interfaceTID = [];
54 for (var j = 0; j < this.interfaceSliders[i].metrics.length; j++) { 55 for (var j = 0; j < this.interfaceSliders[i].metrics.length; j++) {
55 var ao_id = this.interfaceSliders[i].sliders[j].getAttribute("trackIndex"); 56 var ao_id = this.interfaceSliders[i].sliders[j].getAttribute("trackIndex");
56 if (this.interfaceSliders[i].metrics[j].wasMoved == false && audioEngineContext.audioObjects[ao_id].interfaceDOM.canMove()) { 57 if (this.interfaceSliders[i].metrics[j].wasMoved === false && audioEngineContext.audioObjects[ao_id].interfaceDOM.canMove()) {
57 state = false; 58 state = false;
58 interfaceTID.push(j); 59 interfaceTID.push(j);
59 } 60 }
60 } 61 }
61 if (interfaceTID.length != 0) { 62 if (interfaceTID.length !== 0) {
62 var interfaceName = this.interfaceSliders[i].interfaceObject.title; 63 var interfaceName = this.interfaceSliders[i].interfaceObject.title;
63 if (interfaceName == undefined) { 64 if (interfaceName === undefined) {
64 str += 'On axis ' + String(i + 1) + ' you must move '; 65 str += 'On axis ' + String(i + 1) + ' you must move ';
65 } else { 66 } else {
66 str += 'On axis "' + interfaceName + '" you must move '; 67 str += 'On axis "' + interfaceName + '" you must move ';
67 } 68 }
68 if (interfaceTID.length == 1) { 69 if (interfaceTID.length == 1) {
74 } 75 }
75 str += (audioEngineContext.audioObjects[interfaceTID[interfaceTID.length - 1]].interfaceDOM.getPresentedId()) + '. '; 76 str += (audioEngineContext.audioObjects[interfaceTID[interfaceTID.length - 1]].interfaceDOM.getPresentedId()) + '. ';
76 } 77 }
77 } 78 }
78 } 79 }
79 if (state != true) { 80 if (state !== true) {
80 this.storeErrorNode(str); 81 this.storeErrorNode(str);
81 interfaceContext.lightbox.post("Message", str); 82 interfaceContext.lightbox.post("Message", str);
82 console.log(str); 83 console.log(str);
83 } 84 }
84 return state; 85 return state;
87 Interface.prototype.checkAllCommented = function () { 88 Interface.prototype.checkAllCommented = function () {
88 var audioObjs = audioEngineContext.audioObjects; 89 var audioObjs = audioEngineContext.audioObjects;
89 var audioHolder = testState.stateMap[testState.stateIndex]; 90 var audioHolder = testState.stateMap[testState.stateIndex];
90 var state = true; 91 var state = true;
91 if (audioHolder.elementComments) { 92 if (audioHolder.elementComments) {
92 var strNums = []; 93 var notCommented = audioObjs.filter(function (ao) {
93 for (var i = 0; i < audioObjs.length; i++) { 94 return ao.commentDOM.trackCommentBox.value.length === 0;
94 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) { 95 });
95 state = false; 96 notCommented.sort(function (a, b) {
96 strNums.push(i); 97 var va = a.interfaceDOM.getPresentedId();
97 } 98 var vb = a.interfaceDOM.getPresentedId();
98 } 99 if (va < vb) {
99 if (state == false) { 100 return -1;
100 var str = ""; 101 }
101 if (strNums.length > 1) { 102 if (vb < va) {
102 103 return 1;
103 for (var i = 0; i < strNums.length; i++) { 104 }
104 var ao_id = audioEngineContext.audioObjects[strNums[i]].interfaceDOM.getPresentedId(); 105 return 0;
105 str = str + (ao_id); // start from 1 106 });
106 if (i < strNums.length - 2) { 107 if (notCommented.length > 0) {
107 str += ", "; 108 var str = "You have not commented on fragment";
108 } else if (i == strNums.length - 2) { 109 if (notCommented.length > 1) {
109 str += " or "; 110 str += "s ";
110 } 111 } else {
112 str += " ";
113 }
114 for (var i = 0; i < notCommented.length; i++) {
115 var ao_id = notCommented[i].interfaceDOM.getPresentedId();
116 str = str + ao_id; // start from 1
117 if (i < notCommented.length - 2) {
118 str += ", ";
119 } else if (i == notCommented.length - 2) {
120 str += " or ";
111 } 121 }
112 str = 'You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'; 122 }
113 } else { 123 str += "Please listen, rate and comment all samples before submitting.";
114 str = 'You have not commented on fragment ' + (audioEngineContext.audioObjects[strNums[0]].interfaceDOM.getPresentedId()) + ' yet. Please listen, rate and comment all samples before submitting.';
115 }
116 this.storeErrorNode(str); 124 this.storeErrorNode(str);
117 interfaceContext.lightbox.post("Message", str); 125 interfaceContext.lightbox.post("Message", str);
118 console.log(str); 126 console.log(str);
119 } 127 }
120 } 128 }
122 }; 130 };
123 131
124 Interface.prototype.checkScaleRange = function () { 132 Interface.prototype.checkScaleRange = function () {
125 var audioObjs = audioEngineContext.audioObjects; 133 var audioObjs = audioEngineContext.audioObjects;
126 var audioHolder = testState.stateMap[testState.stateIndex]; 134 var audioHolder = testState.stateMap[testState.stateIndex];
135 var interfaceObject = this.interfaceSliders[0].interfaceObject;
127 var state = true; 136 var state = true;
128 var str = ''; 137 var str = '';
129 for (var i = 0; i < this.interfaceSliders.length; i++) { 138 this.interfaceSliders.forEach(function (sliderHolder, i) {
130 var minScale; 139 var scales = (function () {
131 var maxScale; 140 var scaleRange = interfaceObject.options.find(function (a) {
132 var interfaceObject = interfaceContext.interfaceSliders[0].interfaceObject; 141 return a.name == "scalerange";
133 for (var j = 0; j < interfaceObject.options.length; j++) { 142 });
134 if (interfaceObject.options[j].check == "scalerange") { 143 return {
135 minScale = interfaceObject.options[j].min; 144 min: scaleRange.min,
136 maxScale = interfaceObject.options[j].max; 145 max: scaleRange.max
137 break; 146 };
138 } 147 })();
139 } 148 var outsideBounds = sliderHolder.sliders.some(function (elem) {
140 var minRanking = convSliderPosToRate(this.interfaceSliders[i].sliders[0]); 149 var a = convSliderPosToRate(elem);
141 var maxRanking = minRanking; 150 if (a <= scales.min) {
142 for (var j = 1; j < this.interfaceSliders[i].sliders.length; j++) { 151 return true;
143 var ranking = convSliderPosToRate(this.interfaceSliders[i].sliders[j]); 152 }
144 if (ranking < minRanking) { 153 if (a >= scales.max) {
145 minRanking = ranking; 154 return true;
146 } else if (ranking > maxRanking) { 155 }
147 maxRanking = ranking; 156 return false;
148 } 157 });
149 } 158 if (!outsideBounds) {
150 if (minRanking > minScale || maxRanking < maxScale) {
151 state = false; 159 state = false;
152 str += 'On axis "' + this.interfaceSliders[i].interfaceObject.title + '" you have not used the full width of the scale. '; 160 str += 'On axis "' + sliderHolder.interfaceObject.title + '" you have not used the full width of the scale. ';
153 } 161 }
154 } 162 });
155 if (state != true) { 163 if (state !== true) {
156 this.storeErrorNode(str); 164 this.storeErrorNode(str);
157 interfaceContext.lightbox.post("Message", str); 165 interfaceContext.lightbox.post("Message", str);
158 console.log(str); 166 console.log(str);
159 } 167 }
160 return state; 168 return state;
161 }; 169 };
162 170
163 Interface.prototype.objectSelected = null; 171 Interface.prototype.objectSelected = null;
164 Interface.prototype.objectMoved = false; 172 Interface.prototype.objectMoved = false;
165 Interface.prototype.selectObject = function (object) { 173 Interface.prototype.selectObject = function (object) {
166 if (this.objectSelected == null) { 174 if (this.objectSelected === null) {
167 this.objectSelected = object; 175 this.objectSelected = object;
168 this.objectMoved = false; 176 this.objectMoved = false;
169 } 177 }
170 }; 178 };
171 Interface.prototype.moveObject = function () { 179 Interface.prototype.moveObject = function () {
172 if (this.objectMoved == false) { 180 if (this.objectMoved === false) {
173 this.objectMoved = true; 181 this.objectMoved = true;
174 } 182 }
175 }; 183 };
176 Interface.prototype.releaseObject = function () { 184 Interface.prototype.releaseObject = function () {
177 this.objectSelected = null; 185 this.objectSelected = null;
196 title.align = "center"; 204 title.align = "center";
197 var titleSpan = document.createElement('span'); 205 var titleSpan = document.createElement('span');
198 titleSpan.id = "test-title"; 206 titleSpan.id = "test-title";
199 207
200 // Set title to that defined in XML, else set to default 208 // Set title to that defined in XML, else set to default
201 if (titleAttr != undefined) { 209 if (titleAttr !== undefined) {
202 titleSpan.textContent = titleAttr; 210 titleSpan.textContent = titleAttr;
203 } else { 211 } else {
204 titleSpan.textContent = 'Listening test'; 212 titleSpan.textContent = 'Listening test';
205 } 213 }
206 // Insert the titleSpan element into the title div element. 214 // Insert the titleSpan element into the title div element.
272 var sliderHolder = document.getElementById('slider-holder'); 280 var sliderHolder = document.getElementById('slider-holder');
273 feedbackHolder.innerHTML = ""; 281 feedbackHolder.innerHTML = "";
274 sliderHolder.innerHTML = ""; 282 sliderHolder.innerHTML = "";
275 283
276 // Set labelType if default to number 284 // Set labelType if default to number
277 if (audioHolderObject.label == "default" || audioHolderObject.label == "") { 285 if (audioHolderObject.label === "default" || audioHolderObject.label === "") {
278 audioHolderObject.label = "number"; 286 audioHolderObject.label = "number";
279 } 287 }
280 // Set the page title 288 // Set the page title
281 if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) { 289 if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) {
282 document.getElementById("test-title").textContent = audioHolderObject.title 290 document.getElementById("test-title").textContent = audioHolderObject.title;
283 } 291 }
284 292
285 293
286 // Delete outside reference 294 // Delete outside reference
287 document.getElementById("outside-reference-holder").innerHTML = ""; 295 document.getElementById("outside-reference-holder").innerHTML = "";
288 296
289 var interfaceObj = interfaceContext.getCombinedInterfaces(audioHolderObject); 297 var interfaceObj = interfaceContext.getCombinedInterfaces(audioHolderObject);
290 for (var k = 0; k < interfaceObj.length; k++) { 298 interfaceObj.forEach(function (interfaceObjectInstance) {
291 // Create the div box to center align 299 // Create the div box to center align
292 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k])); 300 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObjectInstance));
293 } 301 });
294 interfaceObj.forEach(function (interface) { 302 interfaceObj.forEach(function (interface) {
295 for (var option of interface.options) { 303 interface.options.forEach(function (option) {
296 if (option.type == "show") { 304 if (option.type == "show") {
297 switch (option.name) { 305 switch (option.name) {
298 case "playhead": 306 case "playhead":
299 var playbackHolder = document.getElementById('playback-holder'); 307 var playbackHolder = document.getElementById('playback-holder');
300 if (playbackHolder == null) { 308 if (playbackHolder === null) {
301 playbackHolder = document.createElement('div'); 309 playbackHolder = document.createElement('div');
302 playbackHolder.style.width = "100%"; 310 playbackHolder.style.width = "100%";
303 playbackHolder.align = 'center'; 311 playbackHolder.align = 'center';
304 playbackHolder.appendChild(interfaceContext.playhead.object); 312 playbackHolder.appendChild(interfaceContext.playhead.object);
305 feedbackHolder.insertBefore(playbackHolder, feedbackHolder.firstElementChild); 313 feedbackHolder.insertBefore(playbackHolder, feedbackHolder.firstElementChild);
306 } 314 }
307 break; 315 break;
308 case "page-count": 316 case "page-count":
309 var pagecountHolder = document.getElementById('page-count'); 317 var pagecountHolder = document.getElementById('page-count');
310 if (pagecountHolder == null) { 318 if (pagecountHolder === null) {
311 pagecountHolder = document.createElement('div'); 319 pagecountHolder = document.createElement('div');
312 pagecountHolder.id = 'page-count'; 320 pagecountHolder.id = 'page-count';
313 } 321 }
314 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; 322 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
315 var inject = document.getElementById('interface-buttons'); 323 var inject = document.getElementById('interface-buttons');
316 inject.appendChild(pagecountHolder); 324 inject.appendChild(pagecountHolder);
317 break; 325 break;
318 case "volume": 326 case "volume":
319 if (document.getElementById('master-volume-holder') == null) { 327 if (document.getElementById('master-volume-holder') === null) {
320 feedbackHolder.appendChild(interfaceContext.volume.object); 328 feedbackHolder.appendChild(interfaceContext.volume.object);
321 } 329 }
322 break; 330 break;
323 case "comments": 331 case "comments":
324 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); 332 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
325 break; 333 break;
326 } 334 }
327 } 335 }
328 } 336 });
329 }); 337 });
330 338
331 var commentBoxPrefix = "Comment on fragment"; 339 var commentBoxPrefix = "Comment on fragment";
332 340
333 var commentShow = audioHolderObject.elementComments; 341 var commentShow = audioHolderObject.elementComments;
334 342
335 var loopPlayback = audioHolderObject.loop; 343 var loopPlayback = audioHolderObject.loop;
336 344
337 currentTestHolder = document.createElement('audioHolder'); 345 var currentTestHolder = document.createElement('audioHolder');
338 currentTestHolder.id = audioHolderObject.id; 346 currentTestHolder.id = audioHolderObject.id;
339 currentTestHolder.repeatCount = audioHolderObject.repeatCount; 347 currentTestHolder.repeatCount = audioHolderObject.repeatCount;
340 348
341 // Find all the audioElements from the audioHolder 349 // Find all the audioElements from the audioHolder
342 $(audioHolderObject.audioElements).each(function (index, element) { 350 $(audioHolderObject.audioElements).each(function (index, element) {
370 }); 378 });
371 379
372 $('.slider').mousemove(function (event) { 380 $('.slider').mousemove(function (event) {
373 event.preventDefault(); 381 event.preventDefault();
374 var obj = interfaceContext.getSelectedObject(); 382 var obj = interfaceContext.getSelectedObject();
375 if (obj == null) { 383 if (obj === null) {
376 return; 384 return;
377 } 385 }
378 var move = event.clientX - 6; 386 var move = event.clientX - 6;
379 var w = $(event.currentTarget).width(); 387 var w = $(event.currentTarget).width();
380 move = Math.max(50, move); 388 move = Math.max(50, move);
384 }); 392 });
385 393
386 $('.slider').on('touchmove', null, function (event) { 394 $('.slider').on('touchmove', null, function (event) {
387 event.preventDefault(); 395 event.preventDefault();
388 var obj = interfaceContext.getSelectedObject(); 396 var obj = interfaceContext.getSelectedObject();
389 if (obj == null) { 397 if (obj === null) {
390 return; 398 return;
391 } 399 }
392 var move = event.originalEvent.targetTouches[0].clientX - 6; 400 var move = event.originalEvent.targetTouches[0].clientX - 6;
393 var w = $(event.currentTarget).width(); 401 var w = $(event.currentTarget).width();
394 move = Math.max(50, move); 402 move = Math.max(50, move);
398 }); 406 });
399 407
400 $(document).mouseup(function (event) { 408 $(document).mouseup(function (event) {
401 event.preventDefault(); 409 event.preventDefault();
402 var obj = interfaceContext.getSelectedObject(); 410 var obj = interfaceContext.getSelectedObject();
403 if (obj == null) { 411 if (obj === null) {
404 return; 412 return;
405 } 413 }
406 var interfaceID = obj.parentElement.getAttribute("interfaceid"); 414 var interfaceID = obj.parentElement.getAttribute("interfaceid");
407 var trackID = obj.getAttribute("trackindex"); 415 var trackID = obj.getAttribute("trackindex");
408 if (interfaceContext.hasSelectedObjectMoved() == true) { 416 var id;
417 if (interfaceContext.hasSelectedObjectMoved() === true) {
418 var l = $(obj).css("left");
419 id = obj.getAttribute('trackIndex');
420 var time = audioEngineContext.timer.getTestTime();
421 var rate = convSliderPosToRate(obj);
422 audioEngineContext.audioObjects[id].metric.moved(time, rate);
423 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate);
424 console.log("slider " + id + " moved to " + rate + ' (' + time + ')');
425 obj.setAttribute("slider-value", convSliderPosToRate(obj));
426 } else {
427 id = Number(obj.attributes.trackIndex.value);
428 //audioEngineContext.metric.sliderPlayed(id);
429 audioEngineContext.play(id);
430 }
431 interfaceContext.releaseObject();
432 });
433
434 $('.slider').on('touchend', null, function (event) {
435 var obj = interfaceContext.getSelectedObject();
436 if (obj === null) {
437 return;
438 }
439 var interfaceID = obj.parentElement.getAttribute("interfaceid");
440 var trackID = obj.getAttribute("trackindex");
441 if (interfaceContext.hasSelectedObjectMoved() === true) {
409 var l = $(obj).css("left"); 442 var l = $(obj).css("left");
410 var id = obj.getAttribute('trackIndex'); 443 var id = obj.getAttribute('trackIndex');
411 var time = audioEngineContext.timer.getTestTime(); 444 var time = audioEngineContext.timer.getTestTime();
412 var rate = convSliderPosToRate(obj); 445 var rate = convSliderPosToRate(obj);
413 audioEngineContext.audioObjects[id].metric.moved(time, rate); 446 audioEngineContext.audioObjects[id].metric.moved(time, rate);
414 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate); 447 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate);
415 console.log("slider " + id + " moved to " + rate + ' (' + time + ')'); 448 console.log("slider " + id + " moved to " + rate + ' (' + time + ')');
416 obj.setAttribute("slider-value", convSliderPosToRate(obj));
417 } else {
418 var id = Number(obj.attributes['trackIndex'].value);
419 //audioEngineContext.metric.sliderPlayed(id);
420 audioEngineContext.play(id);
421 }
422 interfaceContext.releaseObject();
423 });
424
425 $('.slider').on('touchend', null, function (event) {
426 var obj = interfaceContext.getSelectedObject();
427 if (obj == null) {
428 return;
429 }
430 var interfaceID = obj.parentElement.getAttribute("interfaceid");
431 var trackID = obj.getAttribute("trackindex");
432 if (interfaceContext.hasSelectedObjectMoved() == true) {
433 var l = $(obj).css("left");
434 var id = obj.getAttribute('trackIndex');
435 var time = audioEngineContext.timer.getTestTime();
436 var rate = convSliderPosToRate(obj);
437 audioEngineContext.audioObjects[id].metric.moved(time, rate);
438 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate);
439 console.log("slider " + id + " moved to " + rate + ' (' + time + ')');
440 } 449 }
441 interfaceContext.releaseObject(); 450 interfaceContext.releaseObject();
442 }); 451 });
443 452
444 var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces); 453 var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces);
445 for (var k = 0; k < interfaceList.length; k++) { 454 for (var k = 0; k < interfaceList.length; k++) {
446 for (var i = 0; i < interfaceList[k].options.length; i++) { 455 for (var i = 0; i < interfaceList[k].options.length; i++) {
447 if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') { 456 if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') {
448 var playbackHolder = document.getElementById('playback-holder'); 457 var playbackHolder = document.getElementById('playback-holder');
449 if (playbackHolder == null) { 458 if (playbackHolder === null) {
450 playbackHolder = document.createElement('div'); 459 playbackHolder = document.createElement('div');
451 playbackHolder.id = "playback-holder"; 460 playbackHolder.id = "playback-holder";
452 playbackHolder.style.width = "100%"; 461 playbackHolder.style.width = "100%";
453 playbackHolder.align = 'center'; 462 playbackHolder.align = 'center';
454 playbackHolder.appendChild(interfaceContext.playhead.object); 463 playbackHolder.appendChild(interfaceContext.playhead.object);
455 feedbackHolder.appendChild(playbackHolder); 464 feedbackHolder.appendChild(playbackHolder);
456 } 465 }
457 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') { 466 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') {
458 var pagecountHolder = document.getElementById('page-count'); 467 var pagecountHolder = document.getElementById('page-count');
459 if (pagecountHolder == null) { 468 if (pagecountHolder === null) {
460 pagecountHolder = document.createElement('div'); 469 pagecountHolder = document.createElement('div');
461 pagecountHolder.id = 'page-count'; 470 pagecountHolder.id = 'page-count';
462 } 471 }
463 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; 472 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
464 var inject = document.getElementById('interface-buttons'); 473 var inject = document.getElementById('interface-buttons');
465 inject.appendChild(pagecountHolder); 474 inject.appendChild(pagecountHolder);
466 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') { 475 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') {
467 if (document.getElementById('master-volume-holder') == null) { 476 if (document.getElementById('master-volume-holder') === null) {
468 feedbackHolder.appendChild(interfaceContext.volume.object); 477 feedbackHolder.appendChild(interfaceContext.volume.object);
469 } 478 }
470 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'comments') { 479 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'comments') {
471 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); 480 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
472 break; 481 break;
495 var pagetitle = document.createElement('div'); 504 var pagetitle = document.createElement('div');
496 pagetitle.className = "pageTitle"; 505 pagetitle.className = "pageTitle";
497 pagetitle.align = "center"; 506 pagetitle.align = "center";
498 var titleSpan = document.createElement('span'); 507 var titleSpan = document.createElement('span');
499 titleSpan.id = "pageTitle-" + this.id; 508 titleSpan.id = "pageTitle-" + this.id;
500 if (interfaceObject.title != undefined && typeof interfaceObject.title == "string") { 509 if (interfaceObject.title !== undefined && typeof interfaceObject.title == "string") {
501 titleSpan.textContent = interfaceObject.title; 510 titleSpan.textContent = interfaceObject.title;
502 } else { 511 } else {
503 titleSpan.textContent = "Axis " + String(this.id + 1); 512 titleSpan.textContent = "Axis " + String(this.id + 1);
504 } 513 }
505 pagetitle.appendChild(titleSpan); 514 pagetitle.appendChild(titleSpan);
506 this.sliderDOM.appendChild(pagetitle); 515 this.sliderDOM.appendChild(pagetitle);
507 516
508 // Create the slider box to hold the slider elements 517 // Create the slider box to hold the slider elements
509 this.canvas = document.createElement('div'); 518 this.canvas = document.createElement('div');
510 if (this.name != undefined) 519 if (this.name !== undefined)
511 this.canvas.id = 'slider-' + this.name; 520 this.canvas.id = 'slider-' + this.name;
512 else 521 else
513 this.canvas.id = 'slider-' + this.id; 522 this.canvas.id = 'slider-' + this.id;
514 this.canvas.setAttribute("interfaceid", this.id); 523 this.canvas.setAttribute("interfaceid", this.id);
515 this.canvas.className = 'slider'; 524 this.canvas.className = 'slider';
529 this.scale.align = 'left'; 538 this.scale.align = 'left';
530 this.sliderDOM.appendChild(this.scale); 539 this.sliderDOM.appendChild(this.scale);
531 var positionScale = this.canvas.style.width.substr(0, this.canvas.style.width.length - 2); 540 var positionScale = this.canvas.style.width.substr(0, this.canvas.style.width.length - 2);
532 var offset = 50; 541 var offset = 50;
533 var dest = document.getElementById("slider-holder").appendChild(this.sliderDOM); 542 var dest = document.getElementById("slider-holder").appendChild(this.sliderDOM);
534 for (var scaleObj of interfaceObject.scales) { 543 interfaceObject.scales.forEach(function (scaleObj) {
535 var position = Number(scaleObj.position) * 0.01; 544 var position = Number(scaleObj.position) * 0.01;
536 var pixelPosition = (position * $(this.canvas).width()) + offset; 545 var pixelPosition = (position * $(this.canvas).width()) + offset;
537 var scaleDOM = document.createElement('span'); 546 var scaleDOM = document.createElement('span');
538 scaleDOM.className = "ape-marker-text"; 547 scaleDOM.className = "ape-marker-text";
539 scaleDOM.textContent = scaleObj.text; 548 scaleDOM.textContent = scaleObj.text;
540 scaleDOM.setAttribute('value', position) 549 scaleDOM.setAttribute('value', position);
541 this.scale.appendChild(scaleDOM); 550 this.scale.appendChild(scaleDOM);
542 scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px'; 551 scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px';
543 } 552 }, this);
544 553
545 this.createSliderObject = function (audioObject, label) { 554 this.createSliderObject = function (audioObject, label) {
546 var trackObj = document.createElement('div'); 555 var trackObj = document.createElement('div');
547 trackObj.align = "center"; 556 trackObj.align = "center";
548 trackObj.className = 'track-slider track-slider-disabled track-slider-' + audioObject.id; 557 trackObj.className = 'track-slider track-slider-disabled track-slider-' + audioObject.id;
549 trackObj.id = 'track-slider-' + this.id + '-' + audioObject.id; 558 trackObj.id = 'track-slider-' + this.id + '-' + audioObject.id;
550 trackObj.setAttribute('trackIndex', audioObject.id); 559 trackObj.setAttribute('trackIndex', audioObject.id);
551 if (this.name != undefined) { 560 if (this.name !== undefined) {
552 trackObj.setAttribute('interface-name', this.name); 561 trackObj.setAttribute('interface-name', this.name);
553 } else { 562 } else {
554 trackObj.setAttribute('interface-name', this.id); 563 trackObj.setAttribute('interface-name', this.id);
555 } 564 }
556 var offset = 50; 565 var offset = 50;
570 trackObj.setAttribute("slider-value", rate); 579 trackObj.setAttribute("slider-value", rate);
571 return trackObj; 580 return trackObj;
572 }; 581 };
573 582
574 this.resize = function (event) { 583 this.resize = function (event) {
575 var width = window.innerWidth;
576 var sliderDiv = this.canvas; 584 var sliderDiv = this.canvas;
577 var sliderScaleDiv = this.scale; 585 var sliderScaleDiv = this.scale;
578 var width = $(sliderDiv).width(); 586 var width = $(sliderDiv).width();
579 var marginsize = 50; 587 var marginsize = 50;
580 // Move sliders into new position 588 // Move sliders into new position
581 for (var index = 0; index < this.sliders.length; index++) { 589 this.sliders.forEach(function (slider, index) {
582 var pix = Number(this.sliders[index].getAttribute("slider-value")) * width; 590 var pix = Number(slider.getAttribute("slider-value")) * width;
583 this.sliders[index].style.left = (pix + marginsize) + 'px'; 591 slider.style.left = (pix + marginsize) + 'px';
584 } 592 });
585 593
586 // Move scale labels 594 // Move scale labels
587 for (var index = 0; index < this.scale.children.length; index++) { 595 for (var index = 0; index < this.scale.children.length; index++) {
588 var scaleObj = this.scale.children[index]; 596 var scaleObj = this.scale.children[index];
589 var position = Number(scaleObj.attributes['value'].value); 597 var position = Number(scaleObj.attributes.value.value);
590 var pixelPosition = (position * width) + marginsize; 598 var pixelPosition = (position * width) + marginsize;
591 scaleObj.style.left = Math.floor((pixelPosition - ($(scaleObj).width() / 2))) + 'px'; 599 scaleObj.style.left = Math.floor((pixelPosition - ($(scaleObj).width() / 2))) + 'px';
592 } 600 }
593 }; 601 };
594 } 602 }
669 }; 677 };
670 this.error = function () { 678 this.error = function () {
671 // audioObject has an error!! 679 // audioObject has an error!!
672 this.playback.textContent = "Error"; 680 this.playback.textContent = "Error";
673 $(this.playback).addClass("error-colour"); 681 $(this.playback).addClass("error-colour");
674 } 682 };
675 } 683 }
676 684
677 function outsideReferenceDOM(audioObject, index, inject) { 685 function outsideReferenceDOM(audioObject, index, inject) {
678 this.parent = audioObject; 686 this.parent = audioObject;
679 this.outsideReferenceHolder = document.createElement('div'); 687 this.outsideReferenceHolder = document.createElement('div');
682 var outsideReferenceHolderspan = document.createElement('span'); 690 var outsideReferenceHolderspan = document.createElement('span');
683 outsideReferenceHolderspan.textContent = 'Reference'; 691 outsideReferenceHolderspan.textContent = 'Reference';
684 this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan); 692 this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
685 this.outsideReferenceHolder.setAttribute('track-id', index); 693 this.outsideReferenceHolder.setAttribute('track-id', index);
686 694
687 this.outsideReferenceHolder.onclick = function (event) { 695 this.handleEvent = function (event) {
688 audioEngineContext.play(event.currentTarget.getAttribute('track-id')); 696 audioEngineContext.play(audioObject.id);
689 $('.track-slider').removeClass('track-slider-playing'); 697 $('.track-slider').removeClass('track-slider-playing');
690 $('.comment-div').removeClass('comment-box-playing'); 698 $('.comment-div').removeClass('comment-box-playing');
691 if (event.currentTarget.nodeName == 'DIV') { 699 $(this.outsideReferenceHolder).addClass('track-slider-playing');
692 $(event.currentTarget).addClass('track-slider-playing'); 700 };
693 } else { 701 this.outsideReferenceHolder.addEventListener("click", this.handleEvent);
694 $(event.currentTarget.parentElement).addClass('track-slider-playing');
695 }
696 };
697 inject.appendChild(this.outsideReferenceHolder); 702 inject.appendChild(this.outsideReferenceHolder);
698 this.enable = function () { 703 this.enable = function () {
699 if (this.parent.state == 1) { 704 if (this.parent.state == 1) {
700 $(this.outsideReferenceHolder).removeClass('track-slider-disabled'); 705 $(this.outsideReferenceHolder).removeClass('track-slider-disabled');
701 } 706 }
731 }; 736 };
732 this.error = function () { 737 this.error = function () {
733 // audioObject has an error!! 738 // audioObject has an error!!
734 this.outsideReferenceHolder.textContent = "Error"; 739 this.outsideReferenceHolder.textContent = "Error";
735 $(this.outsideReferenceHolder).addClass("error-colour"); 740 $(this.outsideReferenceHolder).addClass("error-colour");
736 } 741 };
737 } 742 }
738 743
739 function buttonSubmitClick() { 744 function buttonSubmitClick() {
740 var checks = testState.currentStateMap.interfaces[0].options, 745 var checks = testState.currentStateMap.interfaces[0].options,
741 canContinue = true; 746 canContinue = true;
742 747
743 // Check that the anchor and reference objects are correctly placed 748 // Check that the anchor and reference objects are correctly placed
744 if (interfaceContext.checkHiddenAnchor() == false) { 749 if (interfaceContext.checkHiddenAnchor() === false) {
745 return; 750 return;
746 } 751 }
747 if (interfaceContext.checkHiddenReference() == false) { 752 if (interfaceContext.checkHiddenReference() === false) {
748 return; 753 return;
749 } 754 }
750 755
751 for (var i = 0; i < checks.length; i++) { 756 for (var i = 0; i < checks.length; i++) {
752 if (checks[i].type == 'check') { 757 if (checks[i].type == 'check') {
758 var checkState;
753 switch (checks[i].name) { 759 switch (checks[i].name) {
754 case 'fragmentPlayed': 760 case 'fragmentPlayed':
755 // Check if all fragments have been played 761 // Check if all fragments have been played
756 var checkState = interfaceContext.checkAllPlayed(); 762 checkState = interfaceContext.checkAllPlayed();
757 if (checkState == false) { 763 if (checkState === false) {
758 canContinue = false; 764 canContinue = false;
759 } 765 }
760 break; 766 break;
761 case 'fragmentFullPlayback': 767 case 'fragmentFullPlayback':
762 // Check all fragments have been played to their full length 768 // Check all fragments have been played to their full length
763 var checkState = interfaceContext.checkFragmentsFullyPlayed(); 769 checkState = interfaceContext.checkFragmentsFullyPlayed();
764 if (checkState == false) { 770 if (checkState === false) {
765 canContinue = false; 771 canContinue = false;
766 } 772 }
767 break; 773 break;
768 case 'fragmentMoved': 774 case 'fragmentMoved':
769 // Check all fragment sliders have been moved. 775 // Check all fragment sliders have been moved.
770 var checkState = interfaceContext.checkAllMoved(); 776 checkState = interfaceContext.checkAllMoved();
771 if (checkState == false) { 777 if (checkState === false) {
772 canContinue = false; 778 canContinue = false;
773 } 779 }
774 break; 780 break;
775 case 'fragmentComments': 781 case 'fragmentComments':
776 // Check all fragment sliders have been moved. 782 // Check all fragment sliders have been moved.
777 var checkState = interfaceContext.checkAllCommented(); 783 checkState = interfaceContext.checkAllCommented();
778 if (checkState == false) { 784 if (checkState === false) {
779 canContinue = false; 785 canContinue = false;
780 } 786 }
781 break; 787 break;
782 case 'scalerange': 788 case 'scalerange':
783 // Check the scale is used to its full width outlined by the node 789 // Check the scale is used to its full width outlined by the node
784 var checkState = interfaceContext.checkScaleRange(); 790 checkState = interfaceContext.checkScaleRange();
785 if (checkState == false) { 791 if (checkState === false) {
786 canContinue = false; 792 canContinue = false;
787 } 793 }
788 break; 794 break;
789 default: 795 default:
790 console.log("WARNING - Check option " + checks[i].name + " is not supported on this interface"); 796 console.log("WARNING - Check option " + checks[i].name + " is not supported on this interface");
801 if (audioEngineContext.status == 1) { 807 if (audioEngineContext.status == 1) {
802 var playback = document.getElementById('playback-button'); 808 var playback = document.getElementById('playback-button');
803 playback.click(); 809 playback.click();
804 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options 810 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
805 } else { 811 } else {
806 if (audioEngineContext.timer.testStarted == false) { 812 if (audioEngineContext.timer.testStarted === false) {
807 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click a fragment to begin the test!'); 813 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click a fragment to begin the test!');
808 return; 814 return;
809 } 815 }
810 } 816 }
811 testState.advanceState(); 817 testState.advanceState();
845 return; 851 return;
846 } 852 }
847 var audioelements = store.getElementsByTagName("audioelement"); 853 var audioelements = store.getElementsByTagName("audioelement");
848 for (var i = 0; i < audioelements.length; i++) { 854 for (var i = 0; i < audioelements.length; i++) {
849 // Have to append the metric specific nodes 855 // Have to append the metric specific nodes
850 if (pageSpecification.outsideReference == null || pageSpecification.outsideReference.id != audioelements[i].id) { 856 if (pageSpecification.outsideReference === undefined || pageSpecification.outsideReference.id != audioelements[i].id) {
851 var inject = audioelements[i].getElementsByTagName("metric"); 857 var inject = audioelements[i].getElementsByTagName("metric");
852 if (inject.length == 0) { 858 if (inject.length === 0) {
853 inject = storage.document.createElement("metric"); 859 inject = storage.document.createElement("metric");
854 } else { 860 } else {
855 inject = inject[0]; 861 inject = inject[0];
856 } 862 }
857 for (var k = 0; k < interfaceContext.interfaceSliders.length; k++) { 863 for (var k = 0; k < interfaceContext.interfaceSliders.length; k++) {