n@921: /** n@921: * core.js n@921: * n@921: * Main script to run, calls all other core functions and manages loading/store to backend. n@921: * Also contains all global variables. n@921: */ n@921: n@921: /* create the web audio API context and store in audioContext*/ n@921: var audioContext; // Hold the browser web audio API n@921: var projectXML; // Hold the parsed setup XML n@921: var popup; // Hold the interfacePopup object n@921: var testState; n@921: var currentState; // Keep track of the current state (pre/post test, which test, final test? first test?) n@921: var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order n@921: var audioEngineContext; // The custome AudioEngine object n@921: var projectReturn; // Hold the URL for the return n@921: n@921: n@921: // Add a prototype to the bufferSourceNode to reference to the audioObject holding it n@921: AudioBufferSourceNode.prototype.owner = undefined; n@921: n@921: window.onload = function() { n@921: // Function called once the browser has loaded all files. n@921: // This should perform any initial commands such as structure / loading documents n@921: n@921: // Create a web audio API context n@921: // Fixed for cross-browser support n@921: var AudioContext = window.AudioContext || window.webkitAudioContext; n@921: audioContext = new AudioContext; n@921: n@921: // Create test state n@921: testState = new stateMachine(); n@921: n@921: // Create the audio engine object n@921: audioEngineContext = new AudioEngine(); n@921: n@921: // Create the popup interface object n@921: popup = new interfacePopup(); n@921: }; n@921: n@921: function interfacePopup() { n@921: // Creates an object to manage the popup n@921: this.popup = null; n@921: this.popupContent = null; n@921: this.popupButton = null; n@921: this.popupOptions = null; n@921: this.currentIndex = null; n@921: this.responses = null; n@921: this.createPopup = function(){ n@921: // Create popup window interface n@921: var insertPoint = document.getElementById("topLevelBody"); n@921: var blank = document.createElement('div'); n@921: blank.className = 'testHalt'; n@921: n@921: this.popup = document.createElement('div'); n@921: this.popup.id = 'popupHolder'; n@921: this.popup.className = 'popupHolder'; n@921: this.popup.style.position = 'absolute'; n@921: this.popup.style.left = (window.innerWidth/2)-250 + 'px'; n@921: this.popup.style.top = (window.innerHeight/2)-125 + 'px'; n@921: n@921: this.popupContent = document.createElement('div'); n@921: this.popupContent.id = 'popupContent'; n@921: this.popupContent.style.marginTop = '25px'; n@921: this.popupContent.align = 'center'; n@921: this.popup.appendChild(this.popupContent); n@921: n@921: this.popupButton = document.createElement('button'); n@921: this.popupButton.className = 'popupButton'; n@921: this.popupButton.innerHTML = 'Next'; n@921: this.popupButton.onclick = function(){popup.buttonClicked();}; n@921: insertPoint.appendChild(this.popup); n@921: insertPoint.appendChild(blank); n@921: }; n@921: n@921: this.showPopup = function(){ n@921: if (this.popup == null || this.popup == undefined) { n@921: this.createPopup(); n@921: } n@921: this.popup.style.zIndex = 3; n@921: this.popup.style.visibility = 'visible'; n@921: var blank = document.getElementsByClassName('testHalt')[0]; n@921: blank.style.zIndex = 2; n@921: blank.style.visibility = 'visible'; n@921: }; n@921: n@921: this.hidePopup = function(){ n@921: this.popup.style.zIndex = -1; n@921: this.popup.style.visibility = 'hidden'; n@921: var blank = document.getElementsByClassName('testHalt')[0]; n@921: blank.style.zIndex = -2; n@921: blank.style.visibility = 'hidden'; n@921: }; n@921: n@921: this.postNode = function() { n@921: // This will take the node from the popupOptions and display it n@921: var node = this.popupOptions[this.currentIndex]; n@921: this.popupContent.innerHTML = null; n@921: if (node.nodeName == 'statement') { n@921: var span = document.createElement('span'); n@921: span.textContent = node.textContent; n@921: this.popupContent.appendChild(span); n@921: } else if (node.nodeName == 'question') { n@921: var span = document.createElement('span'); n@921: span.textContent = node.textContent; n@921: var textArea = document.createElement('textarea'); n@921: var br = document.createElement('br'); n@921: this.popupContent.appendChild(span); n@921: this.popupContent.appendChild(br); n@921: this.popupContent.appendChild(textArea); n@921: this.popupContent.childNodes[2].focus(); n@921: } n@921: this.popupContent.appendChild(this.popupButton); n@921: }; n@921: n@921: this.initState = function(node) { n@921: //Call this with your preTest and postTest nodes when needed to n@921: // initialise the popup procedure. n@921: this.popupOptions = $(node).children(); n@921: if (this.popupOptions.length > 0) { n@921: if (node.nodeName == 'preTest' || node.nodeName == 'PreTest') { n@921: this.responses = document.createElement('PreTest'); n@921: } else if (node.nodeName == 'postTest' || node.nodeName == 'PostTest') { n@921: this.responses = document.createElement('PostTest'); n@921: } else { n@921: console.log ('WARNING - popup node neither pre or post!'); n@921: this.responses = document.createElement('responses'); n@921: } n@921: this.currentIndex = 0; n@921: this.showPopup(); n@921: this.postNode(); n@921: } n@921: }; n@921: n@921: this.buttonClicked = function() { n@921: // Each time the popup button is clicked! n@921: var node = this.popupOptions[this.currentIndex]; n@921: if (node.nodeName == 'question') { n@921: // Must extract the question data n@921: var mandatory = node.attributes['mandatory']; n@921: if (mandatory == undefined) { n@921: mandatory = false; n@921: } else { n@921: if (mandatory.value == 'true'){mandatory = true;} n@921: else {mandatory = false;} n@921: } n@921: var textArea = $(popup.popupContent).find('textarea')[0]; n@921: if (mandatory == true && textArea.value.length == 0) { n@921: alert('This question is mandatory'); n@921: return; n@921: } else { n@921: // Save the text content n@921: var hold = document.createElement('comment'); n@921: hold.id = node.attributes['id'].value; n@921: hold.innerHTML = textArea.value; n@921: console.log("Question: "+ node.textContent); n@921: console.log("Question Response: "+ textArea.value); n@921: this.responses.appendChild(hold); n@921: } n@921: } n@921: this.currentIndex++; n@921: if (this.currentIndex < this.popupOptions.length) { n@921: this.postNode(); n@921: } else { n@921: // Reached the end of the popupOptions n@921: this.hidePopup(); n@921: if (this.responses.nodeName == testState.stateResults[testState.stateIndex].nodeName) { n@921: testState.stateResults[testState.stateIndex] = this.responses; n@921: } else { n@921: testState.stateResults[testState.stateIndex].appendChild(this.responses); n@921: } n@921: advanceState(); n@921: } n@921: }; n@921: } n@921: n@921: function advanceState() n@921: { n@921: // Just for complete clarity n@921: testState.advanceState(); n@921: } n@921: n@921: function stateMachine() n@921: { n@921: // Object prototype for tracking and managing the test state n@921: this.stateMap = []; n@921: this.stateIndex = null; n@921: this.currentStateMap = []; n@921: this.currentIndex = null; n@921: this.currentTestId = 0; n@921: this.stateResults = []; n@921: this.timerCallBackHolders = null; n@921: this.initialise = function(){ n@921: if (this.stateMap.length > 0) { n@921: if(this.stateIndex != null) { n@921: console.log('NOTE - State already initialise'); n@921: } n@921: this.stateIndex = -1; n@921: var that = this; n@921: for (var id=0; id= this.stateMap.length) { n@921: console.log('Test Completed'); n@921: createProjectSave(projectReturn); n@921: } else { n@921: this.currentStateMap = this.stateMap[this.stateIndex]; n@921: if (this.currentStateMap.nodeName == "audioHolder") { n@921: console.log('Loading test page'); n@921: loadTest(this.currentStateMap); n@921: this.initialiseInnerState(this.currentStateMap); n@921: } else if (this.currentStateMap.nodeName == "PreTest" || this.currentStateMap.nodeName == "PostTest") { n@921: if (this.currentStateMap.childElementCount >= 1) { n@921: popup.initState(this.currentStateMap); n@921: } else { n@921: this.advanceState(); n@921: } n@921: } else { n@921: this.advanceState(); n@921: } n@921: } n@921: } else { n@921: this.advanceInnerState(); n@921: } n@921: }; n@921: n@921: this.testPageCompleted = function(store, testXML, testId) { n@921: // Function called each time a test page has been completed n@921: // Can be used to over-rule default behaviour n@921: n@921: pageXMLSave(store, testXML, testId); n@921: } n@921: n@921: this.initialiseInnerState = function(testXML) { n@921: // Parses the received testXML for pre and post test options n@921: this.currentStateMap = []; n@921: var preTest = $(testXML).find('PreTest')[0]; n@921: var postTest = $(testXML).find('PostTest')[0]; n@921: if (preTest == undefined) {preTest = document.createElement("preTest");} n@921: if (postTest == undefined){postTest= document.createElement("postTest");} n@921: this.currentStateMap.push(preTest); n@921: this.currentStateMap.push(testXML); n@921: this.currentStateMap.push(postTest); n@921: this.currentIndex = -1; n@921: this.advanceInnerState(); n@921: } n@921: n@921: this.advanceInnerState = function() { n@921: this.currentIndex++; n@921: if (this.currentIndex >= this.currentStateMap.length) { n@921: this.currentIndex = null; n@921: this.currentStateMap = this.stateMap[this.stateIndex]; n@921: this.advanceState(); n@921: } else { n@921: if (this.currentStateMap[this.currentIndex].nodeName == "audioHolder") { n@921: console.log("Loading test page"+this.currentTestId); n@921: } else if (this.currentStateMap[this.currentIndex].nodeName == "PreTest") { n@921: popup.initState(this.currentStateMap[this.currentIndex]); n@921: } else if (this.currentStateMap[this.currentIndex].nodeName == "PostTest") { n@921: popup.initState(this.currentStateMap[this.currentIndex]); n@921: } else { n@921: this.advanceInnerState(); n@921: } n@921: } n@921: } n@921: n@921: this.previousState = function(){}; n@921: } n@921: n@921: function testEnded(testId) n@921: { n@921: pageXMLSave(testId); n@921: if (testXMLSetups.length-1 > testId) n@921: { n@921: // Yes we have another test to perform n@921: testId = (Number(testId)+1); n@921: currentState = 'testRun-'+testId; n@921: loadTest(testId); n@921: } else { n@921: console.log('Testing Completed!'); n@921: currentState = 'postTest'; n@921: // Check for any post tests n@921: var xmlSetup = projectXML.find('setup'); n@921: var postTest = xmlSetup.find('PostTest')[0]; n@921: popup.initState(postTest); n@921: } n@921: } n@921: n@921: function loadProjectSpec(url) { n@921: // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data n@921: // If url is null, request client to upload project XML document n@921: var r = new XMLHttpRequest(); n@921: r.open('GET',url,true); n@921: r.onload = function() { n@921: loadProjectSpecCallback(r.response); n@921: }; n@921: r.send(); n@921: }; n@921: n@921: function loadProjectSpecCallback(response) { n@921: // Function called after asynchronous download of XML project specification n@921: var decode = $.parseXML(response); n@921: projectXML = $(decode); n@921: n@921: // Now extract the setup tag n@921: var xmlSetup = projectXML.find('setup'); n@921: // Detect the interface to use and load the relevant javascripts. n@921: var interfaceType = xmlSetup[0].attributes['interface']; n@921: var interfaceJS = document.createElement('script'); n@921: interfaceJS.setAttribute("type","text/javascript"); n@921: if (interfaceType.value == 'APE') { n@921: interfaceJS.setAttribute("src","ape.js"); n@921: n@921: // APE comes with a css file n@921: var css = document.createElement('link'); n@921: css.rel = 'stylesheet'; n@921: css.type = 'text/css'; n@921: css.href = 'ape.css'; n@921: n@921: document.getElementsByTagName("head")[0].appendChild(css); n@921: } n@921: document.getElementsByTagName("head")[0].appendChild(interfaceJS); n@921: n@921: // Define window callbacks for interface n@921: window.onresize = function(event){resizeWindow(event);}; n@921: } n@921: n@921: function createProjectSave(destURL) { n@921: // Save the data from interface into XML and send to destURL n@921: // If destURL is null then download XML in client n@921: // Now time to render file locally n@921: var xmlDoc = interfaceXMLSave(); n@921: var parent = document.createElement("div"); n@921: parent.appendChild(xmlDoc); n@921: var file = [parent.innerHTML]; n@921: if (destURL == "null" || destURL == undefined) { n@921: var bb = new Blob(file,{type : 'application/xml'}); n@921: var dnlk = window.URL.createObjectURL(bb); n@921: var a = document.createElement("a"); n@921: a.hidden = ''; n@921: a.href = dnlk; n@921: a.download = "save.xml"; n@921: a.textContent = "Save File"; n@921: n@921: var submitDiv = document.getElementById('download-point'); n@921: submitDiv.appendChild(a); n@921: popup.showPopup(); n@921: popup.popupContent.innerHTML = null; n@921: popup.popupContent.appendChild(submitDiv) n@921: } else { n@921: var xmlhttp = new XMLHttpRequest; n@921: xmlhttp.open("POST",destURL,true); n@921: xmlhttp.setRequestHeader('Content-Type', 'text/xml'); n@921: xmlhttp.onerror = function(){ n@921: console.log('Error saving file to server! Presenting download locally'); n@921: createProjectSave(null); n@921: }; n@921: xmlhttp.send(file); n@921: if (xmlhttp.status == 404) { n@921: createProjectSave(null); n@921: } n@921: } n@921: return submitDiv; n@921: } n@921: n@921: // Only other global function which must be defined in the interface class. Determines how to create the XML document. n@921: function interfaceXMLSave(){ n@921: // Create the XML string to be exported with results n@921: var xmlDoc = document.createElement("BrowserEvaluationResult"); n@921: xmlDoc.appendChild(returnDateNode()); n@921: for (var i=0; i n@921: // DD/MM/YY n@921: // n@921: // n@921: var dateTime = new Date(); n@921: var year = document.createAttribute('year'); n@921: var month = document.createAttribute('month'); n@921: var day = document.createAttribute('day'); n@921: var hour = document.createAttribute('hour'); n@921: var minute = document.createAttribute('minute'); n@921: var secs = document.createAttribute('secs'); n@921: n@921: year.nodeValue = dateTime.getFullYear(); n@921: month.nodeValue = dateTime.getMonth()+1; n@921: day.nodeValue = dateTime.getDate(); n@921: hour.nodeValue = dateTime.getHours(); n@921: minute.nodeValue = dateTime.getMinutes(); n@921: secs.nodeValue = dateTime.getSeconds(); n@921: n@921: var hold = document.createElement("datetime"); n@921: var date = document.createElement("date"); n@921: date.textContent = year.nodeValue+'/'+month.nodeValue+'/'+day.nodeValue; n@921: var time = document.createElement("time"); n@921: time.textContent = hour.nodeValue+':'+minute.nodeValue+':'+secs.nodeValue; n@921: n@921: date.setAttributeNode(year); n@921: date.setAttributeNode(month); n@921: date.setAttributeNode(day); n@921: time.setAttributeNode(hour); n@921: time.setAttributeNode(minute); n@921: time.setAttributeNode(secs); n@921: n@921: hold.appendChild(date); n@921: hold.appendChild(time); n@921: return hold n@921: n@921: } n@921: n@921: function testWaitIndicator() { n@921: if (audioEngineContext.checkAllReady() == false) { n@921: var hold = document.createElement("div"); n@921: hold.id = "testWaitIndicator"; n@921: hold.className = "indicator-box"; n@921: var span = document.createElement("span"); n@921: span.textContent = "Please wait! Elements still loading"; n@921: hold.appendChild(span); n@921: var body = document.getElementsByTagName('body')[0]; n@921: body.appendChild(hold); n@921: testWaitTimerIntervalHolder = setInterval(function(){ n@921: var ready = audioEngineContext.checkAllReady(); n@921: if (ready) { n@921: var elem = document.getElementById('testWaitIndicator'); n@921: var body = document.getElementsByTagName('body')[0]; n@921: body.removeChild(elem); n@921: clearInterval(testWaitTimerIntervalHolder); n@921: } n@921: },500,false); n@921: } n@921: } n@921: n@921: var testWaitTimerIntervalHolder = null;