annotate interfaces/ape.js @ 1356:386415d2a5c1

Added master volume. Ensured playhead, page-count and volume <interfaceoption> show options are enabled on all test pages.
author Nicholas Jillings <nickjillings@users.noreply.github.com>
date Mon, 25 Jan 2016 17:29:34 +0000
parents bbb6462cf446
children 159b87e5de67
rev   line source
nickjillings@1341 1 /**
nickjillings@1341 2 * ape.js
nickjillings@1341 3 * Create the APE interface
nickjillings@1341 4 */
nickjillings@1341 5
nickjillings@1341 6
nickjillings@1341 7 // Once this is loaded and parsed, begin execution
nickjillings@1341 8 loadInterface();
nickjillings@1341 9
nickjillings@1341 10 function loadInterface() {
nickjillings@1341 11
nickjillings@1341 12 // Get the dimensions of the screen available to the page
nickjillings@1341 13 var width = window.innerWidth;
nickjillings@1341 14 var height = window.innerHeight;
nickjillings@1341 15
nickjillings@1341 16 // The injection point into the HTML page
nickjillings@1341 17 interfaceContext.insertPoint = document.getElementById("topLevelBody");
nickjillings@1341 18 var testContent = document.createElement('div');
nickjillings@1341 19
nickjillings@1341 20 testContent.id = 'testContent';
nickjillings@1341 21
nickjillings@1341 22 // Bindings for interfaceContext
nickjillings@1341 23 interfaceContext.checkAllPlayed = function()
nickjillings@1341 24 {
nickjillings@1341 25 hasBeenPlayed = audioEngineContext.checkAllPlayed();
nickjillings@1341 26 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet
nickjillings@1341 27 {
nickjillings@1341 28 str = "";
nickjillings@1341 29 if (hasBeenPlayed.length > 1) {
nickjillings@1341 30 for (var i=0; i<hasBeenPlayed.length; i++) {
nickjillings@1341 31 str = str + hasBeenPlayed[i];
nickjillings@1341 32 if (i < hasBeenPlayed.length-2){
nickjillings@1341 33 str += ", ";
nickjillings@1341 34 } else if (i == hasBeenPlayed.length-2) {
nickjillings@1341 35 str += " or ";
nickjillings@1341 36 }
nickjillings@1341 37 }
nickjillings@1341 38 alert('You have not played fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
nickjillings@1341 39 } else {
nickjillings@1341 40 alert('You have not played fragment ' + hasBeenPlayed[0] + ' yet. Please listen, rate and comment all samples before submitting.');
nickjillings@1341 41 }
nickjillings@1341 42 return false;
nickjillings@1341 43 }
nickjillings@1341 44 return true;
nickjillings@1341 45 };
nickjillings@1341 46
nickjillings@1341 47 interfaceContext.checkAllMoved = function() {
nickjillings@1341 48 var state = true;
nickjillings@1341 49 var str = 'You have not moved the following sliders. ';
nickjillings@1341 50 for (var i=0; i<this.interfaceSliders.length; i++)
nickjillings@1341 51 {
nickjillings@1341 52 var interfaceTID = [];
nickjillings@1341 53 for (var j=0; j<this.interfaceSliders[i].metrics.length; j++)
nickjillings@1341 54 {
nickjillings@1341 55 if (this.interfaceSliders[i].metrics[j].wasMoved == false)
nickjillings@1341 56 {
nickjillings@1341 57 state = false;
nickjillings@1341 58 interfaceTID.push(j);
nickjillings@1341 59 }
nickjillings@1341 60 }
nickjillings@1341 61 if (interfaceTID.length != 0)
nickjillings@1341 62 {
nickjillings@1341 63 var interfaceName = this.interfaceSliders[i].interfaceObject.title;
nickjillings@1341 64 if (interfaceName == undefined) {
nickjillings@1341 65 str += 'On axis '+String(i+1)+' you must move ';
nickjillings@1341 66 } else {
nickjillings@1341 67 str += 'On axis "'+interfaceName+'" you must move ';
nickjillings@1341 68 }
nickjillings@1341 69 if (interfaceTID.length == 1)
nickjillings@1341 70 {
nickjillings@1341 71 str += 'slider '+interfaceTID[0]+'. ';
nickjillings@1341 72 }
nickjillings@1341 73 else {
nickjillings@1341 74 str += 'sliders ';
nickjillings@1341 75 for (var k=0; k<interfaceTID.length-1; k++)
nickjillings@1341 76 {
nickjillings@1341 77 str += interfaceTID[k]+', ';
nickjillings@1341 78 }
nickjillings@1341 79 str += interfaceTID[interfaceTID.length-1] +'. ';
nickjillings@1341 80 }
nickjillings@1341 81 }
nickjillings@1341 82 }
nickjillings@1341 83 if (state != true)
nickjillings@1341 84 {
nickjillings@1341 85 alert(str);
nickjillings@1341 86 console.log(str);
nickjillings@1341 87 }
nickjillings@1341 88 return state;
nickjillings@1341 89 };
nickjillings@1341 90
nickjillings@1341 91 Interface.prototype.checkAllCommented = function() {
nickjillings@1341 92 var audioObjs = audioEngineContext.audioObjects;
nickjillings@1341 93 var audioHolder = testState.stateMap[testState.stateIndex];
nickjillings@1341 94 var state = true;
nickjillings@1341 95 if (audioHolder.elementComments) {
nickjillings@1341 96 var strNums = [];
nickjillings@1341 97 for (var i=0; i<audioObjs.length; i++)
nickjillings@1341 98 {
nickjillings@1341 99 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) {
nickjillings@1341 100 state = false;
nickjillings@1341 101 strNums.push(i);
nickjillings@1341 102 }
nickjillings@1341 103 }
nickjillings@1341 104 if (state == false) {
nickjillings@1341 105 if (strNums.length > 1) {
nickjillings@1341 106 var str = "";
nickjillings@1341 107 for (var i=0; i<strNums.length; i++) {
nickjillings@1341 108 str = str + strNums[i];
nickjillings@1341 109 if (i < strNums.length-2){
nickjillings@1341 110 str += ", ";
nickjillings@1341 111 } else if (i == strNums.length-2) {
nickjillings@1341 112 str += " or ";
nickjillings@1341 113 }
nickjillings@1341 114 }
nickjillings@1341 115 alert('You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.');
nickjillings@1341 116 } else {
nickjillings@1341 117 alert('You have not commented on fragment ' + strNums[0] + ' yet. Please listen, rate and comment all samples before submitting.');
nickjillings@1341 118 }
nickjillings@1341 119 }
nickjillings@1341 120 }
nickjillings@1341 121 return state;
nickjillings@1341 122 };
nickjillings@1341 123
nickjillings@1341 124 Interface.prototype.checkScaleRange = function()
nickjillings@1341 125 {
nickjillings@1341 126 var audioObjs = audioEngineContext.audioObjects;
nickjillings@1341 127 var audioHolder = testState.stateMap[testState.stateIndex];
nickjillings@1341 128 var state = true;
nickjillings@1341 129 var str = '';
nickjillings@1341 130 for (var i=0; i<this.interfaceSliders.length; i++)
nickjillings@1341 131 {
nickjillings@1341 132 var minScale;
nickjillings@1341 133 var maxScale;
nickjillings@1341 134 var interfaceObject = interfaceContext.interfaceSliders[0].interfaceObject;
nickjillings@1341 135 for (var j=0; j<interfaceObject.options.length; j++)
nickjillings@1341 136 {
nickjillings@1341 137 if (interfaceObject.options[j].check == "scalerange") {
nickjillings@1341 138 minScale = interfaceObject.options[j].min;
nickjillings@1341 139 maxScale = interfaceObject.options[j].max;
nickjillings@1341 140 break;
nickjillings@1341 141 }
nickjillings@1341 142 }
nickjillings@1341 143 var minRanking = convSliderPosToRate(this.interfaceSliders[i].sliders[0]);
nickjillings@1341 144 var maxRanking = minRanking;
nickjillings@1341 145 for (var j=1; j<this.interfaceSliders[i].sliders.length; j++)
nickjillings@1341 146 {
nickjillings@1341 147 var ranking = convSliderPosToRate(this.interfaceSliders[i].sliders[j]);
nickjillings@1341 148 if (ranking < minRanking)
nickjillings@1341 149 {
nickjillings@1341 150 minRanking = ranking;
nickjillings@1341 151 } else if (ranking > maxRanking)
nickjillings@1341 152 {
nickjillings@1341 153 maxRanking = ranking;
nickjillings@1341 154 }
nickjillings@1341 155 }
nickjillings@1341 156 if (minRanking > minScale || maxRanking < maxScale)
nickjillings@1341 157 {
nickjillings@1341 158 state = false;
nickjillings@1341 159 str += 'On axis "'+this.interfaceSliders[i].interfaceObject.title+'" you have not used the full width of the scale. ';
nickjillings@1341 160 }
nickjillings@1341 161 }
nickjillings@1341 162 if (state != true)
nickjillings@1341 163 {
nickjillings@1341 164 alert(str);
nickjillings@1341 165 console.log(str);
nickjillings@1341 166 }
nickjillings@1341 167 return state;
nickjillings@1341 168 };
nickjillings@1341 169
nickjillings@1341 170 Interface.prototype.objectSelected = null;
nickjillings@1341 171 Interface.prototype.objectMoved = false;
nickjillings@1341 172 Interface.prototype.selectObject = function(object)
nickjillings@1341 173 {
nickjillings@1341 174 if (this.objectSelected == null)
nickjillings@1341 175 {
nickjillings@1341 176 this.objectSelected = object;
nickjillings@1341 177 this.objectMoved = false;
nickjillings@1341 178 }
nickjillings@1341 179 };
nickjillings@1341 180 Interface.prototype.moveObject = function()
nickjillings@1341 181 {
nickjillings@1341 182 if (this.objectMoved == false)
nickjillings@1341 183 {
nickjillings@1341 184 this.objectMoved = true;
nickjillings@1341 185 }
nickjillings@1341 186 };
nickjillings@1341 187 Interface.prototype.releaseObject = function()
nickjillings@1341 188 {
nickjillings@1341 189 this.objectSelected = null;
nickjillings@1341 190 this.objectMoved = false;
nickjillings@1341 191 };
nickjillings@1341 192 Interface.prototype.getSelectedObject = function()
nickjillings@1341 193 {
nickjillings@1341 194 return this.objectSelected;
nickjillings@1341 195 };
nickjillings@1341 196 Interface.prototype.hasSelectedObjectMoved = function()
nickjillings@1341 197 {
nickjillings@1341 198 return this.objectMoved;
nickjillings@1341 199 };
nickjillings@1341 200
nickjillings@1341 201 // Bindings for slider interfaces
nickjillings@1341 202 Interface.prototype.interfaceSliders = [];
nickjillings@1341 203
nickjillings@1341 204 // Bindings for audioObjects
nickjillings@1341 205
nickjillings@1341 206 // Create the top div for the Title element
nickjillings@1341 207 var titleAttr = specification.title;
nickjillings@1341 208 var title = document.createElement('div');
nickjillings@1341 209 title.className = "title";
nickjillings@1341 210 title.align = "center";
nickjillings@1341 211 var titleSpan = document.createElement('span');
nickjillings@1341 212
nickjillings@1341 213 // Set title to that defined in XML, else set to default
nickjillings@1341 214 if (titleAttr != undefined) {
nickjillings@1341 215 titleSpan.textContent = titleAttr;
nickjillings@1341 216 } else {
nickjillings@1341 217 titleSpan.textContent = 'Listening test';
nickjillings@1341 218 }
nickjillings@1341 219 // Insert the titleSpan element into the title div element.
nickjillings@1341 220 title.appendChild(titleSpan);
nickjillings@1341 221
nickjillings@1341 222 // Create Interface buttons!
nickjillings@1341 223 var interfaceButtons = document.createElement('div');
nickjillings@1341 224 interfaceButtons.id = 'interface-buttons';
nickjillings@1341 225
nickjillings@1341 226 // Create playback start/stop points
nickjillings@1341 227 var playback = document.createElement("button");
nickjillings@1341 228 playback.innerHTML = 'Stop';
nickjillings@1341 229 playback.id = 'playback-button';
nickjillings@1341 230 // onclick function. Check if it is playing or not, call the correct function in the
nickjillings@1341 231 // audioEngine, change the button text to reflect the next state.
nickjillings@1341 232 playback.onclick = function() {
nickjillings@1341 233 if (audioEngineContext.status == 1) {
nickjillings@1341 234 audioEngineContext.stop();
nickjillings@1341 235 this.innerHTML = 'Stop';
nickjillings@1341 236 var time = audioEngineContext.timer.getTestTime();
nickjillings@1341 237 console.log('Stopped at ' + time); // DEBUG/SAFETY
nickjillings@1341 238 }
nickjillings@1341 239 };
nickjillings@1341 240 // Create Submit (save) button
nickjillings@1341 241 var submit = document.createElement("button");
nickjillings@1341 242 submit.innerHTML = 'Submit';
nickjillings@1341 243 submit.onclick = buttonSubmitClick;
nickjillings@1341 244 submit.id = 'submit-button';
nickjillings@1341 245 // Append the interface buttons into the interfaceButtons object.
nickjillings@1341 246 interfaceButtons.appendChild(playback);
nickjillings@1341 247 interfaceButtons.appendChild(submit);
nickjillings@1341 248
nickjillings@1341 249 var sliderHolder = document.createElement("div");
nickjillings@1341 250 sliderHolder.id = "slider-holder";
nickjillings@1341 251
nickjillings@1341 252
nickjillings@1341 253 // Global parent for the comment boxes on the page
nickjillings@1341 254 var feedbackHolder = document.createElement('div');
nickjillings@1341 255 feedbackHolder.id = 'feedbackHolder';
nickjillings@1341 256
nickjillings@1341 257 testContent.style.zIndex = 1;
nickjillings@1341 258 interfaceContext.insertPoint.innerHTML = null; // Clear the current schema
nickjillings@1341 259
nickjillings@1341 260 // Inject into HTML
nickjillings@1341 261 testContent.appendChild(title); // Insert the title
nickjillings@1341 262 testContent.appendChild(interfaceButtons);
nickjillings@1341 263 testContent.appendChild(sliderHolder);
nickjillings@1341 264 testContent.appendChild(feedbackHolder);
nickjillings@1341 265 interfaceContext.insertPoint.appendChild(testContent);
nickjillings@1341 266
nickjillings@1341 267 // Load the full interface
nickjillings@1341 268 testState.initialise();
nickjillings@1341 269 testState.advanceState();
nickjillings@1341 270
nickjillings@1341 271 }
nickjillings@1341 272
nickjillings@1341 273 function loadTest(audioHolderObject)
nickjillings@1341 274 {
nickjillings@1341 275 var width = window.innerWidth;
nickjillings@1341 276 var height = window.innerHeight;
nickjillings@1341 277 var id = audioHolderObject.id;
nickjillings@1341 278
nickjillings@1341 279 interfaceContext.interfaceSliders = [];
nickjillings@1341 280
nickjillings@1341 281 var feedbackHolder = document.getElementById('feedbackHolder');
nickjillings@1341 282 var sliderHolder = document.getElementById('slider-holder');
nickjillings@1341 283 feedbackHolder.innerHTML = null;
nickjillings@1341 284 sliderHolder.innerHTML = null;
nickjillings@1341 285
nickjillings@1341 286 // Delete outside reference
nickjillings@1341 287 var outsideReferenceHolder = document.getElementById('outside-reference');
nickjillings@1341 288 if (outsideReferenceHolder != null) {
nickjillings@1341 289 document.getElementById('interface-buttons').removeChild(outsideReferenceHolder);
nickjillings@1341 290 }
nickjillings@1341 291
nickjillings@1341 292 var interfaceObj = audioHolderObject.interfaces;
nickjillings@1341 293 for (var k=0; k<interfaceObj.length; k++) {
nickjillings@1341 294 // Create the div box to center align
nickjillings@1341 295 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k]));
nickjillings@1341 296 }
nickjillings@1356 297
nickjillings@1356 298 var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces);
nickjillings@1356 299 for (var k=0; k<interfaceList.length; k++)
nickjillings@1356 300 {
nickjillings@1356 301 for (var i=0; i<interfaceList[k].options.length; i++)
nickjillings@1356 302 {
nickjillings@1356 303 if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead')
nickjillings@1356 304 {
nickjillings@1356 305 var playbackHolder = document.getElementById('playback-holder');
nickjillings@1356 306 if (playbackHolder == null)
nickjillings@1356 307 {
nickjillings@1356 308 playbackHolder = document.createElement('div');
nickjillings@1356 309 playbackHolder.style.width = "100%";
nickjillings@1356 310 playbackHolder.align = 'center';
nickjillings@1356 311 playbackHolder.appendChild(interfaceContext.playhead.object);
nickjillings@1356 312 feedbackHolder.appendChild(playbackHolder);
nickjillings@1356 313 }
nickjillings@1356 314 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count')
nickjillings@1356 315 {
nickjillings@1356 316 var pagecountHolder = document.getElementById('page-count');
nickjillings@1356 317 if (pagecountHolder == null)
nickjillings@1356 318 {
nickjillings@1356 319 pagecountHolder = document.createElement('div');
nickjillings@1356 320 pagecountHolder.id = 'page-count';
nickjillings@1356 321 }
nickjillings@1356 322 pagecountHolder.innerHTML = '<span>Page '+(audioHolderObject.presentedId+1)+' of '+specification.pages.length+'</span>';
nickjillings@1356 323 var inject = document.getElementById('interface-buttons');
nickjillings@1356 324 inject.appendChild(pagecountHolder);
nickjillings@1356 325 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') {
nickjillings@1356 326 if (document.getElementById('master-volume-holder') == null)
nickjillings@1356 327 {
nickjillings@1356 328 feedbackHolder.appendChild(interfaceContext.volume.object);
nickjillings@1356 329 }
nickjillings@1356 330 }
nickjillings@1356 331 }
nickjillings@1356 332 }
nickjillings@1341 333
nickjillings@1341 334 var commentBoxPrefix = "Comment on fragment";
nickjillings@1341 335
nickjillings@1341 336 var commentShow = audioHolderObject.elementComments;
nickjillings@1341 337
nickjillings@1341 338 var loopPlayback = audioHolderObject.loop;
nickjillings@1341 339
nickjillings@1341 340 currentTestHolder = document.createElement('audioHolder');
nickjillings@1341 341 currentTestHolder.id = audioHolderObject.id;
nickjillings@1341 342 currentTestHolder.repeatCount = audioHolderObject.repeatCount;
nickjillings@1341 343
nickjillings@1341 344 // Find all the audioElements from the audioHolder
nickjillings@1341 345 $(audioHolderObject.audioElements).each(function(index,element){
nickjillings@1341 346 // Find URL of track
nickjillings@1341 347 // In this jQuery loop, variable 'this' holds the current audioElement.
nickjillings@1341 348 var audioObject = audioEngineContext.newTrack(element);
nickjillings@1341 349 // Check if an outside reference
nickjillings@1341 350 if (element.type == 'outside-reference')
nickjillings@1341 351 {
nickjillings@1341 352 // Construct outside reference;
nickjillings@1341 353 var orNode = new outsideReferenceDOM(audioObject,index,document.getElementById('interface-buttons'));
nickjillings@1341 354 audioObject.bindInterface(orNode);
nickjillings@1341 355 } else {
nickjillings@1341 356 var node = interfaceContext.createCommentBox(audioObject);
nickjillings@1341 357 // Create a slider per track
nickjillings@1341 358 var sliderNode = new sliderObject(audioObject,interfaceObj);
nickjillings@1341 359 audioObject.bindInterface(sliderNode);
nickjillings@1341 360 }
nickjillings@1341 361 });
nickjillings@1341 362
nickjillings@1341 363 // Initialse the interfaceSlider object metrics
nickjillings@1341 364
nickjillings@1341 365 $('.track-slider').mousedown(function(event) {
nickjillings@1341 366 interfaceContext.selectObject($(this)[0]);
nickjillings@1341 367 });
nickjillings@1341 368 $('.track-slider').on('touchstart',null,function(event) {
nickjillings@1341 369 interfaceContext.selectObject($(this)[0]);
nickjillings@1341 370 });
nickjillings@1341 371
nickjillings@1341 372 $('.track-slider').mousemove(function(event) {
nickjillings@1341 373 event.preventDefault();
nickjillings@1341 374 });
nickjillings@1341 375
nickjillings@1341 376 $('.slider').mousemove(function(event) {
nickjillings@1341 377 event.preventDefault();
nickjillings@1341 378 var obj = interfaceContext.getSelectedObject();
nickjillings@1341 379 if (obj == null) {return;}
nickjillings@1341 380 $(obj).css("left",event.clientX + "px");
nickjillings@1341 381 interfaceContext.moveObject();
nickjillings@1341 382 });
nickjillings@1341 383
nickjillings@1341 384 $('.slider').on('touchmove',null,function(event) {
nickjillings@1341 385 event.preventDefault();
nickjillings@1341 386 var obj = interfaceContext.getSelectedObject();
nickjillings@1341 387 if (obj == null) {return;}
nickjillings@1341 388 var move = event.originalEvent.targetTouches[0].clientX - 6;
nickjillings@1341 389 $(obj).css("left",move + "px");
nickjillings@1341 390 interfaceContext.moveObject();
nickjillings@1341 391 });
nickjillings@1341 392
nickjillings@1341 393 $(document).mouseup(function(event){
nickjillings@1341 394 event.preventDefault();
nickjillings@1341 395 var obj = interfaceContext.getSelectedObject();
nickjillings@1341 396 if (obj == null) {return;}
nickjillings@1341 397 var interfaceID = obj.parentElement.getAttribute("interfaceid");
nickjillings@1341 398 var trackID = obj.getAttribute("trackindex");
nickjillings@1341 399 if (interfaceContext.hasSelectedObjectMoved() == true)
nickjillings@1341 400 {
nickjillings@1341 401 var l = $(obj).css("left");
nickjillings@1341 402 var id = obj.getAttribute('trackIndex');
nickjillings@1341 403 var time = audioEngineContext.timer.getTestTime();
nickjillings@1341 404 var rate = convSliderPosToRate(obj);
nickjillings@1341 405 audioEngineContext.audioObjects[id].metric.moved(time,rate);
nickjillings@1341 406 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate);
nickjillings@1341 407 console.log("slider "+id+" moved to "+rate+' ('+time+')');
nickjillings@1341 408 } else {
nickjillings@1341 409 var id = Number(obj.attributes['trackIndex'].value);
nickjillings@1341 410 //audioEngineContext.metric.sliderPlayed(id);
nickjillings@1341 411 audioEngineContext.play(id);
nickjillings@1341 412 // Currently playing track red, rest green
nickjillings@1341 413
nickjillings@1341 414 $('.track-slider').removeClass('track-slider-playing');
nickjillings@1341 415 var name = ".track-slider-"+obj.getAttribute("trackindex");
nickjillings@1341 416 $(name).addClass('track-slider-playing');
nickjillings@1341 417 $('.comment-div').removeClass('comment-box-playing');
nickjillings@1341 418 $('#comment-div-'+id).addClass('comment-box-playing');
nickjillings@1341 419 var outsideReference = document.getElementById('outside-reference');
nickjillings@1341 420 if (outsideReference != undefined)
nickjillings@1341 421 $(outsideReference).removeClass('track-slider-playing');
nickjillings@1341 422 }
nickjillings@1341 423 interfaceContext.releaseObject();
nickjillings@1341 424 });
nickjillings@1341 425
nickjillings@1341 426 $('.slider').on('touchend',null,function(event){
nickjillings@1341 427 var obj = interfaceContext.getSelectedObject();
nickjillings@1341 428 if (obj == null) {return;}
nickjillings@1341 429 var interfaceID = obj.parentElement.getAttribute("interfaceid");
nickjillings@1341 430 var trackID = obj.getAttribute("trackindex");
nickjillings@1341 431 if (interfaceContext.hasSelectedObjectMoved() == true)
nickjillings@1341 432 {
nickjillings@1341 433 var l = $(obj).css("left");
nickjillings@1341 434 var id = obj.getAttribute('trackIndex');
nickjillings@1341 435 var time = audioEngineContext.timer.getTestTime();
nickjillings@1341 436 var rate = convSliderPosToRate(obj);
nickjillings@1341 437 audioEngineContext.audioObjects[id].metric.moved(time,rate);
nickjillings@1341 438 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time,rate);
nickjillings@1341 439 console.log("slider "+id+" moved to "+rate+' ('+time+')');
nickjillings@1341 440 }
nickjillings@1341 441 interfaceContext.releaseObject();
nickjillings@1341 442 });
nickjillings@1341 443
nickjillings@1341 444
nickjillings@1341 445 if (audioHolderObject.showElementComments) {
nickjillings@1341 446 interfaceContext.showCommentBoxes(feedbackHolder,true);
nickjillings@1341 447 }
nickjillings@1341 448
nickjillings@1341 449 $(audioHolderObject.commentQuestions).each(function(index,element) {
nickjillings@1341 450 var node = interfaceContext.createCommentQuestion(element);
nickjillings@1341 451 feedbackHolder.appendChild(node.holder);
nickjillings@1341 452 });
nickjillings@1341 453
nickjillings@1341 454
nickjillings@1341 455 //testWaitIndicator();
nickjillings@1341 456 }
nickjillings@1341 457
nickjillings@1341 458 function interfaceSliderHolder(interfaceObject)
nickjillings@1341 459 {
nickjillings@1341 460 this.sliders = [];
nickjillings@1341 461 this.metrics = [];
nickjillings@1341 462 this.id = document.getElementsByClassName("sliderCanvasDiv").length;
nickjillings@1341 463 this.name = interfaceObject.name;
nickjillings@1341 464 this.interfaceObject = interfaceObject;
nickjillings@1341 465 this.sliderDOM = document.createElement('div');
nickjillings@1341 466 this.sliderDOM.className = 'sliderCanvasDiv';
nickjillings@1341 467 this.sliderDOM.id = 'sliderCanvasHolder-'+this.id;
nickjillings@1341 468
nickjillings@1341 469 var pagetitle = document.createElement('div');
nickjillings@1341 470 pagetitle.className = "pageTitle";
nickjillings@1341 471 pagetitle.align = "center";
nickjillings@1341 472 var titleSpan = document.createElement('span');
nickjillings@1341 473 titleSpan.id = "pageTitle-"+this.id;
nickjillings@1341 474 if (interfaceObject.title != undefined && typeof interfaceObject.title == "string")
nickjillings@1341 475 {
nickjillings@1341 476 titleSpan.textContent = interfaceObject.title;
nickjillings@1341 477 } else {
nickjillings@1341 478 titleSpan.textContent = "Axis "+String(this.id+1);
nickjillings@1341 479 }
nickjillings@1341 480 pagetitle.appendChild(titleSpan);
nickjillings@1341 481 this.sliderDOM.appendChild(pagetitle);
nickjillings@1341 482
nickjillings@1341 483 // Create the slider box to hold the slider elements
nickjillings@1341 484 this.canvas = document.createElement('div');
nickjillings@1341 485 if (this.name != undefined)
nickjillings@1341 486 this.canvas.id = 'slider-'+this.name;
nickjillings@1341 487 else
nickjillings@1341 488 this.canvas.id = 'slider-'+this.id;
nickjillings@1341 489 this.canvas.setAttribute("interfaceid",this.id);
nickjillings@1341 490 this.canvas.className = 'slider';
nickjillings@1341 491 this.canvas.align = "left";
nickjillings@1341 492 this.canvas.addEventListener('dragover',function(event){
nickjillings@1341 493 event.preventDefault();
nickjillings@1341 494 event.dataTransfer.effectAllowed = 'none';
nickjillings@1341 495 event.dataTransfer.dropEffect = 'copy';
nickjillings@1341 496 return false;
nickjillings@1341 497 },false);
nickjillings@1341 498 var sliderMargin = document.createAttribute('marginsize');
nickjillings@1341 499 sliderMargin.nodeValue = 42; // Set default margins to 42px either side
nickjillings@1341 500 // Must have a known EXACT width, as this is used later to determine the ratings
nickjillings@1341 501 var w = (Number(sliderMargin.nodeValue)+8)*2;
nickjillings@1341 502 this.canvas.style.width = window.innerWidth - w +"px";
nickjillings@1341 503 this.canvas.style.marginLeft = sliderMargin.nodeValue +'px';
nickjillings@1341 504 this.canvas.setAttributeNode(sliderMargin);
nickjillings@1341 505 this.sliderDOM.appendChild(this.canvas);
nickjillings@1341 506
nickjillings@1341 507 // Create the div to hold any scale objects
nickjillings@1341 508 this.scale = document.createElement('div');
nickjillings@1341 509 this.scale.className = 'sliderScale';
nickjillings@1341 510 this.scale.id = 'sliderScaleHolder-'+this.id;
nickjillings@1341 511 this.scale.align = 'left';
nickjillings@1341 512 this.sliderDOM.appendChild(this.scale);
nickjillings@1341 513 var positionScale = this.canvas.style.width.substr(0,this.canvas.style.width.length-2);
nickjillings@1341 514 var offset = Number(this.canvas.attributes['marginsize'].value);
nickjillings@1341 515 for (var scaleObj of interfaceObject.scales)
nickjillings@1341 516 {
nickjillings@1341 517 var value = document.createAttribute('value');
nickjillings@1341 518 var position = Number(scaleObj.position)*0.01;
nickjillings@1341 519 value.nodeValue = position;
nickjillings@1341 520 var pixelPosition = (position*positionScale)+offset;
nickjillings@1341 521 var scaleDOM = document.createElement('span');
nickjillings@1341 522 scaleDOM.textContent = scaleObj.text;
nickjillings@1341 523 this.scale.appendChild(scaleDOM);
nickjillings@1341 524 scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px';
nickjillings@1341 525 scaleDOM.setAttributeNode(value);
nickjillings@1341 526 }
nickjillings@1341 527
nickjillings@1341 528 var dest = document.getElementById("slider-holder");
nickjillings@1341 529 dest.appendChild(this.sliderDOM);
nickjillings@1341 530
nickjillings@1341 531 this.createSliderObject = function(audioObject)
nickjillings@1341 532 {
nickjillings@1341 533 var trackObj = document.createElement('div');
nickjillings@1341 534 trackObj.className = 'track-slider track-slider-disabled track-slider-'+audioObject.id;
nickjillings@1341 535 trackObj.id = 'track-slider-'+this.id+'-'+audioObject.id;
nickjillings@1341 536 trackObj.setAttribute('trackIndex',audioObject.id);
nickjillings@1341 537 if (this.name != undefined) {
nickjillings@1341 538 trackObj.setAttribute('interface-name',this.name);
nickjillings@1341 539 } else {
nickjillings@1341 540 trackObj.setAttribute('interface-name',this.id);
nickjillings@1341 541 }
nickjillings@1341 542 var offset = Number(this.canvas.attributes['marginsize'].value);
nickjillings@1341 543 // Distribute it randomnly
nickjillings@1341 544 var w = window.innerWidth - (offset+8)*2;
nickjillings@1341 545 w = Math.random()*w;
nickjillings@1341 546 w = Math.floor(w+(offset+8));
nickjillings@1341 547 trackObj.style.left = w+'px';
nickjillings@1341 548 this.canvas.appendChild(trackObj);
nickjillings@1341 549 this.sliders.push(trackObj);
nickjillings@1341 550 this.metrics.push(new metricTracker(this));
nickjillings@1341 551 trackObj.innerHTML = '<span>'+(this.metrics.length-1)+'</span>';
nickjillings@1341 552 this.metrics[this.metrics.length-1].initialise(convSliderPosToRate(trackObj));
nickjillings@1341 553 return trackObj;
nickjillings@1341 554 };
nickjillings@1341 555
nickjillings@1341 556 this.resize = function(event)
nickjillings@1341 557 {
nickjillings@1341 558 var holdValues = [];
nickjillings@1341 559 for (var index = 0; index < this.sliders.length; index++)
nickjillings@1341 560 {
nickjillings@1341 561 holdValues.push(convSliderPosToRate(this.sliders[index]));
nickjillings@1341 562 }
nickjillings@1341 563 var width = event.target.innerWidth;
nickjillings@1341 564 var sliderDiv = this.canvas;
nickjillings@1341 565 var sliderScaleDiv = this.scale;
nickjillings@1341 566 var marginsize = Number(sliderDiv.attributes['marginsize'].value);
nickjillings@1341 567 var w = (marginsize+8)*2;
nickjillings@1341 568 sliderDiv.style.width = width - w + 'px';
nickjillings@1341 569 var width = width - w;
nickjillings@1341 570 // Move sliders into new position
nickjillings@1341 571 for (var index = 0; index < this.sliders.length; index++)
nickjillings@1341 572 {
nickjillings@1341 573 var pos = holdValues[index];
nickjillings@1341 574 var pix = pos * width;
nickjillings@1341 575 this.sliders[index].style.left = pix+marginsize+'px';
nickjillings@1341 576 }
nickjillings@1341 577
nickjillings@1341 578 // Move scale labels
nickjillings@1341 579 for (var index = 0; index < this.scale.children.length; index++)
nickjillings@1341 580 {
nickjillings@1341 581 var scaleObj = this.scale.children[index];
nickjillings@1341 582 var position = Number(scaleObj.attributes['value'].value);
nickjillings@1341 583 var pixelPosition = (position*width)+marginsize;
nickjillings@1341 584 scaleObj.style.left = Math.floor((pixelPosition-($(scaleObj).width()/2)))+'px';
nickjillings@1341 585 }
nickjillings@1341 586 };
nickjillings@1341 587 }
nickjillings@1341 588
nickjillings@1341 589 function sliderObject(audioObject,interfaceObjects) {
nickjillings@1341 590 // Create a new slider object;
nickjillings@1341 591 this.parent = audioObject;
nickjillings@1341 592 this.trackSliderObjects = [];
nickjillings@1341 593 for (var i=0; i<interfaceContext.interfaceSliders.length; i++)
nickjillings@1341 594 {
nickjillings@1341 595 var trackObj = interfaceContext.interfaceSliders[i].createSliderObject(audioObject);
nickjillings@1341 596 this.trackSliderObjects.push(trackObj);
nickjillings@1341 597 }
nickjillings@1341 598
nickjillings@1341 599 // Onclick, switch playback to that track
nickjillings@1341 600
nickjillings@1341 601 this.enable = function() {
nickjillings@1341 602 if (this.parent.state == 1)
nickjillings@1341 603 {
nickjillings@1341 604 $(this.trackSliderObjects).each(function(i,trackObj){
nickjillings@1341 605 $(trackObj).removeClass('track-slider-disabled');
nickjillings@1341 606 });
nickjillings@1341 607 }
nickjillings@1341 608 };
nickjillings@1341 609 this.updateLoading = function(progress)
nickjillings@1341 610 {
nickjillings@1341 611 if (progress != 100)
nickjillings@1341 612 {
nickjillings@1341 613 progress = String(progress);
nickjillings@1341 614 progress = progress.split('.')[0];
nickjillings@1341 615 this.trackSliderObjects[0].children[0].textContent = progress+'%';
nickjillings@1341 616 } else {
nickjillings@1341 617 this.trackSliderObjects[0].children[0].textContent = this.parent.id;
nickjillings@1341 618 }
nickjillings@1341 619 };
nickjillings@1341 620 this.exportXMLDOM = function(audioObject) {
nickjillings@1341 621 // Called by the audioObject holding this element. Must be present
nickjillings@1341 622 var obj = [];
nickjillings@1341 623 $(this.trackSliderObjects).each(function(i,trackObj){
nickjillings@1341 624 var node = storage.document.createElement('value');
nickjillings@1341 625 node.setAttribute("interface-name",trackObj.getAttribute("interface-name"));
nickjillings@1341 626 node.textContent = convSliderPosToRate(trackObj);
nickjillings@1341 627 obj.push(node);
nickjillings@1341 628 });
nickjillings@1341 629
nickjillings@1341 630 return obj;
nickjillings@1341 631 };
nickjillings@1341 632 this.getValue = function() {
nickjillings@1341 633 return convSliderPosToRate(this.trackSliderObjects[0]);
nickjillings@1341 634 };
nickjillings@1341 635 this.getPresentedId = function()
nickjillings@1341 636 {
nickjillings@1341 637 return this.trackSliderObjects[0].children[0].textContent;
nickjillings@1341 638 };
nickjillings@1341 639 this.canMove = function()
nickjillings@1341 640 {
nickjillings@1341 641 return true;
nickjillings@1341 642 };
nickjillings@1341 643 }
nickjillings@1341 644
nickjillings@1341 645 function outsideReferenceDOM(audioObject,index,inject)
nickjillings@1341 646 {
nickjillings@1341 647 this.parent = audioObject;
nickjillings@1341 648 this.outsideReferenceHolder = document.createElement('div');
nickjillings@1341 649 this.outsideReferenceHolder.id = 'outside-reference';
nickjillings@1341 650 this.outsideReferenceHolder.className = 'outside-reference track-slider-disabled';
nickjillings@1341 651 var outsideReferenceHolderspan = document.createElement('span');
nickjillings@1341 652 outsideReferenceHolderspan.textContent = 'Reference';
nickjillings@1341 653 this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan);
nickjillings@1341 654 this.outsideReferenceHolder.setAttribute('track-id',index);
nickjillings@1341 655
nickjillings@1341 656 this.outsideReferenceHolder.onclick = function(event)
nickjillings@1341 657 {
nickjillings@1341 658 audioEngineContext.play(event.currentTarget.getAttribute('track-id'));
nickjillings@1341 659 $('.track-slider').removeClass('track-slider-playing');
nickjillings@1341 660 $('.comment-div').removeClass('comment-box-playing');
nickjillings@1341 661 if (event.currentTarget.nodeName == 'DIV') {
nickjillings@1341 662 $(event.currentTarget).addClass('track-slider-playing');
nickjillings@1341 663 } else {
nickjillings@1341 664 $(event.currentTarget.parentElement).addClass('track-slider-playing');
nickjillings@1341 665 }
nickjillings@1341 666 };
nickjillings@1341 667 inject.appendChild(this.outsideReferenceHolder);
nickjillings@1341 668 this.enable = function()
nickjillings@1341 669 {
nickjillings@1341 670 if (this.parent.state == 1)
nickjillings@1341 671 {
nickjillings@1341 672 $(this.outsideReferenceHolder).removeClass('track-slider-disabled');
nickjillings@1341 673 }
nickjillings@1341 674 };
nickjillings@1341 675 this.updateLoading = function(progress)
nickjillings@1341 676 {
nickjillings@1341 677 if (progress != 100)
nickjillings@1341 678 {
nickjillings@1341 679 progress = String(progress);
nickjillings@1341 680 progress = progress.split('.')[0];
nickjillings@1341 681 this.outsideReferenceHolder[0].children[0].textContent = progress+'%';
nickjillings@1341 682 } else {
nickjillings@1341 683 this.outsideReferenceHolder[0].children[0].textContent = "Play Reference";
nickjillings@1341 684 }
nickjillings@1341 685 };
nickjillings@1341 686 this.exportXMLDOM = function(audioObject)
nickjillings@1341 687 {
nickjillings@1341 688 return null;
nickjillings@1341 689 };
nickjillings@1341 690 this.getValue = function()
nickjillings@1341 691 {
nickjillings@1341 692 return 0;
nickjillings@1341 693 };
nickjillings@1341 694 this.getPresentedId = function()
nickjillings@1341 695 {
nickjillings@1341 696 return 'reference';
nickjillings@1341 697 };
nickjillings@1341 698 this.canMove = function()
nickjillings@1341 699 {
nickjillings@1341 700 return false;
nickjillings@1341 701 };
nickjillings@1341 702 }
nickjillings@1341 703
nickjillings@1341 704 function buttonSubmitClick()
nickjillings@1341 705 {
nickjillings@1341 706 var checks = [];
nickjillings@1341 707 checks = checks.concat(testState.currentStateMap.interfaces[0].options);
nickjillings@1341 708 checks = checks.concat(specification.interfaces.options);
nickjillings@1341 709 var canContinue = true;
nickjillings@1341 710
nickjillings@1341 711 // Check that the anchor and reference objects are correctly placed
nickjillings@1341 712 if (interfaceContext.checkHiddenAnchor() == false) {return;}
nickjillings@1341 713 if (interfaceContext.checkHiddenReference() == false) {return;}
nickjillings@1341 714
nickjillings@1341 715 for (var i=0; i<checks.length; i++) {
nickjillings@1341 716 if (checks[i].type == 'check')
nickjillings@1341 717 {
nickjillings@1341 718 switch(checks[i].name) {
nickjillings@1341 719 case 'fragmentPlayed':
nickjillings@1341 720 // Check if all fragments have been played
nickjillings@1341 721 var checkState = interfaceContext.checkAllPlayed();
nickjillings@1341 722 if (checkState == false) {canContinue = false;}
nickjillings@1341 723 break;
nickjillings@1341 724 case 'fragmentFullPlayback':
nickjillings@1341 725 // Check all fragments have been played to their full length
nickjillings@1341 726 var checkState = interfaceContext.checkFragmentsFullyPlayed();
nickjillings@1341 727 if (checkState == false) {canContinue = false;}
nickjillings@1341 728 break;
nickjillings@1341 729 case 'fragmentMoved':
nickjillings@1341 730 // Check all fragment sliders have been moved.
nickjillings@1341 731 var checkState = interfaceContext.checkAllMoved();
nickjillings@1341 732 if (checkState == false) {canContinue = false;}
nickjillings@1341 733 break;
nickjillings@1341 734 case 'fragmentComments':
nickjillings@1341 735 // Check all fragment sliders have been moved.
nickjillings@1341 736 var checkState = interfaceContext.checkAllCommented();
nickjillings@1341 737 if (checkState == false) {canContinue = false;}
nickjillings@1341 738 break;
nickjillings@1341 739 case 'scalerange':
nickjillings@1341 740 // Check the scale is used to its full width outlined by the node
nickjillings@1341 741 var checkState = interfaceContext.checkScaleRange();
nickjillings@1341 742 if (checkState == false) {canContinue = false;}
nickjillings@1341 743 break;
nickjillings@1341 744 default:
nickjillings@1341 745 console.log("WARNING - Check option "+checks[i].name+" is not supported on this interface");
nickjillings@1341 746 break;
nickjillings@1341 747 }
nickjillings@1341 748
nickjillings@1341 749 }
nickjillings@1341 750 if (!canContinue) {break;}
nickjillings@1341 751 }
nickjillings@1341 752
nickjillings@1341 753 if (canContinue) {
nickjillings@1341 754 if (audioEngineContext.status == 1) {
nickjillings@1341 755 var playback = document.getElementById('playback-button');
nickjillings@1341 756 playback.click();
nickjillings@1341 757 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
nickjillings@1341 758 } else
nickjillings@1341 759 {
nickjillings@1341 760 if (audioEngineContext.timer.testStarted == false)
nickjillings@1341 761 {
nickjillings@1341 762 alert('You have not started the test! Please click a fragment to begin the test!');
nickjillings@1341 763 return;
nickjillings@1341 764 }
nickjillings@1341 765 }
nickjillings@1341 766 testState.advanceState();
nickjillings@1341 767 }
nickjillings@1341 768 }
nickjillings@1341 769
nickjillings@1341 770 function convSliderPosToRate(trackSlider)
nickjillings@1341 771 {
nickjillings@1341 772 var slider = trackSlider.parentElement;
nickjillings@1341 773 var w = slider.style.width;
nickjillings@1341 774 var marginsize = Number(slider.attributes['marginsize'].value);
nickjillings@1341 775 var maxPix = w.substr(0,w.length-2);
nickjillings@1341 776 var pix = trackSlider.style.left;
nickjillings@1341 777 pix = pix.substr(0,pix.length-2);
nickjillings@1341 778 var rate = (pix-marginsize)/maxPix;
nickjillings@1341 779 return rate;
nickjillings@1341 780 }
nickjillings@1341 781
nickjillings@1341 782 function resizeWindow(event){
nickjillings@1341 783 // Function called when the window has been resized.
nickjillings@1341 784 // MANDATORY FUNCTION
nickjillings@1341 785
nickjillings@1341 786 // Resize the slider objects
nickjillings@1341 787 for (var i=0; i<interfaceContext.interfaceSliders.length; i++)
nickjillings@1341 788 {
nickjillings@1341 789 interfaceContext.interfaceSliders[i].resize(event);
nickjillings@1341 790 }
nickjillings@1341 791 }
nickjillings@1341 792
nickjillings@1341 793 function pageXMLSave(store, pageSpecification)
nickjillings@1341 794 {
nickjillings@1341 795 // MANDATORY
nickjillings@1341 796 // Saves a specific test page
nickjillings@1341 797 // You can use this space to add any extra nodes to your XML <audioHolder> saves
nickjillings@1341 798 // Get the current <page> information in store (remember to appendChild your data to it)
nickjillings@1341 799 // pageSpecification is the current page node configuration
nickjillings@1341 800 // To create new XML nodes, use storage.document.createElement();
nickjillings@1341 801
nickjillings@1341 802 if (interfaceContext.interfaceSliders.length == 1)
nickjillings@1341 803 {
nickjillings@1341 804 // If there is only one axis, there only needs to be one metric return
nickjillings@1341 805 return;
nickjillings@1341 806 }
nickjillings@1341 807 var audioelements = store.getElementsByTagName("audioelement");
nickjillings@1341 808 for (var i=0; i<audioelements.length; i++)
nickjillings@1341 809 {
nickjillings@1341 810 // Have to append the metric specific nodes
nickjillings@1341 811 if (pageSpecification.outsideReference == null || pageSpecification.outsideReference.id != audioelements[i].id)
nickjillings@1341 812 {
nickjillings@1341 813 var inject = audioelements[i].getElementsByTagName("metric");
nickjillings@1341 814 if (inject.length == 0)
nickjillings@1341 815 {
nickjillings@1341 816 inject = storage.document.createElement("metric");
nickjillings@1341 817 } else {
nickjillings@1341 818 inject = inject[0];
nickjillings@1341 819 }
nickjillings@1341 820 for (var k=0; k<interfaceContext.interfaceSliders.length; k++)
nickjillings@1341 821 {
nickjillings@1341 822 var mrnodes = interfaceContext.interfaceSliders[k].metrics[i].exportXMLDOM(inject);
nickjillings@1341 823 for (var j=0; j<mrnodes.length; j++)
nickjillings@1341 824 {
nickjillings@1341 825 var name = mrnodes[j].getAttribute("name");
nickjillings@1341 826 if (name == "elementTracker" || name == "elementTrackerFull" || name == "elementInitialPosition" || name == "elementFlagMoved")
nickjillings@1341 827 {
nickjillings@1341 828 mrnodes[j].setAttribute("interface-name",interfaceContext.interfaceSliders[k].name);
nickjillings@1341 829 mrnodes[j].setAttribute("interface-id",k);
nickjillings@1341 830 inject.appendChild(mrnodes[j]);
nickjillings@1341 831 }
nickjillings@1341 832 }
nickjillings@1341 833 }
nickjillings@1341 834 }
nickjillings@1341 835 }
nickjillings@1341 836 }