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@129: var testState; nicholas@116: var currentState; // Keep track of the current state (pre/post test, which test, final test? first test?) nicholas@129: //var testXMLSetups = []; // Hold the parsed test instances nicholas@129: //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 nicholas@129: //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 nicholas@129: //var preTestQuestions = document.createElement('PreTest'); // Store any pre-test question response nicholas@129: //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@129: // Create test state nicholas@129: testState = new stateMachine(); nicholas@129: 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@129: if (this.responses.nodeName == testState.stateResults[testState.stateIndex].nodeName) { nicholas@129: testState.stateResults[testState.stateIndex] = this.responses; nicholas@129: } else { nicholas@129: testState.stateResults[testState.stateIndex].appendChild(this.responses); nicholas@129: } nicholas@116: advanceState(); nicholas@116: } nicholas@116: } nicholas@114: } nicholas@114: nicholas@116: function advanceState() nicholas@114: { nicholas@129: // Just for complete clarity nicholas@129: testState.advanceState(); nicholas@129: } nicholas@129: nicholas@129: function stateMachine() nicholas@129: { nicholas@129: // Object prototype for tracking and managing the test state nicholas@129: this.stateMap = []; nicholas@129: this.stateIndex = null; nicholas@129: this.currentStateMap = []; nicholas@129: this.currentIndex = null; nicholas@129: this.currentTestId = 0; nicholas@129: this.stateResults = []; nicholas@135: this.timerCallBackHolders = null; nicholas@129: this.initialise = function(){ nicholas@129: if (this.stateMap.length > 0) { nicholas@129: if(this.stateIndex != null) { nicholas@129: console.log('NOTE - State already initialise'); nicholas@129: } nicholas@129: this.stateIndex = -1; nicholas@129: var that = this; nicholas@129: for (var id=0; id= this.stateMap.length) { nicholas@129: console.log('Test Completed'); nicholas@129: createProjectSave(projectReturn); nicholas@129: } else { nicholas@129: this.currentStateMap = this.stateMap[this.stateIndex]; nicholas@129: if (this.currentStateMap.nodeName == "audioHolder") { nicholas@129: console.log('Loading test page'); nicholas@129: loadTest(this.currentStateMap); nicholas@129: this.initialiseInnerState(this.currentStateMap); nicholas@129: } else if (this.currentStateMap.nodeName == "PreTest" || this.currentStateMap.nodeName == "PostTest") { nicholas@129: if (this.currentStateMap.childElementCount >= 1) { nicholas@129: popup.initState(this.currentStateMap); nicholas@129: } else { nicholas@129: this.advanceState(); nicholas@129: } nicholas@129: } else { nicholas@129: this.advanceState(); nicholas@129: } nicholas@129: } nicholas@129: } else { nicholas@129: this.advanceInnerState(); nicholas@129: } nicholas@129: }; nicholas@129: nicholas@129: this.testPageCompleted = function(store, testXML, testId) { nicholas@129: // Function called each time a test page has been completed nicholas@129: // Can be used to over-rule default behaviour nicholas@129: nicholas@129: pageXMLSave(store, testXML, testId); nicholas@129: } nicholas@129: nicholas@129: this.initialiseInnerState = function(testXML) { nicholas@129: // Parses the received testXML for pre and post test options nicholas@129: this.currentStateMap = []; nicholas@129: var preTest = $(testXML).find('PreTest')[0]; nicholas@129: var postTest = $(testXML).find('PostTest')[0]; nicholas@129: if (preTest == undefined) {preTest = document.createElement("preTest");} nicholas@129: if (postTest == undefined){postTest= document.createElement("postTest");} nicholas@129: this.currentStateMap.push(preTest); nicholas@129: this.currentStateMap.push(testXML); nicholas@129: this.currentStateMap.push(postTest); nicholas@129: this.currentIndex = -1; nicholas@129: this.advanceInnerState(); nicholas@129: } nicholas@129: nicholas@129: this.advanceInnerState = function() { nicholas@129: this.currentIndex++; nicholas@129: if (this.currentIndex >= this.currentStateMap.length) { nicholas@129: this.currentIndex = null; nicholas@129: this.currentStateMap = this.stateMap[this.stateIndex]; nicholas@129: this.advanceState(); nicholas@129: } else { nicholas@129: if (this.currentStateMap[this.currentIndex].nodeName == "audioHolder") { nicholas@129: console.log("Loading test page"+this.currentTestId); nicholas@129: } else if (this.currentStateMap[this.currentIndex].nodeName == "PreTest") { nicholas@129: popup.initState(this.currentStateMap[this.currentIndex]); nicholas@129: } else if (this.currentStateMap[this.currentIndex].nodeName == "PostTest") { nicholas@129: popup.initState(this.currentStateMap[this.currentIndex]); nicholas@129: } else { nicholas@129: this.advanceInnerState(); nicholas@129: } nicholas@116: } nicholas@114: } nicholas@129: nicholas@129: this.previousState = function(){}; 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); n@127: n@127: // Define window callbacks for interface n@127: window.onresize = function(event){resizeWindow(event);}; 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@122: var parent = document.createElement("div"); nicholas@122: parent.appendChild(xmlDoc); nicholas@122: var file = [parent.innerHTML]; nicholas@7: if (destURL == "null" || destURL == undefined) { 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@122: } else { nicholas@122: var xmlhttp = new XMLHttpRequest; nicholas@122: xmlhttp.open("POST",destURL,true); nicholas@122: xmlhttp.setRequestHeader('Content-Type', 'text/xml'); n@123: xmlhttp.onerror = function(){ n@123: console.log('Error saving file to server! Presenting download locally'); n@123: createProjectSave(null); n@123: }; nicholas@122: xmlhttp.send(file); nicholas@7: } n@43: return submitDiv; nicholas@1: } nicholas@1: nicholas@129: // Only other global function which must be defined in the interface class. Determines how to create the XML document. nicholas@129: function interfaceXMLSave(){ nicholas@129: // Create the XML string to be exported with results nicholas@129: var xmlDoc = document.createElement("BrowserEvaluationResult"); nicholas@129: xmlDoc.appendChild(returnDateNode()); nicholas@129: for (var i=0; i n@125: // DD/MM/YY n@125: // n@125: // n@125: var dateTime = new Date(); n@125: var year = document.createAttribute('year'); n@125: var month = document.createAttribute('month'); n@125: var day = document.createAttribute('day'); n@125: var hour = document.createAttribute('hour'); n@125: var minute = document.createAttribute('minute'); n@125: var secs = document.createAttribute('secs'); n@125: n@125: year.nodeValue = dateTime.getFullYear(); n@125: month.nodeValue = dateTime.getMonth()+1; n@125: day.nodeValue = dateTime.getDate(); n@125: hour.nodeValue = dateTime.getHours(); n@125: minute.nodeValue = dateTime.getMinutes(); n@125: secs.nodeValue = dateTime.getSeconds(); n@125: n@125: var hold = document.createElement("datetime"); n@125: var date = document.createElement("date"); n@125: date.textContent = year.nodeValue+'/'+month.nodeValue+'/'+day.nodeValue; n@125: var time = document.createElement("time"); n@125: time.textContent = hour.nodeValue+':'+minute.nodeValue+':'+secs.nodeValue; n@125: n@125: date.setAttributeNode(year); n@125: date.setAttributeNode(month); n@125: date.setAttributeNode(day); n@125: time.setAttributeNode(hour); n@125: time.setAttributeNode(minute); n@125: time.setAttributeNode(secs); n@125: n@125: hold.appendChild(date); n@125: hold.appendChild(time); n@125: return hold n@125: nicholas@135: } nicholas@135: nicholas@135: function testWaitIndicator() { nicholas@135: var hold = document.createElement("div"); nicholas@135: hold.id = "testWaitIndicator"; nicholas@135: hold.style.position = "absolute"; nicholas@135: hold.style.left = "100px"; nicholas@135: hold.style.top = "10px"; nicholas@135: hold.style.width = "500px"; nicholas@135: hold.style.height = "100px"; nicholas@135: hold.style.padding = "20px"; nicholas@135: hold.style.backgroundColor = "rgb(100,200,200)"; nicholas@135: hold.style.visibility = "hidden"; nicholas@135: var span = document.createElement("span"); nicholas@135: span.textContent = "Please wait! Elements still loading"; nicholas@135: hold.appendChild(span); nicholas@135: var body = document.getElementsByTagName('body')[0]; nicholas@135: body.appendChild(hold); nicholas@135: } nicholas@135: nicholas@135: var hidetestwait = null;