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