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