nicholas@858: /** nicholas@858: * core.js nicholas@858: * nicholas@858: * Main script to run, calls all other core functions and manages loading/store to backend. nicholas@858: * Also contains all global variables. nicholas@858: */ nicholas@858: nicholas@858: /* create the web audio API context and store in audioContext*/ nicholas@858: var audioContext; // Hold the browser web audio API nicholas@858: var projectXML; // Hold the parsed setup XML nicholas@858: var specification; nicholas@858: var interfaceContext; nicholas@858: var popup; // Hold the interfacePopup object nicholas@858: var testState; nicholas@858: var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order nicholas@858: var audioEngineContext; // The custome AudioEngine object nicholas@858: var projectReturn; // Hold the URL for the return nicholas@858: nicholas@858: nicholas@858: // Add a prototype to the bufferSourceNode to reference to the audioObject holding it nicholas@858: AudioBufferSourceNode.prototype.owner = undefined; nicholas@858: nicholas@858: window.onload = function() { nicholas@858: // Function called once the browser has loaded all files. nicholas@858: // This should perform any initial commands such as structure / loading documents nicholas@858: nicholas@858: // Create a web audio API context nicholas@858: // Fixed for cross-browser support nicholas@858: var AudioContext = window.AudioContext || window.webkitAudioContext; nicholas@858: audioContext = new AudioContext; nicholas@858: nicholas@858: // Create test state nicholas@858: testState = new stateMachine(); nicholas@858: nicholas@858: // Create the audio engine object nicholas@858: audioEngineContext = new AudioEngine(); nicholas@858: nicholas@858: // Create the popup interface object nicholas@858: popup = new interfacePopup(); nicholas@858: nicholas@858: // Create the specification object nicholas@858: specification = new Specification(); nicholas@858: nicholas@858: // Create the interface object nicholas@858: interfaceContext = new Interface(specification); nicholas@858: }; nicholas@858: nicholas@858: function interfacePopup() { nicholas@858: // Creates an object to manage the popup nicholas@858: this.popup = null; nicholas@858: this.popupContent = null; nicholas@858: this.buttonProceed = null; nicholas@858: this.buttonPrevious = null; nicholas@858: this.popupOptions = null; nicholas@858: this.currentIndex = null; nicholas@858: this.responses = null; nicholas@858: nicholas@858: this.createPopup = function(){ nicholas@858: // Create popup window interface nicholas@858: var insertPoint = document.getElementById("topLevelBody"); nicholas@858: var blank = document.createElement('div'); nicholas@858: blank.className = 'testHalt'; nicholas@858: nicholas@858: this.popup = document.createElement('div'); nicholas@858: this.popup.id = 'popupHolder'; nicholas@858: this.popup.className = 'popupHolder'; nicholas@858: this.popup.style.position = 'absolute'; nicholas@858: this.popup.style.left = (window.innerWidth/2)-250 + 'px'; nicholas@858: this.popup.style.top = (window.innerHeight/2)-125 + 'px'; nicholas@858: nicholas@858: this.popupContent = document.createElement('div'); nicholas@858: this.popupContent.id = 'popupContent'; nicholas@858: this.popupContent.style.marginTop = '25px'; nicholas@858: this.popupContent.align = 'center'; nicholas@858: this.popup.appendChild(this.popupContent); nicholas@858: nicholas@858: this.buttonProceed = document.createElement('button'); nicholas@858: this.buttonProceed.className = 'popupButton'; nicholas@858: this.buttonProceed.style.left = '440px'; nicholas@858: this.buttonProceed.style.top = '215px'; nicholas@858: this.buttonProceed.innerHTML = 'Next'; nicholas@858: this.buttonProceed.onclick = function(){popup.proceedClicked();}; nicholas@858: nicholas@858: this.buttonPrevious = document.createElement('button'); nicholas@858: this.buttonPrevious.className = 'popupButton'; nicholas@858: this.buttonPrevious.style.left = '10px'; nicholas@858: this.buttonPrevious.style.top = '215px'; nicholas@858: this.buttonPrevious.innerHTML = 'Back'; nicholas@858: this.buttonPrevious.onclick = function(){popup.previousClick();}; nicholas@858: nicholas@858: this.popup.style.zIndex = -1; nicholas@858: this.popup.style.visibility = 'hidden'; nicholas@858: blank.style.zIndex = -2; nicholas@858: blank.style.visibility = 'hidden'; nicholas@858: insertPoint.appendChild(this.popup); nicholas@858: insertPoint.appendChild(blank); nicholas@858: }; nicholas@858: nicholas@858: this.showPopup = function(){ nicholas@858: if (this.popup == null) { nicholas@858: this.createPopup(); nicholas@858: } nicholas@858: this.popup.style.zIndex = 3; nicholas@858: this.popup.style.visibility = 'visible'; nicholas@858: var blank = document.getElementsByClassName('testHalt')[0]; nicholas@858: blank.style.zIndex = 2; nicholas@858: blank.style.visibility = 'visible'; nicholas@858: }; nicholas@858: nicholas@858: this.hidePopup = function(){ nicholas@858: this.popup.style.zIndex = -1; nicholas@858: this.popup.style.visibility = 'hidden'; nicholas@858: var blank = document.getElementsByClassName('testHalt')[0]; nicholas@858: blank.style.zIndex = -2; nicholas@858: blank.style.visibility = 'hidden'; nicholas@858: }; nicholas@858: nicholas@858: this.postNode = function() { nicholas@858: // This will take the node from the popupOptions and display it nicholas@858: var node = this.popupOptions[this.currentIndex]; nicholas@858: this.popupContent.innerHTML = null; nicholas@858: if (node.type == 'statement') { nicholas@858: var span = document.createElement('span'); nicholas@858: span.textContent = node.statement; nicholas@858: this.popupContent.appendChild(span); nicholas@858: } else if (node.type == 'question') { nicholas@858: var span = document.createElement('span'); nicholas@858: span.textContent = node.question; nicholas@858: var textArea = document.createElement('textarea'); nicholas@858: switch (node.boxsize) { nicholas@858: case 'small': nicholas@858: textArea.cols = "20"; nicholas@858: textArea.rows = "1"; nicholas@858: break; nicholas@858: case 'normal': nicholas@858: textArea.cols = "30"; nicholas@858: textArea.rows = "2"; nicholas@858: break; nicholas@858: case 'large': nicholas@858: textArea.cols = "40"; nicholas@858: textArea.rows = "5"; nicholas@858: break; nicholas@858: case 'huge': nicholas@858: textArea.cols = "50"; nicholas@858: textArea.rows = "10"; nicholas@858: break; nicholas@858: } nicholas@858: var br = document.createElement('br'); nicholas@858: this.popupContent.appendChild(span); nicholas@858: this.popupContent.appendChild(br); nicholas@858: this.popupContent.appendChild(textArea); nicholas@858: this.popupContent.childNodes[2].focus(); nicholas@858: } else if (node.type == 'checkbox') { nicholas@858: var span = document.createElement('span'); nicholas@858: span.textContent = node.statement; nicholas@858: this.popupContent.appendChild(span); nicholas@858: var optHold = document.createElement('div'); nicholas@858: optHold.id = 'option-holder'; nicholas@858: optHold.align = 'left'; nicholas@858: for (var i=0; i 0) nicholas@858: this.popupContent.appendChild(this.buttonPrevious); nicholas@858: }; nicholas@858: nicholas@858: this.initState = function(node) { nicholas@858: //Call this with your preTest and postTest nodes when needed to nicholas@858: // initialise the popup procedure. nicholas@858: this.popupOptions = node.options; nicholas@858: if (this.popupOptions.length > 0) { nicholas@858: if (node.type == 'pretest') { nicholas@858: this.responses = document.createElement('PreTest'); nicholas@858: } else if (node.type == 'posttest') { nicholas@858: this.responses = document.createElement('PostTest'); nicholas@858: } else { nicholas@858: console.log ('WARNING - popup node neither pre or post!'); nicholas@858: this.responses = document.createElement('responses'); nicholas@858: } nicholas@858: this.currentIndex = 0; nicholas@858: this.showPopup(); nicholas@858: this.postNode(); nicholas@858: } else { nicholas@858: advanceState(); nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.proceedClicked = function() { nicholas@858: // Each time the popup button is clicked! nicholas@858: var node = this.popupOptions[this.currentIndex]; nicholas@858: if (node.type == 'question') { nicholas@858: // Must extract the question data nicholas@858: var textArea = $(popup.popupContent).find('textarea')[0]; nicholas@858: if (node.mandatory == true && textArea.value.length == 0) { nicholas@858: alert('This question is mandatory'); nicholas@858: return; nicholas@858: } else { nicholas@858: // Save the text content nicholas@858: var hold = document.createElement('comment'); nicholas@858: hold.id = node.id; nicholas@858: hold.innerHTML = textArea.value; nicholas@858: console.log("Question: "+ node.question); nicholas@858: console.log("Question Response: "+ textArea.value); nicholas@858: this.responses.appendChild(hold); nicholas@858: } nicholas@858: } else if (node.type == 'checkbox') { nicholas@858: // Must extract checkbox data nicholas@858: var optHold = document.getElementById('option-holder'); nicholas@858: var hold = document.createElement('checkbox'); nicholas@858: console.log("Checkbox: "+ node.statement); nicholas@858: hold.id = node.id; nicholas@858: for (var i=0; i node.max && node.max != null) { nicholas@858: alert('Number is above the maximum value of '+node.max); nicholas@858: return; nicholas@858: } nicholas@858: var hold = document.createElement('number'); nicholas@858: hold.id = node.id; nicholas@858: hold.textContent = input.value; nicholas@858: this.responses.appendChild(hold); nicholas@858: } nicholas@858: this.currentIndex++; nicholas@858: if (this.currentIndex < this.popupOptions.length) { nicholas@858: this.postNode(); nicholas@858: } else { nicholas@858: // Reached the end of the popupOptions nicholas@858: this.hidePopup(); nicholas@858: if (this.responses.nodeName == testState.stateResults[testState.stateIndex].nodeName) { nicholas@858: testState.stateResults[testState.stateIndex] = this.responses; nicholas@858: } else { nicholas@858: testState.stateResults[testState.stateIndex].appendChild(this.responses); nicholas@858: } nicholas@858: advanceState(); nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.previousClick = function() { nicholas@858: // Triggered when the 'Back' button is clicked in the survey nicholas@858: if (this.currentIndex > 0) { nicholas@858: this.currentIndex--; nicholas@858: var node = this.popupOptions[this.currentIndex]; nicholas@858: if (node.type != 'statement') { nicholas@858: var prevResp = this.responses.childNodes[this.responses.childElementCount-1]; nicholas@858: this.responses.removeChild(prevResp); nicholas@858: } nicholas@858: this.postNode(); nicholas@858: if (node.type == 'question') { nicholas@858: this.popupContent.getElementsByTagName('textarea')[0].value = prevResp.textContent; nicholas@858: } else if (node.type == 'checkbox') { nicholas@858: var options = this.popupContent.getElementsByTagName('input'); nicholas@858: var savedOptions = prevResp.getElementsByTagName('option'); nicholas@858: for (var i=0; i 0) { nicholas@858: if(this.stateIndex != null) { nicholas@858: console.log('NOTE - State already initialise'); nicholas@858: } nicholas@858: this.stateIndex = -1; nicholas@858: var that = this; nicholas@858: var aH_pId = 0; nicholas@858: for (var id=0; id= this.stateMap.length) { nicholas@858: console.log('Test Completed'); nicholas@858: createProjectSave(specification.projectReturn); nicholas@858: } else { nicholas@858: this.currentStateMap = this.stateMap[this.stateIndex]; nicholas@858: if (this.currentStateMap.type == "audioHolder") { nicholas@858: console.log('Loading test page'); nicholas@858: loadTest(this.currentStateMap); nicholas@858: this.initialiseInnerState(this.currentStateMap); nicholas@858: } else if (this.currentStateMap.type == "pretest" || this.currentStateMap.type == "posttest") { nicholas@858: if (this.currentStateMap.options.length >= 1) { nicholas@858: popup.initState(this.currentStateMap); nicholas@858: } else { nicholas@858: this.advanceState(); nicholas@858: } nicholas@858: } else { nicholas@858: this.advanceState(); nicholas@858: } nicholas@858: } nicholas@858: } else { nicholas@858: this.advanceInnerState(); nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.testPageCompleted = function(store, testXML, testId) { nicholas@858: // Function called each time a test page has been completed nicholas@858: // Can be used to over-rule default behaviour nicholas@858: nicholas@858: pageXMLSave(store, testXML); nicholas@858: }; nicholas@858: nicholas@858: this.initialiseInnerState = function(node) { nicholas@858: // Parses the received testXML for pre and post test options nicholas@858: this.currentStateMap = []; nicholas@858: var preTest = node.preTest; nicholas@858: var postTest = node.postTest; nicholas@858: if (preTest == undefined) {preTest = document.createElement("preTest");} nicholas@858: if (postTest == undefined){postTest= document.createElement("postTest");} nicholas@858: this.currentStateMap.push(preTest); nicholas@858: this.currentStateMap.push(node); nicholas@858: this.currentStateMap.push(postTest); nicholas@858: this.currentIndex = -1; nicholas@858: this.advanceInnerState(); nicholas@858: }; nicholas@858: nicholas@858: this.advanceInnerState = function() { nicholas@858: this.currentIndex++; nicholas@858: if (this.currentIndex >= this.currentStateMap.length) { nicholas@858: this.currentIndex = null; nicholas@858: this.currentStateMap = this.stateMap[this.stateIndex]; nicholas@858: this.advanceState(); nicholas@858: } else { nicholas@858: if (this.currentStateMap[this.currentIndex].type == "audioHolder") { nicholas@858: console.log("Loading test page"+this.currentTestId); nicholas@858: } else if (this.currentStateMap[this.currentIndex].type == "pretest") { nicholas@858: popup.initState(this.currentStateMap[this.currentIndex]); nicholas@858: } else if (this.currentStateMap[this.currentIndex].type == "posttest") { nicholas@858: popup.initState(this.currentStateMap[this.currentIndex]); nicholas@858: } else { nicholas@858: this.advanceInnerState(); nicholas@858: } nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.previousState = function(){}; nicholas@858: } nicholas@858: nicholas@858: function testEnded(testId) nicholas@858: { nicholas@858: pageXMLSave(testId); nicholas@858: if (testXMLSetups.length-1 > testId) nicholas@858: { nicholas@858: // Yes we have another test to perform nicholas@858: testId = (Number(testId)+1); nicholas@858: currentState = 'testRun-'+testId; nicholas@858: loadTest(testId); nicholas@858: } else { nicholas@858: console.log('Testing Completed!'); nicholas@858: currentState = 'postTest'; nicholas@858: // Check for any post tests nicholas@858: var xmlSetup = projectXML.find('setup'); nicholas@858: var postTest = xmlSetup.find('PostTest')[0]; nicholas@858: popup.initState(postTest); nicholas@858: } nicholas@858: } nicholas@858: nicholas@858: function loadProjectSpec(url) { nicholas@858: // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data nicholas@858: // If url is null, request client to upload project XML document nicholas@858: var r = new XMLHttpRequest(); nicholas@858: r.open('GET',url,true); nicholas@858: r.onload = function() { nicholas@858: loadProjectSpecCallback(r.response); nicholas@858: }; nicholas@858: r.send(); nicholas@858: }; nicholas@858: nicholas@858: function loadProjectSpecCallback(response) { nicholas@858: // Function called after asynchronous download of XML project specification nicholas@858: //var decode = $.parseXML(response); nicholas@858: //projectXML = $(decode); nicholas@858: nicholas@858: var parse = new DOMParser(); nicholas@858: projectXML = parse.parseFromString(response,'text/xml'); nicholas@858: nicholas@858: // Build the specification nicholas@858: specification.decode(); nicholas@858: nicholas@858: testState.stateMap.push(specification.preTest); nicholas@858: nicholas@858: // New check if we need to randomise the test order nicholas@858: if (specification.randomiseOrder) nicholas@858: { nicholas@858: specification.audioHolders = randomiseOrder(specification.audioHolders); nicholas@858: } nicholas@858: nicholas@858: $(specification.audioHolders).each(function(index,elem){ nicholas@858: testState.stateMap.push(elem); nicholas@858: }); nicholas@858: nicholas@858: testState.stateMap.push(specification.postTest); nicholas@858: nicholas@858: // Obtain the metrics enabled nicholas@858: $(specification.metrics).each(function(index,node){ nicholas@858: var enabled = node.textContent; nicholas@858: switch(node.enabled) nicholas@858: { nicholas@858: case 'testTimer': nicholas@858: sessionMetrics.prototype.enableTestTimer = true; nicholas@858: break; nicholas@858: case 'elementTimer': nicholas@858: sessionMetrics.prototype.enableElementTimer = true; nicholas@858: break; nicholas@858: case 'elementTracker': nicholas@858: sessionMetrics.prototype.enableElementTracker = true; nicholas@858: break; nicholas@858: case 'elementListenTracker': nicholas@858: sessionMetrics.prototype.enableElementListenTracker = true; nicholas@858: break; nicholas@858: case 'elementInitialPosition': nicholas@858: sessionMetrics.prototype.enableElementInitialPosition = true; nicholas@858: break; nicholas@858: case 'elementFlagListenedTo': nicholas@858: sessionMetrics.prototype.enableFlagListenedTo = true; nicholas@858: break; nicholas@858: case 'elementFlagMoved': nicholas@858: sessionMetrics.prototype.enableFlagMoved = true; nicholas@858: break; nicholas@858: case 'elementFlagComments': nicholas@858: sessionMetrics.prototype.enableFlagComments = true; nicholas@858: break; nicholas@858: } nicholas@858: }); nicholas@858: nicholas@858: nicholas@858: nicholas@858: // Detect the interface to use and load the relevant javascripts. nicholas@858: var interfaceJS = document.createElement('script'); nicholas@858: interfaceJS.setAttribute("type","text/javascript"); nicholas@858: if (specification.interfaceType == 'APE') { nicholas@858: interfaceJS.setAttribute("src","ape.js"); nicholas@858: nicholas@858: // APE comes with a css file nicholas@858: var css = document.createElement('link'); nicholas@858: css.rel = 'stylesheet'; nicholas@858: css.type = 'text/css'; nicholas@858: css.href = 'ape.css'; nicholas@858: nicholas@858: document.getElementsByTagName("head")[0].appendChild(css); nicholas@858: } nicholas@858: document.getElementsByTagName("head")[0].appendChild(interfaceJS); nicholas@858: nicholas@858: // Define window callbacks for interface nicholas@858: window.onresize = function(event){resizeWindow(event);}; nicholas@858: } nicholas@858: nicholas@858: function createProjectSave(destURL) { nicholas@858: // Save the data from interface into XML and send to destURL nicholas@858: // If destURL is null then download XML in client nicholas@858: // Now time to render file locally nicholas@858: var xmlDoc = interfaceXMLSave(); nicholas@858: var parent = document.createElement("div"); nicholas@858: parent.appendChild(xmlDoc); nicholas@858: var file = [parent.innerHTML]; nicholas@858: if (destURL == "null" || destURL == undefined) { nicholas@858: var bb = new Blob(file,{type : 'application/xml'}); nicholas@858: var dnlk = window.URL.createObjectURL(bb); nicholas@858: var a = document.createElement("a"); nicholas@858: a.hidden = ''; nicholas@858: a.href = dnlk; nicholas@858: a.download = "save.xml"; nicholas@858: a.textContent = "Save File"; nicholas@858: nicholas@858: popup.showPopup(); nicholas@858: popup.popupContent.innerHTML = null; nicholas@858: popup.popupContent.appendChild(a); nicholas@858: } else { nicholas@858: var xmlhttp = new XMLHttpRequest; nicholas@858: xmlhttp.open("POST",destURL,true); nicholas@858: xmlhttp.setRequestHeader('Content-Type', 'text/xml'); nicholas@858: xmlhttp.onerror = function(){ nicholas@858: console.log('Error saving file to server! Presenting download locally'); nicholas@858: createProjectSave(null); nicholas@858: }; nicholas@858: xmlhttp.onreadystatechange = function() { nicholas@858: console.log(xmlhttp.status); nicholas@858: if (xmlhttp.status != 200 && xmlhttp.readyState == 4) { nicholas@858: createProjectSave(null); nicholas@858: } nicholas@858: }; nicholas@858: xmlhttp.send(file); nicholas@858: } nicholas@858: } nicholas@858: nicholas@858: function errorSessionDump(msg){ nicholas@858: // Create the partial interface XML save nicholas@858: // Include error node with message on why the dump occured nicholas@858: var xmlDoc = interfaceXMLSave(); nicholas@858: var err = document.createElement('error'); nicholas@858: err.textContent = msg; nicholas@858: xmlDoc.appendChild(err); nicholas@858: var parent = document.createElement("div"); nicholas@858: parent.appendChild(xmlDoc); nicholas@858: var file = [parent.innerHTML]; nicholas@858: var bb = new Blob(file,{type : 'application/xml'}); nicholas@858: var dnlk = window.URL.createObjectURL(bb); nicholas@858: var a = document.createElement("a"); nicholas@858: a.hidden = ''; nicholas@858: a.href = dnlk; nicholas@858: a.download = "save.xml"; nicholas@858: a.textContent = "Save File"; nicholas@858: nicholas@858: popup.showPopup(); nicholas@858: popup.popupContent.innerHTML = "ERROR : "+msg; nicholas@858: popup.popupContent.appendChild(a); nicholas@858: } nicholas@858: nicholas@858: // Only other global function which must be defined in the interface class. Determines how to create the XML document. nicholas@858: function interfaceXMLSave(){ nicholas@858: // Create the XML string to be exported with results nicholas@858: var xmlDoc = document.createElement("BrowserEvaluationResult"); nicholas@858: var projectDocument = specification.projectXML; nicholas@858: projectDocument.setAttribute('file-name',url); nicholas@858: xmlDoc.appendChild(projectDocument); nicholas@858: xmlDoc.appendChild(returnDateNode()); nicholas@858: for (var i=0; i nicholas@858: // DD/MM/YY nicholas@858: // nicholas@858: // nicholas@858: var dateTime = new Date(); nicholas@858: var year = document.createAttribute('year'); nicholas@858: var month = document.createAttribute('month'); nicholas@858: var day = document.createAttribute('day'); nicholas@858: var hour = document.createAttribute('hour'); nicholas@858: var minute = document.createAttribute('minute'); nicholas@858: var secs = document.createAttribute('secs'); nicholas@858: nicholas@858: year.nodeValue = dateTime.getFullYear(); nicholas@858: month.nodeValue = dateTime.getMonth()+1; nicholas@858: day.nodeValue = dateTime.getDate(); nicholas@858: hour.nodeValue = dateTime.getHours(); nicholas@858: minute.nodeValue = dateTime.getMinutes(); nicholas@858: secs.nodeValue = dateTime.getSeconds(); nicholas@858: nicholas@858: var hold = document.createElement("datetime"); nicholas@858: var date = document.createElement("date"); nicholas@858: date.textContent = year.nodeValue+'/'+month.nodeValue+'/'+day.nodeValue; nicholas@858: var time = document.createElement("time"); nicholas@858: time.textContent = hour.nodeValue+':'+minute.nodeValue+':'+secs.nodeValue; nicholas@858: nicholas@858: date.setAttributeNode(year); nicholas@858: date.setAttributeNode(month); nicholas@858: date.setAttributeNode(day); nicholas@858: time.setAttributeNode(hour); nicholas@858: time.setAttributeNode(minute); nicholas@858: time.setAttributeNode(secs); nicholas@858: nicholas@858: hold.appendChild(date); nicholas@858: hold.appendChild(time); nicholas@858: return hold nicholas@858: nicholas@858: } nicholas@858: nicholas@858: function testWaitIndicator() { nicholas@858: if (audioEngineContext.checkAllReady() == false) { nicholas@858: var hold = document.createElement("div"); nicholas@858: hold.id = "testWaitIndicator"; nicholas@858: hold.className = "indicator-box"; nicholas@858: hold.style.zIndex = 3; nicholas@858: var span = document.createElement("span"); nicholas@858: span.textContent = "Please wait! Elements still loading"; nicholas@858: hold.appendChild(span); nicholas@858: var blank = document.createElement('div'); nicholas@858: blank.className = 'testHalt'; nicholas@858: blank.id = "testHaltBlank"; nicholas@858: var body = document.getElementsByTagName('body')[0]; nicholas@858: body.appendChild(hold); nicholas@858: body.appendChild(blank); nicholas@858: testWaitTimerIntervalHolder = setInterval(function(){ nicholas@858: var ready = audioEngineContext.checkAllReady(); nicholas@858: if (ready) { nicholas@858: var elem = document.getElementById('testWaitIndicator'); nicholas@858: var blank = document.getElementById('testHaltBlank'); nicholas@858: var body = document.getElementsByTagName('body')[0]; nicholas@858: body.removeChild(elem); nicholas@858: body.removeChild(blank); nicholas@858: clearInterval(testWaitTimerIntervalHolder); nicholas@858: } nicholas@858: },500,false); nicholas@858: } nicholas@858: } nicholas@858: nicholas@858: var testWaitTimerIntervalHolder = null; nicholas@858: nicholas@858: function Specification() { nicholas@858: // Handles the decoding of the project specification XML into a simple JavaScript Object. nicholas@858: nicholas@858: this.interfaceType; nicholas@858: this.commonInterface; nicholas@858: this.projectReturn; nicholas@858: this.randomiseOrder; nicholas@858: this.collectMetrics; nicholas@858: this.preTest; nicholas@858: this.postTest; nicholas@858: this.metrics =[]; nicholas@858: nicholas@858: this.audioHolders = []; nicholas@858: nicholas@858: this.decode = function() { nicholas@858: // projectXML - DOM Parsed document nicholas@858: this.projectXML = projectXML.childNodes[0]; nicholas@858: var setupNode = projectXML.getElementsByTagName('setup')[0]; nicholas@858: this.interfaceType = setupNode.getAttribute('interface'); nicholas@858: this.projectReturn = setupNode.getAttribute('projectReturn'); nicholas@858: if (setupNode.getAttribute('randomiseOrder') == "true") { nicholas@858: this.randomiseOrder = true; nicholas@858: } else {this.randomiseOrder = false;} nicholas@858: if (setupNode.getAttribute('collectMetrics') == "true") { nicholas@858: this.collectMetrics = true; nicholas@858: } else {this.collectMetrics = false;} nicholas@858: var metricCollection = setupNode.getElementsByTagName('Metric'); nicholas@858: nicholas@858: this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest')); nicholas@858: this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest')); nicholas@858: nicholas@858: if (metricCollection.length > 0) { nicholas@858: metricCollection = metricCollection[0].getElementsByTagName('metricEnable'); nicholas@858: for (var i=0; i 0) { nicholas@858: commonInterfaceNode = commonInterfaceNode[0]; nicholas@858: } else { nicholas@858: commonInterfaceNode = undefined; nicholas@858: } nicholas@858: nicholas@858: this.commonInterface = new function() { nicholas@858: this.OptionNode = function(child) { nicholas@858: this.type = child.nodeName; nicholas@858: if (this.type == 'option') nicholas@858: { nicholas@858: this.name = child.getAttribute('name'); nicholas@858: } nicholas@858: else if (this.type == 'check') { nicholas@858: this.check = child.getAttribute('name'); nicholas@858: if (this.check == 'scalerange') { nicholas@858: this.min = child.getAttribute('min'); nicholas@858: this.max = child.getAttribute('max'); nicholas@858: if (this.min == null) {this.min = 1;} nicholas@858: else if (Number(this.min) > 1 && this.min != null) { nicholas@858: this.min = Number(this.min)/100; nicholas@858: } else { nicholas@858: this.min = Number(this.min); nicholas@858: } nicholas@858: if (this.max == null) {this.max = 0;} nicholas@858: else if (Number(this.max) > 1 && this.max != null) { nicholas@858: this.max = Number(this.max)/100; nicholas@858: } else { nicholas@858: this.max = Number(this.max); nicholas@858: } nicholas@858: } nicholas@858: } else if (this.type == 'anchor' || this.type == 'reference') { nicholas@858: this.value = Number(child.textContent); nicholas@858: } nicholas@858: }; nicholas@858: this.options = []; nicholas@858: if (commonInterfaceNode != undefined) { nicholas@858: var child = commonInterfaceNode.firstElementChild; nicholas@858: while (child != undefined) { nicholas@858: this.options.push(new this.OptionNode(child)); nicholas@858: child = child.nextElementSibling; nicholas@858: } nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: var audioHolders = projectXML.getElementsByTagName('audioHolder'); nicholas@858: for (var i=0; i 1) {this.marker /= 100;} nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.commentQuestionNode = function(xml) { nicholas@858: this.childOption = function(element) { nicholas@858: this.type = 'option'; nicholas@858: this.name = element.getAttribute('name'); nicholas@858: this.text = element.textContent; nicholas@858: }; nicholas@858: this.id = xml.id; nicholas@858: if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;} nicholas@858: else {this.mandatory = false;} nicholas@858: this.type = xml.getAttribute('type'); nicholas@858: if (this.type == undefined) {this.type = 'text';} nicholas@858: switch (this.type) { nicholas@858: case 'text': nicholas@858: this.question = xml.textContent; nicholas@858: break; nicholas@858: case 'radio': nicholas@858: var child = xml.firstElementChild; nicholas@858: this.options = []; nicholas@858: while (child != undefined) { nicholas@858: if (child.nodeName == 'statement' && this.statement == undefined) { nicholas@858: this.statement = child.textContent; nicholas@858: } else if (child.nodeName == 'option') { nicholas@858: this.options.push(new this.childOption(child)); nicholas@858: } nicholas@858: child = child.nextElementSibling; nicholas@858: } nicholas@858: break; nicholas@858: case 'checkbox': nicholas@858: var child = xml.firstElementChild; nicholas@858: this.options = []; nicholas@858: while (child != undefined) { nicholas@858: if (child.nodeName == 'statement' && this.statement == undefined) { nicholas@858: this.statement = child.textContent; nicholas@858: } else if (child.nodeName == 'option') { nicholas@858: this.options.push(new this.childOption(child)); nicholas@858: } nicholas@858: child = child.nextElementSibling; nicholas@858: } nicholas@858: break; nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.id = xml.id; nicholas@858: this.hostURL = xml.getAttribute('hostURL'); nicholas@858: this.sampleRate = xml.getAttribute('sampleRate'); nicholas@858: if (xml.getAttribute('randomiseOrder') == "true") {this.randomiseOrder = true;} nicholas@858: else {this.randomiseOrder = false;} nicholas@858: this.repeatCount = xml.getAttribute('repeatCount'); nicholas@858: if (xml.getAttribute('loop') == 'true') {this.loop = true;} nicholas@858: else {this.loop == false;} nicholas@858: if (xml.getAttribute('elementComments') == "true") {this.elementComments = true;} nicholas@858: else {this.elementComments = false;} nicholas@858: nicholas@858: var anchor = xml.getElementsByTagName('anchor'); nicholas@858: if (anchor.length == 0) { nicholas@858: // Find anchor in commonInterface; nicholas@858: for (var i=0; i 1 && anchor < 100) {anchor /= 100.0;} nicholas@858: } nicholas@858: nicholas@858: if (typeof(reference) == 'number') { nicholas@858: if (reference > 1 && reference < 100) {reference /= 100.0;} nicholas@858: } nicholas@858: nicholas@858: this.preTest = new parent.prepostNode('pretest',xml.getElementsByTagName('PreTest')); nicholas@858: this.postTest = new parent.prepostNode('posttest',xml.getElementsByTagName('PostTest')); nicholas@858: nicholas@858: this.interfaces = []; nicholas@858: var interfaceDOM = xml.getElementsByTagName('interface'); nicholas@858: for (var i=0; i 1) { nicholas@858: console.log('Error - cannot have more than one anchor!'); nicholas@858: console.log('Each anchor node will be a normal mode to continue the test'); nicholas@858: for (var i=0; i 1) { nicholas@858: console.log('Error - cannot have more than one anchor!'); nicholas@858: console.log('Each anchor node will be a normal mode to continue the test'); nicholas@858: for (var i=0; i tag. nicholas@858: this.interfaceObjects = []; nicholas@858: this.interfaceObject = function(){}; nicholas@858: nicholas@858: this.commentBoxes = []; nicholas@858: this.elementCommentBox = function(audioObject) { nicholas@858: var element = audioObject.specification; nicholas@858: this.audioObject = audioObject; nicholas@858: this.id = audioObject.id; nicholas@858: var audioHolderObject = audioObject.specification.parent; nicholas@858: // Create document objects to hold the comment boxes nicholas@858: this.trackComment = document.createElement('div'); nicholas@858: this.trackComment.className = 'comment-div'; nicholas@858: this.trackComment.id = 'comment-div-'+audioObject.id; nicholas@858: // Create a string next to each comment asking for a comment nicholas@858: this.trackString = document.createElement('span'); nicholas@858: this.trackString.innerHTML = audioHolderObject.commentBoxPrefix+' '+audioObject.id; nicholas@858: // Create the HTML5 comment box 'textarea' nicholas@858: this.trackCommentBox = document.createElement('textarea'); nicholas@858: this.trackCommentBox.rows = '4'; nicholas@858: this.trackCommentBox.cols = '100'; nicholas@858: this.trackCommentBox.name = 'trackComment'+audioObject.id; nicholas@858: this.trackCommentBox.className = 'trackComment'; nicholas@858: var br = document.createElement('br'); nicholas@858: // Add to the holder. nicholas@858: this.trackComment.appendChild(this.trackString); nicholas@858: this.trackComment.appendChild(br); nicholas@858: this.trackComment.appendChild(this.trackCommentBox); nicholas@858: nicholas@858: this.exportXMLDOM = function() { nicholas@858: var root = document.createElement('comment'); nicholas@858: if (this.audioObject.specification.parent.elementComments) { nicholas@858: var question = document.createElement('question'); nicholas@858: question.textContent = this.trackString.textContent; nicholas@858: var response = document.createElement('response'); nicholas@858: response.textContent = this.trackCommentBox.value; nicholas@858: console.log("Comment frag-"+this.id+": "+response.textContent); nicholas@858: root.appendChild(question); nicholas@858: root.appendChild(response); nicholas@858: } nicholas@858: return root; nicholas@858: }; nicholas@858: }; nicholas@858: nicholas@858: this.commentQuestions = []; nicholas@858: nicholas@858: this.commentBox = function(commentQuestion) { nicholas@858: this.specification = commentQuestion; nicholas@858: // Create document objects to hold the comment boxes nicholas@858: this.holder = document.createElement('div'); nicholas@858: this.holder.className = 'comment-div'; nicholas@858: // Create a string next to each comment asking for a comment nicholas@858: this.string = document.createElement('span'); nicholas@858: this.string.innerHTML = commentQuestion.question; nicholas@858: // Create the HTML5 comment box 'textarea' nicholas@858: this.textArea = document.createElement('textarea'); nicholas@858: this.textArea.rows = '4'; nicholas@858: this.textArea.cols = '100'; nicholas@858: this.textArea.className = 'trackComment'; nicholas@858: var br = document.createElement('br'); nicholas@858: // Add to the holder. nicholas@858: this.holder.appendChild(this.string); nicholas@858: this.holder.appendChild(br); nicholas@858: this.holder.appendChild(this.textArea); nicholas@858: nicholas@858: this.exportXMLDOM = function() { nicholas@858: var root = document.createElement('comment'); nicholas@858: root.id = this.specification.id; nicholas@858: root.setAttribute('type',this.specification.type); nicholas@858: root.textContent = this.textArea.value; nicholas@858: console.log("Question: "+this.string.textContent); nicholas@858: console.log("Response: "+root.textContent); nicholas@858: return root; nicholas@858: }; nicholas@858: }; nicholas@858: nicholas@858: this.radioBox = function(commentQuestion) { nicholas@858: this.specification = commentQuestion; nicholas@858: // Create document objects to hold the comment boxes nicholas@858: this.holder = document.createElement('div'); nicholas@858: this.holder.className = 'comment-div'; nicholas@858: // Create a string next to each comment asking for a comment nicholas@858: this.string = document.createElement('span'); nicholas@858: this.string.innerHTML = commentQuestion.statement; nicholas@858: var br = document.createElement('br'); nicholas@858: // Add to the holder. nicholas@858: this.holder.appendChild(this.string); nicholas@858: this.holder.appendChild(br); nicholas@858: this.options = []; nicholas@858: this.inputs = document.createElement('div'); nicholas@858: this.span = document.createElement('div'); nicholas@858: this.inputs.align = 'center'; nicholas@858: this.inputs.style.marginLeft = '12px'; nicholas@858: this.span.style.marginLeft = '12px'; nicholas@858: this.span.align = 'center'; nicholas@858: this.span.style.marginTop = '15px'; nicholas@858: nicholas@858: var optCount = commentQuestion.options.length; nicholas@858: var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px'; nicholas@858: console.log(spanMargin); nicholas@858: for (var i=0; i= this.options.length) { nicholas@858: break; nicholas@858: } nicholas@858: } nicholas@858: if (i >= this.options.length) { nicholas@858: response.textContent = 'null'; nicholas@858: } else { nicholas@858: response.textContent = this.options[i].getAttribute('setvalue'); nicholas@858: response.setAttribute('number',i); nicholas@858: } nicholas@858: console.log('Comment: '+question.textContent); nicholas@858: console.log('Response: '+response.textContent); nicholas@858: root.appendChild(question); nicholas@858: root.appendChild(response); nicholas@858: return root; nicholas@858: }; nicholas@858: }; nicholas@858: nicholas@858: this.checkboxBox = function(commentQuestion) { nicholas@858: this.specification = commentQuestion; nicholas@858: // Create document objects to hold the comment boxes nicholas@858: this.holder = document.createElement('div'); nicholas@858: this.holder.className = 'comment-div'; nicholas@858: // Create a string next to each comment asking for a comment nicholas@858: this.string = document.createElement('span'); nicholas@858: this.string.innerHTML = commentQuestion.statement; nicholas@858: var br = document.createElement('br'); nicholas@858: // Add to the holder. nicholas@858: this.holder.appendChild(this.string); nicholas@858: this.holder.appendChild(br); nicholas@858: this.options = []; nicholas@858: this.inputs = document.createElement('div'); nicholas@858: this.span = document.createElement('div'); nicholas@858: this.inputs.align = 'center'; nicholas@858: this.inputs.style.marginLeft = '12px'; nicholas@858: this.span.style.marginLeft = '12px'; nicholas@858: this.span.align = 'center'; nicholas@858: this.span.style.marginTop = '15px'; nicholas@858: nicholas@858: var optCount = commentQuestion.options.length; nicholas@858: var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px'; nicholas@858: console.log(spanMargin); nicholas@858: for (var i=0; i 0) { nicholas@858: var node = this.commentBoxes.pop(0); nicholas@858: holder[node.id] = node; nicholas@858: } nicholas@858: this.commentBoxes = holder; nicholas@858: }; nicholas@858: nicholas@858: this.showCommentBoxes = function(inject, sort) { nicholas@858: if (sort) {interfaceContext.sortCommentBoxes();} nicholas@858: for (var i=0; i 0) { nicholas@858: var time = this.playbackObject.getCurrentPosition(); nicholas@860: if (time > 0) { nicholas@860: var width = 490; nicholas@860: var pix = Math.floor(time/this.timePerPixel); nicholas@860: this.scrubberHead.style.left = pix+'px'; nicholas@860: if (this.maxTime > 60.0) { nicholas@860: var secs = time%60; nicholas@860: var mins = Math.floor((time-secs)/60); nicholas@860: secs = secs.toString(); nicholas@860: secs = secs.substr(0,2); nicholas@860: mins = mins.toString(); nicholas@860: this.curTimeSpan.textContent = mins+':'+secs; nicholas@860: } else { nicholas@860: time = time.toString(); nicholas@860: this.curTimeSpan.textContent = time.substr(0,4); nicholas@860: } nicholas@858: } else { nicholas@860: this.scrubberHead.style.left = '0px'; nicholas@860: if (this.maxTime < 60) { nicholas@860: this.curTimeSpan.textContent = '0.00'; nicholas@860: } else { nicholas@860: this.curTimeSpan.textContent = '00:00'; nicholas@860: } nicholas@858: } nicholas@858: } nicholas@858: }; nicholas@858: nicholas@858: this.interval = undefined; nicholas@858: nicholas@858: this.start = function() { nicholas@858: if (this.playbackObject != undefined && this.interval == undefined) { nicholas@860: if (this.maxTime < 60) { nicholas@860: this.interval = setInterval(function(){interfaceContext.playhead.update();},10); nicholas@860: } else { nicholas@860: this.interval = setInterval(function(){interfaceContext.playhead.update();},100); nicholas@860: } nicholas@858: } nicholas@858: }; nicholas@858: this.stop = function() { nicholas@858: clearInterval(this.interval); nicholas@858: this.interval = undefined; nicholas@860: if (this.maxTime < 60) { nicholas@860: this.curTimeSpan.textContent = '0.00'; nicholas@860: } else { nicholas@860: this.curTimeSpan.textContent = '00:00'; nicholas@860: } nicholas@858: }; nicholas@858: }; nicholas@858: nicholas@858: // Global Checkers nicholas@858: // These functions will help enforce the checkers nicholas@858: this.checkHiddenAnchor = function() nicholas@858: { nicholas@858: var audioHolder = testState.currentStateMap[testState.currentIndex]; nicholas@858: if (audioHolder.anchorId != null) nicholas@858: { nicholas@858: var audioObject = audioEngineContext.audioObjects[audioHolder.anchorId]; nicholas@858: if (audioObject.interfaceDOM.getValue() > audioObject.specification.marker) nicholas@858: { nicholas@858: // Anchor is not set below nicholas@858: console.log('Anchor node not below marker value'); nicholas@858: alert('Please keep listening'); nicholas@858: return false; nicholas@858: } nicholas@858: } nicholas@858: return true; nicholas@858: }; nicholas@858: nicholas@858: this.checkHiddenReference = function() nicholas@858: { nicholas@858: var audioHolder = testState.currentStateMap[testState.currentIndex]; nicholas@858: if (audioHolder.referenceId != null) nicholas@858: { nicholas@858: var audioObject = audioEngineContext.audioObjects[audioHolder.referenceId]; nicholas@858: if (audioObject.interfaceDOM.getValue() < audioObject.specification.marker) nicholas@858: { nicholas@858: // Anchor is not set below nicholas@858: console.log('Reference node not above marker value'); nicholas@858: alert('Please keep listening'); nicholas@858: return false; nicholas@858: } nicholas@858: } nicholas@858: return true; nicholas@858: }; nicholas@858: }