annotate ape.js @ 814:22ad83e232f7

Fixing Win/OSX differences for APE slider, unstable.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Mon, 23 Nov 2015 17:44:25 +0000
parents
children 1db3dd91fb26
rev   line source
n@814 1 /**
n@814 2 * ape.js
n@814 3 * Create the APE interface
n@814 4 */
n@814 5
n@814 6
n@814 7 // Once this is loaded and parsed, begin execution
n@814 8 loadInterface();
n@814 9
n@814 10 function loadInterface() {
n@814 11
n@814 12 // Get the dimensions of the screen available to the page
n@814 13 var width = window.innerWidth;
n@814 14 var height = window.innerHeight;
n@814 15
n@814 16 // The injection point into the HTML page
n@814 17 interfaceContext.insertPoint = document.getElementById("topLevelBody");
n@814 18 var testContent = document.createElement('div');
n@814 19
n@814 20 testContent.id = 'testContent';
n@814 21
n@814 22
n@814 23 // Create APE specific metric functions
n@814 24 audioEngineContext.metric.initialiseTest = function()
n@814 25 {
n@814 26 };
n@814 27
n@814 28 audioEngineContext.metric.sliderMoved = function()
n@814 29 {
n@814 30 var id = this.data;
n@814 31 this.data = -1;
n@814 32 var position = convSliderPosToRate(id);
n@814 33 console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id
n@814 34 if (audioEngineContext.timer.testStarted)
n@814 35 {
n@814 36 audioEngineContext.audioObjects[id].metric.moved(time,position);
n@814 37 }
n@814 38 };
n@814 39
n@814 40 audioEngineContext.metric.sliderPlayed = function(id)
n@814 41 {
n@814 42 var time = audioEngineContext.timer.getTestTime();
n@814 43 if (audioEngineContext.timer.testStarted)
n@814 44 {
n@814 45 if (this.lastClicked >= 0)
n@814 46 {
n@814 47 audioEngineContext.audioObjects[this.lastClicked].metric.listening(time);
n@814 48 }
n@814 49 this.lastClicked = id;
n@814 50 audioEngineContext.audioObjects[id].metric.listening(time);
n@814 51 }
n@814 52 console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id
n@814 53 };
n@814 54
n@814 55 // Bindings for interfaceContext
n@814 56 Interface.prototype.checkAllPlayed = function()
n@814 57 {
n@814 58 hasBeenPlayed = audioEngineContext.checkAllPlayed();
n@814 59 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet
n@814 60 {
n@814 61 str = "";
n@814 62 if (hasBeenPlayed.length > 1) {
n@814 63 for (var i=0; i<hasBeenPlayed.length; i++) {
n@814 64 str = str + hasBeenPlayed[i];
n@814 65 if (i < hasBeenPlayed.length-2){
n@814 66 str += ", ";
n@814 67 } else if (i == hasBeenPlayed.length-2) {
n@814 68 str += " or ";
n@814 69 }
n@814 70 }
n@814 71 alert('You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
n@814 72 } else {
n@814 73 alert('You have not played fragment ' + hasBeenPlayed[0] + ' yet. Please listen, rate and comment all samples before submitting.');
n@814 74 }
n@814 75 return false;
n@814 76 }
n@814 77 return true;
n@814 78 };
n@814 79
n@814 80 Interface.prototype.checkAllMoved = function() {
n@814 81 var audioObjs = audioEngineContext.audioObjects;
n@814 82 var state = true;
n@814 83 var strNums = [];
n@814 84 for (var i=0; i<audioObjs.length; i++)
n@814 85 {
n@814 86 if (audioObjs[i].metric.wasMoved == false && audioObjs[i].specification.type != 'outsidereference') {
n@814 87 state = false;
n@814 88 strNums.push(i);
n@814 89 }
n@814 90 }
n@814 91 if (state == false) {
n@814 92 if (strNums.length > 1) {
n@814 93 var str = "";
n@814 94 for (var i=0; i<strNums.length; i++) {
n@814 95 str = str + strNums[i];
n@814 96 if (i < strNums.length-2){
n@814 97 str += ", ";
n@814 98 } else if (i == strNums.length-2) {
n@814 99 str += " or ";
n@814 100 }
n@814 101 }
n@814 102 alert('You have not moved fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
n@814 103 } else {
n@814 104 alert('You have not moved fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.');
n@814 105 }
n@814 106 }
n@814 107 return state;
n@814 108 };
n@814 109
n@814 110 Interface.prototype.checkAllCommented = function() {
n@814 111 var audioObjs = audioEngineContext.audioObjects;
n@814 112 var audioHolder = testState.stateMap[testState.stateIndex];
n@814 113 var state = true;
n@814 114 if (audioHolder.elementComments) {
n@814 115 var strNums = [];
n@814 116 for (var i=0; i<audioObjs.length; i++)
n@814 117 {
n@814 118 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) {
n@814 119 state = false;
n@814 120 strNums.push(i);
n@814 121 }
n@814 122 }
n@814 123 if (state == false) {
n@814 124 if (strNums.length > 1) {
n@814 125 var str = "";
n@814 126 for (var i=0; i<strNums.length; i++) {
n@814 127 str = str + strNums[i];
n@814 128 if (i < strNums.length-2){
n@814 129 str += ", ";
n@814 130 } else if (i == strNums.length-2) {
n@814 131 str += " or ";
n@814 132 }
n@814 133 }
n@814 134 alert('You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
n@814 135 } else {
n@814 136 alert('You have not commented on fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.');
n@814 137 }
n@814 138 }
n@814 139 }
n@814 140 return state;
n@814 141 };
n@814 142
n@814 143 Interface.prototype.checkScaleRange = function()
n@814 144 {
n@814 145 var audioObjs = audioEngineContext.audioObjects;
n@814 146 var audioHolder = testState.stateMap[testState.stateIndex];
n@814 147 var interfaces = audioHolder.interfaces;
n@814 148
n@814 149 var minRanking = audioObjs[0].interfaceDOM.getValue();
n@814 150 var maxRanking = minRanking;
n@814 151
n@814 152 var minScale;
n@814 153 var maxScale;
n@814 154 for (var i=0; i<interfaces[0].options.length; i++)
n@814 155 {
n@814 156 if (interfaces[0].options[i].check == "scalerange") {
n@814 157 minScale = interfaces[0].options[i].min;
n@814 158 maxScale = interfaces[0].options[i].max;
n@814 159 }
n@814 160 }
n@814 161
n@814 162 for (var i=1; i<audioObjs.length; i++){
n@814 163 if (audioObjs[i].specification.type != 'outsidereference') {
n@814 164 var ranking = audioObjs[i].interfaceDOM.getValue();
n@814 165 if (ranking < minRanking) { minRanking = ranking;}
n@814 166 if (ranking > maxRanking) { maxRanking = ranking;}
n@814 167 }
n@814 168 }
n@814 169 if (minRanking > minScale || maxRanking < maxScale) {
n@814 170 alert('Please use the full width of the scale');
n@814 171 return false;
n@814 172 } else {
n@814 173 return true;
n@814 174 }
n@814 175 };
n@814 176
n@814 177 // Bindings for audioObjects
n@814 178
n@814 179 // Create the top div for the Title element
n@814 180 var titleAttr = specification.title;
n@814 181 var title = document.createElement('div');
n@814 182 title.className = "title";
n@814 183 title.align = "center";
n@814 184 var titleSpan = document.createElement('span');
n@814 185
n@814 186 // Set title to that defined in XML, else set to default
n@814 187 if (titleAttr != undefined) {
n@814 188 titleSpan.textContent = titleAttr;
n@814 189 } else {
n@814 190 titleSpan.textContent = 'Listening test';
n@814 191 }
n@814 192 // Insert the titleSpan element into the title div element.
n@814 193 title.appendChild(titleSpan);
n@814 194
n@814 195 var pagetitle = document.createElement('div');
n@814 196 pagetitle.className = "pageTitle";
n@814 197 pagetitle.align = "center";
n@814 198 var titleSpan = document.createElement('span');
n@814 199 titleSpan.id = "pageTitle";
n@814 200 pagetitle.appendChild(titleSpan);
n@814 201
n@814 202 // Create Interface buttons!
n@814 203 var interfaceButtons = document.createElement('div');
n@814 204 interfaceButtons.id = 'interface-buttons';
n@814 205
n@814 206 // Create playback start/stop points
n@814 207 var playback = document.createElement("button");
n@814 208 playback.innerHTML = 'Stop';
n@814 209 playback.id = 'playback-button';
n@814 210 // onclick function. Check if it is playing or not, call the correct function in the
n@814 211 // audioEngine, change the button text to reflect the next state.
n@814 212 playback.onclick = function() {
n@814 213 if (audioEngineContext.status == 1) {
n@814 214 audioEngineContext.stop();
n@814 215 this.innerHTML = 'Stop';
n@814 216 var time = audioEngineContext.timer.getTestTime();
n@814 217 console.log('Stopped at ' + time); // DEBUG/SAFETY
n@814 218 }
n@814 219 };
n@814 220 // Create Submit (save) button
n@814 221 var submit = document.createElement("button");
n@814 222 submit.innerHTML = 'Submit';
n@814 223 submit.onclick = buttonSubmitClick;
n@814 224 submit.id = 'submit-button';
n@814 225 // Append the interface buttons into the interfaceButtons object.
n@814 226 interfaceButtons.appendChild(playback);
n@814 227 interfaceButtons.appendChild(submit);
n@814 228
n@814 229 // Now create the slider and HTML5 canvas boxes
n@814 230
n@814 231 // Create the div box to center align
n@814 232 var sliderBox = document.createElement('div');
n@814 233 sliderBox.className = 'sliderCanvasDiv';
n@814 234 sliderBox.id = 'sliderCanvasHolder';
n@814 235
n@814 236 // Create the slider box to hold the slider elements
n@814 237 var canvas = document.createElement('div');
n@814 238 canvas.id = 'slider';
n@814 239 canvas.align = "left";
n@814 240 canvas.addEventListener('dragover',function(event){
n@814 241 event.preventDefault();
n@814 242 event.dataTransfer.effectAllowed = 'none';
n@814 243 event.dataTransfer.dropEffect = 'copy';
n@814 244 return false;
n@814 245 },false);
n@814 246 var sliderMargin = document.createAttribute('marginsize');
n@814 247 sliderMargin.nodeValue = 42; // Set default margins to 42px either side
n@814 248 // Must have a known EXACT width, as this is used later to determine the ratings
n@814 249 var w = (Number(sliderMargin.nodeValue)+8)*2;
n@814 250 canvas.style.width = width - w +"px";
n@814 251 canvas.style.marginLeft = sliderMargin.nodeValue +'px';
n@814 252 canvas.setAttributeNode(sliderMargin);
n@814 253 sliderBox.appendChild(canvas);
n@814 254
n@814 255 // Create the div to hold any scale objects
n@814 256 var scale = document.createElement('div');
n@814 257 scale.className = 'sliderScale';
n@814 258 scale.id = 'sliderScaleHolder';
n@814 259 scale.align = 'left';
n@814 260 sliderBox.appendChild(scale);
n@814 261
n@814 262 // Global parent for the comment boxes on the page
n@814 263 var feedbackHolder = document.createElement('div');
n@814 264 feedbackHolder.id = 'feedbackHolder';
n@814 265
n@814 266 testContent.style.zIndex = 1;
n@814 267 interfaceContext.insertPoint.innerHTML = null; // Clear the current schema
n@814 268
n@814 269 // Inject into HTML
n@814 270 testContent.appendChild(title); // Insert the title
n@814 271 testContent.appendChild(pagetitle);
n@814 272 testContent.appendChild(interfaceButtons);
n@814 273 testContent.appendChild(sliderBox);
n@814 274 testContent.appendChild(feedbackHolder);
n@814 275 interfaceContext.insertPoint.appendChild(testContent);
n@814 276
n@814 277 // Load the full interface
n@814 278 testState.initialise();
n@814 279 testState.advanceState();
n@814 280
n@814 281 }
n@814 282
n@814 283 function loadTest(audioHolderObject)
n@814 284 {
n@814 285
n@814 286 // Reset audioEngineContext.Metric globals for new test
n@814 287 audioEngineContext.newTestPage();
n@814 288
n@814 289 var id = audioHolderObject.id;
n@814 290
n@814 291 var feedbackHolder = document.getElementById('feedbackHolder');
n@814 292 var canvas = document.getElementById('slider');
n@814 293 feedbackHolder.innerHTML = null;
n@814 294 canvas.innerHTML = null;
n@814 295
n@814 296 var interfaceObj = audioHolderObject.interfaces;
n@814 297 for (var k=0; k<interfaceObj.length; k++) {
n@814 298 for (var i=0; i<interfaceObj[k].options.length; i++)
n@814 299 {
n@814 300 if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'playhead')
n@814 301 {
n@814 302 var playbackHolder = document.getElementById('playback-holder');
n@814 303 if (playbackHolder == null)
n@814 304 {
n@814 305 playbackHolder = document.createElement('div');
n@814 306 playbackHolder.style.width = "100%";
n@814 307 playbackHolder.align = 'center';
n@814 308 playbackHolder.appendChild(interfaceContext.playhead.object);
n@814 309 feedbackHolder.appendChild(playbackHolder);
n@814 310 }
n@814 311 } else if (interfaceObj[k].options[i].type == 'option' && interfaceObj[k].options[i].name == 'page-count')
n@814 312 {
n@814 313 var pagecountHolder = document.getElementById('page-count');
n@814 314 if (pagecountHolder == null)
n@814 315 {
n@814 316 pagecountHolder = document.createElement('div');
n@814 317 pagecountHolder.id = 'page-count';
n@814 318 }
n@814 319 pagecountHolder.innerHTML = '<span>Test '+(audioHolderObject.presentedId+1)+' of '+specification.audioHolders.length+'</span>';
n@814 320 var inject = document.getElementById('interface-buttons');
n@814 321 inject.appendChild(pagecountHolder);
n@814 322 }
n@814 323 }
n@814 324 }
n@814 325 // Setup question title
n@814 326
n@814 327 var commentBoxPrefix = "Comment on track";
n@814 328 if (interfaceObj.length != 0) {
n@814 329 interfaceObj = interfaceObj[0];
n@814 330 var titleNode = interfaceObj.title;
n@814 331 if (titleNode != undefined)
n@814 332 {
n@814 333 document.getElementById('pageTitle').textContent = titleNode;
n@814 334 }
n@814 335 var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2);
n@814 336 var offset = Number(document.getElementById('slider').attributes['marginsize'].value);
n@814 337 var scale = document.getElementById('sliderScaleHolder');
n@814 338 scale.innerHTML = null;
n@814 339 $(interfaceObj.scale).each(function(index,scaleObj){
n@814 340 var value = document.createAttribute('value');
n@814 341 var position = Number(scaleObj[0])*0.01;
n@814 342 value.nodeValue = position;
n@814 343 var pixelPosition = (position*positionScale)+offset;
n@814 344 var scaleDOM = document.createElement('span');
n@814 345 scaleDOM.textContent = scaleObj[1];
n@814 346 scale.appendChild(scaleDOM);
n@814 347 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
n@814 348 scaleDOM.setAttributeNode(value);
n@814 349 });
n@814 350
n@814 351 if (interfaceObj.commentBoxPrefix != undefined) {
n@814 352 commentBoxPrefix = interfaceObj.commentBoxPrefix;
n@814 353 }
n@814 354 }
n@814 355
n@814 356 /// CHECK FOR SAMPLE RATE COMPATIBILITY
n@814 357 if (audioHolderObject.sampleRate != undefined) {
n@814 358 if (Number(audioHolderObject.sampleRate) != audioContext.sampleRate) {
n@814 359 var errStr = 'Sample rates do not match! Requested '+Number(audioHolderObject.sampleRate)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.';
n@814 360 alert(errStr);
n@814 361 return;
n@814 362 }
n@814 363 }
n@814 364
n@814 365 var commentShow = audioHolderObject.elementComments;
n@814 366
n@814 367 var loopPlayback = audioHolderObject.loop;
n@814 368
n@814 369 audioEngineContext.loopPlayback = loopPlayback;
n@814 370 // Create AudioEngine bindings for playback
n@814 371 audioEngineContext.selectedTrack = function(id) {
n@814 372 console.log('Deprecated');
n@814 373 };
n@814 374
n@814 375 currentTestHolder = document.createElement('audioHolder');
n@814 376 currentTestHolder.id = audioHolderObject.id;
n@814 377 currentTestHolder.repeatCount = audioHolderObject.repeatCount;
n@814 378
n@814 379 // Delete any previous audioObjects associated with the audioEngine
n@814 380 audioEngineContext.audioObjects = [];
n@814 381 interfaceContext.deleteCommentBoxes();
n@814 382 interfaceContext.deleteCommentQuestions();
n@814 383
n@814 384 // Find all the audioElements from the audioHolder
n@814 385 $(audioHolderObject.audioElements).each(function(index,element){
n@814 386 // Find URL of track
n@814 387 // In this jQuery loop, variable 'this' holds the current audioElement.
n@814 388
n@814 389 // Now load each audio sample. First create the new track by passing the full URL
n@814 390 var trackURL = audioHolderObject.hostURL + element.url;
n@814 391 var audioObject = audioEngineContext.newTrack(element);
n@814 392
n@814 393 var node = interfaceContext.createCommentBox(audioObject);
n@814 394
n@814 395 // Create a slider per track
n@814 396 audioObject.interfaceDOM = new sliderObject(audioObject);
n@814 397
n@814 398 // Distribute it randomnly
n@814 399 var w = window.innerWidth - (offset+8)*2;
n@814 400 w = Math.random()*w;
n@814 401 w = Math.floor(w+(offset+8));
n@814 402 audioObject.interfaceDOM.trackSliderObj.style.left = w+'px';
n@814 403
n@814 404 canvas.appendChild(audioObject.interfaceDOM.trackSliderObj);
n@814 405 audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj));
n@814 406
n@814 407 });
n@814 408 if (commentShow) {
n@814 409 interfaceContext.showCommentBoxes(feedbackHolder,true);
n@814 410 }
n@814 411
n@814 412 $(audioHolderObject.commentQuestions).each(function(index,element) {
n@814 413 var node = interfaceContext.createCommentQuestion(element);
n@814 414 feedbackHolder.appendChild(node.holder);
n@814 415 });
n@814 416
n@814 417 // Construct outside reference;
n@814 418 if (audioHolderObject.outsideReference != null) {
n@814 419 var outsideReferenceHolder = document.createElement('div');
n@814 420 outsideReferenceHolder.id = 'outside-reference';
n@814 421 outsideReferenceHolderspan = document.createElement('span');
n@814 422 outsideReferenceHolderspan.textContent = 'Reference';
n@814 423 outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
n@814 424
n@814 425 var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference);
n@814 426
n@814 427 outsideReferenceHolder.onclick = function(event)
n@814 428 {
n@814 429 audioEngineContext.play(audioEngineContext.audioObjects.length-1);
n@814 430 $('.track-slider').removeClass('track-slider-playing');
n@814 431 $('.comment-div').removeClass('comment-box-playing');
n@814 432 if (event.currentTarget.nodeName == 'DIV') {
n@814 433 $(event.currentTarget).addClass('track-slider-playing');
n@814 434 } else {
n@814 435 $(event.currentTarget.parentElement).addClass('track-slider-playing');
n@814 436 }
n@814 437 };
n@814 438
n@814 439 document.getElementById('interface-buttons').appendChild(outsideReferenceHolder);
n@814 440 }
n@814 441
n@814 442
n@814 443 //testWaitIndicator();
n@814 444 }
n@814 445
n@814 446 function sliderObject(audioObject) {
n@814 447 // Create a new slider object;
n@814 448 this.parent = audioObject;
n@814 449 this.trackSliderObj = document.createElement('div');
n@814 450 this.trackSliderObj.className = 'track-slider track-slider-disabled';
n@814 451 this.trackSliderObj.id = 'track-slider-'+audioObject.id;
n@814 452
n@814 453 this.trackSliderObj.setAttribute('trackIndex',audioObject.id);
n@814 454 this.trackSliderObj.innerHTML = '<span>'+audioObject.id+'</span>';
n@814 455 this.trackSliderObj.draggable = true;
n@814 456 this.trackSliderObj.ondragend = dragEnd;
n@814 457
n@814 458 this.trackSliderObj.ondragstart = function(event){
n@814 459 event.dataTransfer.setData('Text',null);
n@814 460 };
n@814 461
n@814 462 this.trackSliderObj.ondrop = function(event)
n@814 463 {
n@814 464 if(event.stopPropagation) {event.stopPropagation();}
n@814 465 return false;
n@814 466 };
n@814 467
n@814 468 // Onclick, switch playback to that track
n@814 469 this.trackSliderObj.onclick = function(event) {
n@814 470 // Cannot continue to issue play command until audioObjects reported as ready!
n@814 471 // Get the track ID from the object ID
n@814 472 var element;
n@814 473 if (event.currentTarget.nodeName == "SPAN") {
n@814 474 element = event.currentTarget.parentNode;
n@814 475 } else {
n@814 476 element = event.currentTarget;
n@814 477 }
n@814 478 var id = Number(element.attributes['trackIndex'].value);
n@814 479 //audioEngineContext.metric.sliderPlayed(id);
n@814 480 audioEngineContext.play(id);
n@814 481 // Currently playing track red, rest green
n@814 482
n@814 483 //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
n@814 484 $('.track-slider').removeClass('track-slider-playing');
n@814 485 $(element).addClass('track-slider-playing');
n@814 486 $('.comment-div').removeClass('comment-box-playing');
n@814 487 $('#comment-div-'+id).addClass('comment-box-playing');
n@814 488 var outsideReference = document.getElementById('outside-reference');
n@814 489 if (outsideReference != undefined)
n@814 490 $(outsideReference).removeClass('track-slider-playing');
n@814 491 };
n@814 492
n@814 493 this.enable = function() {
n@814 494 if (this.parent.state == 1)
n@814 495 {
n@814 496 $(this.trackSliderObj).removeClass('track-slider-disabled');
n@814 497 }
n@814 498 };
n@814 499
n@814 500 this.exportXMLDOM = function(audioObject) {
n@814 501 // Called by the audioObject holding this element. Must be present
n@814 502 var node = document.createElement('value');
n@814 503 node.textContent = convSliderPosToRate(this.trackSliderObj);
n@814 504 return node;
n@814 505 };
n@814 506 this.getValue = function() {
n@814 507 return convSliderPosToRate(this.trackSliderObj);
n@814 508 };
n@814 509 }
n@814 510
n@814 511 function dragEnd(ev) {
n@814 512 // Function call when a div has been dropped
n@814 513 var slider = document.getElementById('slider');
n@814 514 var marginSize = Number(slider.attributes['marginsize'].value);
n@814 515 var w = slider.style.width;
n@814 516 w = Number(w.substr(0,w.length-2));
n@814 517 var x
n@814 518 if (navigator.platform.substr(0,3) == "Win")
n@814 519 {
n@814 520 x = ev.screenX;
n@814 521 x -= Math.abs(window.screenX);
n@814 522 x = x % window.outerWidth;
n@814 523 } else
n@814 524 x = ev.clientX;
n@814 525
n@814 526 if (x >= marginSize && x < w+marginSize) {
n@814 527 this.style.left = (x)+'px';
n@814 528 } else {
n@814 529 if (x<marginSize) {
n@814 530 this.style.left = marginSize+'px';
n@814 531 } else {
n@814 532 this.style.left = (w+marginSize) + 'px';
n@814 533 }
n@814 534 }
n@814 535 var time = audioEngineContext.timer.getTestTime();
n@814 536 var id = Number(ev.currentTarget.getAttribute('trackindex'));
n@814 537 audioEngineContext.audioObjects[id].metric.moved(time,convSliderPosToRate(ev.currentTarget));
n@814 538 console.log('slider '+id+' moved to '+convSliderPosToRate(ev.currentTarget)+' ('+time+')');
n@814 539 }
n@814 540
n@814 541 function buttonSubmitClick()
n@814 542 {
n@814 543 var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options;
n@814 544 var canContinue = true;
n@814 545
n@814 546 // Check that the anchor and reference objects are correctly placed
n@814 547 if (interfaceContext.checkHiddenAnchor() == false) {return;}
n@814 548 if (interfaceContext.checkHiddenReference() == false) {return;}
n@814 549
n@814 550 for (var i=0; i<checks.length; i++) {
n@814 551 if (checks[i].type == 'check')
n@814 552 {
n@814 553 switch(checks[i].check) {
n@814 554 case 'fragmentPlayed':
n@814 555 // Check if all fragments have been played
n@814 556 var checkState = interfaceContext.checkAllPlayed();
n@814 557 if (checkState == false) {canContinue = false;}
n@814 558 break;
n@814 559 case 'fragmentFullPlayback':
n@814 560 // Check all fragments have been played to their full length
n@814 561 var checkState = interfaceContext.checkAllPlayed();
n@814 562 if (checkState == false) {canContinue = false;}
n@814 563 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead');
n@814 564 break;
n@814 565 case 'fragmentMoved':
n@814 566 // Check all fragment sliders have been moved.
n@814 567 var checkState = interfaceContext.checkAllMoved();
n@814 568 if (checkState == false) {canContinue = false;}
n@814 569 break;
n@814 570 case 'fragmentComments':
n@814 571 // Check all fragment sliders have been moved.
n@814 572 var checkState = interfaceContext.checkAllCommented();
n@814 573 if (checkState == false) {canContinue = false;}
n@814 574 break;
n@814 575 case 'scalerange':
n@814 576 // Check the scale is used to its full width outlined by the node
n@814 577 var checkState = interfaceContext.checkScaleRange();
n@814 578 if (checkState == false) {canContinue = false;}
n@814 579 break;
n@814 580 }
n@814 581
n@814 582 }
n@814 583 if (!canContinue) {break;}
n@814 584 }
n@814 585
n@814 586 if (canContinue) {
n@814 587 if (audioEngineContext.status == 1) {
n@814 588 var playback = document.getElementById('playback-button');
n@814 589 playback.click();
n@814 590 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
n@814 591 } else
n@814 592 {
n@814 593 if (audioEngineContext.timer.testStarted == false)
n@814 594 {
n@814 595 alert('You have not started the test! Please click a fragment to begin the test!');
n@814 596 return;
n@814 597 }
n@814 598 }
n@814 599 testState.advanceState();
n@814 600 }
n@814 601 }
n@814 602
n@814 603 function convSliderPosToRate(slider)
n@814 604 {
n@814 605 var w = document.getElementById('slider').style.width;
n@814 606 var marginsize = Number(document.getElementById('slider').attributes['marginsize'].value);
n@814 607 var maxPix = w.substr(0,w.length-2);
n@814 608 var pix = slider.style.left;
n@814 609 pix = pix.substr(0,pix.length-2);
n@814 610 var rate = (pix-marginsize)/maxPix;
n@814 611 return rate;
n@814 612 }
n@814 613
n@814 614 function resizeWindow(event){
n@814 615 // Function called when the window has been resized.
n@814 616 // MANDATORY FUNCTION
n@814 617
n@814 618 // Store the slider marker values
n@814 619 var holdValues = [];
n@814 620 $(".track-slider").each(function(index,sliderObj){
n@814 621 holdValues.push(convSliderPosToRate(sliderObj));
n@814 622 });
n@814 623
n@814 624 var width = event.target.innerWidth;
n@814 625 var canvas = document.getElementById('sliderCanvasHolder');
n@814 626 var sliderDiv = canvas.children[0];
n@814 627 var sliderScaleDiv = canvas.children[1];
n@814 628 var marginsize = Number(sliderDiv.attributes['marginsize'].value);
n@814 629 var w = (marginsize+8)*2;
n@814 630 sliderDiv.style.width = width - w + 'px';
n@814 631 var width = width - w;
n@814 632 // Move sliders into new position
n@814 633 $(".track-slider").each(function(index,sliderObj){
n@814 634 var pos = holdValues[index];
n@814 635 var pix = pos * width;
n@814 636 sliderObj.style.left = pix+marginsize+'px';
n@814 637 });
n@814 638
n@814 639 // Move scale labels
n@814 640 $(sliderScaleDiv.children).each(function(index,scaleObj){
n@814 641 var position = Number(scaleObj.attributes['value'].value);
n@814 642 var pixelPosition = (position*width)+marginsize;
n@814 643 scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px';
n@814 644 });
n@814 645 }
n@814 646
n@814 647 function pageXMLSave(store, testXML)
n@814 648 {
n@814 649 // Saves a specific test page
n@814 650 var xmlDoc = store;
n@814 651 // Check if any session wide metrics are enabled
n@814 652
n@814 653 var commentShow = testXML.elementComments;
n@814 654
n@814 655 var metric = document.createElement('metric');
n@814 656 if (audioEngineContext.metric.enableTestTimer)
n@814 657 {
n@814 658 var testTime = document.createElement('metricResult');
n@814 659 testTime.id = 'testTime';
n@814 660 testTime.textContent = audioEngineContext.timer.testDuration;
n@814 661 metric.appendChild(testTime);
n@814 662 }
n@814 663 xmlDoc.appendChild(metric);
n@814 664 var audioObjects = audioEngineContext.audioObjects;
n@814 665 for (var i=0; i<audioObjects.length; i++)
n@814 666 {
n@814 667 var audioElement = audioEngineContext.audioObjects[i].exportXMLDOM();
n@814 668 audioElement.setAttribute('presentedId',i);
n@814 669 xmlDoc.appendChild(audioElement);
n@814 670 }
n@814 671
n@814 672 $(interfaceContext.commentQuestions).each(function(index,element){
n@814 673 var node = element.exportXMLDOM();
n@814 674 xmlDoc.appendChild(node);
n@814 675 });
n@814 676 store = xmlDoc;
n@814 677 }