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