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