n@767: /** n@767: * ape.js n@767: * Create the APE interface n@767: */ n@767: n@767: n@767: // Once this is loaded and parsed, begin execution n@767: loadInterface(); n@767: n@767: var clicking = -1; n@767: n@767: function loadInterface() { n@767: n@767: // Get the dimensions of the screen available to the page n@767: var width = window.innerWidth; n@767: var height = window.innerHeight; n@767: n@767: // The injection point into the HTML page n@767: interfaceContext.insertPoint = document.getElementById("topLevelBody"); n@767: var testContent = document.createElement('div'); n@767: n@767: testContent.id = 'testContent'; n@767: n@767: n@767: // Create APE specific metric functions n@767: audioEngineContext.metric.initialiseTest = function() n@767: { n@767: }; n@767: n@767: audioEngineContext.metric.sliderMoved = function() n@767: { n@767: var id = this.data; n@767: this.data = -1; n@767: var position = convSliderPosToRate(id); n@767: console.log('slider ' + id + ': '+ position + ' (' + time + ')'); // DEBUG/SAFETY: show position and slider id n@767: if (audioEngineContext.timer.testStarted) n@767: { n@767: audioEngineContext.audioObjects[id].metric.moved(time,position); n@767: } n@767: }; n@767: n@767: audioEngineContext.metric.sliderPlayed = function(id) n@767: { n@767: var time = audioEngineContext.timer.getTestTime(); n@767: if (audioEngineContext.timer.testStarted) n@767: { n@767: if (this.lastClicked >= 0) n@767: { n@767: audioEngineContext.audioObjects[this.lastClicked].metric.listening(time); n@767: } n@767: this.lastClicked = id; n@767: audioEngineContext.audioObjects[id].metric.listening(time); n@767: } n@767: console.log('slider ' + id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id n@767: }; n@767: n@767: // Bindings for interfaceContext n@767: Interface.prototype.checkAllPlayed = function() n@767: { n@767: hasBeenPlayed = audioEngineContext.checkAllPlayed(); n@767: if (hasBeenPlayed.length > 0) // if a fragment has not been played yet n@767: { n@767: str = ""; n@767: if (hasBeenPlayed.length > 1) { n@767: for (var i=0; i 1) { n@767: var str = ""; n@767: for (var i=0; i 1) { n@767: var str = ""; n@767: for (var i=0; i maxRanking) { maxRanking = ranking;} n@767: } n@767: } n@767: if (minRanking > minScale || maxRanking < maxScale) { n@767: alert('Please use the full width of the scale'); n@767: return false; n@767: } else { n@767: return true; n@767: } n@767: }; n@767: n@767: Interface.prototype.objectSelected = null; n@767: Interface.prototype.objectMoved = false; n@767: Interface.prototype.selectObject = function(object) n@767: { n@767: if (this.objectSelected == null) n@767: { n@767: this.objectSelected = object; n@767: this.objectMoved = false; n@767: } n@767: }; n@767: Interface.prototype.moveObject = function() n@767: { n@767: if (this.objectMoved == false) n@767: { n@767: this.objectMoved = true; n@767: } n@767: }; n@767: Interface.prototype.releaseObject = function() n@767: { n@767: this.objectSelected = null; n@767: this.objectMoved = false; n@767: }; n@767: Interface.prototype.getSelectedObject = function() n@767: { n@767: return this.objectSelected; n@767: }; n@767: Interface.prototype.hasSelectedObjectMoved = function() n@767: { n@767: return this.objectMoved; n@767: }; n@767: n@767: // Bindings for audioObjects n@767: n@767: // Create the top div for the Title element n@767: var titleAttr = specification.title; n@767: var title = document.createElement('div'); n@767: title.className = "title"; n@767: title.align = "center"; n@767: var titleSpan = document.createElement('span'); n@767: n@767: // Set title to that defined in XML, else set to default n@767: if (titleAttr != undefined) { n@767: titleSpan.textContent = titleAttr; n@767: } else { n@767: titleSpan.textContent = 'Listening test'; n@767: } n@767: // Insert the titleSpan element into the title div element. n@767: title.appendChild(titleSpan); n@767: n@767: var pagetitle = document.createElement('div'); n@767: pagetitle.className = "pageTitle"; n@767: pagetitle.align = "center"; n@767: var titleSpan = document.createElement('span'); n@767: titleSpan.id = "pageTitle"; n@767: pagetitle.appendChild(titleSpan); n@767: n@767: // Create Interface buttons! n@767: var interfaceButtons = document.createElement('div'); n@767: interfaceButtons.id = 'interface-buttons'; n@767: n@767: // Create playback start/stop points n@767: var playback = document.createElement("button"); n@767: playback.innerHTML = 'Stop'; n@767: playback.id = 'playback-button'; n@767: // onclick function. Check if it is playing or not, call the correct function in the n@767: // audioEngine, change the button text to reflect the next state. n@767: playback.onclick = function() { n@767: if (audioEngineContext.status == 1) { n@767: audioEngineContext.stop(); n@767: this.innerHTML = 'Stop'; n@767: var time = audioEngineContext.timer.getTestTime(); n@767: console.log('Stopped at ' + time); // DEBUG/SAFETY n@767: } n@767: }; n@767: // Create Submit (save) button n@767: var submit = document.createElement("button"); n@767: submit.innerHTML = 'Submit'; n@767: submit.onclick = buttonSubmitClick; n@767: submit.id = 'submit-button'; n@767: // Append the interface buttons into the interfaceButtons object. n@767: interfaceButtons.appendChild(playback); n@767: interfaceButtons.appendChild(submit); n@767: n@767: // Now create the slider and HTML5 canvas boxes n@767: n@767: // Create the div box to center align n@767: var sliderBox = document.createElement('div'); n@767: sliderBox.className = 'sliderCanvasDiv'; n@767: sliderBox.id = 'sliderCanvasHolder'; n@767: n@767: // Create the slider box to hold the slider elements n@767: var canvas = document.createElement('div'); n@767: canvas.id = 'slider'; n@767: canvas.align = "left"; n@767: canvas.addEventListener('dragover',function(event){ n@767: event.preventDefault(); n@767: event.dataTransfer.effectAllowed = 'none'; n@767: event.dataTransfer.dropEffect = 'copy'; n@767: return false; n@767: },false); n@767: var sliderMargin = document.createAttribute('marginsize'); n@767: sliderMargin.nodeValue = 42; // Set default margins to 42px either side n@767: // Must have a known EXACT width, as this is used later to determine the ratings n@767: var w = (Number(sliderMargin.nodeValue)+8)*2; n@767: canvas.style.width = width - w +"px"; n@767: canvas.style.marginLeft = sliderMargin.nodeValue +'px'; n@767: canvas.setAttributeNode(sliderMargin); n@767: sliderBox.appendChild(canvas); n@767: n@767: // Create the div to hold any scale objects n@767: var scale = document.createElement('div'); n@767: scale.className = 'sliderScale'; n@767: scale.id = 'sliderScaleHolder'; n@767: scale.align = 'left'; n@767: sliderBox.appendChild(scale); n@767: n@767: // Global parent for the comment boxes on the page n@767: var feedbackHolder = document.createElement('div'); n@767: feedbackHolder.id = 'feedbackHolder'; n@767: n@767: testContent.style.zIndex = 1; n@767: interfaceContext.insertPoint.innerHTML = null; // Clear the current schema n@767: n@767: // Inject into HTML n@767: testContent.appendChild(title); // Insert the title n@767: testContent.appendChild(pagetitle); n@767: testContent.appendChild(interfaceButtons); n@767: testContent.appendChild(sliderBox); n@767: testContent.appendChild(feedbackHolder); n@767: interfaceContext.insertPoint.appendChild(testContent); n@767: n@767: // Load the full interface n@767: testState.initialise(); n@767: testState.advanceState(); n@767: n@767: } n@767: n@767: function loadTest(audioHolderObject) n@767: { n@770: n@767: var id = audioHolderObject.id; n@767: n@767: var feedbackHolder = document.getElementById('feedbackHolder'); n@767: var canvas = document.getElementById('slider'); n@767: feedbackHolder.innerHTML = null; n@767: canvas.innerHTML = null; n@767: n@767: var interfaceObj = audioHolderObject.interfaces; n@767: for (var k=0; k'; n@767: var inject = document.getElementById('interface-buttons'); n@767: inject.appendChild(pagecountHolder); n@767: } n@767: } n@767: } n@767: // Setup question title n@767: n@767: var commentBoxPrefix = "Comment on track"; n@767: if (interfaceObj.length != 0) { n@767: interfaceObj = interfaceObj[0]; n@767: var titleNode = interfaceObj.title; n@767: if (titleNode != undefined) n@767: { n@767: document.getElementById('pageTitle').textContent = titleNode; n@767: } n@767: var positionScale = canvas.style.width.substr(0,canvas.style.width.length-2); n@767: var offset = Number(document.getElementById('slider').attributes['marginsize'].value); n@767: var scale = document.getElementById('sliderScaleHolder'); n@767: scale.innerHTML = null; n@767: $(interfaceObj.scale).each(function(index,scaleObj){ n@767: var value = document.createAttribute('value'); n@767: var position = Number(scaleObj[0])*0.01; n@767: value.nodeValue = position; n@767: var pixelPosition = (position*positionScale)+offset; n@767: var scaleDOM = document.createElement('span'); n@767: scaleDOM.textContent = scaleObj[1]; n@767: scale.appendChild(scaleDOM); n@767: scaleDOM.style.left = Math.floor((pixelPosition-($(scaleDOM).width()/2)))+'px'; n@767: scaleDOM.setAttributeNode(value); n@767: }); n@767: n@767: if (interfaceObj.commentBoxPrefix != undefined) { n@767: commentBoxPrefix = interfaceObj.commentBoxPrefix; n@767: } n@767: } n@767: n@767: var commentShow = audioHolderObject.elementComments; n@767: n@767: var loopPlayback = audioHolderObject.loop; n@767: n@767: currentTestHolder = document.createElement('audioHolder'); n@767: currentTestHolder.id = audioHolderObject.id; n@767: currentTestHolder.repeatCount = audioHolderObject.repeatCount; n@767: n@767: // Find all the audioElements from the audioHolder n@767: $(audioHolderObject.audioElements).each(function(index,element){ n@767: // Find URL of track n@767: // In this jQuery loop, variable 'this' holds the current audioElement. n@767: n@767: // Now load each audio sample. First create the new track by passing the full URL n@767: var trackURL = audioHolderObject.hostURL + element.url; n@767: var audioObject = audioEngineContext.newTrack(element); n@767: n@767: var node = interfaceContext.createCommentBox(audioObject); n@767: n@767: // Create a slider per track n@767: audioObject.interfaceDOM = new sliderObject(audioObject); n@767: n@767: // Distribute it randomnly n@767: var w = window.innerWidth - (offset+8)*2; n@767: w = Math.random()*w; n@767: w = Math.floor(w+(offset+8)); n@767: audioObject.interfaceDOM.trackSliderObj.style.left = w+'px'; n@767: n@767: canvas.appendChild(audioObject.interfaceDOM.trackSliderObj); n@767: audioObject.metric.initialised(convSliderPosToRate(audioObject.interfaceDOM.trackSliderObj)); n@767: n@767: }); n@767: n@767: $('.track-slider').mousedown(function(event) { n@767: interfaceContext.selectObject($(this)[0]); n@767: }); n@767: n@767: $('.track-slider').mousemove(function(event) { n@767: event.preventDefault(); n@767: }); n@767: n@767: $('#slider').mousemove(function(event) { n@767: event.preventDefault(); n@767: var obj = interfaceContext.getSelectedObject(); n@767: if (obj == null) {return;} n@767: $(obj).css("left",event.clientX + "px"); n@767: interfaceContext.moveObject(); n@767: }); n@767: n@767: $(document).mouseup(function(event){ n@767: event.preventDefault(); n@767: var obj = interfaceContext.getSelectedObject(); n@767: if (obj == null) {return;} n@767: if (interfaceContext.hasSelectedObjectMoved() == true) n@767: { n@767: var l = $(obj).css("left"); n@767: var id = obj.getAttribute('trackIndex'); n@767: var time = audioEngineContext.timer.getTestTime(); n@767: var rate = convSliderPosToRate(obj); n@767: audioEngineContext.audioObjects[id].metric.moved(time,rate); n@767: console.log("slider "+id+" moved to "+rate+' ('+time+')'); n@767: } else { n@767: var id = Number(obj.attributes['trackIndex'].value); n@767: //audioEngineContext.metric.sliderPlayed(id); n@767: audioEngineContext.play(id); n@767: // Currently playing track red, rest green n@767: n@767: //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000"; n@767: $('.track-slider').removeClass('track-slider-playing'); n@767: $(obj).addClass('track-slider-playing'); n@767: $('.comment-div').removeClass('comment-box-playing'); n@767: $('#comment-div-'+id).addClass('comment-box-playing'); n@767: var outsideReference = document.getElementById('outside-reference'); n@767: if (outsideReference != undefined) n@767: $(outsideReference).removeClass('track-slider-playing'); n@767: } n@767: interfaceContext.releaseObject(); n@767: }); n@767: n@767: n@767: if (commentShow) { n@767: interfaceContext.showCommentBoxes(feedbackHolder,true); n@767: } n@767: n@767: $(audioHolderObject.commentQuestions).each(function(index,element) { n@767: var node = interfaceContext.createCommentQuestion(element); n@767: feedbackHolder.appendChild(node.holder); n@767: }); n@767: n@767: // Construct outside reference; n@767: if (audioHolderObject.outsideReference != null) { n@767: var outsideReferenceHolder = document.createElement('div'); n@767: outsideReferenceHolder.id = 'outside-reference'; n@767: outsideReferenceHolderspan = document.createElement('span'); n@767: outsideReferenceHolderspan.textContent = 'Reference'; n@767: outsideReferenceHolder.appendChild(outsideReferenceHolderspan); n@767: n@767: var audioObject = audioEngineContext.newTrack(audioHolderObject.outsideReference); n@767: n@767: outsideReferenceHolder.onclick = function(event) n@767: { n@767: audioEngineContext.play(audioEngineContext.audioObjects.length-1); n@767: $('.track-slider').removeClass('track-slider-playing'); n@767: $('.comment-div').removeClass('comment-box-playing'); n@767: if (event.currentTarget.nodeName == 'DIV') { n@767: $(event.currentTarget).addClass('track-slider-playing'); n@767: } else { n@767: $(event.currentTarget.parentElement).addClass('track-slider-playing'); n@767: } n@767: }; n@767: n@767: document.getElementById('interface-buttons').appendChild(outsideReferenceHolder); n@767: } n@767: n@767: n@767: //testWaitIndicator(); n@767: } n@767: n@767: function sliderObject(audioObject) { n@767: // Create a new slider object; n@767: this.parent = audioObject; n@767: this.trackSliderObj = document.createElement('div'); n@767: this.trackSliderObj.className = 'track-slider track-slider-disabled'; n@767: this.trackSliderObj.id = 'track-slider-'+audioObject.id; n@767: n@767: this.trackSliderObj.setAttribute('trackIndex',audioObject.id); n@767: this.trackSliderObj.innerHTML = ''+audioObject.id+''; n@767: n@767: // Onclick, switch playback to that track n@767: n@767: this.enable = function() { n@767: if (this.parent.state == 1) n@767: { n@767: $(this.trackSliderObj).removeClass('track-slider-disabled'); n@767: } n@767: }; n@767: n@767: this.exportXMLDOM = function(audioObject) { n@767: // Called by the audioObject holding this element. Must be present n@767: var node = document.createElement('value'); n@767: node.textContent = convSliderPosToRate(this.trackSliderObj); n@767: return node; n@767: }; n@767: this.getValue = function() { n@767: return convSliderPosToRate(this.trackSliderObj); n@767: }; n@767: } n@767: n@767: function buttonSubmitClick() n@767: { n@767: var checks = testState.currentStateMap[testState.currentIndex].interfaces[0].options; n@767: var canContinue = true; n@767: n@767: // Check that the anchor and reference objects are correctly placed n@767: if (interfaceContext.checkHiddenAnchor() == false) {return;} n@767: if (interfaceContext.checkHiddenReference() == false) {return;} n@767: n@767: for (var i=0; i