annotate ape.js @ 688:8babb8c22d59

Added commentQuestion object
author Nicholas Jillings <nicholas.jillings@eecs.qmul.ac.uk>
date Tue, 21 Apr 2015 21:32:42 +0100
parents f602b19b20fd
children f996a6663907
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
nicholas@688 500 // Append any commentQuestion boxes
nicholas@688 501 var commentQuestions = $(textXML).find('CommentQuestion');
nicholas@688 502 $(commentQuestions).each(function(index,element) {
nicholas@688 503 // Create document objects to hold the comment boxes
nicholas@688 504 var trackComment = document.createElement('div');
nicholas@688 505 trackComment.className = 'comment-div commentQuestion';
nicholas@688 506 trackComment.id = element.attributes['id'].value;
nicholas@688 507 // Create a string next to each comment asking for a comment
nicholas@688 508 var trackString = document.createElement('span');
nicholas@688 509 trackString.innerHTML = element.textContent;
nicholas@688 510 // Create the HTML5 comment box 'textarea'
nicholas@688 511 var trackCommentBox = document.createElement('textarea');
nicholas@688 512 trackCommentBox.rows = '4';
nicholas@688 513 trackCommentBox.cols = '100';
nicholas@688 514 trackCommentBox.name = 'commentQuestion'+index;
nicholas@688 515 trackCommentBox.className = 'trackComment';
nicholas@688 516 var br = document.createElement('br');
nicholas@688 517 // Add to the holder.
nicholas@688 518 trackComment.appendChild(trackString);
nicholas@688 519 trackComment.appendChild(br);
nicholas@688 520 trackComment.appendChild(trackCommentBox);
nicholas@688 521 feedbackHolder.appendChild(trackComment);
nicholas@688 522 });
nicholas@688 523
n@663 524 // Now process any pre-test commands
n@663 525
n@668 526 var preTest = $(testXMLSetups[id]).find('PreTest')[0];
n@663 527 if (preTest.children.length > 0)
n@663 528 {
n@663 529 currentState = 'testRunPre-'+id;
n@663 530 preTestPopupStart(preTest);
n@663 531 showPopup();
n@663 532 } else {
n@663 533 currentState = 'testRun-'+id;
n@663 534 }
n@663 535 }
n@663 536
n@663 537 function preTestPopupStart(preTest)
n@663 538 {
n@663 539 var popupHolder = document.getElementById('popupHolder');
n@663 540 popupHolder.innerHTML = null;
n@663 541 // Parse the first box
n@663 542 var preTestOption = document.createElement('div');
n@663 543 preTestOption.id = 'preTest';
n@663 544 preTestOption.style.marginTop = '25px';
n@663 545 preTestOption.align = "center";
n@663 546 var child = preTest.children[0];
n@663 547 if (child.nodeName == 'statement')
n@663 548 {
n@663 549 preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>';
n@663 550 } else if (child.nodeName == 'question')
n@663 551 {
n@663 552 var questionId = child.attributes['id'].value;
n@663 553 var textHold = document.createElement('span');
n@663 554 textHold.innerHTML = child.innerHTML;
n@663 555 textHold.id = questionId + 'response';
n@663 556 var textEnter = document.createElement('textarea');
n@663 557 preTestOption.appendChild(textHold);
n@663 558 preTestOption.appendChild(textEnter);
n@663 559 }
n@663 560 var nextButton = document.createElement('button');
n@663 561 nextButton.className = 'popupButton';
n@663 562 nextButton.value = '0';
n@663 563 nextButton.innerHTML = 'Next';
n@663 564 nextButton.onclick = popupButtonClick;
n@663 565
n@663 566 popupHolder.appendChild(preTestOption);
n@663 567 popupHolder.appendChild(nextButton);
n@658 568 }
n@658 569
n@662 570 function popupButtonClick()
n@662 571 {
n@662 572 // Global call from the 'Next' button click
n@662 573 if (currentState == 'preTest')
n@662 574 {
n@662 575 // At the start of the preTest routine!
n@663 576 var xmlTree = projectXML.find('setup');
n@663 577 var preTest = xmlTree.find('PreTest')[0];
n@663 578 this.value = preTestButtonClick(preTest,this.value);
n@663 579 } else if (currentState.substr(0,10) == 'testRunPre')
n@663 580 {
n@663 581 //Specific test pre-test
n@663 582 var testId = currentState.substr(11,currentState.length-10);
n@668 583 var preTest = $(testXMLSetups[testId]).find('PreTest')[0];
n@663 584 this.value = preTestButtonClick(preTest,this.value);
n@666 585 } else if (currentState.substr(0,11) == 'testRunPost')
n@666 586 {
n@666 587 // Specific test post-test
n@666 588 var testId = currentState.substr(12,currentState.length-11);
n@668 589 var preTest = $(testXMLSetups[testId]).find('PostTest')[0];
n@666 590 this.value = preTestButtonClick(preTest,this.value);
n@665 591 } else if (currentState == 'postTest')
n@665 592 {
n@665 593 // At the end of the test, running global post test
n@665 594 var xmlTree = projectXML.find('setup');
n@665 595 var PostTest = xmlTree.find('PostTest')[0];
n@665 596 this.value = preTestButtonClick(PostTest,this.value);
n@662 597 }
n@662 598 }
n@662 599
n@663 600 function preTestButtonClick(preTest,index)
n@658 601 {
n@658 602 // Called on click of pre-test button
n@660 603 // Need to find and parse preTest again!
n@660 604 var preTestOption = document.getElementById('preTest');
n@660 605 // Check if current state is a question!
n@662 606 if (preTest.children[index].nodeName == 'question') {
n@662 607 var questionId = preTest.children[index].attributes['id'].value;
n@660 608 var questionHold = document.createElement('comment');
n@660 609 var questionResponse = document.getElementById(questionId + 'response');
nicholas@687 610 var mandatory = preTest.children[index].attributes['mandatory'];
nicholas@687 611 if (mandatory != undefined){
nicholas@687 612 if (mandatory.value == 'true') {mandatory = true;}
nicholas@687 613 else {mandatory = false;}
nicholas@687 614 } else {mandatory = false;}
nicholas@687 615 if (mandatory == true && questionResponse.value.length == 0) {
nicholas@687 616 return index;
nicholas@687 617 }
n@660 618 questionHold.id = questionId;
n@660 619 questionHold.innerHTML = questionResponse.value;
n@670 620 postPopupResponse(questionHold);
n@660 621 }
n@662 622 index++;
n@662 623 if (index < preTest.children.length)
n@660 624 {
n@660 625 // More to process
n@662 626 var child = preTest.children[index];
n@660 627 if (child.nodeName == 'statement')
n@660 628 {
n@660 629 preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>';
n@660 630 } else if (child.nodeName == 'question')
n@660 631 {
n@660 632 var textHold = document.createElement('span');
n@660 633 textHold.innerHTML = child.innerHTML;
n@660 634 var textEnter = document.createElement('textarea');
n@660 635 textEnter.id = child.attributes['id'].value + 'response';
n@660 636 var br = document.createElement('br');
n@660 637 preTestOption.innerHTML = null;
n@660 638 preTestOption.appendChild(textHold);
n@660 639 preTestOption.appendChild(br);
n@660 640 preTestOption.appendChild(textEnter);
n@660 641 }
n@660 642 } else {
n@660 643 // Time to clear
n@661 644 preTestOption.innerHTML = null;
n@667 645 if (currentState != 'postTest') {
n@667 646 hidePopup();
n@667 647 // Progress the state!
n@667 648 advanceState();
n@667 649 } else {
n@667 650 a = createProjectSave(projectReturn);
n@667 651 preTestOption.appendChild(a);
n@667 652 }
n@660 653 }
n@662 654 return index;
n@660 655 }
n@660 656
n@670 657 function postPopupResponse(response)
n@670 658 {
n@670 659 if (currentState == 'preTest') {
n@670 660 preTestQuestions.appendChild(response);
n@670 661 } else if (currentState == 'postTest') {
n@670 662 postTestQuestions.appendChild(response);
n@670 663 } else {
n@670 664 // Inside a specific test
n@670 665 if (currentState.substr(0,10) == 'testRunPre') {
n@670 666 // Pre Test
n@670 667 var store = $(currentTestHolder).find('preTest');
n@670 668 } else {
n@670 669 // Post Test
n@670 670 var store = $(currentTestHolder).find('postTest');
n@670 671 }
n@670 672 store[0].appendChild(response);
n@670 673 }
n@670 674 }
n@670 675
n@660 676 function showPopup()
n@660 677 {
n@661 678 var popupHolder = document.getElementById('popupHolder');
n@662 679 popupHolder.style.zIndex = 3;
n@661 680 popupHolder.style.visibility = 'visible';
n@661 681 var blank = document.getElementsByClassName('testHalt')[0];
n@661 682 blank.style.zIndex = 2;
n@661 683 blank.style.visibility = 'visible';
n@660 684 }
n@660 685
n@660 686 function hidePopup()
n@660 687 {
n@661 688 var popupHolder = document.getElementById('popupHolder');
n@661 689 popupHolder.style.zIndex = -1;
n@661 690 popupHolder.style.visibility = 'hidden';
n@661 691 var blank = document.getElementsByClassName('testHalt')[0];
n@661 692 blank.style.zIndex = -2;
n@661 693 blank.style.visibility = 'hidden';
n@658 694 }
n@658 695
n@656 696 function dragEnd(ev) {
n@656 697 // Function call when a div has been dropped
n@657 698 var slider = document.getElementById('slider');
n@675 699 var w = slider.style.width;
n@675 700 w = Number(w.substr(0,w.length-2));
n@675 701 var x = ev.x;
n@675 702 if (x >= 42 && x < w+42) {
n@675 703 this.style.left = (x)+'px';
n@656 704 } else {
n@675 705 if (x<42) {
n@675 706 this.style.left = '42px';
n@656 707 } else {
n@675 708 this.style.left = (w+42) + 'px';
n@656 709 }
n@656 710 }
n@673 711 audioEngineContext.metric.sliderMoved();
n@656 712 }
n@656 713
n@663 714 function advanceState()
n@663 715 {
n@663 716 console.log(currentState);
n@663 717 if (currentState == 'preTest')
n@663 718 {
n@663 719 // End of pre-test, begin the test
n@663 720 loadTest(0);
n@663 721 } else if (currentState.substr(0,10) == 'testRunPre')
n@663 722 {
n@663 723 // Start the test
n@663 724 var testId = currentState.substr(11,currentState.length-10);
n@663 725 currentState = 'testRun-'+testId;
n@666 726 } else if (currentState.substr(0,11) == 'testRunPost')
n@666 727 {
n@668 728 var testId = currentState.substr(12,currentState.length-11);
n@666 729 testEnded(testId);
n@664 730 } else if (currentState.substr(0,7) == 'testRun')
n@664 731 {
n@664 732 var testId = currentState.substr(8,currentState.length-7);
n@664 733 // Check if we have any post tests to perform
n@668 734 var postXML = $(testXMLSetups[testId]).find('PostTest')[0];
n@664 735 if (postXML.children.length > 0)
n@664 736 {
n@666 737 currentState = 'testRunPost-'+testId;
n@666 738 showPopup();
n@666 739 preTestPopupStart(postXML);
n@664 740 }
n@666 741 else {
n@664 742
n@664 743
n@666 744 // No post tests, check if we have another test to perform instead
n@666 745 testEnded(testId);
n@664 746 }
n@663 747 }
n@663 748 console.log(currentState);
n@663 749 }
n@663 750
n@666 751 function testEnded(testId)
n@666 752 {
n@669 753 pageXMLSave(testId);
n@666 754 if (testXMLSetups.length-1 > testId)
n@666 755 {
n@666 756 // Yes we have another test to perform
n@668 757 testId = (Number(testId)+1);
n@668 758 currentState = 'testRun-'+testId;
n@668 759 loadTest(testId);
n@666 760 } else {
n@666 761 console.log('Testing Completed!');
n@666 762 currentState = 'postTest';
n@666 763 // Check for any post tests
n@666 764 var xmlSetup = projectXML.find('setup');
n@666 765 var postTest = xmlSetup.find('PostTest')[0];
n@666 766 showPopup();
n@666 767 preTestPopupStart(postTest);
n@666 768 }
n@666 769 }
n@666 770
n@664 771 function buttonSubmitClick()
n@664 772 {
n@673 773 if (audioEngineContext.status == 1) {
n@673 774 var playback = document.getElementById('playback-button');
n@673 775 playback.click();
n@664 776 // 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 777 } else
n@679 778 {
n@679 779 if (audioEngineContext.timer.testStarted == false)
n@679 780 {
n@679 781 alert('You have not started the test! Please press start to begin the test!');
n@679 782 return;
n@679 783 }
n@673 784 }
n@664 785 if (currentState.substr(0,7) == 'testRun')
n@664 786 {
n@673 787 audioEngineContext.timer.stopTest();
n@664 788 advanceState();
n@664 789 }
n@664 790 }
n@664 791
n@675 792 function convSliderPosToRate(id)
n@675 793 {
n@675 794 var w = document.getElementById('slider').style.width;
n@675 795 var maxPix = w.substr(0,w.length-2);
n@675 796 var slider = document.getElementsByClassName('track-slider')[id];
n@675 797 var pix = slider.style.left;
n@675 798 pix = pix.substr(0,pix.length-2);
n@675 799 var rate = (pix-42)/maxPix;
n@675 800 return rate;
n@675 801 }
n@675 802
n@668 803 function pageXMLSave(testId)
n@668 804 {
n@668 805 // Saves a specific test page
n@670 806 var xmlDoc = currentTestHolder;
n@674 807 // Check if any session wide metrics are enabled
n@674 808 var metric = document.createElement('metric');
n@674 809 if (audioEngineContext.metric.enableTestTimer)
n@674 810 {
n@674 811 var testTime = document.createElement('metricResult');
n@674 812 testTime.id = 'testTime';
n@674 813 testTime.textContent = audioEngineContext.timer.testDuration;
n@674 814 metric.appendChild(testTime);
n@674 815 }
n@674 816 xmlDoc.appendChild(metric);
n@669 817 var trackSliderObjects = document.getElementsByClassName('track-slider');
n@669 818 var commentObjects = document.getElementsByClassName('comment-div');
n@669 819 for (var i=0; i<trackSliderObjects.length; i++)
n@669 820 {
n@669 821 var audioElement = document.createElement('audioElement');
n@669 822 audioElement.id = currentTrackOrder[i].attributes['id'].value;
n@669 823 audioElement.url = currentTrackOrder[i].attributes['url'].value;
n@675 824 var value = document.createElement('value');
n@675 825 value.innerHTML = convSliderPosToRate(i);
n@669 826 var comment = document.createElement("comment");
n@669 827 var question = document.createElement("question");
n@669 828 var response = document.createElement("response");
n@669 829 question.textContent = commentObjects[i].children[0].textContent;
n@669 830 response.textContent = commentObjects[i].children[2].value;
n@669 831 comment.appendChild(question);
n@669 832 comment.appendChild(response);
n@669 833 audioElement.appendChild(value);
n@669 834 audioElement.appendChild(comment);
n@674 835 // Check for any per element metrics
n@674 836 var metric = document.createElement('metric');
n@674 837 var elementMetric = audioEngineContext.audioObjects[i].metric;
n@674 838 if (audioEngineContext.metric.enableElementTimer) {
n@674 839 var elementTimer = document.createElement('metricResult');
n@674 840 elementTimer.id = 'elementTimer';
n@674 841 elementTimer.textContent = elementMetric.listenedTimer;
n@674 842 metric.appendChild(elementTimer);
n@674 843 }
n@674 844 if (audioEngineContext.metric.enableElementTracker) {
n@674 845 var elementTrackerFull = document.createElement('metricResult');
n@674 846 elementTrackerFull.id = 'elementTrackerFull';
n@674 847 var data = elementMetric.movementTracker;
n@674 848 for (var k=0; k<data.length; k++)
n@674 849 {
n@674 850 var timePos = document.createElement('timePos');
n@674 851 timePos.id = k;
n@674 852 var time = document.createElement('time');
n@674 853 time.textContent = data[k][0];
n@674 854 var position = document.createElement('position');
n@674 855 position.textContent = data[k][1];
n@674 856 timePos.appendChild(time);
n@674 857 timePos.appendChild(position);
n@674 858 elementTrackerFull.appendChild(timePos);
n@674 859 }
n@674 860 metric.appendChild(elementTrackerFull);
n@674 861 }
n@674 862 if (audioEngineContext.metric.enableElementInitialPosition) {
n@674 863 var elementInitial = document.createElement('metricResult');
n@674 864 elementInitial.id = 'elementInitialPosition';
n@674 865 elementInitial.textContent = elementMetric.initialPosition;
n@674 866 metric.appendChild(elementInitial);
n@674 867 }
n@674 868 if (audioEngineContext.metric.enableFlagListenedTo) {
n@674 869 var flagListenedTo = document.createElement('metricResult');
n@674 870 flagListenedTo.id = 'elementFlagListenedTo';
n@674 871 flagListenedTo.textContent = elementMetric.wasListenedTo;
n@674 872 metric.appendChild(flagListenedTo);
n@674 873 }
n@674 874 if (audioEngineContext.metric.enableFlagMoved) {
n@674 875 var flagMoved = document.createElement('metricResult');
n@674 876 flagMoved.id = 'elementFlagMoved';
n@674 877 flagMoved.textContent = elementMetric.wasMoved;
n@674 878 metric.appendChild(flagMoved);
n@674 879 }
n@674 880 if (audioEngineContext.metric.enableFlagComments) {
n@674 881 var flagComments = document.createElement('metricResult');
n@674 882 flagComments.id = 'elementFlagComments';
n@674 883 if (response.textContent.length == 0) {flag.textContent = 'false';}
n@674 884 else {flag.textContet = 'true';}
n@674 885 metric.appendChild(flagComments);
n@674 886 }
n@674 887 audioElement.appendChild(metric);
n@669 888 xmlDoc.appendChild(audioElement);
n@669 889 }
nicholas@688 890 var commentQuestion = document.getElementsByClassName('commentQuestion');
nicholas@688 891 for (var i=0; i<commentQuestion.length; i++)
nicholas@688 892 {
nicholas@688 893 var cqHolder = document.createElement('CommentQuestion');
nicholas@688 894 var comment = document.createElement('comment');
nicholas@688 895 var question = document.createElement('question');
nicholas@688 896 cqHolder.id = commentQuestion[i].id;
nicholas@688 897 comment.textContent = commentQuestion[i].children[2].value;
nicholas@688 898 question.textContent = commentQuestion[i].children[0].textContent;
nicholas@688 899 cqHolder.appendChild(question);
nicholas@688 900 cqHolder.appendChild(comment);
nicholas@688 901 xmlDoc.appendChild(cqHolder);
nicholas@688 902 }
n@669 903 testResultsHolders[testId] = xmlDoc;
n@668 904 }
n@668 905
n@656 906 // Only other global function which must be defined in the interface class. Determines how to create the XML document.
n@656 907 function interfaceXMLSave(){
n@656 908 // Create the XML string to be exported with results
n@656 909 var xmlDoc = document.createElement("BrowserEvaluationResult");
n@669 910 for (var i=0; i<testResultsHolders.length; i++)
n@656 911 {
n@669 912 xmlDoc.appendChild(testResultsHolders[i]);
n@656 913 }
n@656 914 // Append Pre/Post Questions
n@656 915 xmlDoc.appendChild(preTestQuestions);
n@656 916 xmlDoc.appendChild(postTestQuestions);
n@656 917
n@656 918 return xmlDoc;
n@656 919 }
n@656 920