annotate ape.js @ 687:f602b19b20fd

Added mandatory pre/post test questions
author Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk>
date Tue, 21 Apr 2015 21:15:12 +0100
parents 820805ac7326
children 8babb8c22d59
rev   line source
n@656 1 /**
n@656 2 * ape.js
n@656 3 * Create the APE interface
n@656 4 */
n@656 5
n@656 6 /*
n@656 7 *
n@656 8 * WARNING!!!
n@656 9 *
n@656 10 * YOU ARE VIEWING THE DEV VERSION. THERE IS NO GUARANTEE THIS WILL BE FULLY FUNCTIONAL
n@656 11 *
n@656 12 * WARNING!!!
n@656 13 *
n@656 14 */
n@656 15
n@662 16 var currentState; // Keep track of the current state (pre/post test, which test, final test? first test?)
n@662 17 // preTest - In preTest state
n@662 18 // testRun-ID - In test running, test Id number at the end 'testRun-2'
n@662 19 // testRunPost-ID - Post test of test ID
n@662 20 // testRunPre-ID - Pre-test of test ID
n@662 21 // postTest - End of test, final submission!
n@662 22
n@656 23
n@656 24 // Once this is loaded and parsed, begin execution
n@656 25 loadInterface(projectXML);
n@656 26
n@656 27 function loadInterface(xmlDoc) {
n@656 28
n@656 29 // Get the dimensions of the screen available to the page
n@656 30 var width = window.innerWidth;
n@656 31 var height = window.innerHeight;
n@656 32
n@656 33 // The injection point into the HTML page
n@656 34 var insertPoint = document.getElementById("topLevelBody");
n@656 35 var testContent = document.createElement('div');
n@656 36 testContent.id = 'testContent';
n@656 37
n@656 38
n@656 39 // Decode parts of the xmlDoc that are needed
n@656 40 // xmlDoc MUST already be parsed by jQuery!
n@656 41 var xmlSetup = xmlDoc.find('setup');
n@656 42 // Should put in an error function here incase of malprocessed or malformed XML
n@656 43
n@658 44 // Extract the different test XML DOM trees
n@674 45 var audioHolders = xmlDoc.find('audioHolder');
n@674 46 audioHolders.each(function(index,element) {
n@674 47 var repeatN = element.attributes['repeatCount'].value;
n@674 48 for (var r=0; r<=repeatN; r++) {
n@674 49 testXMLSetups[testXMLSetups.length] = element;
n@674 50 }
n@674 51 });
n@668 52
n@674 53 // New check if we need to randomise the test order
n@674 54 var randomise = xmlSetup[0].attributes['randomiseOrder'];
n@674 55 if (randomise != undefined) {
n@674 56 randomise = Boolean(randomise.value);
n@674 57 } else {
n@674 58 randomise = false;
n@674 59 }
n@674 60 if (randomise)
n@674 61 {
n@678 62 testXMLSetups = randomiseOrder(testXMLSetups);
n@674 63 }
n@668 64
n@674 65 // Obtain the metrics enabled
n@674 66 var metricNode = xmlSetup.find('Metric');
n@674 67 var metricNode = metricNode.find('metricEnable');
n@674 68 metricNode.each(function(index,node){
n@674 69 var enabled = node.textContent;
n@674 70 switch(enabled)
n@674 71 {
n@674 72 case 'testTimer':
n@674 73 sessionMetrics.prototype.enableTestTimer = true;
n@674 74 break;
n@674 75 case 'elementTimer':
n@674 76 sessionMetrics.prototype.enableElementTimer = true;
n@674 77 break;
n@674 78 case 'elementTracker':
n@674 79 sessionMetrics.prototype.enableElementTracker = true;
n@674 80 break;
n@674 81 case 'elementInitalPosition':
n@674 82 sessionMetrics.prototype.enableElementInitialPosition = true;
n@674 83 break;
n@674 84 case 'elementFlagListenedTo':
n@674 85 sessionMetrics.prototype.enableFlagListenedTo = true;
n@674 86 break;
n@674 87 case 'elementFlagMoved':
n@674 88 sessionMetrics.prototype.enableFlagMoved = true;
n@674 89 break;
n@674 90 case 'elementFlagComments':
n@674 91 sessionMetrics.prototype.enableFlagComments = true;
n@674 92 break;
n@674 93 }
n@674 94 });
n@658 95
n@676 96 // Create APE specific metric functions
n@676 97 audioEngineContext.metric.initialiseTest = function()
n@676 98 {
n@676 99 var sliders = document.getElementsByClassName('track-slider');
n@676 100 for (var i=0; i<sliders.length; i++)
n@676 101 {
n@676 102 audioEngineContext.audioObjects[i].metric.initialised(convSliderPosToRate(i));
n@676 103 }
n@676 104 };
n@676 105
n@676 106 audioEngineContext.metric.sliderMoveStart = function(id)
n@676 107 {
n@676 108 if (this.data == -1)
n@676 109 {
n@676 110 this.data = id;
n@676 111 } else {
n@676 112 console.log('ERROR: Metric tracker detecting two moves!');
n@676 113 this.data = -1;
n@676 114 }
n@676 115 };
n@676 116 audioEngineContext.metric.sliderMoved = function()
n@676 117 {
n@676 118 var time = audioEngineContext.timer.getTestTime();
n@676 119 var id = this.data;
n@676 120 this.data = -1;
n@676 121 var position = convSliderPosToRate(id);
n@676 122 if (audioEngineContext.timer.testStarted)
n@676 123 {
n@676 124 audioEngineContext.audioObjects[id].metric.moved(time,position);
n@676 125 }
n@676 126 };
n@676 127
n@676 128 audioEngineContext.metric.sliderPlayed = function(id)
n@676 129 {
n@676 130 var time = audioEngineContext.timer.getTestTime();
n@676 131 if (audioEngineContext.timer.testStarted)
n@676 132 {
n@676 133 if (this.lastClicked >= 0)
n@676 134 {
n@676 135 audioEngineContext.audioObjects[this.lastClicked].metric.listening(time);
n@676 136 }
n@676 137 this.lastClicked = id;
n@676 138 audioEngineContext.audioObjects[id].metric.listening(time);
n@676 139 }
n@676 140 };
n@676 141
n@656 142 // Create the top div for the Title element
n@656 143 var titleAttr = xmlSetup[0].attributes['title'];
n@656 144 var title = document.createElement('div');
n@656 145 title.className = "title";
n@656 146 title.align = "center";
n@656 147 var titleSpan = document.createElement('span');
n@656 148
n@656 149 // Set title to that defined in XML, else set to default
n@656 150 if (titleAttr != undefined) {
n@656 151 titleSpan.innerHTML = titleAttr.value;
n@656 152 } else {
n@656 153 titleSpan.innerHTML = 'APE Tool';
n@656 154 }
n@656 155 // Insert the titleSpan element into the title div element.
n@656 156 title.appendChild(titleSpan);
n@656 157
n@671 158 var pagetitle = document.createElement('div');
n@671 159 pagetitle.className = "pageTitle";
n@671 160 pagetitle.align = "center";
n@671 161 var titleSpan = document.createElement('span');
n@671 162 titleSpan.id = "pageTitle";
n@671 163 pagetitle.appendChild(titleSpan);
n@671 164
n@656 165 // Store the return URL path in global projectReturn
n@656 166 projectReturn = xmlSetup[0].attributes['projectReturn'].value;
n@656 167
n@656 168 // Create Interface buttons!
n@656 169 var interfaceButtons = document.createElement('div');
n@656 170 interfaceButtons.id = 'interface-buttons';
n@656 171
n@656 172 // MANUAL DOWNLOAD POINT
n@656 173 // If project return is null, this MUST be specified as the location to create the download link
n@656 174 var downloadPoint = document.createElement('div');
n@656 175 downloadPoint.id = 'download-point';
n@656 176
n@656 177 // Create playback start/stop points
n@656 178 var playback = document.createElement("button");
n@656 179 playback.innerHTML = 'Start';
n@673 180 playback.id = 'playback-button';
n@656 181 // onclick function. Check if it is playing or not, call the correct function in the
n@656 182 // audioEngine, change the button text to reflect the next state.
n@656 183 playback.onclick = function() {
n@656 184 if (audioEngineContext.status == 0) {
n@656 185 audioEngineContext.play();
n@656 186 this.innerHTML = 'Stop';
n@656 187 } else {
n@656 188 audioEngineContext.stop();
n@656 189 this.innerHTML = 'Start';
n@656 190 }
n@656 191 };
n@656 192 // Create Submit (save) button
n@656 193 var submit = document.createElement("button");
n@656 194 submit.innerHTML = 'Submit';
n@667 195 submit.onclick = buttonSubmitClick;
n@673 196 submit.id = 'submit-button';
n@656 197 // Append the interface buttons into the interfaceButtons object.
n@656 198 interfaceButtons.appendChild(playback);
n@656 199 interfaceButtons.appendChild(submit);
n@656 200 interfaceButtons.appendChild(downloadPoint);
n@656 201
n@656 202 // Now create the slider and HTML5 canvas boxes
n@656 203
n@656 204 // Create the div box to center align
n@656 205 var sliderBox = document.createElement('div');
n@656 206 sliderBox.className = 'sliderCanvasDiv';
n@656 207 sliderBox.id = 'sliderCanvasHolder';
n@656 208 sliderBox.align = 'center';
n@656 209
n@656 210 // Create the slider box to hold the slider elements
n@656 211 var canvas = document.createElement('div');
n@656 212 canvas.id = 'slider';
n@656 213 // Must have a known EXACT width, as this is used later to determine the ratings
n@656 214 canvas.style.width = width - 100 +"px";
n@656 215 canvas.align = "left";
n@656 216 sliderBox.appendChild(canvas);
n@656 217
n@671 218 // Create the div to hold any scale objects
n@671 219 var scale = document.createElement('div');
n@671 220 scale.className = 'sliderScale';
n@671 221 scale.id = 'sliderScaleHolder';
n@671 222 scale.align = 'left';
n@671 223 sliderBox.appendChild(scale);
n@671 224
n@656 225 // Global parent for the comment boxes on the page
n@656 226 var feedbackHolder = document.createElement('div');
n@658 227 feedbackHolder.id = 'feedbackHolder';
n@656 228
n@662 229 testContent.style.zIndex = 1;
n@662 230 insertPoint.innerHTML = null; // Clear the current schema
n@662 231
n@656 232 // Create pre and post test questions
n@662 233 var blank = document.createElement('div');
n@662 234 blank.className = 'testHalt';
n@656 235
n@662 236 var popupHolder = document.createElement('div');
n@662 237 popupHolder.id = 'popupHolder';
n@662 238 popupHolder.className = 'popupHolder';
n@662 239 popupHolder.style.position = 'absolute';
n@662 240 popupHolder.style.left = (window.innerWidth/2)-250 + 'px';
n@662 241 popupHolder.style.top = (window.innerHeight/2)-125 + 'px';
n@662 242 insertPoint.appendChild(popupHolder);
n@662 243 insertPoint.appendChild(blank);
n@662 244 hidePopup();
n@656 245
n@660 246 var preTest = xmlSetup.find('PreTest');
n@660 247 var postTest = xmlSetup.find('PostTest');
n@656 248 preTest = preTest[0];
n@656 249 postTest = postTest[0];
n@662 250
n@662 251 currentState = 'preTest';
n@656 252
n@656 253 // Create Pre-Test Box
n@656 254 if (preTest != undefined && preTest.children.length >= 1)
n@656 255 {
n@662 256 showPopup();
n@663 257 preTestPopupStart(preTest);
n@656 258 }
n@662 259
n@662 260 // Inject into HTML
n@662 261 testContent.appendChild(title); // Insert the title
n@671 262 testContent.appendChild(pagetitle);
n@662 263 testContent.appendChild(interfaceButtons);
n@662 264 testContent.appendChild(sliderBox);
n@662 265 testContent.appendChild(feedbackHolder);
n@662 266 insertPoint.appendChild(testContent);
n@656 267
n@660 268 // Load the full interface
n@663 269
n@656 270 }
n@656 271
n@663 272 function loadTest(id)
n@658 273 {
n@658 274 // Used to load a specific test page
n@663 275 var textXML = testXMLSetups[id];
n@658 276
n@658 277 var feedbackHolder = document.getElementById('feedbackHolder');
n@658 278 var canvas = document.getElementById('slider');
n@658 279 feedbackHolder.innerHTML = null;
n@658 280 canvas.innerHTML = null;
n@671 281
n@671 282 // Setup question title
n@671 283 var interfaceObj = $(textXML).find('interface');
n@671 284 var titleNode = interfaceObj.find('title');
n@671 285 if (titleNode[0] != undefined)
n@671 286 {
n@671 287 document.getElementById('pageTitle').textContent = titleNode[0].textContent;
n@671 288 }
n@671 289 var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2);
n@671 290 var offset = 50-8; // Half the offset of the slider (window width -100) minus the body padding of 8
n@671 291 // TODO: AUTOMATE ABOVE!!
n@671 292 var scale = document.getElementById('sliderScaleHolder');
n@671 293 scale.innerHTML = null;
n@671 294 interfaceObj.find('scale').each(function(index,scaleObj){
n@671 295 var position = Number(scaleObj.attributes['position'].value)*0.01;
n@671 296 var pixelPosition = (position*positionScale)+offset;
n@671 297 var scaleDOM = document.createElement('span');
n@671 298 scaleDOM.textContent = scaleObj.textContent;
n@671 299 scale.appendChild(scaleDOM);
n@671 300 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
n@671 301 });
n@658 302
n@658 303 // Extract the hostURL attribute. If not set, create an empty string.
n@658 304 var hostURL = textXML.attributes['hostURL'];
n@658 305 if (hostURL == undefined) {
n@658 306 hostURL = "";
n@658 307 } else {
n@658 308 hostURL = hostURL.value;
n@658 309 }
n@658 310 // Extract the sampleRate. If set, convert the string to a Number.
n@658 311 var hostFs = textXML.attributes['sampleRate'];
n@658 312 if (hostFs != undefined) {
n@658 313 hostFs = Number(hostFs.value);
n@658 314 }
n@658 315
n@658 316 /// CHECK FOR SAMPLE RATE COMPATIBILITY
n@658 317 if (hostFs != undefined) {
n@658 318 if (Number(hostFs) != audioContext.sampleRate) {
n@658 319 var errStr = 'Sample rates do not match! Requested '+Number(hostFs)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.';
n@658 320 alert(errStr);
n@658 321 return;
n@658 322 }
n@658 323 }
n@669 324
n@681 325 var loopPlayback = textXML.attributes['loop'];
n@681 326 if (loopPlayback != undefined)
n@681 327 {
n@681 328 loopPlayback = loopPlayback.value;
n@681 329 if (loopPlayback == 'true') {
n@681 330 loopPlayback = true;
n@681 331 } else {
n@681 332 loopPlayback = false;
n@681 333 }
n@681 334 } else {
n@681 335 loopPlayback = false;
n@681 336 }
n@681 337 audioEngineContext.loopPlayback = loopPlayback;
n@681 338
n@681 339 // Create AudioEngine bindings for playback
n@681 340 if (loopPlayback) {
n@681 341 audioEngineContext.play = function() {
n@681 342 // Send play command to all playback buffers for synchronised start
n@681 343 // Also start timer callbacks to detect if playback has finished
n@681 344 if (this.status == 0) {
n@681 345 this.timer.startTest();
n@681 346 // First get current clock
n@681 347 var timer = audioContext.currentTime;
n@681 348 // Add 3 seconds
n@681 349 timer += 3.0;
n@681 350 // Send play to all tracks
n@681 351 for (var i=0; i<this.audioObjects.length; i++)
n@681 352 {
n@681 353 this.audioObjects[i].play(timer);
n@681 354 }
n@681 355 this.status = 1;
n@681 356 }
n@681 357 };
n@681 358
n@681 359 audioEngineContext.stop = function() {
n@681 360 // Send stop and reset command to all playback buffers
n@681 361 if (this.status == 1) {
n@681 362 if (this.loopPlayback) {
n@681 363 for (var i=0; i<this.audioObjects.length; i++)
n@681 364 {
n@681 365 this.audioObjects[i].stop();
n@681 366 }
n@681 367 }
n@681 368 this.status = 0;
n@681 369 }
n@681 370 };
n@681 371
n@681 372 audioEngineContext.selectedTrack = function(id) {
n@681 373 for (var i=0; i<this.audioObjects.length; i++)
n@681 374 {
n@681 375 if (id == i) {
n@681 376 this.audioObjects[i].outputGain.gain.value = 1.0;
n@681 377 } else {
n@681 378 this.audioObjects[i].outputGain.gain.value = 0.0;
n@681 379 }
n@681 380 }
n@681 381 };
n@681 382 } else {
n@681 383 audioEngineContext.play = function() {
n@681 384 // Send play command to all playback buffers for synchronised start
n@681 385 // Also start timer callbacks to detect if playback has finished
n@681 386 if (this.status == 0) {
n@681 387 this.timer.startTest();
n@681 388 this.status = 1;
n@681 389 }
n@681 390 };
n@681 391
n@681 392 audioEngineContext.stop = function() {
n@681 393 // Send stop and reset command to all playback buffers
n@681 394 if (this.status == 1) {
n@681 395 if (this.loopPlayback) {
n@681 396 for (var i=0; i<this.audioObjects.length; i++)
n@681 397 {
n@681 398 this.audioObjects[i].stop();
n@681 399 }
n@681 400 }
n@681 401 this.status = 0;
n@681 402 }
n@681 403 };
n@681 404
n@681 405 audioEngineContext.selectedTrack = function(id) {
n@681 406 for (var i=0; i<this.audioObjects.length; i++)
n@681 407 {
n@681 408 if (id == i) {
n@681 409 this.audioObjects[i].outputGain.gain.value = 1.0;
n@681 410 this.audioObjects[i].play(audioContext.currentTime+0.01);
n@681 411 } else {
n@681 412 this.audioObjects[i].outputGain.gain.value = 0.0;
n@681 413 }
n@681 414 }
n@681 415 };
n@681 416 }
n@681 417
n@670 418 currentTestHolder = document.createElement('audioHolder');
n@670 419 currentTestHolder.id = textXML.id;
n@670 420 currentTestHolder.repeatCount = textXML.attributes['repeatCount'].value;
n@670 421 var currentPreTestHolder = document.createElement('preTest');
n@670 422 var currentPostTestHolder = document.createElement('postTest');
n@670 423 currentTestHolder.appendChild(currentPreTestHolder);
n@670 424 currentTestHolder.appendChild(currentPostTestHolder);
n@670 425
n@669 426 var randomise = textXML.attributes['randomiseOrder'];
n@669 427 if (randomise != undefined) {randomise = randomise.value;}
n@669 428 else {randomise = false;}
n@669 429
n@658 430 var audioElements = $(textXML).find('audioElements');
nicholas@682 431 currentTrackOrder = [];
n@658 432 audioElements.each(function(index,element){
n@669 433 // Find any blind-repeats
n@669 434 // Not implemented yet, but just incase
n@669 435 currentTrackOrder[index] = element;
n@669 436 });
n@669 437 if (randomise) {
n@678 438 currentTrackOrder = randomiseOrder(currentTrackOrder);
n@669 439 }
n@669 440
nicholas@682 441 // Delete any previous audioObjects associated with the audioEngine
nicholas@682 442 audioEngineContext.audioObjects = [];
nicholas@682 443
n@669 444 // Find all the audioElements from the audioHolder
n@669 445 $(currentTrackOrder).each(function(index,element){
n@658 446 // Find URL of track
n@658 447 // In this jQuery loop, variable 'this' holds the current audioElement.
n@658 448
n@658 449 // Now load each audio sample. First create the new track by passing the full URL
n@658 450 var trackURL = hostURL + this.attributes['url'].value;
n@658 451 audioEngineContext.newTrack(trackURL);
n@658 452 // Create document objects to hold the comment boxes
n@658 453 var trackComment = document.createElement('div');
n@661 454 trackComment.className = 'comment-div';
n@658 455 // Create a string next to each comment asking for a comment
n@658 456 var trackString = document.createElement('span');
n@658 457 trackString.innerHTML = 'Comment on track '+index;
n@658 458 // Create the HTML5 comment box 'textarea'
n@658 459 var trackCommentBox = document.createElement('textarea');
n@658 460 trackCommentBox.rows = '4';
n@658 461 trackCommentBox.cols = '100';
n@658 462 trackCommentBox.name = 'trackComment'+index;
n@658 463 trackCommentBox.className = 'trackComment';
n@658 464 var br = document.createElement('br');
n@658 465 // Add to the holder.
n@658 466 trackComment.appendChild(trackString);
n@658 467 trackComment.appendChild(br);
n@658 468 trackComment.appendChild(trackCommentBox);
n@658 469 feedbackHolder.appendChild(trackComment);
n@658 470
n@658 471 // Create a slider per track
n@658 472
n@658 473 var trackSliderObj = document.createElement('div');
n@658 474 trackSliderObj.className = 'track-slider';
n@658 475 trackSliderObj.id = 'track-slider-'+index;
n@658 476 // Distribute it randomnly
n@658 477 var w = window.innerWidth - 100;
n@658 478 w = Math.random()*w;
n@658 479 trackSliderObj.style.left = Math.floor(w)+50+'px';
n@658 480 trackSliderObj.innerHTML = '<span>'+index+'</span>';
n@658 481 trackSliderObj.draggable = true;
n@658 482 trackSliderObj.ondragend = dragEnd;
n@673 483 trackSliderObj.ondragstart = function()
n@673 484 {
n@673 485 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99!
n@673 486 audioEngineContext.metric.sliderMoveStart(id);
n@673 487 };
n@658 488
n@658 489 // Onclick, switch playback to that track
n@658 490 trackSliderObj.onclick = function() {
n@658 491 // Get the track ID from the object ID
n@658 492 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99!
n@673 493 audioEngineContext.metric.sliderPlayed(id);
n@658 494 audioEngineContext.selectedTrack(id);
n@658 495 };
n@658 496
n@658 497 canvas.appendChild(trackSliderObj);
n@658 498 });
n@663 499
n@663 500 // Now process any pre-test commands
n@663 501
n@668 502 var preTest = $(testXMLSetups[id]).find('PreTest')[0];
n@663 503 if (preTest.children.length > 0)
n@663 504 {
n@663 505 currentState = 'testRunPre-'+id;
n@663 506 preTestPopupStart(preTest);
n@663 507 showPopup();
n@663 508 } else {
n@663 509 currentState = 'testRun-'+id;
n@663 510 }
n@663 511 }
n@663 512
n@663 513 function preTestPopupStart(preTest)
n@663 514 {
n@663 515 var popupHolder = document.getElementById('popupHolder');
n@663 516 popupHolder.innerHTML = null;
n@663 517 // Parse the first box
n@663 518 var preTestOption = document.createElement('div');
n@663 519 preTestOption.id = 'preTest';
n@663 520 preTestOption.style.marginTop = '25px';
n@663 521 preTestOption.align = "center";
n@663 522 var child = preTest.children[0];
n@663 523 if (child.nodeName == 'statement')
n@663 524 {
n@663 525 preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>';
n@663 526 } else if (child.nodeName == 'question')
n@663 527 {
n@663 528 var questionId = child.attributes['id'].value;
n@663 529 var textHold = document.createElement('span');
n@663 530 textHold.innerHTML = child.innerHTML;
n@663 531 textHold.id = questionId + 'response';
n@663 532 var textEnter = document.createElement('textarea');
n@663 533 preTestOption.appendChild(textHold);
n@663 534 preTestOption.appendChild(textEnter);
n@663 535 }
n@663 536 var nextButton = document.createElement('button');
n@663 537 nextButton.className = 'popupButton';
n@663 538 nextButton.value = '0';
n@663 539 nextButton.innerHTML = 'Next';
n@663 540 nextButton.onclick = popupButtonClick;
n@663 541
n@663 542 popupHolder.appendChild(preTestOption);
n@663 543 popupHolder.appendChild(nextButton);
n@658 544 }
n@658 545
n@662 546 function popupButtonClick()
n@662 547 {
n@662 548 // Global call from the 'Next' button click
n@662 549 if (currentState == 'preTest')
n@662 550 {
n@662 551 // At the start of the preTest routine!
n@663 552 var xmlTree = projectXML.find('setup');
n@663 553 var preTest = xmlTree.find('PreTest')[0];
n@663 554 this.value = preTestButtonClick(preTest,this.value);
n@663 555 } else if (currentState.substr(0,10) == 'testRunPre')
n@663 556 {
n@663 557 //Specific test pre-test
n@663 558 var testId = currentState.substr(11,currentState.length-10);
n@668 559 var preTest = $(testXMLSetups[testId]).find('PreTest')[0];
n@663 560 this.value = preTestButtonClick(preTest,this.value);
n@666 561 } else if (currentState.substr(0,11) == 'testRunPost')
n@666 562 {
n@666 563 // Specific test post-test
n@666 564 var testId = currentState.substr(12,currentState.length-11);
n@668 565 var preTest = $(testXMLSetups[testId]).find('PostTest')[0];
n@666 566 this.value = preTestButtonClick(preTest,this.value);
n@665 567 } else if (currentState == 'postTest')
n@665 568 {
n@665 569 // At the end of the test, running global post test
n@665 570 var xmlTree = projectXML.find('setup');
n@665 571 var PostTest = xmlTree.find('PostTest')[0];
n@665 572 this.value = preTestButtonClick(PostTest,this.value);
n@662 573 }
n@662 574 }
n@662 575
n@663 576 function preTestButtonClick(preTest,index)
n@658 577 {
n@658 578 // Called on click of pre-test button
n@660 579 // Need to find and parse preTest again!
n@660 580 var preTestOption = document.getElementById('preTest');
n@660 581 // Check if current state is a question!
n@662 582 if (preTest.children[index].nodeName == 'question') {
n@662 583 var questionId = preTest.children[index].attributes['id'].value;
n@660 584 var questionHold = document.createElement('comment');
n@660 585 var questionResponse = document.getElementById(questionId + 'response');
nicholas@687 586 var mandatory = preTest.children[index].attributes['mandatory'];
nicholas@687 587 if (mandatory != undefined){
nicholas@687 588 if (mandatory.value == 'true') {mandatory = true;}
nicholas@687 589 else {mandatory = false;}
nicholas@687 590 } else {mandatory = false;}
nicholas@687 591 if (mandatory == true && questionResponse.value.length == 0) {
nicholas@687 592 return index;
nicholas@687 593 }
n@660 594 questionHold.id = questionId;
n@660 595 questionHold.innerHTML = questionResponse.value;
n@670 596 postPopupResponse(questionHold);
n@660 597 }
n@662 598 index++;
n@662 599 if (index < preTest.children.length)
n@660 600 {
n@660 601 // More to process
n@662 602 var child = preTest.children[index];
n@660 603 if (child.nodeName == 'statement')
n@660 604 {
n@660 605 preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>';
n@660 606 } else if (child.nodeName == 'question')
n@660 607 {
n@660 608 var textHold = document.createElement('span');
n@660 609 textHold.innerHTML = child.innerHTML;
n@660 610 var textEnter = document.createElement('textarea');
n@660 611 textEnter.id = child.attributes['id'].value + 'response';
n@660 612 var br = document.createElement('br');
n@660 613 preTestOption.innerHTML = null;
n@660 614 preTestOption.appendChild(textHold);
n@660 615 preTestOption.appendChild(br);
n@660 616 preTestOption.appendChild(textEnter);
n@660 617 }
n@660 618 } else {
n@660 619 // Time to clear
n@661 620 preTestOption.innerHTML = null;
n@667 621 if (currentState != 'postTest') {
n@667 622 hidePopup();
n@667 623 // Progress the state!
n@667 624 advanceState();
n@667 625 } else {
n@667 626 a = createProjectSave(projectReturn);
n@667 627 preTestOption.appendChild(a);
n@667 628 }
n@660 629 }
n@662 630 return index;
n@660 631 }
n@660 632
n@670 633 function postPopupResponse(response)
n@670 634 {
n@670 635 if (currentState == 'preTest') {
n@670 636 preTestQuestions.appendChild(response);
n@670 637 } else if (currentState == 'postTest') {
n@670 638 postTestQuestions.appendChild(response);
n@670 639 } else {
n@670 640 // Inside a specific test
n@670 641 if (currentState.substr(0,10) == 'testRunPre') {
n@670 642 // Pre Test
n@670 643 var store = $(currentTestHolder).find('preTest');
n@670 644 } else {
n@670 645 // Post Test
n@670 646 var store = $(currentTestHolder).find('postTest');
n@670 647 }
n@670 648 store[0].appendChild(response);
n@670 649 }
n@670 650 }
n@670 651
n@660 652 function showPopup()
n@660 653 {
n@661 654 var popupHolder = document.getElementById('popupHolder');
n@662 655 popupHolder.style.zIndex = 3;
n@661 656 popupHolder.style.visibility = 'visible';
n@661 657 var blank = document.getElementsByClassName('testHalt')[0];
n@661 658 blank.style.zIndex = 2;
n@661 659 blank.style.visibility = 'visible';
n@660 660 }
n@660 661
n@660 662 function hidePopup()
n@660 663 {
n@661 664 var popupHolder = document.getElementById('popupHolder');
n@661 665 popupHolder.style.zIndex = -1;
n@661 666 popupHolder.style.visibility = 'hidden';
n@661 667 var blank = document.getElementsByClassName('testHalt')[0];
n@661 668 blank.style.zIndex = -2;
n@661 669 blank.style.visibility = 'hidden';
n@658 670 }
n@658 671
n@656 672 function dragEnd(ev) {
n@656 673 // Function call when a div has been dropped
n@657 674 var slider = document.getElementById('slider');
n@675 675 var w = slider.style.width;
n@675 676 w = Number(w.substr(0,w.length-2));
n@675 677 var x = ev.x;
n@675 678 if (x >= 42 && x < w+42) {
n@675 679 this.style.left = (x)+'px';
n@656 680 } else {
n@675 681 if (x<42) {
n@675 682 this.style.left = '42px';
n@656 683 } else {
n@675 684 this.style.left = (w+42) + 'px';
n@656 685 }
n@656 686 }
n@673 687 audioEngineContext.metric.sliderMoved();
n@656 688 }
n@656 689
n@663 690 function advanceState()
n@663 691 {
n@663 692 console.log(currentState);
n@663 693 if (currentState == 'preTest')
n@663 694 {
n@663 695 // End of pre-test, begin the test
n@663 696 loadTest(0);
n@663 697 } else if (currentState.substr(0,10) == 'testRunPre')
n@663 698 {
n@663 699 // Start the test
n@663 700 var testId = currentState.substr(11,currentState.length-10);
n@663 701 currentState = 'testRun-'+testId;
n@666 702 } else if (currentState.substr(0,11) == 'testRunPost')
n@666 703 {
n@668 704 var testId = currentState.substr(12,currentState.length-11);
n@666 705 testEnded(testId);
n@664 706 } else if (currentState.substr(0,7) == 'testRun')
n@664 707 {
n@664 708 var testId = currentState.substr(8,currentState.length-7);
n@664 709 // Check if we have any post tests to perform
n@668 710 var postXML = $(testXMLSetups[testId]).find('PostTest')[0];
n@664 711 if (postXML.children.length > 0)
n@664 712 {
n@666 713 currentState = 'testRunPost-'+testId;
n@666 714 showPopup();
n@666 715 preTestPopupStart(postXML);
n@664 716 }
n@666 717 else {
n@664 718
n@664 719
n@666 720 // No post tests, check if we have another test to perform instead
n@666 721 testEnded(testId);
n@664 722 }
n@663 723 }
n@663 724 console.log(currentState);
n@663 725 }
n@663 726
n@666 727 function testEnded(testId)
n@666 728 {
n@669 729 pageXMLSave(testId);
n@666 730 if (testXMLSetups.length-1 > testId)
n@666 731 {
n@666 732 // Yes we have another test to perform
n@668 733 testId = (Number(testId)+1);
n@668 734 currentState = 'testRun-'+testId;
n@668 735 loadTest(testId);
n@666 736 } else {
n@666 737 console.log('Testing Completed!');
n@666 738 currentState = 'postTest';
n@666 739 // Check for any post tests
n@666 740 var xmlSetup = projectXML.find('setup');
n@666 741 var postTest = xmlSetup.find('PostTest')[0];
n@666 742 showPopup();
n@666 743 preTestPopupStart(postTest);
n@666 744 }
n@666 745 }
n@666 746
n@664 747 function buttonSubmitClick()
n@664 748 {
n@673 749 if (audioEngineContext.status == 1) {
n@673 750 var playback = document.getElementById('playback-button');
n@673 751 playback.click();
n@664 752 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
n@679 753 } else
n@679 754 {
n@679 755 if (audioEngineContext.timer.testStarted == false)
n@679 756 {
n@679 757 alert('You have not started the test! Please press start to begin the test!');
n@679 758 return;
n@679 759 }
n@673 760 }
n@664 761 if (currentState.substr(0,7) == 'testRun')
n@664 762 {
n@673 763 audioEngineContext.timer.stopTest();
n@664 764 advanceState();
n@664 765 }
n@664 766 }
n@664 767
n@675 768 function convSliderPosToRate(id)
n@675 769 {
n@675 770 var w = document.getElementById('slider').style.width;
n@675 771 var maxPix = w.substr(0,w.length-2);
n@675 772 var slider = document.getElementsByClassName('track-slider')[id];
n@675 773 var pix = slider.style.left;
n@675 774 pix = pix.substr(0,pix.length-2);
n@675 775 var rate = (pix-42)/maxPix;
n@675 776 return rate;
n@675 777 }
n@675 778
n@668 779 function pageXMLSave(testId)
n@668 780 {
n@668 781 // Saves a specific test page
n@670 782 var xmlDoc = currentTestHolder;
n@674 783 // Check if any session wide metrics are enabled
n@674 784 var metric = document.createElement('metric');
n@674 785 if (audioEngineContext.metric.enableTestTimer)
n@674 786 {
n@674 787 var testTime = document.createElement('metricResult');
n@674 788 testTime.id = 'testTime';
n@674 789 testTime.textContent = audioEngineContext.timer.testDuration;
n@674 790 metric.appendChild(testTime);
n@674 791 }
n@674 792 xmlDoc.appendChild(metric);
n@669 793 var trackSliderObjects = document.getElementsByClassName('track-slider');
n@669 794 var commentObjects = document.getElementsByClassName('comment-div');
n@669 795 for (var i=0; i<trackSliderObjects.length; i++)
n@669 796 {
n@669 797 var audioElement = document.createElement('audioElement');
n@669 798 audioElement.id = currentTrackOrder[i].attributes['id'].value;
n@669 799 audioElement.url = currentTrackOrder[i].attributes['url'].value;
n@675 800 var value = document.createElement('value');
n@675 801 value.innerHTML = convSliderPosToRate(i);
n@669 802 var comment = document.createElement("comment");
n@669 803 var question = document.createElement("question");
n@669 804 var response = document.createElement("response");
n@669 805 question.textContent = commentObjects[i].children[0].textContent;
n@669 806 response.textContent = commentObjects[i].children[2].value;
n@669 807 comment.appendChild(question);
n@669 808 comment.appendChild(response);
n@669 809 audioElement.appendChild(value);
n@669 810 audioElement.appendChild(comment);
n@674 811 // Check for any per element metrics
n@674 812 var metric = document.createElement('metric');
n@674 813 var elementMetric = audioEngineContext.audioObjects[i].metric;
n@674 814 if (audioEngineContext.metric.enableElementTimer) {
n@674 815 var elementTimer = document.createElement('metricResult');
n@674 816 elementTimer.id = 'elementTimer';
n@674 817 elementTimer.textContent = elementMetric.listenedTimer;
n@674 818 metric.appendChild(elementTimer);
n@674 819 }
n@674 820 if (audioEngineContext.metric.enableElementTracker) {
n@674 821 var elementTrackerFull = document.createElement('metricResult');
n@674 822 elementTrackerFull.id = 'elementTrackerFull';
n@674 823 var data = elementMetric.movementTracker;
n@674 824 for (var k=0; k<data.length; k++)
n@674 825 {
n@674 826 var timePos = document.createElement('timePos');
n@674 827 timePos.id = k;
n@674 828 var time = document.createElement('time');
n@674 829 time.textContent = data[k][0];
n@674 830 var position = document.createElement('position');
n@674 831 position.textContent = data[k][1];
n@674 832 timePos.appendChild(time);
n@674 833 timePos.appendChild(position);
n@674 834 elementTrackerFull.appendChild(timePos);
n@674 835 }
n@674 836 metric.appendChild(elementTrackerFull);
n@674 837 }
n@674 838 if (audioEngineContext.metric.enableElementInitialPosition) {
n@674 839 var elementInitial = document.createElement('metricResult');
n@674 840 elementInitial.id = 'elementInitialPosition';
n@674 841 elementInitial.textContent = elementMetric.initialPosition;
n@674 842 metric.appendChild(elementInitial);
n@674 843 }
n@674 844 if (audioEngineContext.metric.enableFlagListenedTo) {
n@674 845 var flagListenedTo = document.createElement('metricResult');
n@674 846 flagListenedTo.id = 'elementFlagListenedTo';
n@674 847 flagListenedTo.textContent = elementMetric.wasListenedTo;
n@674 848 metric.appendChild(flagListenedTo);
n@674 849 }
n@674 850 if (audioEngineContext.metric.enableFlagMoved) {
n@674 851 var flagMoved = document.createElement('metricResult');
n@674 852 flagMoved.id = 'elementFlagMoved';
n@674 853 flagMoved.textContent = elementMetric.wasMoved;
n@674 854 metric.appendChild(flagMoved);
n@674 855 }
n@674 856 if (audioEngineContext.metric.enableFlagComments) {
n@674 857 var flagComments = document.createElement('metricResult');
n@674 858 flagComments.id = 'elementFlagComments';
n@674 859 if (response.textContent.length == 0) {flag.textContent = 'false';}
n@674 860 else {flag.textContet = 'true';}
n@674 861 metric.appendChild(flagComments);
n@674 862 }
n@674 863 audioElement.appendChild(metric);
n@669 864 xmlDoc.appendChild(audioElement);
n@669 865 }
n@669 866 testResultsHolders[testId] = xmlDoc;
n@668 867 }
n@668 868
n@656 869 // Only other global function which must be defined in the interface class. Determines how to create the XML document.
n@656 870 function interfaceXMLSave(){
n@656 871 // Create the XML string to be exported with results
n@656 872 var xmlDoc = document.createElement("BrowserEvaluationResult");
n@669 873 for (var i=0; i<testResultsHolders.length; i++)
n@656 874 {
n@669 875 xmlDoc.appendChild(testResultsHolders[i]);
n@656 876 }
n@656 877 // Append Pre/Post Questions
n@656 878 xmlDoc.appendChild(preTestQuestions);
n@656 879 xmlDoc.appendChild(postTestQuestions);
n@656 880
n@656 881 return xmlDoc;
n@656 882 }
n@656 883