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