annotate ape.js @ 679:a79490e0fdc7

Alert if submit button clicked before test start button.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Fri, 17 Apr 2015 09:57:46 +0100
parents 1e736dc124ab
children ab56aa2fe064
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@670 325 currentTestHolder = document.createElement('audioHolder');
n@670 326 currentTestHolder.id = textXML.id;
n@670 327 currentTestHolder.repeatCount = textXML.attributes['repeatCount'].value;
n@670 328 var currentPreTestHolder = document.createElement('preTest');
n@670 329 var currentPostTestHolder = document.createElement('postTest');
n@670 330 currentTestHolder.appendChild(currentPreTestHolder);
n@670 331 currentTestHolder.appendChild(currentPostTestHolder);
n@670 332
n@669 333 var randomise = textXML.attributes['randomiseOrder'];
n@669 334 if (randomise != undefined) {randomise = randomise.value;}
n@669 335 else {randomise = false;}
n@669 336
n@658 337 var audioElements = $(textXML).find('audioElements');
n@658 338 audioElements.each(function(index,element){
n@669 339 // Find any blind-repeats
n@669 340 // Not implemented yet, but just incase
n@669 341 currentTrackOrder[index] = element;
n@669 342 });
n@669 343 if (randomise) {
n@678 344 currentTrackOrder = randomiseOrder(currentTrackOrder);
n@669 345 }
n@669 346
n@669 347 // Find all the audioElements from the audioHolder
n@669 348 $(currentTrackOrder).each(function(index,element){
n@658 349 // Find URL of track
n@658 350 // In this jQuery loop, variable 'this' holds the current audioElement.
n@658 351
n@658 352 // Now load each audio sample. First create the new track by passing the full URL
n@658 353 var trackURL = hostURL + this.attributes['url'].value;
n@658 354 audioEngineContext.newTrack(trackURL);
n@658 355 // Create document objects to hold the comment boxes
n@658 356 var trackComment = document.createElement('div');
n@661 357 trackComment.className = 'comment-div';
n@658 358 // Create a string next to each comment asking for a comment
n@658 359 var trackString = document.createElement('span');
n@658 360 trackString.innerHTML = 'Comment on track '+index;
n@658 361 // Create the HTML5 comment box 'textarea'
n@658 362 var trackCommentBox = document.createElement('textarea');
n@658 363 trackCommentBox.rows = '4';
n@658 364 trackCommentBox.cols = '100';
n@658 365 trackCommentBox.name = 'trackComment'+index;
n@658 366 trackCommentBox.className = 'trackComment';
n@658 367 var br = document.createElement('br');
n@658 368 // Add to the holder.
n@658 369 trackComment.appendChild(trackString);
n@658 370 trackComment.appendChild(br);
n@658 371 trackComment.appendChild(trackCommentBox);
n@658 372 feedbackHolder.appendChild(trackComment);
n@658 373
n@658 374 // Create a slider per track
n@658 375
n@658 376 var trackSliderObj = document.createElement('div');
n@658 377 trackSliderObj.className = 'track-slider';
n@658 378 trackSliderObj.id = 'track-slider-'+index;
n@658 379 // Distribute it randomnly
n@658 380 var w = window.innerWidth - 100;
n@658 381 w = Math.random()*w;
n@658 382 trackSliderObj.style.left = Math.floor(w)+50+'px';
n@658 383 trackSliderObj.innerHTML = '<span>'+index+'</span>';
n@658 384 trackSliderObj.draggable = true;
n@658 385 trackSliderObj.ondragend = dragEnd;
n@673 386 trackSliderObj.ondragstart = function()
n@673 387 {
n@673 388 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99!
n@673 389 audioEngineContext.metric.sliderMoveStart(id);
n@673 390 };
n@658 391
n@658 392 // Onclick, switch playback to that track
n@658 393 trackSliderObj.onclick = function() {
n@658 394 // Get the track ID from the object ID
n@658 395 var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99!
n@673 396 audioEngineContext.metric.sliderPlayed(id);
n@658 397 audioEngineContext.selectedTrack(id);
n@658 398 };
n@658 399
n@658 400 canvas.appendChild(trackSliderObj);
n@658 401 });
n@663 402
n@663 403 // Now process any pre-test commands
n@663 404
n@668 405 var preTest = $(testXMLSetups[id]).find('PreTest')[0];
n@663 406 if (preTest.children.length > 0)
n@663 407 {
n@663 408 currentState = 'testRunPre-'+id;
n@663 409 preTestPopupStart(preTest);
n@663 410 showPopup();
n@663 411 } else {
n@663 412 currentState = 'testRun-'+id;
n@663 413 }
n@663 414 }
n@663 415
n@663 416 function preTestPopupStart(preTest)
n@663 417 {
n@663 418 var popupHolder = document.getElementById('popupHolder');
n@663 419 popupHolder.innerHTML = null;
n@663 420 // Parse the first box
n@663 421 var preTestOption = document.createElement('div');
n@663 422 preTestOption.id = 'preTest';
n@663 423 preTestOption.style.marginTop = '25px';
n@663 424 preTestOption.align = "center";
n@663 425 var child = preTest.children[0];
n@663 426 if (child.nodeName == 'statement')
n@663 427 {
n@663 428 preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>';
n@663 429 } else if (child.nodeName == 'question')
n@663 430 {
n@663 431 var questionId = child.attributes['id'].value;
n@663 432 var textHold = document.createElement('span');
n@663 433 textHold.innerHTML = child.innerHTML;
n@663 434 textHold.id = questionId + 'response';
n@663 435 var textEnter = document.createElement('textarea');
n@663 436 preTestOption.appendChild(textHold);
n@663 437 preTestOption.appendChild(textEnter);
n@663 438 }
n@663 439 var nextButton = document.createElement('button');
n@663 440 nextButton.className = 'popupButton';
n@663 441 nextButton.value = '0';
n@663 442 nextButton.innerHTML = 'Next';
n@663 443 nextButton.onclick = popupButtonClick;
n@663 444
n@663 445 popupHolder.appendChild(preTestOption);
n@663 446 popupHolder.appendChild(nextButton);
n@658 447 }
n@658 448
n@662 449 function popupButtonClick()
n@662 450 {
n@662 451 // Global call from the 'Next' button click
n@662 452 if (currentState == 'preTest')
n@662 453 {
n@662 454 // At the start of the preTest routine!
n@663 455 var xmlTree = projectXML.find('setup');
n@663 456 var preTest = xmlTree.find('PreTest')[0];
n@663 457 this.value = preTestButtonClick(preTest,this.value);
n@663 458 } else if (currentState.substr(0,10) == 'testRunPre')
n@663 459 {
n@663 460 //Specific test pre-test
n@663 461 var testId = currentState.substr(11,currentState.length-10);
n@668 462 var preTest = $(testXMLSetups[testId]).find('PreTest')[0];
n@663 463 this.value = preTestButtonClick(preTest,this.value);
n@666 464 } else if (currentState.substr(0,11) == 'testRunPost')
n@666 465 {
n@666 466 // Specific test post-test
n@666 467 var testId = currentState.substr(12,currentState.length-11);
n@668 468 var preTest = $(testXMLSetups[testId]).find('PostTest')[0];
n@666 469 this.value = preTestButtonClick(preTest,this.value);
n@665 470 } else if (currentState == 'postTest')
n@665 471 {
n@665 472 // At the end of the test, running global post test
n@665 473 var xmlTree = projectXML.find('setup');
n@665 474 var PostTest = xmlTree.find('PostTest')[0];
n@665 475 this.value = preTestButtonClick(PostTest,this.value);
n@662 476 }
n@662 477 }
n@662 478
n@663 479 function preTestButtonClick(preTest,index)
n@658 480 {
n@658 481 // Called on click of pre-test button
n@660 482 // Need to find and parse preTest again!
n@660 483 var preTestOption = document.getElementById('preTest');
n@660 484 // Check if current state is a question!
n@662 485 if (preTest.children[index].nodeName == 'question') {
n@662 486 var questionId = preTest.children[index].attributes['id'].value;
n@660 487 var questionHold = document.createElement('comment');
n@660 488 var questionResponse = document.getElementById(questionId + 'response');
n@660 489 questionHold.id = questionId;
n@660 490 questionHold.innerHTML = questionResponse.value;
n@670 491 postPopupResponse(questionHold);
n@660 492 }
n@662 493 index++;
n@662 494 if (index < preTest.children.length)
n@660 495 {
n@660 496 // More to process
n@662 497 var child = preTest.children[index];
n@660 498 if (child.nodeName == 'statement')
n@660 499 {
n@660 500 preTestOption.innerHTML = '<span>'+child.innerHTML+'</span>';
n@660 501 } else if (child.nodeName == 'question')
n@660 502 {
n@660 503 var textHold = document.createElement('span');
n@660 504 textHold.innerHTML = child.innerHTML;
n@660 505 var textEnter = document.createElement('textarea');
n@660 506 textEnter.id = child.attributes['id'].value + 'response';
n@660 507 var br = document.createElement('br');
n@660 508 preTestOption.innerHTML = null;
n@660 509 preTestOption.appendChild(textHold);
n@660 510 preTestOption.appendChild(br);
n@660 511 preTestOption.appendChild(textEnter);
n@660 512 }
n@660 513 } else {
n@660 514 // Time to clear
n@661 515 preTestOption.innerHTML = null;
n@667 516 if (currentState != 'postTest') {
n@667 517 hidePopup();
n@667 518 // Progress the state!
n@667 519 advanceState();
n@667 520 } else {
n@667 521 a = createProjectSave(projectReturn);
n@667 522 preTestOption.appendChild(a);
n@667 523 }
n@660 524 }
n@662 525 return index;
n@660 526 }
n@660 527
n@670 528 function postPopupResponse(response)
n@670 529 {
n@670 530 if (currentState == 'preTest') {
n@670 531 preTestQuestions.appendChild(response);
n@670 532 } else if (currentState == 'postTest') {
n@670 533 postTestQuestions.appendChild(response);
n@670 534 } else {
n@670 535 // Inside a specific test
n@670 536 if (currentState.substr(0,10) == 'testRunPre') {
n@670 537 // Pre Test
n@670 538 var store = $(currentTestHolder).find('preTest');
n@670 539 } else {
n@670 540 // Post Test
n@670 541 var store = $(currentTestHolder).find('postTest');
n@670 542 }
n@670 543 store[0].appendChild(response);
n@670 544 }
n@670 545 }
n@670 546
n@660 547 function showPopup()
n@660 548 {
n@661 549 var popupHolder = document.getElementById('popupHolder');
n@662 550 popupHolder.style.zIndex = 3;
n@661 551 popupHolder.style.visibility = 'visible';
n@661 552 var blank = document.getElementsByClassName('testHalt')[0];
n@661 553 blank.style.zIndex = 2;
n@661 554 blank.style.visibility = 'visible';
n@660 555 }
n@660 556
n@660 557 function hidePopup()
n@660 558 {
n@661 559 var popupHolder = document.getElementById('popupHolder');
n@661 560 popupHolder.style.zIndex = -1;
n@661 561 popupHolder.style.visibility = 'hidden';
n@661 562 var blank = document.getElementsByClassName('testHalt')[0];
n@661 563 blank.style.zIndex = -2;
n@661 564 blank.style.visibility = 'hidden';
n@658 565 }
n@658 566
n@656 567 function dragEnd(ev) {
n@656 568 // Function call when a div has been dropped
n@657 569 var slider = document.getElementById('slider');
n@675 570 var w = slider.style.width;
n@675 571 w = Number(w.substr(0,w.length-2));
n@675 572 var x = ev.x;
n@675 573 if (x >= 42 && x < w+42) {
n@675 574 this.style.left = (x)+'px';
n@656 575 } else {
n@675 576 if (x<42) {
n@675 577 this.style.left = '42px';
n@656 578 } else {
n@675 579 this.style.left = (w+42) + 'px';
n@656 580 }
n@656 581 }
n@673 582 audioEngineContext.metric.sliderMoved();
n@656 583 }
n@656 584
n@663 585 function advanceState()
n@663 586 {
n@663 587 console.log(currentState);
n@663 588 if (currentState == 'preTest')
n@663 589 {
n@663 590 // End of pre-test, begin the test
n@663 591 loadTest(0);
n@663 592 } else if (currentState.substr(0,10) == 'testRunPre')
n@663 593 {
n@663 594 // Start the test
n@663 595 var testId = currentState.substr(11,currentState.length-10);
n@663 596 currentState = 'testRun-'+testId;
n@666 597 } else if (currentState.substr(0,11) == 'testRunPost')
n@666 598 {
n@668 599 var testId = currentState.substr(12,currentState.length-11);
n@666 600 testEnded(testId);
n@664 601 } else if (currentState.substr(0,7) == 'testRun')
n@664 602 {
n@664 603 var testId = currentState.substr(8,currentState.length-7);
n@664 604 // Check if we have any post tests to perform
n@668 605 var postXML = $(testXMLSetups[testId]).find('PostTest')[0];
n@664 606 if (postXML.children.length > 0)
n@664 607 {
n@666 608 currentState = 'testRunPost-'+testId;
n@666 609 showPopup();
n@666 610 preTestPopupStart(postXML);
n@664 611 }
n@666 612 else {
n@664 613
n@664 614
n@666 615 // No post tests, check if we have another test to perform instead
n@666 616 testEnded(testId);
n@664 617 }
n@663 618 }
n@663 619 console.log(currentState);
n@663 620 }
n@663 621
n@666 622 function testEnded(testId)
n@666 623 {
n@669 624 pageXMLSave(testId);
n@666 625 if (testXMLSetups.length-1 > testId)
n@666 626 {
n@666 627 // Yes we have another test to perform
n@668 628 testId = (Number(testId)+1);
n@668 629 currentState = 'testRun-'+testId;
n@668 630 loadTest(testId);
n@666 631 } else {
n@666 632 console.log('Testing Completed!');
n@666 633 currentState = 'postTest';
n@666 634 // Check for any post tests
n@666 635 var xmlSetup = projectXML.find('setup');
n@666 636 var postTest = xmlSetup.find('PostTest')[0];
n@666 637 showPopup();
n@666 638 preTestPopupStart(postTest);
n@666 639 }
n@666 640 }
n@666 641
n@664 642 function buttonSubmitClick()
n@664 643 {
n@673 644 if (audioEngineContext.status == 1) {
n@673 645 var playback = document.getElementById('playback-button');
n@673 646 playback.click();
n@664 647 // 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 648 } else
n@679 649 {
n@679 650 if (audioEngineContext.timer.testStarted == false)
n@679 651 {
n@679 652 alert('You have not started the test! Please press start to begin the test!');
n@679 653 return;
n@679 654 }
n@673 655 }
n@664 656 if (currentState.substr(0,7) == 'testRun')
n@664 657 {
n@673 658 audioEngineContext.timer.stopTest();
n@664 659 advanceState();
n@664 660 }
n@664 661 }
n@664 662
n@675 663 function convSliderPosToRate(id)
n@675 664 {
n@675 665 var w = document.getElementById('slider').style.width;
n@675 666 var maxPix = w.substr(0,w.length-2);
n@675 667 var slider = document.getElementsByClassName('track-slider')[id];
n@675 668 var pix = slider.style.left;
n@675 669 pix = pix.substr(0,pix.length-2);
n@675 670 var rate = (pix-42)/maxPix;
n@675 671 return rate;
n@675 672 }
n@675 673
n@668 674 function pageXMLSave(testId)
n@668 675 {
n@668 676 // Saves a specific test page
n@670 677 var xmlDoc = currentTestHolder;
n@674 678 // Check if any session wide metrics are enabled
n@674 679 var metric = document.createElement('metric');
n@674 680 if (audioEngineContext.metric.enableTestTimer)
n@674 681 {
n@674 682 var testTime = document.createElement('metricResult');
n@674 683 testTime.id = 'testTime';
n@674 684 testTime.textContent = audioEngineContext.timer.testDuration;
n@674 685 metric.appendChild(testTime);
n@674 686 }
n@674 687 xmlDoc.appendChild(metric);
n@669 688 var trackSliderObjects = document.getElementsByClassName('track-slider');
n@669 689 var commentObjects = document.getElementsByClassName('comment-div');
n@669 690 for (var i=0; i<trackSliderObjects.length; i++)
n@669 691 {
n@669 692 var audioElement = document.createElement('audioElement');
n@669 693 audioElement.id = currentTrackOrder[i].attributes['id'].value;
n@669 694 audioElement.url = currentTrackOrder[i].attributes['url'].value;
n@675 695 var value = document.createElement('value');
n@675 696 value.innerHTML = convSliderPosToRate(i);
n@669 697 var comment = document.createElement("comment");
n@669 698 var question = document.createElement("question");
n@669 699 var response = document.createElement("response");
n@669 700 question.textContent = commentObjects[i].children[0].textContent;
n@669 701 response.textContent = commentObjects[i].children[2].value;
n@669 702 comment.appendChild(question);
n@669 703 comment.appendChild(response);
n@669 704 audioElement.appendChild(value);
n@669 705 audioElement.appendChild(comment);
n@674 706 // Check for any per element metrics
n@674 707 var metric = document.createElement('metric');
n@674 708 var elementMetric = audioEngineContext.audioObjects[i].metric;
n@674 709 if (audioEngineContext.metric.enableElementTimer) {
n@674 710 var elementTimer = document.createElement('metricResult');
n@674 711 elementTimer.id = 'elementTimer';
n@674 712 elementTimer.textContent = elementMetric.listenedTimer;
n@674 713 metric.appendChild(elementTimer);
n@674 714 }
n@674 715 if (audioEngineContext.metric.enableElementTracker) {
n@674 716 var elementTrackerFull = document.createElement('metricResult');
n@674 717 elementTrackerFull.id = 'elementTrackerFull';
n@674 718 var data = elementMetric.movementTracker;
n@674 719 for (var k=0; k<data.length; k++)
n@674 720 {
n@674 721 var timePos = document.createElement('timePos');
n@674 722 timePos.id = k;
n@674 723 var time = document.createElement('time');
n@674 724 time.textContent = data[k][0];
n@674 725 var position = document.createElement('position');
n@674 726 position.textContent = data[k][1];
n@674 727 timePos.appendChild(time);
n@674 728 timePos.appendChild(position);
n@674 729 elementTrackerFull.appendChild(timePos);
n@674 730 }
n@674 731 metric.appendChild(elementTrackerFull);
n@674 732 }
n@674 733 if (audioEngineContext.metric.enableElementInitialPosition) {
n@674 734 var elementInitial = document.createElement('metricResult');
n@674 735 elementInitial.id = 'elementInitialPosition';
n@674 736 elementInitial.textContent = elementMetric.initialPosition;
n@674 737 metric.appendChild(elementInitial);
n@674 738 }
n@674 739 if (audioEngineContext.metric.enableFlagListenedTo) {
n@674 740 var flagListenedTo = document.createElement('metricResult');
n@674 741 flagListenedTo.id = 'elementFlagListenedTo';
n@674 742 flagListenedTo.textContent = elementMetric.wasListenedTo;
n@674 743 metric.appendChild(flagListenedTo);
n@674 744 }
n@674 745 if (audioEngineContext.metric.enableFlagMoved) {
n@674 746 var flagMoved = document.createElement('metricResult');
n@674 747 flagMoved.id = 'elementFlagMoved';
n@674 748 flagMoved.textContent = elementMetric.wasMoved;
n@674 749 metric.appendChild(flagMoved);
n@674 750 }
n@674 751 if (audioEngineContext.metric.enableFlagComments) {
n@674 752 var flagComments = document.createElement('metricResult');
n@674 753 flagComments.id = 'elementFlagComments';
n@674 754 if (response.textContent.length == 0) {flag.textContent = 'false';}
n@674 755 else {flag.textContet = 'true';}
n@674 756 metric.appendChild(flagComments);
n@674 757 }
n@674 758 audioElement.appendChild(metric);
n@669 759 xmlDoc.appendChild(audioElement);
n@669 760 }
n@669 761 testResultsHolders[testId] = xmlDoc;
n@668 762 }
n@668 763
n@656 764 // Only other global function which must be defined in the interface class. Determines how to create the XML document.
n@656 765 function interfaceXMLSave(){
n@656 766 // Create the XML string to be exported with results
n@656 767 var xmlDoc = document.createElement("BrowserEvaluationResult");
n@669 768 for (var i=0; i<testResultsHolders.length; i++)
n@656 769 {
n@669 770 xmlDoc.appendChild(testResultsHolders[i]);
n@656 771 }
n@656 772 // Append Pre/Post Questions
n@656 773 xmlDoc.appendChild(preTestQuestions);
n@656 774 xmlDoc.appendChild(postTestQuestions);
n@656 775
n@656 776 return xmlDoc;
n@656 777 }
n@656 778