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