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