d@0: /** d@0: * ape.js d@0: * Create the APE interface d@0: */ d@0: d@0: d@0: // Once this is loaded and parsed, begin execution d@0: loadInterface(); d@0: d@0: function loadInterface() { d@0: d@0: // Get the dimensions of the screen available to the page d@0: var width = window.innerWidth; d@0: var height = window.innerHeight; d@0: d@0: // The injection point into the HTML page d@0: interfaceContext.insertPoint = document.getElementById("topLevelBody"); d@0: var testContent = document.createElement('div'); d@0: d@0: testContent.id = 'testContent'; d@0: d@0: d@0: // Create APE specific metric functions d@0: audioEngineContext.metric.initialiseTest = function() d@0: { d@0: }; d@0: d@0: audioEngineContext.metric.sliderMoved = function() d@0: { d@0: var id = this.data; d@0: this.data = -1; d@0: var position = convSliderPosToRate(id); d@0: console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id d@0: if (audioEngineContext.timer.testStarted) d@0: { d@0: audioEngineContext.audioObjects[id].metric.moved(time,position); d@0: } d@0: }; d@0: d@0: audioEngineContext.metric.sliderPlayed = function(id) d@0: { d@0: var time = audioEngineContext.timer.getTestTime(); d@0: if (audioEngineContext.timer.testStarted) d@0: { d@0: if (this.lastClicked >= 0) d@0: { d@0: audioEngineContext.audioObjects[this.lastClicked].metric.listening(time); d@0: } d@0: this.lastClicked = id; d@0: audioEngineContext.audioObjects[id].metric.listening(time); d@0: } d@0: console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id d@0: }; d@0: d@0: // Bindings for interfaceContext d@0: Interface.prototype.checkAllPlayed = function() d@0: { d@0: hasBeenPlayed = audioEngineContext.checkAllPlayed(); d@0: if (hasBeenPlayed.length > 0) // if a fragment has not been played yet d@0: { d@0: str = ""; d@0: if (hasBeenPlayed.length > 1) { d@0: for (var i=0; i 1) { d@0: var str = ""; d@0: for (var i=0; i 1) { d@0: var str = ""; d@0: for (var i=0; i maxRanking) { maxRanking = ranking;} d@0: } d@0: } d@0: if (minRanking > minScale || maxRanking < maxScale) { d@0: alert('Please use the full width of the scale'); d@0: return false; d@0: } else { d@0: return true; d@0: } d@0: }; d@0: d@0: // Bindings for audioObjects d@0: d@0: // Create the top div for the Title element d@0: var titleAttr = specification.title; d@0: var title = document.createElement('div'); d@0: title.className = "title"; d@0: title.align = "center"; d@0: var titleSpan = document.createElement('span'); d@0: d@0: // Set title to that defined in XML, else set to default d@0: if (titleAttr != undefined) { d@0: titleSpan.textContent = titleAttr; d@0: } else { d@0: titleSpan.textContent = 'Listening test'; d@0: } d@0: // Insert the titleSpan element into the title div element. d@0: title.appendChild(titleSpan); d@0: d@0: var pagetitle = document.createElement('div'); d@0: pagetitle.className = "pageTitle"; d@0: pagetitle.align = "center"; d@0: var titleSpan = document.createElement('span'); d@0: titleSpan.id = "pageTitle"; d@0: pagetitle.appendChild(titleSpan); d@0: d@0: // Create Interface buttons! d@0: var interfaceButtons = document.createElement('div'); d@0: interfaceButtons.id = 'interface-buttons'; d@0: d@0: // Create playback start/stop points d@0: var playback = document.createElement("button"); d@0: playback.innerHTML = 'Stop'; d@0: playback.id = 'playback-button'; d@0: // onclick function. Check if it is playing or not, call the correct function in the d@0: // audioEngine, change the button text to reflect the next state. d@0: playback.onclick = function() { d@0: if (audioEngineContext.status == 1) { d@0: audioEngineContext.stop(); d@0: this.innerHTML = 'Stop'; d@0: var time = audioEngineContext.timer.getTestTime(); d@0: console.log('Stopped at ' + time); // DEBUG/SAFETY d@0: } d@0: }; d@0: // Create Submit (save) button d@0: var submit = document.createElement("button"); d@0: submit.innerHTML = 'Submit'; d@0: submit.onclick = buttonSubmitClick; d@0: submit.id = 'submit-button'; d@0: // Append the interface buttons into the interfaceButtons object. d@0: interfaceButtons.appendChild(playback); d@0: interfaceButtons.appendChild(submit); d@0: d@0: // Now create the slider and HTML5 canvas boxes d@0: d@0: // Create the div box to center align d@0: var sliderBox = document.createElement('div'); d@0: sliderBox.className = 'sliderCanvasDiv'; d@0: sliderBox.id = 'sliderCanvasHolder'; d@0: d@0: // Create the slider box to hold the slider elements d@0: var canvas = document.createElement('div'); d@0: canvas.id = 'slider'; d@0: canvas.align = "left"; d@0: canvas.addEventListener('dragover',function(event){ d@0: event.preventDefault(); d@0: return false; d@0: },false); d@0: var sliderMargin = document.createAttribute('marginsize'); d@0: sliderMargin.nodeValue = 42; // Set default margins to 42px either side d@0: // Must have a known EXACT width, as this is used later to determine the ratings d@0: var w = (Number(sliderMargin.nodeValue)+8)*2; d@0: canvas.style.width = width - w +"px"; d@0: canvas.style.marginLeft = sliderMargin.nodeValue +'px'; d@0: canvas.setAttributeNode(sliderMargin); d@0: sliderBox.appendChild(canvas); d@0: d@0: // Create the div to hold any scale objects d@0: var scale = document.createElement('div'); d@0: scale.className = 'sliderScale'; d@0: scale.id = 'sliderScaleHolder'; d@0: scale.align = 'left'; d@0: sliderBox.appendChild(scale); d@0: d@0: // Global parent for the comment boxes on the page d@0: var feedbackHolder = document.createElement('div'); d@0: feedbackHolder.id = 'feedbackHolder'; d@0: d@0: testContent.style.zIndex = 1; d@0: interfaceContext.insertPoint.innerHTML = null; // Clear the current schema d@0: d@0: // Inject into HTML d@0: testContent.appendChild(title); // Insert the title d@0: testContent.appendChild(pagetitle); d@0: testContent.appendChild(interfaceButtons); d@0: testContent.appendChild(sliderBox); d@0: testContent.appendChild(feedbackHolder); d@0: interfaceContext.insertPoint.appendChild(testContent); d@0: d@0: // Load the full interface d@0: testState.initialise(); d@0: testState.advanceState(); d@0: d@0: } d@0: d@0: function loadTest(audioHolderObject) d@0: { d@0: d@0: // Reset audioEngineContext.Metric globals for new test d@0: audioEngineContext.newTestPage(); d@0: d@0: var id = audioHolderObject.id; d@0: d@0: var feedbackHolder = document.getElementById('feedbackHolder'); d@0: var canvas = document.getElementById('slider'); d@0: feedbackHolder.innerHTML = null; d@0: canvas.innerHTML = null; d@0: d@0: var interfaceObj = audioHolderObject.interfaces; d@0: for (var k=0; k'; d@0: var inject = document.getElementById('interface-buttons'); d@0: inject.appendChild(pagecountHolder); d@0: } d@0: } d@0: } d@0: // Setup question title d@0: d@0: var commentBoxPrefix = "Comment on track"; d@0: if (interfaceObj.length != 0) { d@0: interfaceObj = interfaceObj[0]; d@0: var titleNode = interfaceObj.title; d@0: if (titleNode != undefined) d@0: { d@0: document.getElementById('pageTitle').textContent = titleNode; d@0: } d@0: var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2); d@0: var offset = Number(document.getElementById('slider').attributes['marginsize'].value); d@0: var scale = document.getElementById('sliderScaleHolder'); d@0: scale.innerHTML = null; d@0: $(interfaceObj.scale).each(function(index,scaleObj){ d@0: var value = document.createAttribute('value'); d@0: var position = Number(scaleObj[0])*0.01; d@0: value.nodeValue = position; d@0: var pixelPosition = (position*positionScale)+offset; d@0: var scaleDOM = document.createElement('span'); d@0: scaleDOM.textContent = scaleObj[1]; d@0: scale.appendChild(scaleDOM); d@0: scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px'; d@0: scaleDOM.setAttributeNode(value); d@0: }); d@0: d@0: if (interfaceObj.commentBoxPrefix != undefined) { d@0: commentBoxPrefix = interfaceObj.commentBoxPrefix; d@0: } d@0: } d@0: d@0: /// CHECK FOR SAMPLE RATE COMPATIBILITY d@0: if (audioHolderObject.sampleRate != undefined) { d@0: if (Number(audioHolderObject.sampleRate) != audioContext.sampleRate) { d@0: 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.'; d@0: alert(errStr); d@0: return; d@0: } d@0: } d@0: d@0: var commentShow = audioHolderObject.elementComments; d@0: d@0: var loopPlayback = audioHolderObject.loop; d@0: d@0: audioEngineContext.loopPlayback = loopPlayback; d@0: // Create AudioEngine bindings for playback d@0: audioEngineContext.selectedTrack = function(id) { d@0: console.log('Deprecated'); d@0: }; d@0: d@0: currentTestHolder = document.createElement('audioHolder'); d@0: currentTestHolder.id = audioHolderObject.id; d@0: currentTestHolder.repeatCount = audioHolderObject.repeatCount; d@0: d@0: // Delete any previous audioObjects associated with the audioEngine d@0: audioEngineContext.audioObjects = []; d@0: interfaceContext.deleteCommentBoxes(); d@0: interfaceContext.deleteCommentQuestions(); d@0: d@0: // Find all the audioElements from the audioHolder d@0: $(audioHolderObject.audioElements).each(function(index,element){ d@0: // Find URL of track d@0: // In this jQuery loop, variable 'this' holds the current audioElement. d@0: d@0: // Now load each audio sample. First create the new track by passing the full URL d@0: var trackURL = audioHolderObject.hostURL + element.url; d@0: var audioObject = audioEngineContext.newTrack(element); d@0: d@0: var node = interfaceContext.createCommentBox(audioObject); d@0: d@0: // Create a slider per track d@0: audioObject.interfaceDOM = new sliderObject(audioObject); d@0: d@0: // Distribute it randomnly d@0: var w = window.innerWidth - (offset+8)*2; d@0: w = Math.random()*w; d@0: w = Math.floor(w+(offset+8)); d@0: audioObject.interfaceDOM.trackSliderObj.style.left = w+'px'; d@0: d@0: canvas.appendChild(audioObject.interfaceDOM.trackSliderObj); d@0: audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj)); d@0: d@0: }); d@0: if (commentShow) { d@0: interfaceContext.showCommentBoxes(feedbackHolder,true); d@0: } d@0: d@0: $(audioHolderObject.commentQuestions).each(function(index,element) { d@0: var node = interfaceContext.createCommentQuestion(element); d@0: feedbackHolder.appendChild(node.holder); d@0: }); d@0: d@0: // Construct outside reference; d@0: if (audioHolderObject.outsideReference != null) { d@0: var outsideReferenceHolder = document.createElement('div'); d@0: outsideReferenceHolder.id = 'outside-reference'; d@0: outsideReferenceHolderspan = document.createElement('span'); d@0: outsideReferenceHolderspan.textContent = 'Reference'; d@0: outsideReferenceHolder.appendChild(outsideReferenceHolderspan); d@0: d@0: var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference); d@0: d@0: outsideReferenceHolder.onclick = function() d@0: { d@0: audioEngineContext.play(audioEngineContext.audioObjects.length-1); d@0: $('.track-slider').removeClass('track-slider-playing'); d@0: $('.comment-div').removeClass('comment-box-playing'); d@0: if (event.srcElement.nodeName == 'DIV') { d@0: $(event.srcElement).addClass('track-slider-playing'); d@0: } else { d@0: $(event.srcElement.parentElement).addClass('track-slider-playing'); d@0: } d@0: }; d@0: d@0: document.getElementById('interface-buttons').appendChild(outsideReferenceHolder); d@0: } d@0: d@0: d@0: //testWaitIndicator(); d@0: } d@0: d@0: function sliderObject(audioObject) { d@0: // Create a new slider object; d@0: this.parent = audioObject; d@0: this.trackSliderObj = document.createElement('div'); d@0: this.trackSliderObj.className = 'track-slider track-slider-disabled'; d@0: this.trackSliderObj.id = 'track-slider-'+audioObject.id; d@0: d@0: this.trackSliderObj.setAttribute('trackIndex',audioObject.id); d@0: this.trackSliderObj.innerHTML = ''+audioObject.id+''; d@0: this.trackSliderObj.draggable = true; d@0: this.trackSliderObj.ondragend = dragEnd; d@0: d@0: // Onclick, switch playback to that track d@0: this.trackSliderObj.onclick = function() { d@0: // Start the test on first click, that way timings are more accurate. d@0: audioEngineContext.play(); d@0: if (audioEngineContext.audioObjectsReady) { d@0: // Cannot continue to issue play command until audioObjects reported as ready! d@0: // Get the track ID from the object ID d@0: var element; d@0: if (event.srcElement.nodeName == "SPAN") { d@0: element = event.srcElement.parentNode; d@0: } else { d@0: element = event.srcElement; d@0: } d@0: var id = Number(element.attributes['trackIndex'].value); d@0: //audioEngineContext.metric.sliderPlayed(id); d@0: audioEngineContext.play(id); d@0: // Currently playing track red, rest green d@0: d@0: //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; d@0: $('.track-slider').removeClass('track-slider-playing'); d@0: $(element).addClass('track-slider-playing'); d@0: $('.comment-div').removeClass('comment-box-playing'); d@0: $('#comment-div-'+id).addClass('comment-box-playing'); d@0: var outsideReference = document.getElementById('outside-reference'); d@0: if (outsideReference != undefined) d@0: $(outsideReference).removeClass('track-slider-playing'); d@0: } d@0: }; d@0: d@0: this.enable = function() { d@0: if (this.parent.state == 1) d@0: { d@0: $(this.trackSliderObj).removeClass('track-slider-disabled'); d@0: } d@0: }; d@0: d@0: this.exportXMLDOM = function(audioObject) { d@0: // Called by the audioObject holding this element. Must be present d@0: var node = document.createElement('value'); d@0: node.textContent = convSliderPosToRate(this.trackSliderObj); d@0: return node; d@0: }; d@0: this.getValue = function() { d@0: return convSliderPosToRate(this.trackSliderObj); d@0: }; d@0: } d@0: d@0: function dragEnd(ev) { d@0: // Function call when a div has been dropped d@0: var slider = document.getElementById('slider'); d@0: var marginSize = Number(slider.attributes['marginsize'].value); d@0: var w = slider.style.width; d@0: w = Number(w.substr(0,w.length-2)); d@0: var x = ev.x; d@0: if (x >= marginSize && x < w+marginSize) { d@0: this.style.left = (x)+'px'; d@0: } else { d@0: if (x