b@1402: /** b@1402: * core.js b@1402: * b@1402: * Main script to run, calls all other core functions and manages loading/store to backend. b@1402: * Also contains all global variables. b@1402: */ b@1402: b@1402: /* create the web audio API context and store in audioContext*/ b@1402: var audioContext; // Hold the browser web audio API b@1402: var projectXML; // Hold the parsed setup XML b@1402: var specification; b@1402: var interfaceContext; b@1402: var popup; // Hold the interfacePopup object b@1402: var testState; b@1402: var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order b@1402: var audioEngineContext; // The custome AudioEngine object b@1402: var projectReturn; // Hold the URL for the return b@1402: b@1402: b@1402: // Add a prototype to the bufferSourceNode to reference to the audioObject holding it b@1402: AudioBufferSourceNode.prototype.owner = undefined; b@1402: b@1402: window.onload = function() { b@1402: // Function called once the browser has loaded all files. b@1402: // This should perform any initial commands such as structure / loading documents b@1402: b@1402: // Create a web audio API context b@1402: // Fixed for cross-browser support b@1402: var AudioContext = window.AudioContext || window.webkitAudioContext; b@1402: audioContext = new AudioContext; b@1402: b@1402: // Create test state b@1402: testState = new stateMachine(); b@1402: b@1402: // Create the popup interface object b@1402: popup = new interfacePopup(); b@1402: b@1402: // Create the specification object b@1402: specification = new Specification(); b@1402: b@1402: // Create the interface object b@1402: interfaceContext = new Interface(specification); b@1402: // Define window callbacks for interface b@1402: window.onresize = function(event){interfaceContext.resizeWindow(event);}; b@1402: }; b@1402: b@1402: function loadProjectSpec(url) { b@1402: // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data b@1402: // If url is null, request client to upload project XML document b@1402: var r = new XMLHttpRequest(); b@1402: r.open('GET',url,true); b@1402: r.onload = function() { b@1402: loadProjectSpecCallback(r.response); b@1402: }; b@1402: r.send(); b@1402: }; b@1402: b@1402: function loadProjectSpecCallback(response) { b@1402: // Function called after asynchronous download of XML project specification b@1402: //var decode = $.parseXML(response); b@1402: //projectXML = $(decode); b@1402: b@1402: var parse = new DOMParser(); b@1402: projectXML = parse.parseFromString(response,'text/xml'); b@1402: b@1402: // Build the specification b@1402: specification.decode(projectXML); b@1402: b@1402: // Detect the interface to use and load the relevant javascripts. b@1402: var interfaceJS = document.createElement('script'); b@1402: interfaceJS.setAttribute("type","text/javascript"); b@1402: if (specification.interfaceType == 'APE') { b@1402: interfaceJS.setAttribute("src","ape.js"); b@1402: b@1402: // APE comes with a css file b@1402: var css = document.createElement('link'); b@1402: css.rel = 'stylesheet'; b@1402: css.type = 'text/css'; b@1402: css.href = 'ape.css'; b@1402: b@1402: document.getElementsByTagName("head")[0].appendChild(css); b@1402: } else if (specification.interfaceType == "MUSHRA") b@1402: { b@1402: interfaceJS.setAttribute("src","mushra.js"); b@1402: b@1402: // MUSHRA comes with a css file b@1402: var css = document.createElement('link'); b@1402: css.rel = 'stylesheet'; b@1402: css.type = 'text/css'; b@1402: css.href = 'mushra.css'; b@1402: b@1402: document.getElementsByTagName("head")[0].appendChild(css); b@1402: } b@1402: document.getElementsByTagName("head")[0].appendChild(interfaceJS); b@1402: b@1402: // Create the audio engine object b@1402: audioEngineContext = new AudioEngine(specification); b@1402: b@1402: testState.stateMap.push(specification.preTest); b@1402: b@1402: $(specification.audioHolders).each(function(index,elem){ b@1402: testState.stateMap.push(elem); b@1402: $(elem.audioElements).each(function(i,audioElem){ b@1402: var URL = audioElem.parent.hostURL + audioElem.url; b@1402: var buffer = null; b@1402: for (var i=0; i 0) b@1402: this.buttonPrevious.style.visibility = 'visible'; b@1402: else b@1402: this.buttonPrevious.style.visibility = 'hidden'; b@1402: }; b@1402: b@1402: this.initState = function(node) { b@1402: //Call this with your preTest and postTest nodes when needed to b@1402: // initialise the popup procedure. b@1402: this.popupOptions = node.options; b@1402: if (this.popupOptions.length > 0) { b@1402: if (node.type == 'pretest') { b@1402: this.responses = document.createElement('PreTest'); b@1402: } else if (node.type == 'posttest') { b@1402: this.responses = document.createElement('PostTest'); b@1402: } else { b@1402: console.log ('WARNING - popup node neither pre or post!'); b@1402: this.responses = document.createElement('responses'); b@1402: } b@1402: this.currentIndex = 0; b@1402: this.showPopup(); b@1402: this.postNode(); b@1402: } else { b@1402: advanceState(); b@1402: } b@1402: }; b@1402: b@1402: this.proceedClicked = function() { b@1402: // Each time the popup button is clicked! b@1402: var node = this.popupOptions[this.currentIndex]; b@1402: if (node.type == 'question') { b@1402: // Must extract the question data b@1402: var textArea = $(popup.popupContent).find('textarea')[0]; b@1402: if (node.mandatory == true && textArea.value.length == 0) { b@1402: alert('This question is mandatory'); b@1402: return; b@1402: } else { b@1402: // Save the text content b@1402: var hold = document.createElement('comment'); b@1402: hold.id = node.id; b@1402: hold.innerHTML = textArea.value; b@1402: console.log("Question: "+ node.question); b@1402: console.log("Question Response: "+ textArea.value); b@1402: this.responses.appendChild(hold); b@1402: } b@1402: } else if (node.type == 'checkbox') { b@1402: // Must extract checkbox data b@1402: var optHold = this.popupResponse; b@1402: var hold = document.createElement('checkbox'); b@1402: console.log("Checkbox: "+ node.statement); b@1402: hold.id = node.id; b@1402: for (var i=0; i node.max && node.max != null) { b@1402: alert('Number is above the maximum value of '+node.max); b@1402: return; b@1402: } b@1402: var hold = document.createElement('number'); b@1402: hold.id = node.id; b@1402: hold.textContent = input.value; b@1402: this.responses.appendChild(hold); b@1402: } b@1402: this.currentIndex++; b@1402: if (this.currentIndex < this.popupOptions.length) { b@1402: this.postNode(); b@1402: } else { b@1402: // Reached the end of the popupOptions b@1402: this.hidePopup(); b@1402: if (this.responses.nodeName == testState.stateResults[testState.stateIndex].nodeName) { b@1402: testState.stateResults[testState.stateIndex] = this.responses; b@1402: } else { b@1402: testState.stateResults[testState.stateIndex].appendChild(this.responses); b@1402: } b@1402: advanceState(); b@1402: } b@1402: }; b@1402: b@1402: this.previousClick = function() { b@1402: // Triggered when the 'Back' button is clicked in the survey b@1402: if (this.currentIndex > 0) { b@1402: this.currentIndex--; b@1402: var node = this.popupOptions[this.currentIndex]; b@1402: if (node.type != 'statement') { b@1402: var prevResp = this.responses.childNodes[this.responses.childElementCount-1]; b@1402: this.responses.removeChild(prevResp); b@1402: } b@1402: this.postNode(); b@1402: if (node.type == 'question') { b@1402: this.popupContent.getElementsByTagName('textarea')[0].value = prevResp.textContent; b@1402: } else if (node.type == 'checkbox') { b@1402: var options = this.popupContent.getElementsByTagName('input'); b@1402: var savedOptions = prevResp.getElementsByTagName('option'); b@1402: for (var i=0; i 0) { b@1402: if(this.stateIndex != null) { b@1402: console.log('NOTE - State already initialise'); b@1402: } b@1402: this.stateIndex = -1; b@1402: var that = this; b@1402: var aH_pId = 0; b@1402: for (var id=0; id= this.stateMap.length) { b@1402: console.log('Test Completed'); b@1402: createProjectSave(specification.projectReturn); b@1402: } else { b@1402: this.currentStateMap = this.stateMap[this.stateIndex]; b@1402: if (this.currentStateMap.type == "audioHolder") { b@1402: console.log('Loading test page'); b@1402: interfaceContext.newPage(this.currentStateMap); b@1402: this.initialiseInnerState(this.currentStateMap); b@1402: } else if (this.currentStateMap.type == "pretest" || this.currentStateMap.type == "posttest") { b@1402: if (this.currentStateMap.options.length >= 1) { b@1402: popup.initState(this.currentStateMap); b@1402: } else { b@1402: this.advanceState(); b@1402: } b@1402: } else { b@1402: this.advanceState(); b@1402: } b@1402: } b@1402: } else { b@1402: this.advanceInnerState(); b@1402: } b@1402: }; b@1402: b@1402: this.testPageCompleted = function(store, testXML, testId) { b@1402: // Function called each time a test page has been completed b@1402: // Can be used to over-rule default behaviour b@1402: var metric = document.createElement('metric'); b@1402: if (audioEngineContext.metric.enableTestTimer) b@1402: { b@1402: var testTime = document.createElement('metricResult'); b@1402: testTime.id = 'testTime'; b@1402: testTime.textContent = audioEngineContext.timer.testDuration; b@1402: metric.appendChild(testTime); b@1402: } b@1402: testXML.appendChild(metric); b@1402: var audioObjects = audioEngineContext.audioObjects; b@1402: for (var i=0; i= this.currentStateMap.length) { b@1402: this.currentIndex = null; b@1402: this.currentStateMap = this.stateMap[this.stateIndex]; b@1402: this.advanceState(); b@1402: } else { b@1402: if (this.currentStateMap[this.currentIndex].type == "audioHolder") { b@1402: console.log("Loading test page"+this.currentTestId); b@1402: } else if (this.currentStateMap[this.currentIndex].type == "pretest") { b@1402: popup.initState(this.currentStateMap[this.currentIndex]); b@1402: } else if (this.currentStateMap[this.currentIndex].type == "posttest") { b@1402: popup.initState(this.currentStateMap[this.currentIndex]); b@1402: } else { b@1402: this.advanceInnerState(); b@1402: } b@1402: } b@1402: }; b@1402: b@1402: this.previousState = function(){}; b@1402: } b@1402: b@1402: function AudioEngine(specification) { b@1402: b@1402: // Create two output paths, the main outputGain and fooGain. b@1402: // Output gain is default to 1 and any items for playback route here b@1402: // Foo gain is used for analysis to ensure paths get processed, but are not heard b@1402: // because web audio will optimise and any route which does not go to the destination gets ignored. b@1402: this.outputGain = audioContext.createGain(); b@1402: this.fooGain = audioContext.createGain(); b@1402: this.fooGain.gain = 0; b@1402: b@1402: // Use this to detect playback state: 0 - stopped, 1 - playing b@1402: this.status = 0; b@1402: b@1402: // Connect both gains to output b@1402: this.outputGain.connect(audioContext.destination); b@1402: this.fooGain.connect(audioContext.destination); b@1402: b@1402: // Create the timer Object b@1402: this.timer = new timer(); b@1402: // Create session metrics b@1402: this.metric = new sessionMetrics(this,specification); b@1402: b@1402: this.loopPlayback = false; b@1402: b@1402: // Create store for new audioObjects b@1402: this.audioObjects = []; b@1402: b@1402: this.buffers = []; b@1402: this.bufferObj = function(url) b@1402: { b@1402: this.url = url; b@1402: this.buffer = null; b@1402: this.xmlRequest = new XMLHttpRequest(); b@1402: this.users = []; b@1402: this.xmlRequest.open('GET',this.url,true); b@1402: this.xmlRequest.responseType = 'arraybuffer'; b@1402: b@1402: var bufferObj = this; b@1402: b@1402: // Create callback to decode the data asynchronously b@1402: this.xmlRequest.onloadend = function() { b@1402: audioContext.decodeAudioData(bufferObj.xmlRequest.response, function(decodedData) { b@1402: bufferObj.buffer = decodedData; b@1402: for (var i=0; i b@1402: // DD/MM/YY b@1402: // b@1402: // b@1402: var dateTime = new Date(); b@1402: var year = document.createAttribute('year'); b@1402: var month = document.createAttribute('month'); b@1402: var day = document.createAttribute('day'); b@1402: var hour = document.createAttribute('hour'); b@1402: var minute = document.createAttribute('minute'); b@1402: var secs = document.createAttribute('secs'); b@1402: b@1402: year.nodeValue = dateTime.getFullYear(); b@1402: month.nodeValue = dateTime.getMonth()+1; b@1402: day.nodeValue = dateTime.getDate(); b@1402: hour.nodeValue = dateTime.getHours(); b@1402: minute.nodeValue = dateTime.getMinutes(); b@1402: secs.nodeValue = dateTime.getSeconds(); b@1402: b@1402: var hold = document.createElement("datetime"); b@1402: var date = document.createElement("date"); b@1402: date.textContent = year.nodeValue+'/'+month.nodeValue+'/'+day.nodeValue; b@1402: var time = document.createElement("time"); b@1402: time.textContent = hour.nodeValue+':'+minute.nodeValue+':'+secs.nodeValue; b@1402: b@1402: date.setAttributeNode(year); b@1402: date.setAttributeNode(month); b@1402: date.setAttributeNode(day); b@1402: time.setAttributeNode(hour); b@1402: time.setAttributeNode(minute); b@1402: time.setAttributeNode(secs); b@1402: b@1402: hold.appendChild(date); b@1402: hold.appendChild(time); b@1402: return hold; b@1402: b@1402: } b@1402: b@1402: function Specification() { b@1402: // Handles the decoding of the project specification XML into a simple JavaScript Object. b@1402: b@1402: this.interfaceType = null; b@1402: this.commonInterface = new function() b@1402: { b@1402: this.options = []; b@1402: this.optionNode = function(input) b@1402: { b@1402: var name = input.getAttribute('name'); b@1402: this.type = name; b@1402: if(this.type == "option") b@1402: { b@1402: this.name = input.id; b@1402: } else if (this.type == "check") b@1402: { b@1402: this.check = input.id; b@1402: } b@1402: }; b@1402: }; b@1402: b@1402: this.randomiseOrder = function(input) b@1402: { b@1402: // This takes an array of information and randomises the order b@1402: var N = input.length; b@1402: b@1402: var inputSequence = []; // For safety purposes: keep track of randomisation b@1402: for (var counter = 0; counter < N; ++counter) b@1402: inputSequence.push(counter) // Fill array b@1402: var inputSequenceClone = inputSequence.slice(0); b@1402: b@1402: var holdArr = []; b@1402: var outputSequence = []; b@1402: for (var n=0; n 0) { b@1402: metricCollection = metricCollection[0].getElementsByTagName('metricEnable'); b@1402: for (var i=0; i 0) { b@1402: commonInterfaceNode = commonInterfaceNode[0]; b@1402: } else { b@1402: commonInterfaceNode = undefined; b@1402: } b@1402: b@1402: this.commonInterface = new function() { b@1402: this.OptionNode = function(child) { b@1402: this.type = child.nodeName; b@1402: if (this.type == 'option') b@1402: { b@1402: this.name = child.getAttribute('name'); b@1402: } b@1402: else if (this.type == 'check') { b@1402: this.check = child.getAttribute('name'); b@1402: if (this.check == 'scalerange') { b@1402: this.min = child.getAttribute('min'); b@1402: this.max = child.getAttribute('max'); b@1402: if (this.min == null) {this.min = 1;} b@1402: else if (Number(this.min) > 1 && this.min != null) { b@1402: this.min = Number(this.min)/100; b@1402: } else { b@1402: this.min = Number(this.min); b@1402: } b@1402: if (this.max == null) {this.max = 0;} b@1402: else if (Number(this.max) > 1 && this.max != null) { b@1402: this.max = Number(this.max)/100; b@1402: } else { b@1402: this.max = Number(this.max); b@1402: } b@1402: } b@1402: } else if (this.type == 'anchor' || this.type == 'reference') { b@1402: this.value = Number(child.textContent); b@1402: this.enforce = child.getAttribute('enforce'); b@1402: if (this.enforce == 'true') {this.enforce = true;} b@1402: else {this.enforce = false;} b@1402: } b@1402: }; b@1402: this.options = []; b@1402: if (commonInterfaceNode != undefined) { b@1402: var child = commonInterfaceNode.firstElementChild; b@1402: while (child != undefined) { b@1402: this.options.push(new this.OptionNode(child)); b@1402: child = child.nextElementSibling; b@1402: } b@1402: } b@1402: }; b@1402: b@1402: var audioHolders = projectXML.getElementsByTagName('audioHolder'); b@1402: for (var i=0; i audioHolders.length) b@1402: { b@1402: console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!'); b@1402: this.testPages = audioHolders.length; b@1402: } b@1402: var aH = this.audioHolders; b@1402: this.audioHolders = []; b@1402: for (var i=0; i tag compiled b@1402: var setupNode = root.createElement("setup"); b@1402: setupNode.setAttribute('interface',this.interfaceType); b@1402: setupNode.setAttribute('projectReturn',this.projectReturn); b@1402: setupNode.setAttribute('randomiseOrder',this.randomiseOrder); b@1402: setupNode.setAttribute('collectMetrics',this.collectMetrics); b@1402: setupNode.setAttribute('testPages',this.testPages); b@1402: b@1402: var setupPreTest = root.createElement("PreTest"); b@1402: for (var i=0; i tag b@1402: var Metric = root.createElement("Metric"); b@1402: for (var i=0; i tag b@1402: var CommonInterface = root.createElement("interface"); b@1402: for (var i=0; i tags b@1402: for (var ahIndex = 0; ahIndex < this.audioHolders.length; ahIndex++) b@1402: { b@1402: var node = this.audioHolders[ahIndex].encode(root); b@1402: root.getElementsByTagName("BrowserEvalProjectDocument")[0].appendChild(node); b@1402: } b@1402: return root; b@1402: }; b@1402: b@1402: this.prepostNode = function(type) { b@1402: this.type = type; b@1402: this.options = []; b@1402: b@1402: this.OptionNode = function() { b@1402: b@1402: this.childOption = function() { b@1402: this.type = 'option'; b@1402: this.id = null; b@1402: this.name = undefined; b@1402: this.text = null; b@1402: }; b@1402: b@1402: this.type = undefined; b@1402: this.id = undefined; b@1402: this.mandatory = undefined; b@1402: this.question = undefined; b@1402: this.statement = undefined; b@1402: this.boxsize = undefined; b@1402: this.options = []; b@1402: this.min = undefined; b@1402: this.max = undefined; b@1402: this.step = undefined; b@1402: b@1402: this.decode = function(child) b@1402: { b@1402: this.type = child.nodeName; b@1402: if (child.nodeName == "question") { b@1402: this.id = child.id; b@1402: this.mandatory; b@1402: if (child.getAttribute('mandatory') == "true") {this.mandatory = true;} b@1402: else {this.mandatory = false;} b@1402: this.question = child.textContent; b@1402: if (child.getAttribute('boxsize') == null) { b@1402: this.boxsize = 'normal'; b@1402: } else { b@1402: this.boxsize = child.getAttribute('boxsize'); b@1402: } b@1402: } else if (child.nodeName == "statement") { b@1402: this.statement = child.textContent; b@1402: } else if (child.nodeName == "checkbox" || child.nodeName == "radio") { b@1402: var element = child.firstElementChild; b@1402: this.id = child.id; b@1402: if (element == null) { b@1402: console.log('Malformed' +child.nodeName+ 'entry'); b@1402: this.statement = 'Malformed' +child.nodeName+ 'entry'; b@1402: this.type = 'statement'; b@1402: } else { b@1402: this.options = []; b@1402: while (element != null) { b@1402: if (element.nodeName == 'statement' && this.statement == undefined){ b@1402: this.statement = element.textContent; b@1402: } else if (element.nodeName == 'option') { b@1402: var node = new this.childOption(); b@1402: node.id = element.id; b@1402: node.name = element.getAttribute('name'); b@1402: node.text = element.textContent; b@1402: this.options.push(node); b@1402: } b@1402: element = element.nextElementSibling; b@1402: } b@1402: } b@1402: } else if (child.nodeName == "number") { b@1402: this.statement = child.textContent; b@1402: this.id = child.id; b@1402: this.min = child.getAttribute('min'); b@1402: this.max = child.getAttribute('max'); b@1402: this.step = child.getAttribute('step'); b@1402: } b@1402: }; b@1402: b@1402: this.exportXML = function(root) b@1402: { b@1402: var node = root.createElement(this.type); b@1402: switch(this.type) b@1402: { b@1402: case "statement": b@1402: node.textContent = this.statement; b@1402: break; b@1402: case "question": b@1402: node.id = this.id; b@1402: node.setAttribute("mandatory",this.mandatory); b@1402: node.setAttribute("boxsize",this.boxsize); b@1402: node.textContent = this.question; b@1402: break; b@1402: case "number": b@1402: node.id = this.id; b@1402: node.setAttribute("mandatory",this.mandatory); b@1402: node.setAttribute("min", this.min); b@1402: node.setAttribute("max", this.max); b@1402: node.setAttribute("step", this.step); b@1402: node.textContent = this.statement; b@1402: break; b@1402: case "checkbox": b@1402: node.id = this.id; b@1402: var statement = root.createElement("statement"); b@1402: statement.textContent = this.statement; b@1402: node.appendChild(statement); b@1402: for (var i=0; i b@1402: for (var i=0; i b@1402: var AHPreTest = root.createElement("PreTest"); b@1402: for (var i=0; i 1) b@1402: { this.marker /= 100.0;} b@1402: if (this.marker >= 0 && this.marker <= 1) b@1402: { b@1402: this.enforce = true; b@1402: return; b@1402: } else { b@1402: console.log("ERROR - Marker of audioElement "+this.id+" is not between 0 and 1 (float) or 0 and 100 (integer)!"); b@1402: console.log("ERROR - Marker not enforced!"); b@1402: } b@1402: } else { b@1402: console.log("ERROR - Marker of audioElement "+this.id+" is not a number!"); b@1402: console.log("ERROR - Marker not enforced!"); b@1402: } b@1402: } b@1402: } b@1402: }; b@1402: this.encode = function(root) b@1402: { b@1402: var AENode = root.createElement("audioElements"); b@1402: AENode.id = this.id; b@1402: AENode.setAttribute("url",this.url); b@1402: AENode.setAttribute("type",this.type); b@1402: if (this.marker != false) b@1402: { b@1402: AENode.setAttribute("marker",this.marker*100); b@1402: } b@1402: return AENode; b@1402: }; b@1402: }; b@1402: b@1402: this.commentQuestionNode = function(xml) { b@1402: this.id = null; b@1402: this.type = undefined; b@1402: this.question = undefined; b@1402: this.options = []; b@1402: this.statement = undefined; b@1402: b@1402: this.childOption = function() { b@1402: this.type = 'option'; b@1402: this.name = null; b@1402: this.text = null; b@1402: }; b@1402: this.exportXML = function(root) b@1402: { b@1402: var CQNode = root.createElement("CommentQuestion"); b@1402: CQNode.id = this.id; b@1402: CQNode.setAttribute("type",this.type); b@1402: switch(this.type) b@1402: { b@1402: case "text": b@1402: CQNode.textContent = this.question; b@1402: break; b@1402: case "radio": b@1402: var statement = root.createElement("statement"); b@1402: statement.textContent = this.statement; b@1402: CQNode.appendChild(statement); b@1402: for (var i=0; i tag. b@1402: this.interfaceObjects = []; b@1402: this.interfaceObject = function(){}; b@1402: b@1402: this.resizeWindow = function(event) b@1402: { b@1402: for(var i=0; i= 600) b@1402: { b@1402: boxwidth = 600; b@1402: } b@1402: else if (boxwidth < 400) b@1402: { b@1402: boxwidth = 400; b@1402: } b@1402: this.trackComment.style.width = boxwidth+"px"; b@1402: this.trackCommentBox.style.width = boxwidth-6+"px"; b@1402: }; b@1402: this.resize(); b@1402: }; b@1402: b@1402: this.commentQuestions = []; b@1402: b@1402: this.commentBox = function(commentQuestion) { b@1402: this.specification = commentQuestion; b@1402: // Create document objects to hold the comment boxes b@1402: this.holder = document.createElement('div'); b@1402: this.holder.className = 'comment-div'; b@1402: // Create a string next to each comment asking for a comment b@1402: this.string = document.createElement('span'); b@1402: this.string.innerHTML = commentQuestion.question; b@1402: // Create the HTML5 comment box 'textarea' b@1402: this.textArea = document.createElement('textarea'); b@1402: this.textArea.rows = '4'; b@1402: this.textArea.cols = '100'; b@1402: this.textArea.className = 'trackComment'; b@1402: var br = document.createElement('br'); b@1402: // Add to the holder. b@1402: this.holder.appendChild(this.string); b@1402: this.holder.appendChild(br); b@1402: this.holder.appendChild(this.textArea); b@1402: b@1402: this.exportXMLDOM = function() { b@1402: var root = document.createElement('comment'); b@1402: root.id = this.specification.id; b@1402: root.setAttribute('type',this.specification.type); b@1402: root.textContent = this.textArea.value; b@1402: console.log("Question: "+this.string.textContent); b@1402: console.log("Response: "+root.textContent); b@1402: return root; b@1402: }; b@1402: this.resize = function() b@1402: { b@1402: var boxwidth = (window.innerWidth-100)/2; b@1402: if (boxwidth >= 600) b@1402: { b@1402: boxwidth = 600; b@1402: } b@1402: else if (boxwidth < 400) b@1402: { b@1402: boxwidth = 400; b@1402: } b@1402: this.holder.style.width = boxwidth+"px"; b@1402: this.textArea.style.width = boxwidth-6+"px"; b@1402: }; b@1402: this.resize(); b@1402: }; b@1402: b@1402: this.radioBox = function(commentQuestion) { b@1402: this.specification = commentQuestion; b@1402: // Create document objects to hold the comment boxes b@1402: this.holder = document.createElement('div'); b@1402: this.holder.className = 'comment-div'; b@1402: // Create a string next to each comment asking for a comment b@1402: this.string = document.createElement('span'); b@1402: this.string.innerHTML = commentQuestion.statement; b@1402: var br = document.createElement('br'); b@1402: // Add to the holder. b@1402: this.holder.appendChild(this.string); b@1402: this.holder.appendChild(br); b@1402: this.options = []; b@1402: this.inputs = document.createElement('div'); b@1402: this.span = document.createElement('div'); b@1402: this.inputs.align = 'center'; b@1402: this.inputs.style.marginLeft = '12px'; b@1402: this.span.style.marginLeft = '12px'; b@1402: this.span.align = 'center'; b@1402: this.span.style.marginTop = '15px'; b@1402: b@1402: var optCount = commentQuestion.options.length; b@1402: for (var i=0; i= this.options.length) { b@1402: break; b@1402: } b@1402: } b@1402: if (i >= this.options.length) { b@1402: response.textContent = 'null'; b@1402: } else { b@1402: response.textContent = this.options[i].getAttribute('setvalue'); b@1402: response.setAttribute('number',i); b@1402: } b@1402: console.log('Comment: '+question.textContent); b@1402: console.log('Response: '+response.textContent); b@1402: root.appendChild(question); b@1402: root.appendChild(response); b@1402: return root; b@1402: }; b@1402: this.resize = function() b@1402: { b@1402: var boxwidth = (window.innerWidth-100)/2; b@1402: if (boxwidth >= 600) b@1402: { b@1402: boxwidth = 600; b@1402: } b@1402: else if (boxwidth < 400) b@1402: { b@1402: boxwidth = 400; b@1402: } b@1402: this.holder.style.width = boxwidth+"px"; b@1402: var text = this.holder.children[2]; b@1402: var options = this.holder.children[3]; b@1402: var optCount = options.children.length; b@1402: var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px'; b@1402: var options = options.firstChild; b@1402: var text = text.firstChild; b@1402: options.style.marginRight = spanMargin; b@1402: options.style.marginLeft = spanMargin; b@1402: text.style.marginRight = spanMargin; b@1402: text.style.marginLeft = spanMargin; b@1402: while(options.nextSibling != undefined) b@1402: { b@1402: options = options.nextSibling; b@1402: text = text.nextSibling; b@1402: options.style.marginRight = spanMargin; b@1402: options.style.marginLeft = spanMargin; b@1402: text.style.marginRight = spanMargin; b@1402: text.style.marginLeft = spanMargin; b@1402: } b@1402: }; b@1402: this.resize(); b@1402: }; b@1402: b@1402: this.checkboxBox = function(commentQuestion) { b@1402: this.specification = commentQuestion; b@1402: // Create document objects to hold the comment boxes b@1402: this.holder = document.createElement('div'); b@1402: this.holder.className = 'comment-div'; b@1402: // Create a string next to each comment asking for a comment b@1402: this.string = document.createElement('span'); b@1402: this.string.innerHTML = commentQuestion.statement; b@1402: var br = document.createElement('br'); b@1402: // Add to the holder. b@1402: this.holder.appendChild(this.string); b@1402: this.holder.appendChild(br); b@1402: this.options = []; b@1402: this.inputs = document.createElement('div'); b@1402: this.span = document.createElement('div'); b@1402: this.inputs.align = 'center'; b@1402: this.inputs.style.marginLeft = '12px'; b@1402: this.span.style.marginLeft = '12px'; b@1402: this.span.align = 'center'; b@1402: this.span.style.marginTop = '15px'; b@1402: b@1402: var optCount = commentQuestion.options.length; b@1402: for (var i=0; i= 600) b@1402: { b@1402: boxwidth = 600; b@1402: } b@1402: else if (boxwidth < 400) b@1402: { b@1402: boxwidth = 400; b@1402: } b@1402: this.holder.style.width = boxwidth+"px"; b@1402: var text = this.holder.children[2]; b@1402: var options = this.holder.children[3]; b@1402: var optCount = options.children.length; b@1402: var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px'; b@1402: var options = options.firstChild; b@1402: var text = text.firstChild; b@1402: options.style.marginRight = spanMargin; b@1402: options.style.marginLeft = spanMargin; b@1402: text.style.marginRight = spanMargin; b@1402: text.style.marginLeft = spanMargin; b@1402: while(options.nextSibling != undefined) b@1402: { b@1402: options = options.nextSibling; b@1402: text = text.nextSibling; b@1402: options.style.marginRight = spanMargin; b@1402: options.style.marginLeft = spanMargin; b@1402: text.style.marginRight = spanMargin; b@1402: text.style.marginLeft = spanMargin; b@1402: } b@1402: }; b@1402: this.resize(); b@1402: }; b@1402: b@1402: this.createCommentBox = function(audioObject) { b@1402: var node = new this.elementCommentBox(audioObject); b@1402: this.commentBoxes.push(node); b@1402: audioObject.commentDOM = node; b@1402: return node; b@1402: }; b@1402: b@1402: this.sortCommentBoxes = function() { b@1402: var holder = []; b@1402: while (this.commentBoxes.length > 0) { b@1402: var node = this.commentBoxes.pop(0); b@1402: holder[node.id] = node; b@1402: } b@1402: this.commentBoxes = holder; b@1402: }; b@1402: b@1402: this.showCommentBoxes = function(inject, sort) { b@1402: if (sort) {interfaceContext.sortCommentBoxes();} b@1402: for (var i=0; i 0) { b@1402: var time = this.playbackObject.getCurrentPosition(); b@1402: if (time > 0) { b@1402: var width = 490; b@1402: var pix = Math.floor(time/this.timePerPixel); b@1402: this.scrubberHead.style.left = pix+'px'; b@1402: if (this.maxTime > 60.0) { b@1402: var secs = time%60; b@1402: var mins = Math.floor((time-secs)/60); b@1402: secs = secs.toString(); b@1402: secs = secs.substr(0,2); b@1402: mins = mins.toString(); b@1402: this.curTimeSpan.textContent = mins+':'+secs; b@1402: } else { b@1402: time = time.toString(); b@1402: this.curTimeSpan.textContent = time.substr(0,4); b@1402: } b@1402: } else { b@1402: this.scrubberHead.style.left = '0px'; b@1402: if (this.maxTime < 60) { b@1402: this.curTimeSpan.textContent = '0.00'; b@1402: } else { b@1402: this.curTimeSpan.textContent = '00:00'; b@1402: } b@1402: } b@1402: } b@1402: }; b@1402: b@1402: this.interval = undefined; b@1402: b@1402: this.start = function() { b@1402: if (this.playbackObject != undefined && this.interval == undefined) { b@1402: if (this.maxTime < 60) { b@1402: this.interval = setInterval(function(){interfaceContext.playhead.update();},10); b@1402: } else { b@1402: this.interval = setInterval(function(){interfaceContext.playhead.update();},100); b@1402: } b@1402: } b@1402: }; b@1402: this.stop = function() { b@1402: clearInterval(this.interval); b@1402: this.interval = undefined; b@1402: if (this.maxTime < 60) { b@1402: this.curTimeSpan.textContent = '0.00'; b@1402: } else { b@1402: this.curTimeSpan.textContent = '00:00'; b@1402: } b@1402: }; b@1402: }; b@1402: b@1402: // Global Checkers b@1402: // These functions will help enforce the checkers b@1402: this.checkHiddenAnchor = function() b@1402: { b@1402: var audioHolder = testState.currentStateMap[testState.currentIndex]; b@1402: if (audioHolder.anchorId != null) b@1402: { b@1402: var audioObject = audioEngineContext.audioObjects[audioHolder.anchorId]; b@1402: if (audioObject.interfaceDOM.getValue() > audioObject.specification.marker && audioObject.interfaceDOM.enforce == true) b@1402: { b@1402: // Anchor is not set below b@1402: console.log('Anchor node not below marker value'); b@1402: alert('Please keep listening'); b@1402: return false; b@1402: } b@1402: } b@1402: return true; b@1402: }; b@1402: b@1402: this.checkHiddenReference = function() b@1402: { b@1402: var audioHolder = testState.currentStateMap[testState.currentIndex]; b@1402: if (audioHolder.referenceId != null) b@1402: { b@1402: var audioObject = audioEngineContext.audioObjects[audioHolder.referenceId]; b@1402: if (audioObject.interfaceDOM.getValue() < audioObject.specification.marker && audioObject.interfaceDOM.enforce == true) b@1402: { b@1402: // Anchor is not set below b@1402: console.log('Reference node not above marker value'); b@1402: alert('Please keep listening'); b@1402: return false; b@1402: } b@1402: } b@1402: return true; b@1402: }; b@1402: b@1402: this.checkFragmentsFullyPlayed = function () b@1402: { b@1402: // Checks the entire file has been played back b@1402: // NOTE ! This will return true IF playback is Looped!!! b@1402: if (audioEngineContext.loopPlayback) b@1402: { b@1402: console.log("WARNING - Looped source: Cannot check fragments are fully played"); b@1402: return true; b@1402: } b@1402: var check_pass = true; b@1402: var error_obj = []; b@1402: for (var i = 0; i= time) b@1402: { b@1402: passed = true; b@1402: break; b@1402: } b@1402: } b@1402: if (passed == false) b@1402: { b@1402: check_pass = false; b@1402: console.log("Continue listening to track-"+i); b@1402: error_obj.push(i); b@1402: } b@1402: } b@1402: if (check_pass == false) b@1402: { b@1402: var str_start = "You have not listened to fragments "; b@1402: for (var i=0; i