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