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