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