nicholas@1: /** nicholas@1: * core.js nicholas@1: * nicholas@1: * Main script to run, calls all other core functions and manages loading/store to backend. nicholas@1: * Also contains all global variables. nicholas@1: */ nicholas@1: nicholas@1: /* create the web audio API context and store in audioContext*/ n@33: var audioContext; // Hold the browser web audio API n@33: var projectXML; // Hold the parsed setup XML n@181: var specification; n@182: var interfaceContext; nicholas@116: var popup; // Hold the interfacePopup object nicholas@129: var testState; n@45: var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order n@33: var audioEngineContext; // The custome AudioEngine object n@33: var projectReturn; // Hold the URL for the return n@153: nicholas@1: n@57: // Add a prototype to the bufferSourceNode to reference to the audioObject holding it n@57: AudioBufferSourceNode.prototype.owner = undefined; n@57: nicholas@1: window.onload = function() { nicholas@1: // Function called once the browser has loaded all files. nicholas@1: // This should perform any initial commands such as structure / loading documents nicholas@1: nicholas@1: // Create a web audio API context nicholas@21: // Fixed for cross-browser support nicholas@21: var AudioContext = window.AudioContext || window.webkitAudioContext; nicholas@7: audioContext = new AudioContext; nicholas@1: nicholas@129: // Create test state nicholas@129: testState = new stateMachine(); nicholas@129: nicholas@1: // Create the audio engine object nicholas@1: audioEngineContext = new AudioEngine(); nicholas@116: nicholas@116: // Create the popup interface object nicholas@116: popup = new interfacePopup(); n@181: n@181: // Create the specification object n@181: specification = new Specification(); n@182: n@182: // Create the interface object n@182: interfaceContext = new Interface(specification); n@16: }; nicholas@1: nicholas@116: function interfacePopup() { nicholas@116: // Creates an object to manage the popup nicholas@116: this.popup = null; nicholas@116: this.popupContent = null; n@303: this.popupTitle = null; n@303: this.popupResponse = null; n@197: this.buttonProceed = null; n@199: this.buttonPrevious = null; nicholas@116: this.popupOptions = null; nicholas@116: this.currentIndex = null; nicholas@116: this.responses = null; n@181: nicholas@116: this.createPopup = function(){ nicholas@116: // Create popup window interface nicholas@116: var insertPoint = document.getElementById("topLevelBody"); nicholas@116: var blank = document.createElement('div'); nicholas@116: blank.className = 'testHalt'; nicholas@116: nicholas@116: this.popup = document.createElement('div'); nicholas@116: this.popup.id = 'popupHolder'; nicholas@116: this.popup.className = 'popupHolder'; nicholas@116: this.popup.style.position = 'absolute'; nicholas@116: this.popup.style.left = (window.innerWidth/2)-250 + 'px'; nicholas@116: this.popup.style.top = (window.innerHeight/2)-125 + 'px'; nicholas@116: nicholas@116: this.popupContent = document.createElement('div'); nicholas@116: this.popupContent.id = 'popupContent'; n@303: this.popupContent.style.marginTop = '20px'; nicholas@364: this.popupContent.style.marginBottom = '5px'; nicholas@116: this.popup.appendChild(this.popupContent); nicholas@116: n@303: var titleHolder = document.createElement('div'); n@303: titleHolder.id = 'popupTitleHolder'; nicholas@364: titleHolder.align = 'center'; n@303: titleHolder.style.width = 'inherit'; nicholas@364: titleHolder.style.minHeight = '25px'; nicholas@364: titleHolder.style.maxHeight = '250px'; nicholas@364: titleHolder.style.overflow = 'auto'; n@303: titleHolder.style.marginBottom = '5px'; n@303: n@303: this.popupTitle = document.createElement('span'); n@303: this.popupTitle.id = 'popupTitle'; n@303: titleHolder.appendChild(this.popupTitle); n@303: this.popupContent.appendChild(titleHolder); n@303: n@303: this.popupResponse = document.createElement('div'); n@303: this.popupResponse.id = 'popupResponse'; nicholas@364: this.popupResponse.align = 'center'; n@303: this.popupResponse.style.width = 'inherit'; nicholas@364: this.popupResponse.style.minHeight = '50px'; n@303: this.popupResponse.style.maxHeight = '320px'; n@303: this.popupResponse.style.overflow = 'auto'; n@303: this.popupContent.appendChild(this.popupResponse); n@303: n@197: this.buttonProceed = document.createElement('button'); n@197: this.buttonProceed.className = 'popupButton'; nicholas@364: this.buttonProceed.position = 'relative'; n@303: this.buttonProceed.style.left = '390px'; n@197: this.buttonProceed.innerHTML = 'Next'; n@197: this.buttonProceed.onclick = function(){popup.proceedClicked();}; n@199: n@199: this.buttonPrevious = document.createElement('button'); n@199: this.buttonPrevious.className = 'popupButton'; nicholas@364: this.buttonPrevious.position = 'relative'; n@199: this.buttonPrevious.style.left = '10px'; n@199: this.buttonPrevious.innerHTML = 'Back'; n@199: this.buttonPrevious.onclick = function(){popup.previousClick();}; n@199: nicholas@364: this.popupContent.appendChild(this.buttonPrevious); nicholas@364: this.popupContent.appendChild(this.buttonProceed); n@303: n@181: this.popup.style.zIndex = -1; n@181: this.popup.style.visibility = 'hidden'; n@181: blank.style.zIndex = -2; n@181: blank.style.visibility = 'hidden'; nicholas@116: insertPoint.appendChild(this.popup); nicholas@116: insertPoint.appendChild(blank); nicholas@116: }; nicholas@114: nicholas@116: this.showPopup = function(){ n@181: if (this.popup == null) { nicholas@116: this.createPopup(); nicholas@116: } nicholas@116: this.popup.style.zIndex = 3; nicholas@116: this.popup.style.visibility = 'visible'; nicholas@116: var blank = document.getElementsByClassName('testHalt')[0]; nicholas@116: blank.style.zIndex = 2; nicholas@116: blank.style.visibility = 'visible'; nicholas@276: $(window).keypress(function(e){ nicholas@276: if (e.keyCode == 13 && popup.popup.style.visibility == 'visible') nicholas@276: { nicholas@276: popup.buttonProceed.onclick(); nicholas@276: } nicholas@276: }); nicholas@116: }; nicholas@116: nicholas@116: this.hidePopup = function(){ nicholas@116: this.popup.style.zIndex = -1; nicholas@116: this.popup.style.visibility = 'hidden'; nicholas@116: var blank = document.getElementsByClassName('testHalt')[0]; nicholas@116: blank.style.zIndex = -2; nicholas@116: blank.style.visibility = 'hidden'; n@303: this.buttonPrevious.style.visibility = 'inherit'; n@362: $(window).keypress(function(e){}); nicholas@116: }; nicholas@116: nicholas@116: this.postNode = function() { nicholas@116: // This will take the node from the popupOptions and display it nicholas@116: var node = this.popupOptions[this.currentIndex]; n@303: this.popupResponse.innerHTML = null; n@181: if (node.type == 'statement') { n@304: this.popupTitle.textContent = null; n@304: var statement = document.createElement('span'); n@304: statement.textContent = node.statement; n@304: this.popupResponse.appendChild(statement); n@181: } else if (node.type == 'question') { n@303: this.popupTitle.textContent = node.question; nicholas@116: var textArea = document.createElement('textarea'); n@191: switch (node.boxsize) { n@191: case 'small': n@191: textArea.cols = "20"; n@191: textArea.rows = "1"; n@191: break; n@191: case 'normal': n@191: textArea.cols = "30"; n@191: textArea.rows = "2"; n@191: break; n@191: case 'large': n@191: textArea.cols = "40"; n@191: textArea.rows = "5"; n@191: break; n@191: case 'huge': n@191: textArea.cols = "50"; n@191: textArea.rows = "10"; n@191: break; n@191: } n@303: this.popupResponse.appendChild(textArea); n@303: textArea.focus(); nicholas@188: } else if (node.type == 'checkbox') { n@303: this.popupTitle.textContent = node.statement; n@303: var optHold = this.popupResponse; nicholas@188: for (var i=0; i 0) n@303: this.buttonPrevious.style.visibility = 'visible'; n@303: else n@303: this.buttonPrevious.style.visibility = 'hidden'; n@155: }; nicholas@116: nicholas@116: this.initState = function(node) { nicholas@116: //Call this with your preTest and postTest nodes when needed to nicholas@116: // initialise the popup procedure. n@181: this.popupOptions = node.options; nicholas@116: if (this.popupOptions.length > 0) { n@181: if (node.type == 'pretest') { nicholas@116: this.responses = document.createElement('PreTest'); n@181: } else if (node.type == 'posttest') { nicholas@116: this.responses = document.createElement('PostTest'); nicholas@116: } else { nicholas@116: console.log ('WARNING - popup node neither pre or post!'); nicholas@116: this.responses = document.createElement('responses'); nicholas@116: } nicholas@116: this.currentIndex = 0; nicholas@116: this.showPopup(); nicholas@116: this.postNode(); n@181: } else { n@181: advanceState(); nicholas@116: } n@155: }; nicholas@116: n@197: this.proceedClicked = function() { nicholas@116: // Each time the popup button is clicked! nicholas@116: var node = this.popupOptions[this.currentIndex]; n@181: if (node.type == 'question') { nicholas@116: // Must extract the question data nicholas@116: var textArea = $(popup.popupContent).find('textarea')[0]; n@181: if (node.mandatory == true && textArea.value.length == 0) { nicholas@116: alert('This question is mandatory'); nicholas@116: return; nicholas@116: } else { nicholas@116: // Save the text content nicholas@116: var hold = document.createElement('comment'); n@181: hold.id = node.id; nicholas@116: hold.innerHTML = textArea.value; n@195: console.log("Question: "+ node.question); nicholas@117: console.log("Question Response: "+ textArea.value); nicholas@116: this.responses.appendChild(hold); nicholas@116: } nicholas@188: } else if (node.type == 'checkbox') { nicholas@188: // Must extract checkbox data n@303: var optHold = this.popupResponse; nicholas@188: var hold = document.createElement('checkbox'); nicholas@188: console.log("Checkbox: "+ node.statement); nicholas@189: hold.id = node.id; nicholas@188: for (var i=0; i node.max && node.max != null) { n@197: alert('Number is above the maximum value of '+node.max); n@196: return; n@196: } n@196: var hold = document.createElement('number'); n@196: hold.id = node.id; n@196: hold.textContent = input.value; n@196: this.responses.appendChild(hold); nicholas@116: } nicholas@116: this.currentIndex++; nicholas@116: if (this.currentIndex < this.popupOptions.length) { nicholas@116: this.postNode(); nicholas@116: } else { nicholas@116: // Reached the end of the popupOptions nicholas@116: this.hidePopup(); nicholas@129: if (this.responses.nodeName == testState.stateResults[testState.stateIndex].nodeName) { nicholas@129: testState.stateResults[testState.stateIndex] = this.responses; nicholas@129: } else { nicholas@129: testState.stateResults[testState.stateIndex].appendChild(this.responses); nicholas@129: } nicholas@116: advanceState(); nicholas@116: } n@155: }; n@199: n@199: this.previousClick = function() { n@199: // Triggered when the 'Back' button is clicked in the survey n@199: if (this.currentIndex > 0) { n@199: this.currentIndex--; n@199: var node = this.popupOptions[this.currentIndex]; n@199: if (node.type != 'statement') { n@199: var prevResp = this.responses.childNodes[this.responses.childElementCount-1]; n@199: this.responses.removeChild(prevResp); n@199: } n@199: this.postNode(); n@199: if (node.type == 'question') { n@199: this.popupContent.getElementsByTagName('textarea')[0].value = prevResp.textContent; n@199: } else if (node.type == 'checkbox') { n@199: var options = this.popupContent.getElementsByTagName('input'); n@199: var savedOptions = prevResp.getElementsByTagName('option'); n@199: for (var i=0; i 0) { nicholas@129: if(this.stateIndex != null) { nicholas@129: console.log('NOTE - State already initialise'); nicholas@129: } nicholas@129: this.stateIndex = -1; nicholas@129: var that = this; nicholas@250: var aH_pId = 0; nicholas@129: for (var id=0; id= this.stateMap.length) { nicholas@129: console.log('Test Completed'); n@182: createProjectSave(specification.projectReturn); nicholas@129: } else { nicholas@129: this.currentStateMap = this.stateMap[this.stateIndex]; n@181: if (this.currentStateMap.type == "audioHolder") { nicholas@129: console.log('Loading test page'); nicholas@129: loadTest(this.currentStateMap); nicholas@129: this.initialiseInnerState(this.currentStateMap); n@181: } else if (this.currentStateMap.type == "pretest" || this.currentStateMap.type == "posttest") { n@181: if (this.currentStateMap.options.length >= 1) { nicholas@129: popup.initState(this.currentStateMap); nicholas@129: } else { nicholas@129: this.advanceState(); nicholas@129: } nicholas@129: } else { nicholas@129: this.advanceState(); nicholas@129: } nicholas@129: } nicholas@129: } else { nicholas@129: this.advanceInnerState(); nicholas@129: } nicholas@129: }; nicholas@129: nicholas@129: this.testPageCompleted = function(store, testXML, testId) { nicholas@129: // Function called each time a test page has been completed nicholas@129: // Can be used to over-rule default behaviour nicholas@129: n@181: pageXMLSave(store, testXML); n@176: }; nicholas@129: n@181: this.initialiseInnerState = function(node) { nicholas@129: // Parses the received testXML for pre and post test options nicholas@129: this.currentStateMap = []; n@181: var preTest = node.preTest; n@181: var postTest = node.postTest; nicholas@129: if (preTest == undefined) {preTest = document.createElement("preTest");} nicholas@129: if (postTest == undefined){postTest= document.createElement("postTest");} nicholas@129: this.currentStateMap.push(preTest); n@181: this.currentStateMap.push(node); nicholas@129: this.currentStateMap.push(postTest); nicholas@129: this.currentIndex = -1; nicholas@129: this.advanceInnerState(); n@176: }; nicholas@129: nicholas@129: this.advanceInnerState = function() { nicholas@129: this.currentIndex++; nicholas@129: if (this.currentIndex >= this.currentStateMap.length) { nicholas@129: this.currentIndex = null; nicholas@129: this.currentStateMap = this.stateMap[this.stateIndex]; nicholas@129: this.advanceState(); nicholas@129: } else { n@181: if (this.currentStateMap[this.currentIndex].type == "audioHolder") { nicholas@129: console.log("Loading test page"+this.currentTestId); n@181: } else if (this.currentStateMap[this.currentIndex].type == "pretest") { nicholas@129: popup.initState(this.currentStateMap[this.currentIndex]); n@181: } else if (this.currentStateMap[this.currentIndex].type == "posttest") { nicholas@129: popup.initState(this.currentStateMap[this.currentIndex]); nicholas@129: } else { nicholas@129: this.advanceInnerState(); nicholas@129: } nicholas@116: } n@176: }; nicholas@129: nicholas@129: this.previousState = function(){}; nicholas@114: } nicholas@114: nicholas@116: function testEnded(testId) nicholas@114: { nicholas@116: pageXMLSave(testId); nicholas@116: if (testXMLSetups.length-1 > testId) nicholas@116: { nicholas@116: // Yes we have another test to perform nicholas@116: testId = (Number(testId)+1); nicholas@116: currentState = 'testRun-'+testId; nicholas@116: loadTest(testId); nicholas@116: } else { nicholas@116: console.log('Testing Completed!'); nicholas@116: currentState = 'postTest'; nicholas@116: // Check for any post tests nicholas@116: var xmlSetup = projectXML.find('setup'); nicholas@116: var postTest = xmlSetup.find('PostTest')[0]; nicholas@116: popup.initState(postTest); nicholas@116: } nicholas@114: } nicholas@114: nicholas@1: function loadProjectSpec(url) { nicholas@1: // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data nicholas@1: // If url is null, request client to upload project XML document nicholas@2: var r = new XMLHttpRequest(); nicholas@2: r.open('GET',url,true); nicholas@2: r.onload = function() { nicholas@2: loadProjectSpecCallback(r.response); n@16: }; nicholas@2: r.send(); n@16: }; nicholas@2: nicholas@2: function loadProjectSpecCallback(response) { nicholas@2: // Function called after asynchronous download of XML project specification n@180: //var decode = $.parseXML(response); n@180: //projectXML = $(decode); n@180: n@180: var parse = new DOMParser(); n@180: projectXML = parse.parseFromString(response,'text/xml'); nicholas@2: n@181: // Build the specification n@181: specification.decode(); n@176: n@181: testState.stateMap.push(specification.preTest); n@176: n@181: $(specification.audioHolders).each(function(index,elem){ n@176: testState.stateMap.push(elem); n@176: }); n@176: n@181: testState.stateMap.push(specification.postTest); n@176: n@176: // Obtain the metrics enabled n@181: $(specification.metrics).each(function(index,node){ n@176: var enabled = node.textContent; n@181: switch(node.enabled) n@176: { n@176: case 'testTimer': n@176: sessionMetrics.prototype.enableTestTimer = true; n@176: break; n@176: case 'elementTimer': n@176: sessionMetrics.prototype.enableElementTimer = true; n@176: break; n@176: case 'elementTracker': n@176: sessionMetrics.prototype.enableElementTracker = true; n@176: break; n@176: case 'elementListenTracker': n@176: sessionMetrics.prototype.enableElementListenTracker = true; n@176: break; n@176: case 'elementInitialPosition': n@176: sessionMetrics.prototype.enableElementInitialPosition = true; n@176: break; n@176: case 'elementFlagListenedTo': n@176: sessionMetrics.prototype.enableFlagListenedTo = true; n@176: break; n@176: case 'elementFlagMoved': n@176: sessionMetrics.prototype.enableFlagMoved = true; n@176: break; n@176: case 'elementFlagComments': n@176: sessionMetrics.prototype.enableFlagComments = true; n@176: break; n@176: } n@176: }); n@176: n@176: n@176: n@16: // Detect the interface to use and load the relevant javascripts. nicholas@2: var interfaceJS = document.createElement('script'); nicholas@2: interfaceJS.setAttribute("type","text/javascript"); n@181: if (specification.interfaceType == 'APE') { nicholas@2: interfaceJS.setAttribute("src","ape.js"); n@33: n@33: // APE comes with a css file n@33: var css = document.createElement('link'); n@33: css.rel = 'stylesheet'; n@33: css.type = 'text/css'; n@33: css.href = 'ape.css'; n@33: n@33: document.getElementsByTagName("head")[0].appendChild(css); n@281: } else if (specification.interfaceType == "MUSHRA") n@281: { n@281: interfaceJS.setAttribute("src","mushra.js"); n@281: n@281: // MUSHRA comes with a css file n@281: var css = document.createElement('link'); n@281: css.rel = 'stylesheet'; n@281: css.type = 'text/css'; n@281: css.href = 'mushra.css'; n@281: n@281: document.getElementsByTagName("head")[0].appendChild(css); nicholas@2: } nicholas@2: document.getElementsByTagName("head")[0].appendChild(interfaceJS); n@127: n@127: // Define window callbacks for interface n@302: window.onresize = function(event){interfaceContext.resizeWindow(event);}; nicholas@1: } nicholas@1: nicholas@1: function createProjectSave(destURL) { nicholas@1: // Save the data from interface into XML and send to destURL nicholas@1: // If destURL is null then download XML in client nicholas@7: // Now time to render file locally nicholas@7: var xmlDoc = interfaceXMLSave(); nicholas@122: var parent = document.createElement("div"); nicholas@122: parent.appendChild(xmlDoc); nicholas@122: var file = [parent.innerHTML]; nicholas@7: if (destURL == "null" || destURL == undefined) { nicholas@7: var bb = new Blob(file,{type : 'application/xml'}); nicholas@7: var dnlk = window.URL.createObjectURL(bb); nicholas@7: var a = document.createElement("a"); nicholas@7: a.hidden = ''; nicholas@7: a.href = dnlk; nicholas@7: a.download = "save.xml"; nicholas@7: a.textContent = "Save File"; nicholas@7: nicholas@118: popup.showPopup(); nicholas@118: popup.popupContent.innerHTML = null; n@182: popup.popupContent.appendChild(a); nicholas@122: } else { nicholas@122: var xmlhttp = new XMLHttpRequest; nicholas@122: xmlhttp.open("POST",destURL,true); nicholas@122: xmlhttp.setRequestHeader('Content-Type', 'text/xml'); n@123: xmlhttp.onerror = function(){ n@123: console.log('Error saving file to server! Presenting download locally'); n@123: createProjectSave(null); n@123: }; n@160: xmlhttp.onreadystatechange = function() { n@160: console.log(xmlhttp.status); n@160: if (xmlhttp.status != 200 && xmlhttp.readyState == 4) { n@160: createProjectSave(null); nicholas@275: } else { nicholas@345: if (xmlhttp.responseXML == null) nicholas@345: { nicholas@345: return createProjectSave(null); nicholas@345: } nicholas@345: var response = xmlhttp.responseXML.childNodes[0]; nicholas@345: if (response.getAttribute('state') == "OK") nicholas@345: { nicholas@345: var file = response.getElementsByTagName('file')[0]; nicholas@345: console.log('Save OK: Filename '+file.textContent+','+file.getAttribute('bytes')+'B'); nicholas@345: popup.showPopup(); nicholas@345: popup.popupContent.innerHTML = null; nicholas@345: popup.popupContent.textContent = "Thank you!"; nicholas@345: } else { nicholas@345: var message = response.getElementsByTagName('message')[0]; nicholas@345: errorSessionDump(message.textContent); nicholas@345: } n@160: } n@160: }; nicholas@122: xmlhttp.send(file); nicholas@7: } nicholas@1: } nicholas@1: nicholas@252: function errorSessionDump(msg){ nicholas@252: // Create the partial interface XML save nicholas@252: // Include error node with message on why the dump occured nicholas@252: var xmlDoc = interfaceXMLSave(); nicholas@252: var err = document.createElement('error'); nicholas@252: err.textContent = msg; nicholas@252: xmlDoc.appendChild(err); nicholas@252: var parent = document.createElement("div"); nicholas@252: parent.appendChild(xmlDoc); nicholas@252: var file = [parent.innerHTML]; nicholas@252: var bb = new Blob(file,{type : 'application/xml'}); nicholas@252: var dnlk = window.URL.createObjectURL(bb); nicholas@252: var a = document.createElement("a"); nicholas@252: a.hidden = ''; nicholas@252: a.href = dnlk; nicholas@252: a.download = "save.xml"; nicholas@252: a.textContent = "Save File"; nicholas@252: nicholas@252: popup.showPopup(); nicholas@252: popup.popupContent.innerHTML = "ERROR : "+msg; nicholas@252: popup.popupContent.appendChild(a); nicholas@252: } nicholas@252: nicholas@129: // Only other global function which must be defined in the interface class. Determines how to create the XML document. nicholas@129: function interfaceXMLSave(){ nicholas@129: // Create the XML string to be exported with results nicholas@129: var xmlDoc = document.createElement("BrowserEvaluationResult"); nicholas@243: var projectDocument = specification.projectXML; nicholas@243: projectDocument.setAttribute('file-name',url); nicholas@243: xmlDoc.appendChild(projectDocument); nicholas@129: xmlDoc.appendChild(returnDateNode()); n@356: xmlDoc.appendChild(interfaceContext.returnNavigator()); nicholas@129: for (var i=0; i n@125: // DD/MM/YY n@125: // n@125: // n@125: var dateTime = new Date(); n@125: var year = document.createAttribute('year'); n@125: var month = document.createAttribute('month'); n@125: var day = document.createAttribute('day'); n@125: var hour = document.createAttribute('hour'); n@125: var minute = document.createAttribute('minute'); n@125: var secs = document.createAttribute('secs'); n@125: n@125: year.nodeValue = dateTime.getFullYear(); n@125: month.nodeValue = dateTime.getMonth()+1; n@125: day.nodeValue = dateTime.getDate(); n@125: hour.nodeValue = dateTime.getHours(); n@125: minute.nodeValue = dateTime.getMinutes(); n@125: secs.nodeValue = dateTime.getSeconds(); n@125: n@125: var hold = document.createElement("datetime"); n@125: var date = document.createElement("date"); n@125: date.textContent = year.nodeValue+'/'+month.nodeValue+'/'+day.nodeValue; n@125: var time = document.createElement("time"); n@125: time.textContent = hour.nodeValue+':'+minute.nodeValue+':'+secs.nodeValue; n@125: n@125: date.setAttributeNode(year); n@125: date.setAttributeNode(month); n@125: date.setAttributeNode(day); n@125: time.setAttributeNode(hour); n@125: time.setAttributeNode(minute); n@125: time.setAttributeNode(secs); n@125: n@125: hold.appendChild(date); n@125: hold.appendChild(time); n@125: return hold n@125: nicholas@135: } nicholas@135: n@180: function Specification() { n@180: // Handles the decoding of the project specification XML into a simple JavaScript Object. n@180: n@311: this.interfaceType = null; n@311: this.commonInterface = null; n@311: this.projectReturn = null; n@311: this.randomiseOrder = null; n@311: this.collectMetrics = null; n@311: this.testPages = null; n@311: this.preTest = null; n@311: this.postTest = null; n@180: this.metrics =[]; n@180: n@180: this.audioHolders = []; n@180: n@180: this.decode = function() { n@180: // projectXML - DOM Parsed document nicholas@240: this.projectXML = projectXML.childNodes[0]; n@180: var setupNode = projectXML.getElementsByTagName('setup')[0]; n@180: this.interfaceType = setupNode.getAttribute('interface'); n@180: this.projectReturn = setupNode.getAttribute('projectReturn'); n@297: this.testPages = setupNode.getAttribute('testPages'); n@180: if (setupNode.getAttribute('randomiseOrder') == "true") { n@180: this.randomiseOrder = true; n@184: } else {this.randomiseOrder = false;} n@180: if (setupNode.getAttribute('collectMetrics') == "true") { n@180: this.collectMetrics = true; n@184: } else {this.collectMetrics = false;} n@297: if (isNaN(Number(this.testPages)) || this.testPages == undefined) n@297: { n@297: this.testPages = null; n@297: } else { n@297: this.testPages = Number(this.testPages); n@297: if (this.testPages == 0) {this.testPages = null;} n@297: } n@180: var metricCollection = setupNode.getElementsByTagName('Metric'); n@180: n@181: this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest')); n@181: this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest')); n@180: n@180: if (metricCollection.length > 0) { n@180: metricCollection = metricCollection[0].getElementsByTagName('metricEnable'); n@180: for (var i=0; i 0) { nicholas@213: commonInterfaceNode = commonInterfaceNode[0]; nicholas@213: } else { nicholas@213: commonInterfaceNode = undefined; nicholas@213: } nicholas@213: nicholas@213: this.commonInterface = new function() { nicholas@213: this.OptionNode = function(child) { nicholas@213: this.type = child.nodeName; nicholas@256: if (this.type == 'option') nicholas@256: { nicholas@256: this.name = child.getAttribute('name'); nicholas@256: } nicholas@256: else if (this.type == 'check') { nicholas@213: this.check = child.getAttribute('name'); nicholas@231: if (this.check == 'scalerange') { nicholas@231: this.min = child.getAttribute('min'); nicholas@231: this.max = child.getAttribute('max'); nicholas@231: if (this.min == null) {this.min = 1;} nicholas@231: else if (Number(this.min) > 1 && this.min != null) { nicholas@231: this.min = Number(this.min)/100; nicholas@231: } else { nicholas@231: this.min = Number(this.min); nicholas@231: } nicholas@231: if (this.max == null) {this.max = 0;} nicholas@231: else if (Number(this.max) > 1 && this.max != null) { nicholas@231: this.max = Number(this.max)/100; nicholas@231: } else { nicholas@231: this.max = Number(this.max); nicholas@231: } nicholas@231: } nicholas@218: } else if (this.type == 'anchor' || this.type == 'reference') { n@324: Console.log("WARNING: Anchor and Reference tags in the node are depricated"); nicholas@213: } nicholas@218: }; nicholas@213: this.options = []; nicholas@213: if (commonInterfaceNode != undefined) { nicholas@213: var child = commonInterfaceNode.firstElementChild; nicholas@213: while (child != undefined) { nicholas@213: this.options.push(new this.OptionNode(child)); nicholas@213: child = child.nextElementSibling; nicholas@213: } nicholas@213: } nicholas@213: }; nicholas@213: n@180: var audioHolders = projectXML.getElementsByTagName('audioHolder'); n@180: for (var i=0; i audioHolders.length) n@297: { n@297: console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!'); n@297: this.testPages = audioHolders.length; n@297: } n@297: var aH = this.audioHolders; n@297: this.audioHolders = []; n@297: for (var i=0; i 1) n@324: { this.marker /= 100.0;} n@324: if (this.marker >= 0 && this.marker <= 1) n@324: { n@324: this.enforce = true; n@324: return; n@324: } else { n@324: console.log("ERROR - Marker of audioElement "+this.id+" is not between 0 and 1 (float) or 0 and 100 (integer)!"); n@324: console.log("ERROR - Marker not enforced!"); n@324: } n@324: } else { n@324: console.log("ERROR - Marker of audioElement "+this.id+" is not a number!"); n@324: console.log("ERROR - Marker not enforced!"); n@324: } n@324: } nicholas@219: } n@324: this.marker = false; n@324: this.enforce = false; n@180: }; n@180: n@180: this.commentQuestionNode = function(xml) { n@193: this.childOption = function(element) { n@193: this.type = 'option'; n@193: this.name = element.getAttribute('name'); n@193: this.text = element.textContent; n@193: }; n@180: this.id = xml.id; n@180: if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;} n@180: else {this.mandatory = false;} n@193: this.type = xml.getAttribute('type'); n@193: if (this.type == undefined) {this.type = 'text';} n@193: switch (this.type) { n@193: case 'text': n@193: this.question = xml.textContent; n@193: break; n@193: case 'radio': n@193: var child = xml.firstElementChild; n@193: this.options = []; n@193: while (child != undefined) { n@193: if (child.nodeName == 'statement' && this.statement == undefined) { n@193: this.statement = child.textContent; n@193: } else if (child.nodeName == 'option') { n@193: this.options.push(new this.childOption(child)); n@193: } n@193: child = child.nextElementSibling; n@193: } n@195: break; n@195: case 'checkbox': n@195: var child = xml.firstElementChild; n@195: this.options = []; n@195: while (child != undefined) { n@195: if (child.nodeName == 'statement' && this.statement == undefined) { n@195: this.statement = child.textContent; n@195: } else if (child.nodeName == 'option') { n@195: this.options.push(new this.childOption(child)); n@195: } n@195: child = child.nextElementSibling; n@195: } n@195: break; n@193: } n@180: }; n@180: n@180: this.id = xml.id; n@180: this.hostURL = xml.getAttribute('hostURL'); n@180: this.sampleRate = xml.getAttribute('sampleRate'); n@180: if (xml.getAttribute('randomiseOrder') == "true") {this.randomiseOrder = true;} n@180: else {this.randomiseOrder = false;} n@180: this.repeatCount = xml.getAttribute('repeatCount'); n@180: if (xml.getAttribute('loop') == 'true') {this.loop = true;} n@180: else {this.loop == false;} n@180: if (xml.getAttribute('elementComments') == "true") {this.elementComments = true;} n@180: else {this.elementComments = false;} n@180: n@181: this.preTest = new parent.prepostNode('pretest',xml.getElementsByTagName('PreTest')); n@181: this.postTest = new parent.prepostNode('posttest',xml.getElementsByTagName('PostTest')); n@180: n@180: this.interfaces = []; n@180: var interfaceDOM = xml.getElementsByTagName('interface'); n@180: for (var i=0; i tag. n@182: this.interfaceObjects = []; n@182: this.interfaceObject = function(){}; n@182: n@302: this.resizeWindow = function(event) n@302: { n@302: for(var i=0; i= 600) n@302: { n@302: boxwidth = 600; n@302: } n@302: else if (boxwidth < 400) n@302: { n@302: boxwidth = 400; n@302: } n@302: this.trackComment.style.width = boxwidth+"px"; n@302: this.trackCommentBox.style.width = boxwidth-6+"px"; n@302: }; n@302: this.resize(); n@182: }; n@182: n@193: this.commentQuestions = []; n@193: n@193: this.commentBox = function(commentQuestion) { n@193: this.specification = commentQuestion; n@193: // Create document objects to hold the comment boxes n@193: this.holder = document.createElement('div'); n@193: this.holder.className = 'comment-div'; n@193: // Create a string next to each comment asking for a comment n@193: this.string = document.createElement('span'); n@193: this.string.innerHTML = commentQuestion.question; n@193: // Create the HTML5 comment box 'textarea' n@193: this.textArea = document.createElement('textarea'); n@193: this.textArea.rows = '4'; n@193: this.textArea.cols = '100'; n@193: this.textArea.className = 'trackComment'; n@193: var br = document.createElement('br'); n@193: // Add to the holder. n@193: this.holder.appendChild(this.string); n@193: this.holder.appendChild(br); n@193: this.holder.appendChild(this.textArea); n@193: n@193: this.exportXMLDOM = function() { n@193: var root = document.createElement('comment'); n@193: root.id = this.specification.id; n@193: root.setAttribute('type',this.specification.type); n@193: root.textContent = this.textArea.value; b@254: console.log("Question: "+this.string.textContent); b@254: console.log("Response: "+root.textContent); n@193: return root; n@193: }; n@302: this.resize = function() n@302: { n@302: var boxwidth = (window.innerWidth-100)/2; n@302: if (boxwidth >= 600) n@302: { n@302: boxwidth = 600; n@302: } n@302: else if (boxwidth < 400) n@302: { n@302: boxwidth = 400; n@302: } n@302: this.holder.style.width = boxwidth+"px"; n@302: this.textArea.style.width = boxwidth-6+"px"; n@302: }; n@302: this.resize(); n@193: }; n@193: n@193: this.radioBox = function(commentQuestion) { n@193: this.specification = commentQuestion; n@193: // Create document objects to hold the comment boxes n@193: this.holder = document.createElement('div'); n@193: this.holder.className = 'comment-div'; n@193: // Create a string next to each comment asking for a comment n@193: this.string = document.createElement('span'); n@193: this.string.innerHTML = commentQuestion.statement; n@193: var br = document.createElement('br'); n@193: // Add to the holder. n@193: this.holder.appendChild(this.string); n@193: this.holder.appendChild(br); n@193: this.options = []; n@193: this.inputs = document.createElement('div'); n@193: this.span = document.createElement('div'); n@193: this.inputs.align = 'center'; n@193: this.inputs.style.marginLeft = '12px'; n@193: this.span.style.marginLeft = '12px'; n@193: this.span.align = 'center'; n@193: this.span.style.marginTop = '15px'; n@193: n@193: var optCount = commentQuestion.options.length; n@193: for (var i=0; i= this.options.length) { n@193: break; n@193: } n@193: } n@193: if (i >= this.options.length) { n@193: response.textContent = 'null'; n@193: } else { n@193: response.textContent = this.options[i].getAttribute('setvalue'); n@193: response.setAttribute('number',i); n@193: } n@195: console.log('Comment: '+question.textContent); n@195: console.log('Response: '+response.textContent); n@193: root.appendChild(question); n@193: root.appendChild(response); n@193: return root; n@193: }; n@302: this.resize = function() n@302: { n@302: var boxwidth = (window.innerWidth-100)/2; n@302: if (boxwidth >= 600) n@302: { n@302: boxwidth = 600; n@302: } n@302: else if (boxwidth < 400) n@302: { n@302: boxwidth = 400; n@302: } n@302: this.holder.style.width = boxwidth+"px"; n@302: var text = this.holder.children[2]; n@302: var options = this.holder.children[3]; n@302: var optCount = options.children.length; n@302: var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px'; n@302: var options = options.firstChild; n@302: var text = text.firstChild; n@302: options.style.marginRight = spanMargin; n@302: options.style.marginLeft = spanMargin; n@302: text.style.marginRight = spanMargin; n@302: text.style.marginLeft = spanMargin; n@302: while(options.nextSibling != undefined) n@302: { n@302: options = options.nextSibling; n@302: text = text.nextSibling; n@302: options.style.marginRight = spanMargin; n@302: options.style.marginLeft = spanMargin; n@302: text.style.marginRight = spanMargin; n@302: text.style.marginLeft = spanMargin; n@302: } n@302: }; n@302: this.resize(); n@193: }; n@193: n@195: this.checkboxBox = function(commentQuestion) { n@195: this.specification = commentQuestion; n@195: // Create document objects to hold the comment boxes n@195: this.holder = document.createElement('div'); n@195: this.holder.className = 'comment-div'; n@195: // Create a string next to each comment asking for a comment n@195: this.string = document.createElement('span'); n@195: this.string.innerHTML = commentQuestion.statement; n@195: var br = document.createElement('br'); n@195: // Add to the holder. n@195: this.holder.appendChild(this.string); n@195: this.holder.appendChild(br); n@195: this.options = []; n@195: this.inputs = document.createElement('div'); n@195: this.span = document.createElement('div'); n@195: this.inputs.align = 'center'; n@195: this.inputs.style.marginLeft = '12px'; n@195: this.span.style.marginLeft = '12px'; n@195: this.span.align = 'center'; n@195: this.span.style.marginTop = '15px'; n@195: n@195: var optCount = commentQuestion.options.length; n@195: for (var i=0; i= 600) n@302: { n@302: boxwidth = 600; n@302: } n@302: else if (boxwidth < 400) n@302: { n@302: boxwidth = 400; n@302: } n@302: this.holder.style.width = boxwidth+"px"; n@302: var text = this.holder.children[2]; n@302: var options = this.holder.children[3]; n@302: var optCount = options.children.length; n@302: var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px'; n@302: var options = options.firstChild; n@302: var text = text.firstChild; n@302: options.style.marginRight = spanMargin; n@302: options.style.marginLeft = spanMargin; n@302: text.style.marginRight = spanMargin; n@302: text.style.marginLeft = spanMargin; n@302: while(options.nextSibling != undefined) n@302: { n@302: options = options.nextSibling; n@302: text = text.nextSibling; n@302: options.style.marginRight = spanMargin; n@302: options.style.marginLeft = spanMargin; n@302: text.style.marginRight = spanMargin; n@302: text.style.marginLeft = spanMargin; n@302: } n@302: }; n@302: this.resize(); n@195: }; n@193: n@182: this.createCommentBox = function(audioObject) { n@193: var node = new this.elementCommentBox(audioObject); n@182: this.commentBoxes.push(node); n@182: audioObject.commentDOM = node; n@182: return node; n@182: }; n@182: n@182: this.sortCommentBoxes = function() { n@182: var holder = []; n@182: while (this.commentBoxes.length > 0) { n@182: var node = this.commentBoxes.pop(0); n@182: holder[node.id] = node; n@182: } n@182: this.commentBoxes = holder; n@182: }; n@182: n@182: this.showCommentBoxes = function(inject, sort) { n@182: if (sort) {interfaceContext.sortCommentBoxes();} n@182: for (var i=0; i 0) { n@204: var time = this.playbackObject.getCurrentPosition(); nicholas@267: if (time > 0) { nicholas@267: var width = 490; nicholas@267: var pix = Math.floor(time/this.timePerPixel); nicholas@267: this.scrubberHead.style.left = pix+'px'; nicholas@267: if (this.maxTime > 60.0) { nicholas@267: var secs = time%60; nicholas@267: var mins = Math.floor((time-secs)/60); nicholas@267: secs = secs.toString(); nicholas@267: secs = secs.substr(0,2); nicholas@267: mins = mins.toString(); nicholas@267: this.curTimeSpan.textContent = mins+':'+secs; nicholas@267: } else { nicholas@267: time = time.toString(); nicholas@267: this.curTimeSpan.textContent = time.substr(0,4); nicholas@267: } n@201: } else { nicholas@267: this.scrubberHead.style.left = '0px'; nicholas@267: if (this.maxTime < 60) { nicholas@267: this.curTimeSpan.textContent = '0.00'; nicholas@267: } else { nicholas@267: this.curTimeSpan.textContent = '00:00'; nicholas@267: } n@201: } n@201: } n@201: }; n@204: n@204: this.interval = undefined; n@204: n@204: this.start = function() { n@204: if (this.playbackObject != undefined && this.interval == undefined) { nicholas@267: if (this.maxTime < 60) { nicholas@267: this.interval = setInterval(function(){interfaceContext.playhead.update();},10); nicholas@267: } else { nicholas@267: this.interval = setInterval(function(){interfaceContext.playhead.update();},100); nicholas@267: } n@204: } n@204: }; n@204: this.stop = function() { n@204: clearInterval(this.interval); n@204: this.interval = undefined; nicholas@267: if (this.maxTime < 60) { nicholas@267: this.curTimeSpan.textContent = '0.00'; nicholas@267: } else { nicholas@267: this.curTimeSpan.textContent = '00:00'; nicholas@267: } n@204: }; n@201: }; nicholas@235: nicholas@235: // Global Checkers nicholas@235: // These functions will help enforce the checkers nicholas@235: this.checkHiddenAnchor = function() nicholas@235: { nicholas@235: var audioHolder = testState.currentStateMap[testState.currentIndex]; nicholas@235: if (audioHolder.anchorId != null) nicholas@235: { nicholas@235: var audioObject = audioEngineContext.audioObjects[audioHolder.anchorId]; nicholas@269: if (audioObject.interfaceDOM.getValue() > audioObject.specification.marker && audioObject.interfaceDOM.enforce == true) nicholas@235: { nicholas@235: // Anchor is not set below nicholas@235: console.log('Anchor node not below marker value'); nicholas@235: alert('Please keep listening'); nicholas@235: return false; nicholas@235: } nicholas@235: } nicholas@235: return true; nicholas@235: }; nicholas@235: nicholas@235: this.checkHiddenReference = function() nicholas@235: { nicholas@235: var audioHolder = testState.currentStateMap[testState.currentIndex]; nicholas@235: if (audioHolder.referenceId != null) nicholas@235: { nicholas@235: var audioObject = audioEngineContext.audioObjects[audioHolder.referenceId]; nicholas@269: if (audioObject.interfaceDOM.getValue() < audioObject.specification.marker && audioObject.interfaceDOM.enforce == true) nicholas@235: { nicholas@235: // Anchor is not set below nicholas@235: console.log('Reference node not above marker value'); nicholas@235: alert('Please keep listening'); nicholas@235: return false; nicholas@235: } nicholas@235: } nicholas@235: return true; nicholas@235: }; n@366: n@366: this.checkFragmentsFullyPlayed = function () n@366: { n@366: // Checks the entire file has been played back n@366: // NOTE ! This will return true IF playback is Looped!!! n@366: if (audioEngineContext.loopPlayback) n@366: { n@366: console.log("WARNING - Looped source: Cannot check fragments are fully played"); n@366: return true; n@366: } n@366: var check_pass = true; n@366: var error_obj = []; n@366: for (var i = 0; i= time) n@366: { n@366: passed = true; n@366: break; n@366: } n@366: } n@366: if (passed == false) n@366: { n@366: check_pass = false; n@366: console.log("Continue listening to track-"+i); n@366: error_obj.push(i); n@366: } n@366: } n@366: if (check_pass == false) n@366: { n@366: var str_start = "You have not listened to fragments "; n@366: for (var i=0; i