comparison interfaces/discrete.js @ 2538:464c6c6692d6

Beautified entire project.
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Mon, 14 Nov 2016 14:17:03 +0000
parents 2a1f42b5614a
children 342ef7948c47
comparison
equal deleted inserted replaced
2536:527020a63203 2538:464c6c6692d6
1 // Once this is loaded and parsed, begin execution 1 // Once this is loaded and parsed, begin execution
2 loadInterface(); 2 loadInterface();
3 3
4 function loadInterface() { 4 function loadInterface() {
5 // Use this to do any one-time page / element construction. For instance, placing any stationary text objects, 5 // Use this to do any one-time page / element construction. For instance, placing any stationary text objects,
6 // holding div's, or setting up any nodes which are present for the entire test sequence 6 // holding div's, or setting up any nodes which are present for the entire test sequence
7 7
8 // The injection point into the HTML page 8 // The injection point into the HTML page
9 interfaceContext.insertPoint = document.getElementById("topLevelBody"); 9 interfaceContext.insertPoint = document.getElementById("topLevelBody");
10 var testContent = document.createElement('div'); 10 var testContent = document.createElement('div');
11 testContent.id = 'testContent'; 11 testContent.id = 'testContent';
12 12
13 // Create the top div for the Title element 13 // Create the top div for the Title element
14 var titleAttr = specification.title; 14 var titleAttr = specification.title;
15 var title = document.createElement('div'); 15 var title = document.createElement('div');
16 title.className = "title"; 16 title.className = "title";
17 title.align = "center"; 17 title.align = "center";
18 var titleSpan = document.createElement('span'); 18 var titleSpan = document.createElement('span');
19 titleSpan.id = "test-title"; 19 titleSpan.id = "test-title";
20 20
21 // Set title to that defined in XML, else set to default 21 // Set title to that defined in XML, else set to default
22 if (titleAttr != undefined) { 22 if (titleAttr != undefined) {
23 titleSpan.textContent = titleAttr; 23 titleSpan.textContent = titleAttr;
24 } else { 24 } else {
25 titleSpan.textContent = 'Listening test'; 25 titleSpan.textContent = 'Listening test';
26 } 26 }
27 // Insert the titleSpan element into the title div element. 27 // Insert the titleSpan element into the title div element.
28 title.appendChild(titleSpan); 28 title.appendChild(titleSpan);
29 29
30 var pagetitle = document.createElement('div'); 30 var pagetitle = document.createElement('div');
31 pagetitle.className = "pageTitle"; 31 pagetitle.className = "pageTitle";
32 pagetitle.align = "center"; 32 pagetitle.align = "center";
33 var titleSpan = document.createElement('span'); 33 var titleSpan = document.createElement('span');
34 titleSpan.id = "pageTitle"; 34 titleSpan.id = "pageTitle";
35 pagetitle.appendChild(titleSpan); 35 pagetitle.appendChild(titleSpan);
36 36
37 // Create Interface buttons! 37 // Create Interface buttons!
38 var interfaceButtons = document.createElement('div'); 38 var interfaceButtons = document.createElement('div');
39 interfaceButtons.id = 'interface-buttons'; 39 interfaceButtons.id = 'interface-buttons';
40 interfaceButtons.style.height = '25px'; 40 interfaceButtons.style.height = '25px';
41 41
42 // Create playback start/stop points 42 // Create playback start/stop points
43 var playback = document.createElement("button"); 43 var playback = document.createElement("button");
44 playback.innerHTML = 'Stop'; 44 playback.innerHTML = 'Stop';
45 playback.id = 'playback-button'; 45 playback.id = 'playback-button';
46 playback.style.float = 'left'; 46 playback.style.float = 'left';
47 // onclick function. Check if it is playing or not, call the correct function in the 47 // onclick function. Check if it is playing or not, call the correct function in the
48 // audioEngine, change the button text to reflect the next state. 48 // audioEngine, change the button text to reflect the next state.
49 playback.onclick = function() { 49 playback.onclick = function () {
50 if (audioEngineContext.status == 1) { 50 if (audioEngineContext.status == 1) {
51 audioEngineContext.stop(); 51 audioEngineContext.stop();
52 this.innerHTML = 'Stop'; 52 this.innerHTML = 'Stop';
53 var time = audioEngineContext.timer.getTestTime(); 53 var time = audioEngineContext.timer.getTestTime();
54 console.log('Stopped at ' + time); // DEBUG/SAFETY 54 console.log('Stopped at ' + time); // DEBUG/SAFETY
55 } 55 }
56 }; 56 };
57 57
58 // Create outside reference holder 58 // Create outside reference holder
59 var outsideRef = document.createElement("div"); 59 var outsideRef = document.createElement("div");
60 outsideRef.id = "outside-reference-holder"; 60 outsideRef.id = "outside-reference-holder";
61 61
62 // Create Submit (save) button 62 // Create Submit (save) button
63 var submit = document.createElement("button"); 63 var submit = document.createElement("button");
64 submit.innerHTML = 'Next'; 64 submit.innerHTML = 'Next';
65 submit.onclick = buttonSubmitClick; 65 submit.onclick = buttonSubmitClick;
66 submit.id = 'submit-button'; 66 submit.id = 'submit-button';
67 submit.style.float = 'left'; 67 submit.style.float = 'left';
68 // Append the interface buttons into the interfaceButtons object. 68 // Append the interface buttons into the interfaceButtons object.
69 interfaceButtons.appendChild(playback); 69 interfaceButtons.appendChild(playback);
70 interfaceButtons.appendChild(submit); 70 interfaceButtons.appendChild(submit);
71 71
72 // Create a slider box 72 // Create a slider box
73 var sliderBox = document.createElement('div'); 73 var sliderBox = document.createElement('div');
74 sliderBox.style.width = "100%"; 74 sliderBox.style.width = "100%";
75 sliderBox.style.height = window.innerHeight - 200+12 + 'px'; 75 sliderBox.style.height = window.innerHeight - 200 + 12 + 'px';
76 sliderBox.style.marginBottom = '10px'; 76 sliderBox.style.marginBottom = '10px';
77 sliderBox.id = 'slider'; 77 sliderBox.id = 'slider';
78 var scaleHolder = document.createElement('div'); 78 var scaleHolder = document.createElement('div');
79 scaleHolder.id = "scale-holder"; 79 scaleHolder.id = "scale-holder";
80 scaleHolder.style.marginLeft = "107px"; 80 scaleHolder.style.marginLeft = "107px";
81 sliderBox.appendChild(scaleHolder); 81 sliderBox.appendChild(scaleHolder);
82 var scaleText = document.createElement('div'); 82 var scaleText = document.createElement('div');
83 scaleText.id = "scale-text-holder"; 83 scaleText.id = "scale-text-holder";
84 scaleText.style.height = "25px"; 84 scaleText.style.height = "25px";
85 scaleText.style.width = "100%"; 85 scaleText.style.width = "100%";
86 scaleHolder.appendChild(scaleText); 86 scaleHolder.appendChild(scaleText);
87 var scaleCanvas = document.createElement('canvas'); 87 var scaleCanvas = document.createElement('canvas');
88 scaleCanvas.id = "scale-canvas"; 88 scaleCanvas.id = "scale-canvas";
89 scaleCanvas.style.marginLeft = "150px"; 89 scaleCanvas.style.marginLeft = "150px";
90 scaleHolder.appendChild(scaleCanvas); 90 scaleHolder.appendChild(scaleCanvas);
91 var sliderObjectHolder = document.createElement('div'); 91 var sliderObjectHolder = document.createElement('div');
92 sliderObjectHolder.id = 'slider-holder'; 92 sliderObjectHolder.id = 'slider-holder';
93 sliderObjectHolder.align = "center"; 93 sliderObjectHolder.align = "center";
94 sliderBox.appendChild(sliderObjectHolder); 94 sliderBox.appendChild(sliderObjectHolder);
95 95
96 // Global parent for the comment boxes on the page 96 // Global parent for the comment boxes on the page
97 var feedbackHolder = document.createElement('div'); 97 var feedbackHolder = document.createElement('div');
98 feedbackHolder.id = 'feedbackHolder'; 98 feedbackHolder.id = 'feedbackHolder';
99 99
100 testContent.style.zIndex = 1; 100 testContent.style.zIndex = 1;
101 interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema 101 interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema
102 102
103 // Inject into HTML 103 // Inject into HTML
104 testContent.appendChild(title); // Insert the title 104 testContent.appendChild(title); // Insert the title
105 testContent.appendChild(pagetitle); 105 testContent.appendChild(pagetitle);
106 testContent.appendChild(interfaceButtons); 106 testContent.appendChild(interfaceButtons);
107 testContent.appendChild(outsideRef); 107 testContent.appendChild(outsideRef);
108 testContent.appendChild(sliderBox); 108 testContent.appendChild(sliderBox);
109 testContent.appendChild(feedbackHolder); 109 testContent.appendChild(feedbackHolder);
110 interfaceContext.insertPoint.appendChild(testContent); 110 interfaceContext.insertPoint.appendChild(testContent);
111 111
112 // Load the full interface 112 // Load the full interface
113 testState.initialise(); 113 testState.initialise();
114 testState.advanceState(); 114 testState.advanceState();
115 }; 115 };
116 116
117 function loadTest(page) 117 function loadTest(page) {
118 { 118 // Called each time a new test page is to be build. The page specification node is the only item passed in
119 // Called each time a new test page is to be build. The page specification node is the only item passed in 119 var id = page.id;
120 var id = page.id; 120
121 121 var feedbackHolder = document.getElementById('feedbackHolder');
122 var feedbackHolder = document.getElementById('feedbackHolder');
123 feedbackHolder.innerHTML = ""; 122 feedbackHolder.innerHTML = "";
124 var interfaceObj = page.interfaces; 123 var interfaceObj = page.interfaces;
125 if (interfaceObj.length > 1) 124 if (interfaceObj.length > 1) {
126 { 125 console.log("WARNING - This interface only supports one <interface> node per page. Using first interface node");
127 console.log("WARNING - This interface only supports one <interface> node per page. Using first interface node"); 126 }
128 } 127 interfaceObj = interfaceObj[0];
129 interfaceObj = interfaceObj[0]; 128
130
131 // Set the page title 129 // Set the page title
132 if (typeof page.title == "string" && page.title.length > 0) { 130 if (typeof page.title == "string" && page.title.length > 0) {
133 document.getElementById("test-title").textContent = page.title 131 document.getElementById("test-title").textContent = page.title
134 } 132 }
135 133
136 if(interfaceObj.title != null) 134 if (interfaceObj.title != null) {
137 { 135 document.getElementById("pageTitle").textContent = interfaceObj.title;
138 document.getElementById("pageTitle").textContent = interfaceObj.title; 136 }
139 } 137
140 138 // Delete outside reference
141 // Delete outside reference
142 document.getElementById("outside-reference-holder").innerHTML = ""; 139 document.getElementById("outside-reference-holder").innerHTML = "";
143 140
144 var sliderBox = document.getElementById('slider-holder'); 141 var sliderBox = document.getElementById('slider-holder');
145 sliderBox.innerHTML = ""; 142 sliderBox.innerHTML = "";
146 143
147 var commentBoxPrefix = "Comment on track"; 144 var commentBoxPrefix = "Comment on track";
148 if (interfaceObj.commentBoxPrefix != undefined) { 145 if (interfaceObj.commentBoxPrefix != undefined) {
149 commentBoxPrefix = interfaceObj.commentBoxPrefix; 146 commentBoxPrefix = interfaceObj.commentBoxPrefix;
150 } 147 }
151 var loopPlayback = page.loop; 148 var loopPlayback = page.loop;
152 149
153 // Find all the audioElements from the audioHolder 150 // Find all the audioElements from the audioHolder
154 var index = 0; 151 var index = 0;
155 var interfaceScales = testState.currentStateMap.interfaces[0].scales; 152 var interfaceScales = testState.currentStateMap.interfaces[0].scales;
156 $(page.audioElements).each(function(index,element){ 153 $(page.audioElements).each(function (index, element) {
157 // Find URL of track 154 // Find URL of track
158 // In this jQuery loop, variable 'this' holds the current audioElement. 155 // In this jQuery loop, variable 'this' holds the current audioElement.
159 156
160 var audioObject = audioEngineContext.newTrack(element); 157 var audioObject = audioEngineContext.newTrack(element);
161 if (element.type == 'outside-reference') 158 if (element.type == 'outside-reference') {
162 { 159 // Construct outside reference;
163 // Construct outside reference; 160 var orNode = new interfaceContext.outsideReferenceDOM(audioObject, index, document.getElementById("outside-reference-holder"));
164 var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder")); 161 audioObject.bindInterface(orNode);
165 audioObject.bindInterface(orNode); 162 } else {
166 } else { 163 // Create a slider per track
167 // Create a slider per track 164 switch (audioObject.specification.parent.label) {
168 switch(audioObject.specification.parent.label) {
169 case "none": 165 case "none":
170 label = ""; 166 label = "";
171 break; 167 break;
172 case "letter": 168 case "letter":
173 label = String.fromCharCode(97 + index); 169 label = String.fromCharCode(97 + index);
174 break; 170 break;
175 case "capital": 171 case "capital":
176 label = String.fromCharCode(65 + index); 172 label = String.fromCharCode(65 + index);
177 break; 173 break;
178 default: 174 default:
179 label = ""+index; 175 label = "" + index;
180 break; 176 break;
181 } 177 }
182 var sliderObj = new discreteObject(audioObject,label,interfaceScales); 178 var sliderObj = new discreteObject(audioObject, label, interfaceScales);
183 sliderBox.appendChild(sliderObj.holder); 179 sliderBox.appendChild(sliderObj.holder);
184 audioObject.bindInterface(sliderObj); 180 audioObject.bindInterface(sliderObj);
185 interfaceContext.commentBoxes.createCommentBox(audioObject); 181 interfaceContext.commentBoxes.createCommentBox(audioObject);
186 index += 1; 182 index += 1;
187 } 183 }
188 184
189 }); 185 });
190 186
191 var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options); 187 var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options);
192 for (var option of interfaceOptions) 188 for (var option of interfaceOptions) {
193 { 189 if (option.type == "show") {
194 if (option.type == "show") 190 switch (option.name) {
195 {
196 switch(option.name) {
197 case "playhead": 191 case "playhead":
198 var playbackHolder = document.getElementById('playback-holder'); 192 var playbackHolder = document.getElementById('playback-holder');
199 if (playbackHolder == null) 193 if (playbackHolder == null) {
200 {
201 playbackHolder = document.createElement('div'); 194 playbackHolder = document.createElement('div');
202 playbackHolder.style.width = "100%"; 195 playbackHolder.style.width = "100%";
203 playbackHolder.align = 'center'; 196 playbackHolder.align = 'center';
204 playbackHolder.appendChild(interfaceContext.playhead.object); 197 playbackHolder.appendChild(interfaceContext.playhead.object);
205 feedbackHolder.appendChild(playbackHolder); 198 feedbackHolder.appendChild(playbackHolder);
206 } 199 }
207 break; 200 break;
208 case "page-count": 201 case "page-count":
209 var pagecountHolder = document.getElementById('page-count'); 202 var pagecountHolder = document.getElementById('page-count');
210 if (pagecountHolder == null) 203 if (pagecountHolder == null) {
211 {
212 pagecountHolder = document.createElement('div'); 204 pagecountHolder = document.createElement('div');
213 pagecountHolder.id = 'page-count'; 205 pagecountHolder.id = 'page-count';
214 } 206 }
215 pagecountHolder.innerHTML = '<span>Page '+(testState.stateIndex+1)+' of '+testState.stateMap.length+'</span>'; 207 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
216 var inject = document.getElementById('interface-buttons'); 208 var inject = document.getElementById('interface-buttons');
217 inject.appendChild(pagecountHolder); 209 inject.appendChild(pagecountHolder);
218 break; 210 break;
219 case "volume": 211 case "volume":
220 if (document.getElementById('master-volume-holder') == null) 212 if (document.getElementById('master-volume-holder') == null) {
221 {
222 feedbackHolder.appendChild(interfaceContext.volume.object); 213 feedbackHolder.appendChild(interfaceContext.volume.object);
223 } 214 }
224 break; 215 break;
225 case "comments": 216 case "comments":
226 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder,true); 217 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
227 break; 218 break;
228 } 219 }
229 } 220 }
230 } 221 }
231 222
232 $(page.commentQuestions).each(function(index,element) { 223 $(page.commentQuestions).each(function (index, element) {
233 var node = interfaceContext.createCommentQuestion(element); 224 var node = interfaceContext.createCommentQuestion(element);
234 feedbackHolder.appendChild(node.holder); 225 feedbackHolder.appendChild(node.holder);
235 }); 226 });
236 227
237 // Auto-align 228 // Auto-align
238 resizeWindow(null); 229 resizeWindow(null);
239 } 230 }
240 231
241 function discreteObject(audioObject,label,interfaceScales) 232 function discreteObject(audioObject, label, interfaceScales) {
242 { 233 // An example node, you can make this however you want for each audioElement.
243 // An example node, you can make this however you want for each audioElement. 234 // However, every audioObject (audioEngineContext.audioObject) MUST have an interface object with the following
244 // However, every audioObject (audioEngineContext.audioObject) MUST have an interface object with the following 235 // You attach them by calling audioObject.bindInterface( )
245 // You attach them by calling audioObject.bindInterface( ) 236 if (interfaceScales == null || interfaceScales.length == 0) {
246 if (interfaceScales == null || interfaceScales.length == 0) 237 console.log("WARNING: The discrete radio's are built depending on the number of scale points specified! Ensure you have some specified. Defaulting to 5 for now!");
247 { 238 numOptions = 5;
248 console.log("WARNING: The discrete radio's are built depending on the number of scale points specified! Ensure you have some specified. Defaulting to 5 for now!"); 239 }
249 numOptions = 5; 240 this.parent = audioObject;
250 } 241
251 this.parent = audioObject; 242 this.holder = document.createElement('div');
252 243 this.title = document.createElement('div');
253 this.holder = document.createElement('div'); 244 this.discreteHolder = document.createElement('div');
254 this.title = document.createElement('div'); 245 this.discretes = [];
255 this.discreteHolder = document.createElement('div'); 246 this.play = document.createElement('button');
256 this.discretes = []; 247
257 this.play = document.createElement('button'); 248 this.holder.className = 'track-slider';
258 249 this.holder.style.width = window.innerWidth - 200 + 'px';
259 this.holder.className = 'track-slider'; 250 this.holder.appendChild(this.title);
260 this.holder.style.width = window.innerWidth-200 + 'px'; 251 this.holder.appendChild(this.discreteHolder);
261 this.holder.appendChild(this.title); 252 this.holder.appendChild(this.play);
262 this.holder.appendChild(this.discreteHolder); 253 this.holder.setAttribute('trackIndex', audioObject.id);
263 this.holder.appendChild(this.play); 254 this.title.textContent = label;
264 this.holder.setAttribute('trackIndex',audioObject.id); 255 this.title.className = 'track-slider-title';
265 this.title.textContent = label; 256
266 this.title.className = 'track-slider-title'; 257 this.discreteHolder.className = "track-slider-range";
267 258 this.discreteHolder.style.width = window.innerWidth - 500 + 'px';
268 this.discreteHolder.className = "track-slider-range"; 259 for (var i = 0; i < interfaceScales.length; i++) {
269 this.discreteHolder.style.width = window.innerWidth-500 + 'px'; 260 var node = document.createElement('input');
270 for (var i=0; i<interfaceScales.length; i++) 261 node.setAttribute('type', 'radio');
271 { 262 node.className = 'track-radio';
272 var node = document.createElement('input');
273 node.setAttribute('type','radio');
274 node.className = 'track-radio';
275 node.disabled = true; 263 node.disabled = true;
276 node.setAttribute('position',interfaceScales[i].position); 264 node.setAttribute('position', interfaceScales[i].position);
277 node.setAttribute('name',audioObject.specification.id); 265 node.setAttribute('name', audioObject.specification.id);
278 node.setAttribute('id',audioObject.specification.id+'-'+String(i)); 266 node.setAttribute('id', audioObject.specification.id + '-' + String(i));
279 this.discretes.push(node); 267 this.discretes.push(node);
280 this.discreteHolder.appendChild(node); 268 this.discreteHolder.appendChild(node);
281 node.onclick = function(event) 269 node.onclick = function (event) {
282 { 270 if (audioEngineContext.status == 0) {
283 if (audioEngineContext.status == 0) 271 event.currentTarget.checked = false;
284 { 272 return;
285 event.currentTarget.checked = false; 273 }
286 return; 274 var time = audioEngineContext.timer.getTestTime();
287 } 275 var id = Number(event.currentTarget.parentNode.parentNode.getAttribute('trackIndex'));
288 var time = audioEngineContext.timer.getTestTime(); 276 var value = event.currentTarget.getAttribute('position') / 100.0;
289 var id = Number(event.currentTarget.parentNode.parentNode.getAttribute('trackIndex')); 277 audioEngineContext.audioObjects[id].metric.moved(time, value);
290 var value = event.currentTarget.getAttribute('position') / 100.0; 278 console.log('slider ' + id + ' moved to ' + value + ' (' + time + ')');
291 audioEngineContext.audioObjects[id].metric.moved(time,value); 279 };
292 console.log('slider '+id+' moved to '+value+' ('+time+')'); 280 }
293 }; 281
294 } 282 this.play.className = 'track-slider-button';
295 283 this.play.textContent = "Loading...";
296 this.play.className = 'track-slider-button'; 284 this.play.value = audioObject.id;
297 this.play.textContent = "Loading..."; 285 this.play.disabled = true;
298 this.play.value = audioObject.id; 286 this.play.setAttribute("playstate", "ready");
299 this.play.disabled = true; 287 this.play.onclick = function (event) {
300 this.play.setAttribute("playstate","ready"); 288 var id = Number(event.currentTarget.value);
301 this.play.onclick = function(event) 289 //audioEngineContext.metric.sliderPlayed(id);
302 {
303 var id = Number(event.currentTarget.value);
304 //audioEngineContext.metric.sliderPlayed(id);
305 if (event.currentTarget.getAttribute("playstate") == "ready") 290 if (event.currentTarget.getAttribute("playstate") == "ready")
306 audioEngineContext.play(id); 291 audioEngineContext.play(id);
307 else if (event.currentTarget.getAttribute("playstate") == "playing") 292 else if (event.currentTarget.getAttribute("playstate") == "playing")
308 audioEngineContext.stop(); 293 audioEngineContext.stop();
309 }; 294 };
310 this.resize = function(event) 295 this.resize = function (event) {
311 { 296 this.holder.style.width = window.innerWidth - 200 + 'px';
312 this.holder.style.width = window.innerWidth-200 + 'px'; 297 this.discreteHolder.style.width = window.innerWidth - 500 + 'px';
313 this.discreteHolder.style.width = window.innerWidth-500 + 'px'; 298 //text.style.left = (posPix+150-($(text).width()/2)) +'px';
314 //text.style.left = (posPix+150-($(text).width()/2)) +'px'; 299 for (var i = 0; i < this.discretes.length; i++) {
315 for (var i=0; i<this.discretes.length; i++) 300 var width = $(this.discreteHolder).width() - 20;
316 { 301 var node = this.discretes[i];
317 var width = $(this.discreteHolder).width() - 20; 302 var nodeW = $(node).width();
318 var node = this.discretes[i]; 303 var position = node.getAttribute('position');
319 var nodeW = $(node).width(); 304 var posPix = Math.round(width * (position / 100.0));
320 var position = node.getAttribute('position'); 305 node.style.left = (posPix + 10 - (nodeW / 2)) + 'px';
321 var posPix = Math.round(width * (position / 100.0)); 306 }
322 node.style.left = (posPix+10 - (nodeW/2)) + 'px'; 307 };
323 } 308 this.enable = function () {
324 }; 309 // This is used to tell the interface object that playback of this node is ready
325 this.enable = function() 310 this.play.disabled = false;
326 { 311 this.play.textContent = "Play";
327 // This is used to tell the interface object that playback of this node is ready 312 $(this.slider).removeClass('track-slider-disabled');
328 this.play.disabled = false; 313 for (var radio of this.discretes) {
329 this.play.textContent = "Play";
330 $(this.slider).removeClass('track-slider-disabled');
331 for (var radio of this.discretes)
332 {
333 radio.disabled = false; 314 radio.disabled = false;
334 } 315 }
335 }; 316 };
336 this.updateLoading = function(progress) 317 this.updateLoading = function (progress) {
337 { 318 // progress is a value from 0 to 100 indicating the current download state of media files
338 // progress is a value from 0 to 100 indicating the current download state of media files 319 if (progress != 100) {
339 if (progress != 100)
340 {
341 progress = String(progress); 320 progress = String(progress);
342 progress = progress.split('.')[0]; 321 progress = progress.split('.')[0];
343 this.play.textContent = progress+'%'; 322 this.play.textContent = progress + '%';
344 } else { 323 } else {
345 this.play.textContent = "Play"; 324 this.play.textContent = "Play";
346 } 325 }
347 }; 326 };
348 327
349 this.startPlayback = function() 328 this.startPlayback = function () {
350 {
351 // Called by audioObject when playback begins 329 // Called by audioObject when playback begins
352 this.play.setAttribute("playstate","playing"); 330 this.play.setAttribute("playstate", "playing");
353 $(".track-slider").removeClass('track-slider-playing'); 331 $(".track-slider").removeClass('track-slider-playing');
354 $(this.holder).addClass('track-slider-playing'); 332 $(this.holder).addClass('track-slider-playing');
355 var outsideReference = document.getElementById('outside-reference'); 333 var outsideReference = document.getElementById('outside-reference');
356 this.play.textContent = "Listening"; 334 this.play.textContent = "Listening";
357 if (outsideReference != null) { 335 if (outsideReference != null) {
358 $(outsideReference).removeClass('track-slider-playing'); 336 $(outsideReference).removeClass('track-slider-playing');
359 } 337 }
360 if (this.parent.specification.parent.playOne || specification.playOne) { 338 if (this.parent.specification.parent.playOne || specification.playOne) {
361 $('.track-slider-button').text = "Wait"; 339 $('.track-slider-button').text = "Wait";
362 $('.track-slider-button').attr("disabled","true"); 340 $('.track-slider-button').attr("disabled", "true");
363 } 341 }
364 } 342 }
365 this.stopPlayback = function() 343 this.stopPlayback = function () {
366 {
367 // Called by audioObject when playback stops 344 // Called by audioObject when playback stops
368 if (this.play.getAttribute("playstate") == "playing") { 345 if (this.play.getAttribute("playstate") == "playing") {
369 this.play.setAttribute("playstate","ready"); 346 this.play.setAttribute("playstate", "ready");
370 $(this.holder).removeClass('track-slider-playing'); 347 $(this.holder).removeClass('track-slider-playing');
371 $('.track-slider-button').text = "Play"; 348 $('.track-slider-button').text = "Play";
372 this.play.textContent = "Play"; 349 this.play.textContent = "Play";
373 $('.track-slider-button').removeAttr("disabled"); 350 $('.track-slider-button').removeAttr("disabled");
374 } 351 }
375 } 352 }
376 353
377 this.getValue = function() 354 this.getValue = function () {
378 { 355 // Return the current value of the object. If there is no value, return -1
379 // Return the current value of the object. If there is no value, return -1 356 var value = -1;
380 var value = -1; 357 for (var i = 0; i < this.discretes.length; i++) {
381 for (var i=0; i<this.discretes.length; i++) 358 if (this.discretes[i].checked == true) {
382 { 359 value = this.discretes[i].getAttribute('position') / 100.0;
383 if (this.discretes[i].checked == true) 360 break;
384 { 361 }
385 value = this.discretes[i].getAttribute('position') / 100.0; 362 }
386 break; 363 return value;
387 } 364 };
388 } 365 this.getPresentedId = function () {
389 return value; 366 // Return the presented ID of the object. For instance, the APE has sliders starting from 0. Whilst AB has alphabetical scale
390 }; 367 return this.title.textContent;
391 this.getPresentedId = function() 368 };
392 { 369 this.canMove = function () {
393 // Return the presented ID of the object. For instance, the APE has sliders starting from 0. Whilst AB has alphabetical scale 370 // Return either true or false if the interface object can be moved. AB / Reference cannot, whilst sliders can and therefore have a continuous scale.
394 return this.title.textContent; 371 // These are checked primarily if the interface check option 'fragmentMoved' is enabled.
395 }; 372 return true;
396 this.canMove = function() 373 };
397 { 374 this.exportXMLDOM = function (audioObject) {
398 // Return either true or false if the interface object can be moved. AB / Reference cannot, whilst sliders can and therefore have a continuous scale. 375 // Called by the audioObject holding this element to export the interface <value> node.
399 // These are checked primarily if the interface check option 'fragmentMoved' is enabled. 376 // If there is no value node (such as outside reference), return null
400 return true; 377 // If there are multiple value nodes (such as multiple scale / 2D scales), return an array of nodes with each value node having an 'interfaceName' attribute
401 }; 378 // Use storage.document.createElement('value'); to generate the XML node.
402 this.exportXMLDOM = function(audioObject) { 379 var node = storage.document.createElement('value');
403 // Called by the audioObject holding this element to export the interface <value> node. 380 node.textContent = this.getValue();
404 // If there is no value node (such as outside reference), return null 381 return node;
405 // If there are multiple value nodes (such as multiple scale / 2D scales), return an array of nodes with each value node having an 'interfaceName' attribute 382 };
406 // Use storage.document.createElement('value'); to generate the XML node. 383 this.error = function () {
407 var node = storage.document.createElement('value'); 384 // audioObject has an error!!
408 node.textContent = this.getValue();
409 return node;
410 };
411 this.error = function() {
412 // audioObject has an error!!
413 this.playback.textContent = "Error"; 385 this.playback.textContent = "Error";
414 $(this.playback).addClass("error-colour"); 386 $(this.playback).addClass("error-colour");
415 } 387 }
416 }; 388 };
417 389
418 function resizeWindow(event) 390 function resizeWindow(event) {
419 { 391 // Called on every window resize event, use this to scale your page properly
420 // Called on every window resize event, use this to scale your page properly 392 var numObj = document.getElementsByClassName('track-slider').length;
421 var numObj = document.getElementsByClassName('track-slider').length; 393 var totalHeight = (numObj * 66) - 30;
422 var totalHeight = (numObj * 66)-30; 394 document.getElementById('scale-holder').style.width = window.innerWidth - 220 + 'px';
423 document.getElementById('scale-holder').style.width = window.innerWidth-220 + 'px'; 395 // Cheers edge for making me delete a canvas every resize.
424 // Cheers edge for making me delete a canvas every resize. 396 var canvas = document.getElementById('scale-canvas');
425 var canvas = document.getElementById('scale-canvas');
426 var new_canvas = document.createElement("canvas"); 397 var new_canvas = document.createElement("canvas");
427 new_canvas.id = 'scale-canvas'; 398 new_canvas.id = 'scale-canvas';
428 new_canvas.style.marginLeft = "150px"; 399 new_canvas.style.marginLeft = "150px";
429 canvas.parentElement.appendChild(new_canvas); 400 canvas.parentElement.appendChild(new_canvas);
430 canvas.parentElement.removeChild(canvas); 401 canvas.parentElement.removeChild(canvas);
431 new_canvas.width = window.innerWidth-520; 402 new_canvas.width = window.innerWidth - 520;
432 new_canvas.height = totalHeight; 403 new_canvas.height = totalHeight;
433 for (var i in audioEngineContext.audioObjects) 404 for (var i in audioEngineContext.audioObjects) {
434 { 405 if (audioEngineContext.audioObjects[i].specification.type != 'outside-reference') {
435 if (audioEngineContext.audioObjects[i].specification.type != 'outside-reference'){ 406 audioEngineContext.audioObjects[i].interfaceDOM.resize(event);
436 audioEngineContext.audioObjects[i].interfaceDOM.resize(event); 407 }
437 } 408 }
438 }
439 document.getElementById('slider-holder').style.height = totalHeight + 'px'; 409 document.getElementById('slider-holder').style.height = totalHeight + 'px';
440 document.getElementById('slider').style.height = totalHeight + 70 + 'px'; 410 document.getElementById('slider').style.height = totalHeight + 70 + 'px';
441 drawScale(); 411 drawScale();
442 } 412 }
443 413
444 function drawScale() 414 function drawScale() {
445 { 415 var interfaceObj = testState.currentStateMap.interfaces[0];
446 var interfaceObj = testState.currentStateMap.interfaces[0]; 416 var scales = testState.currentStateMap.interfaces[0].scales;
447 var scales = testState.currentStateMap.interfaces[0].scales; 417 scales = scales.sort(function (a, b) {
448 scales = scales.sort(function(a,b) { 418 return a.position - b.position;
449 return a.position - b.position; 419 });
450 }); 420 var canvas = document.getElementById('scale-canvas');
451 var canvas = document.getElementById('scale-canvas'); 421 var ctx = canvas.getContext("2d");
452 var ctx = canvas.getContext("2d"); 422 var height = canvas.height;
453 var height = canvas.height; 423 var width = canvas.width;
454 var width = canvas.width; 424 var textHolder = document.getElementById('scale-text-holder');
455 var textHolder = document.getElementById('scale-text-holder'); 425 textHolder.innerHTML = "";
456 textHolder.innerHTML = ""; 426 ctx.fillStyle = "#000000";
457 ctx.fillStyle = "#000000"; 427 ctx.setLineDash([1, 4]);
458 ctx.setLineDash([1,4]); 428 for (var scale of scales) {
459 for (var scale of scales) 429 var posPercent = scale.position / 100.0;
460 { 430 var posPix = Math.round(width * posPercent);
461 var posPercent = scale.position / 100.0; 431 if (posPix <= 0) {
462 var posPix = Math.round(width * posPercent); 432 posPix = 1;
463 if(posPix<=0){posPix=1;} 433 }
464 if(posPix>=width){posPix=width-1;} 434 if (posPix >= width) {
465 ctx.moveTo(posPix,0); 435 posPix = width - 1;
466 ctx.lineTo(posPix,height); 436 }
467 ctx.stroke(); 437 ctx.moveTo(posPix, 0);
468 438 ctx.lineTo(posPix, height);
469 var text = document.createElement('div'); 439 ctx.stroke();
470 text.align = "center"; 440
471 var textC = document.createElement('span'); 441 var text = document.createElement('div');
472 textC.textContent = scale.text; 442 text.align = "center";
473 text.appendChild(textC); 443 var textC = document.createElement('span');
474 text.className = "scale-text"; 444 textC.textContent = scale.text;
475 textHolder.appendChild(text); 445 text.appendChild(textC);
476 text.style.width = $(text.children[0]).width()+'px'; 446 text.className = "scale-text";
477 text.style.left = (posPix+150-($(text).width()/2)) +'px'; 447 textHolder.appendChild(text);
478 } 448 text.style.width = $(text.children[0]).width() + 'px';
449 text.style.left = (posPix + 150 - ($(text).width() / 2)) + 'px';
450 }
479 } 451 }
480 452
481 function buttonSubmitClick() // TODO: Only when all songs have been played! 453 function buttonSubmitClick() // TODO: Only when all songs have been played!
482 { 454 {
483 var checks = []; 455 var checks = [];
484 checks = checks.concat(testState.currentStateMap.interfaces[0].options); 456 checks = checks.concat(testState.currentStateMap.interfaces[0].options);
485 checks = checks.concat(specification.interfaces.options); 457 checks = checks.concat(specification.interfaces.options);
486 var canContinue = true; 458 var canContinue = true;
487 459
488 // Check that the anchor and reference objects are correctly placed 460 // Check that the anchor and reference objects are correctly placed
489 if (interfaceContext.checkHiddenAnchor() == false) {return;} 461 if (interfaceContext.checkHiddenAnchor() == false) {
490 if (interfaceContext.checkHiddenReference() == false) {return;} 462 return;
491 463 }
492 for (var i=0; i<checks.length; i++) { 464 if (interfaceContext.checkHiddenReference() == false) {
493 if (checks[i].type == 'check') 465 return;
494 { 466 }
495 switch(checks[i].name) { 467
496 case 'fragmentPlayed': 468 for (var i = 0; i < checks.length; i++) {
497 // Check if all fragments have been played 469 if (checks[i].type == 'check') {
498 var checkState = interfaceContext.checkAllPlayed(); 470 switch (checks[i].name) {
499 if (checkState == false) {canContinue = false;} 471 case 'fragmentPlayed':
500 break; 472 // Check if all fragments have been played
501 case 'fragmentFullPlayback': 473 var checkState = interfaceContext.checkAllPlayed();
502 // Check all fragments have been played to their full length 474 if (checkState == false) {
503 var checkState = interfaceContext.checkAllPlayed(); 475 canContinue = false;
504 if (checkState == false) {canContinue = false;} 476 }
505 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); 477 break;
506 break; 478 case 'fragmentFullPlayback':
507 case 'fragmentMoved': 479 // Check all fragments have been played to their full length
508 // Check all fragment sliders have been moved. 480 var checkState = interfaceContext.checkAllPlayed();
509 var checkState = interfaceContext.checkAllMoved(); 481 if (checkState == false) {
510 if (checkState == false) {canContinue = false;} 482 canContinue = false;
511 break; 483 }
512 case 'fragmentComments': 484 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead');
513 // Check all fragment sliders have been moved. 485 break;
514 var checkState = interfaceContext.checkAllCommented(); 486 case 'fragmentMoved':
515 if (checkState == false) {canContinue = false;} 487 // Check all fragment sliders have been moved.
516 break; 488 var checkState = interfaceContext.checkAllMoved();
517 case 'scalerange': 489 if (checkState == false) {
518 // Check the scale has been used effectively 490 canContinue = false;
519 var checkState = interfaceContext.checkScaleRange(checks[i].min,checks[i].max); 491 }
520 if (checkState == false) {canContinue = false;} 492 break;
521 break; 493 case 'fragmentComments':
522 default: 494 // Check all fragment sliders have been moved.
523 console.log("WARNING - Check option "+checks[i].check+" is not supported on this interface"); 495 var checkState = interfaceContext.checkAllCommented();
524 break; 496 if (checkState == false) {
525 } 497 canContinue = false;
526 498 }
527 } 499 break;
528 if (!canContinue) {break;} 500 case 'scalerange':
529 } 501 // Check the scale has been used effectively
530 502 var checkState = interfaceContext.checkScaleRange(checks[i].min, checks[i].max);
503 if (checkState == false) {
504 canContinue = false;
505 }
506 break;
507 default:
508 console.log("WARNING - Check option " + checks[i].check + " is not supported on this interface");
509 break;
510 }
511
512 }
513 if (!canContinue) {
514 break;
515 }
516 }
517
531 if (canContinue) { 518 if (canContinue) {
532 if (audioEngineContext.status == 1) { 519 if (audioEngineContext.status == 1) {
533 var playback = document.getElementById('playback-button'); 520 var playback = document.getElementById('playback-button');
534 playback.click(); 521 playback.click();
535 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options 522 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
536 } else 523 } else {
537 { 524 if (audioEngineContext.timer.testStarted == false) {
538 if (audioEngineContext.timer.testStarted == false) 525 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please press start to begin the test!');
539 { 526 return;
540 interfaceContext.lightbox.post("Warning",'You have not started the test! Please press start to begin the test!'); 527 }
541 return; 528 }
542 } 529 testState.advanceState();
543 } 530 }
544 testState.advanceState();
545 }
546 } 531 }
547 532
548 function pageXMLSave(store, pageSpecification) 533 function pageXMLSave(store, pageSpecification) {
549 { 534 // MANDATORY
550 // MANDATORY 535 // Saves a specific test page
551 // Saves a specific test page 536 // You can use this space to add any extra nodes to your XML <audioHolder> saves
552 // You can use this space to add any extra nodes to your XML <audioHolder> saves 537 // Get the current <page> information in store (remember to appendChild your data to it)
553 // Get the current <page> information in store (remember to appendChild your data to it) 538 // pageSpecification is the current page node configuration
554 // pageSpecification is the current page node configuration 539 // To create new XML nodes, use storage.document.createElement();
555 // To create new XML nodes, use storage.document.createElement();
556 } 540 }