nicholas@1: /** nicholas@1: * core.js nicholas@1: * nicholas@1: * Main script to run, calls all other core functions and manages loading/store to backend. nicholas@1: * Also contains all global variables. nicholas@1: */ nicholas@1: nicholas@1: /* create the web audio API context and store in audioContext*/ n@33: var audioContext; // Hold the browser web audio API n@33: var projectXML; // Hold the parsed setup XML nicholas@116: var popup; // Hold the interfacePopup object nicholas@116: var currentState; // Keep track of the current state (pre/post test, which test, final test? first test?) n@44: var testXMLSetups = []; // Hold the parsed test instances n@44: var testResultsHolders =[]; // Hold the results from each test for publishing to XML n@45: var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order n@46: var currentTestHolder; // Hold any intermediate results during test - metrics n@33: var audioEngineContext; // The custome AudioEngine object n@33: var projectReturn; // Hold the URL for the return n@33: var preTestQuestions = document.createElement('PreTest'); // Store any pre-test question response n@33: var postTestQuestions = document.createElement('PostTest'); // Store any post-test question response nicholas@1: n@57: // Add a prototype to the bufferSourceNode to reference to the audioObject holding it n@57: AudioBufferSourceNode.prototype.owner = undefined; n@57: nicholas@1: window.onload = function() { nicholas@1: // Function called once the browser has loaded all files. nicholas@1: // This should perform any initial commands such as structure / loading documents nicholas@1: nicholas@1: // Create a web audio API context nicholas@21: // Fixed for cross-browser support nicholas@21: var AudioContext = window.AudioContext || window.webkitAudioContext; nicholas@7: audioContext = new AudioContext; nicholas@1: nicholas@1: // Create the audio engine object nicholas@1: audioEngineContext = new AudioEngine(); nicholas@116: nicholas@116: // Create the popup interface object nicholas@116: popup = new interfacePopup(); n@16: }; nicholas@1: nicholas@116: function interfacePopup() { nicholas@116: // Creates an object to manage the popup nicholas@116: this.popup = null; nicholas@116: this.popupContent = null; nicholas@116: this.popupButton = null; nicholas@116: this.popupOptions = null; nicholas@116: this.currentIndex = null; nicholas@116: this.responses = null; nicholas@116: this.createPopup = function(){ nicholas@116: // Create popup window interface nicholas@116: var insertPoint = document.getElementById("topLevelBody"); nicholas@116: var blank = document.createElement('div'); nicholas@116: blank.className = 'testHalt'; nicholas@116: nicholas@116: this.popup = document.createElement('div'); nicholas@116: this.popup.id = 'popupHolder'; nicholas@116: this.popup.className = 'popupHolder'; nicholas@116: this.popup.style.position = 'absolute'; nicholas@116: this.popup.style.left = (window.innerWidth/2)-250 + 'px'; nicholas@116: this.popup.style.top = (window.innerHeight/2)-125 + 'px'; nicholas@116: nicholas@116: this.popupContent = document.createElement('div'); nicholas@116: this.popupContent.id = 'popupContent'; nicholas@116: this.popupContent.style.marginTop = '25px'; nicholas@116: this.popupContent.align = 'center'; nicholas@116: this.popup.appendChild(this.popupContent); nicholas@116: nicholas@116: this.popupButton = document.createElement('button'); nicholas@116: this.popupButton.className = 'popupButton'; nicholas@116: this.popupButton.innerHTML = 'Next'; nicholas@116: this.popupButton.onclick = function(){popup.buttonClicked();}; nicholas@116: insertPoint.appendChild(this.popup); nicholas@116: insertPoint.appendChild(blank); nicholas@116: }; nicholas@114: nicholas@116: this.showPopup = function(){ nicholas@116: if (this.popup == null || this.popup == undefined) { nicholas@116: this.createPopup(); nicholas@116: } nicholas@116: this.popup.style.zIndex = 3; nicholas@116: this.popup.style.visibility = 'visible'; nicholas@116: var blank = document.getElementsByClassName('testHalt')[0]; nicholas@116: blank.style.zIndex = 2; nicholas@116: blank.style.visibility = 'visible'; nicholas@116: }; nicholas@116: nicholas@116: this.hidePopup = function(){ nicholas@116: this.popup.style.zIndex = -1; nicholas@116: this.popup.style.visibility = 'hidden'; nicholas@116: var blank = document.getElementsByClassName('testHalt')[0]; nicholas@116: blank.style.zIndex = -2; nicholas@116: blank.style.visibility = 'hidden'; nicholas@116: }; nicholas@116: nicholas@116: this.postNode = function() { nicholas@116: // This will take the node from the popupOptions and display it nicholas@116: var node = this.popupOptions[this.currentIndex]; nicholas@116: this.popupContent.innerHTML = null; nicholas@116: if (node.nodeName == 'statement') { nicholas@116: var span = document.createElement('span'); nicholas@116: span.textContent = node.textContent; nicholas@116: this.popupContent.appendChild(span); nicholas@116: } else if (node.nodeName == 'question') { nicholas@116: var span = document.createElement('span'); nicholas@116: span.textContent = node.textContent; nicholas@116: var textArea = document.createElement('textarea'); nicholas@116: var br = document.createElement('br'); nicholas@116: this.popupContent.appendChild(span); nicholas@116: this.popupContent.appendChild(br); nicholas@116: this.popupContent.appendChild(textArea); nicholas@116: } nicholas@116: this.popupContent.appendChild(this.popupButton); nicholas@116: } nicholas@116: nicholas@116: this.initState = function(node) { nicholas@116: //Call this with your preTest and postTest nodes when needed to nicholas@116: // initialise the popup procedure. nicholas@116: this.popupOptions = $(node).children(); nicholas@116: if (this.popupOptions.length > 0) { nicholas@116: if (node.nodeName == 'preTest' || node.nodeName == 'PreTest') { nicholas@116: this.responses = document.createElement('PreTest'); nicholas@116: } else if (node.nodeName == 'postTest' || node.nodeName == 'PostTest') { nicholas@116: this.responses = document.createElement('PostTest'); nicholas@116: } else { nicholas@116: console.log ('WARNING - popup node neither pre or post!'); nicholas@116: this.responses = document.createElement('responses'); nicholas@116: } nicholas@116: this.currentIndex = 0; nicholas@116: this.showPopup(); nicholas@116: this.postNode(); nicholas@116: } nicholas@116: } nicholas@116: nicholas@116: this.buttonClicked = function() { nicholas@116: // Each time the popup button is clicked! nicholas@116: var node = this.popupOptions[this.currentIndex]; nicholas@116: if (node.nodeName == 'question') { nicholas@116: // Must extract the question data nicholas@116: var mandatory = node.attributes['mandatory']; nicholas@116: if (mandatory == undefined) { nicholas@116: mandatory = false; nicholas@116: } else { nicholas@116: if (mandatory.value == 'true'){mandatory = true;} nicholas@116: else {mandatory = false;} nicholas@116: } nicholas@116: var textArea = $(popup.popupContent).find('textarea')[0]; nicholas@116: if (mandatory == true && textArea.value.length == 0) { nicholas@116: alert('This question is mandatory'); nicholas@116: return; nicholas@116: } else { nicholas@116: // Save the text content nicholas@116: var hold = document.createElement('comment'); nicholas@116: hold.id = node.attributes['id'].value; nicholas@116: hold.innerHTML = textArea.value; nicholas@117: console.log("Question: "+ node.textContent); nicholas@117: console.log("Question Response: "+ textArea.value); nicholas@116: this.responses.appendChild(hold); nicholas@116: } nicholas@116: } nicholas@116: this.currentIndex++; nicholas@116: if (this.currentIndex < this.popupOptions.length) { nicholas@116: this.postNode(); nicholas@116: } else { nicholas@116: // Reached the end of the popupOptions nicholas@116: this.hidePopup(); nicholas@116: advanceState(); nicholas@116: } nicholas@116: } nicholas@114: } nicholas@114: nicholas@116: function advanceState() nicholas@114: { nicholas@116: console.log(currentState); nicholas@116: if (currentState == 'preTest') nicholas@116: { nicholas@116: // End of pre-test, begin the test nicholas@116: preTestQuestions = popup.responses; nicholas@116: loadTest(0); nicholas@116: } else if (currentState == 'postTest') { nicholas@116: postTestQuestions = popup.responses; nicholas@118: console.log('ALL COLLECTED!'); nicholas@118: createProjectSave(projectReturn); nicholas@116: }else if (currentState.substr(0,10) == 'testRunPre') nicholas@116: { nicholas@116: // Start the test nicholas@116: var testId = currentState.substr(11,currentState.length-10); nicholas@116: currentState = 'testRun-'+testId; nicholas@116: currentTestHolder.appendChild(popup.responses); nicholas@116: //audioEngineContext.timer.startTest(); nicholas@116: //audioEngineContext.play(); nicholas@116: } else if (currentState.substr(0,11) == 'testRunPost') nicholas@116: { nicholas@116: var testId = currentState.substr(12,currentState.length-11); nicholas@116: currentTestHolder.appendChild(popup.responses); nicholas@116: testEnded(testId); nicholas@116: } else if (currentState.substr(0,7) == 'testRun') nicholas@116: { nicholas@116: var testId = currentState.substr(8,currentState.length-7); nicholas@116: // Check if we have any post tests to perform nicholas@116: var postXML = $(testXMLSetups[testId]).find('PostTest')[0]; nicholas@116: if (postXML == undefined || postXML.childElementCount == 0) { nicholas@116: testEnded(testId); nicholas@116: } nicholas@116: else if (postXML.childElementCount > 0) nicholas@116: { nicholas@116: currentState = 'testRunPost-'+testId; nicholas@116: popup.initState(postXML); nicholas@116: } nicholas@114: } nicholas@116: console.log(currentState); nicholas@114: } nicholas@114: nicholas@116: function testEnded(testId) nicholas@114: { nicholas@116: pageXMLSave(testId); nicholas@116: if (testXMLSetups.length-1 > testId) nicholas@116: { nicholas@116: // Yes we have another test to perform nicholas@116: testId = (Number(testId)+1); nicholas@116: currentState = 'testRun-'+testId; nicholas@116: loadTest(testId); nicholas@116: } else { nicholas@116: console.log('Testing Completed!'); nicholas@116: currentState = 'postTest'; nicholas@116: // Check for any post tests nicholas@116: var xmlSetup = projectXML.find('setup'); nicholas@116: var postTest = xmlSetup.find('PostTest')[0]; nicholas@116: popup.initState(postTest); nicholas@116: } nicholas@114: } nicholas@114: nicholas@1: function loadProjectSpec(url) { nicholas@1: // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data nicholas@1: // If url is null, request client to upload project XML document nicholas@2: var r = new XMLHttpRequest(); nicholas@2: r.open('GET',url,true); nicholas@2: r.onload = function() { nicholas@2: loadProjectSpecCallback(r.response); n@16: }; nicholas@2: r.send(); n@16: }; nicholas@2: nicholas@2: function loadProjectSpecCallback(response) { nicholas@2: // Function called after asynchronous download of XML project specification nicholas@2: var decode = $.parseXML(response); nicholas@2: projectXML = $(decode); nicholas@2: nicholas@2: // Now extract the setup tag nicholas@2: var xmlSetup = projectXML.find('setup'); n@16: // Detect the interface to use and load the relevant javascripts. nicholas@2: var interfaceType = xmlSetup[0].attributes['interface']; nicholas@2: var interfaceJS = document.createElement('script'); nicholas@2: interfaceJS.setAttribute("type","text/javascript"); nicholas@2: if (interfaceType.value == 'APE') { nicholas@2: interfaceJS.setAttribute("src","ape.js"); n@33: n@33: // APE comes with a css file n@33: var css = document.createElement('link'); n@33: css.rel = 'stylesheet'; n@33: css.type = 'text/css'; n@33: css.href = 'ape.css'; n@33: n@33: document.getElementsByTagName("head")[0].appendChild(css); nicholas@2: } nicholas@2: document.getElementsByTagName("head")[0].appendChild(interfaceJS); nicholas@1: } nicholas@1: nicholas@1: function createProjectSave(destURL) { nicholas@1: // Save the data from interface into XML and send to destURL nicholas@1: // If destURL is null then download XML in client nicholas@7: // Now time to render file locally nicholas@7: var xmlDoc = interfaceXMLSave(); nicholas@7: if (destURL == "null" || destURL == undefined) { nicholas@7: var parent = document.createElement("div"); nicholas@7: parent.appendChild(xmlDoc); nicholas@7: var file = [parent.innerHTML]; nicholas@7: var bb = new Blob(file,{type : 'application/xml'}); nicholas@7: var dnlk = window.URL.createObjectURL(bb); nicholas@7: var a = document.createElement("a"); nicholas@7: a.hidden = ''; nicholas@7: a.href = dnlk; nicholas@7: a.download = "save.xml"; nicholas@7: a.textContent = "Save File"; nicholas@7: nicholas@7: var submitDiv = document.getElementById('download-point'); nicholas@7: submitDiv.appendChild(a); nicholas@118: popup.showPopup(); nicholas@118: popup.popupContent.innerHTML = null; nicholas@118: popup.popupContent.appendChild(submitDiv) nicholas@7: } n@43: return submitDiv; nicholas@1: } nicholas@1: nicholas@1: function AudioEngine() { nicholas@1: nicholas@1: // Create two output paths, the main outputGain and fooGain. nicholas@1: // Output gain is default to 1 and any items for playback route here nicholas@1: // Foo gain is used for analysis to ensure paths get processed, but are not heard nicholas@1: // because web audio will optimise and any route which does not go to the destination gets ignored. nicholas@1: this.outputGain = audioContext.createGain(); nicholas@1: this.fooGain = audioContext.createGain(); nicholas@1: this.fooGain.gain = 0; nicholas@1: nicholas@7: // Use this to detect playback state: 0 - stopped, 1 - playing nicholas@7: this.status = 0; n@113: this.audioObjectsReady = false; nicholas@7: nicholas@1: // Connect both gains to output nicholas@1: this.outputGain.connect(audioContext.destination); nicholas@1: this.fooGain.connect(audioContext.destination); nicholas@1: n@49: // Create the timer Object n@49: this.timer = new timer(); n@49: // Create session metrics n@49: this.metric = new sessionMetrics(this); n@49: n@57: this.loopPlayback = false; n@57: nicholas@1: // Create store for new audioObjects nicholas@1: this.audioObjects = []; nicholas@1: n@113: this.play = function() { n@113: // Start the timer and set the audioEngine state to playing (1) n@113: if (this.status == 0) { n@113: // Check if all audioObjects are ready n@113: if (this.audioObjectsReady == false) { n@113: this.audioObjectsReady = this.checkAllReady(); n@113: } n@113: if (this.audioObjectsReady == true) { n@113: this.timer.startTest(); n@113: this.status = 1; n@113: } n@113: } n@113: }; nicholas@1: n@113: this.stop = function() { n@113: // Send stop and reset command to all playback buffers and set audioEngine state to stopped (1) n@113: if (this.status == 1) { n@113: for (var i=0; i