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@453: var schemaXSD; // Hold the parsed schema XSD n@181: var specification; n@182: var interfaceContext; n@453: var storage; 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@408: // Add a prototype to the bufferNode to hold the desired LINEAR gain n@448: AudioBuffer.prototype.playbackGain = undefined; n@408: // Add a prototype to the bufferNode to hold the computed LUFS loudness n@408: AudioBuffer.prototype.lufs = 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@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@453: n@453: // Create the storage object n@453: storage = new Storage(); n@379: // Define window callbacks for interface n@379: window.onresize = function(event){interfaceContext.resizeWindow(event);}; n@16: }; nicholas@1: n@377: function loadProjectSpec(url) { n@377: // Load the project document from the given URL, decode the XML and instruct audioEngine to get audio data n@377: // If url is null, request client to upload project XML document n@453: var xmlhttp = new XMLHttpRequest(); n@453: xmlhttp.open("GET",'test-schema.xsd',true); n@453: xmlhttp.onload = function() n@453: { n@453: schemaXSD = xmlhttp.response; n@453: var parse = new DOMParser(); n@453: specification.schema = parse.parseFromString(xmlhttp.response,'text/xml'); n@453: var r = new XMLHttpRequest(); n@453: r.open('GET',url,true); n@453: r.onload = function() { n@453: loadProjectSpecCallback(r.response); n@453: }; n@453: r.send(); n@377: }; n@453: xmlhttp.send(); n@377: }; n@377: n@377: function loadProjectSpecCallback(response) { n@377: // Function called after asynchronous download of XML project specification n@377: //var decode = $.parseXML(response); n@377: //projectXML = $(decode); n@377: n@453: // First perform XML schema validation n@453: var Module = { n@453: xml: response, n@453: schema: schemaXSD, n@453: arguments:["--noout", "--schema", 'test-schema.xsd','document.xml'] n@453: }; n@453: n@453: var xmllint = validateXML(Module); n@453: console.log(xmllint); n@453: if(xmllint != 'document.xml validates\n') n@453: { n@453: document.getElementsByTagName('body')[0].innerHTML = null; n@453: var msg = document.createElement("h3"); n@453: msg.textContent = "FATAL ERROR"; n@453: var span = document.createElement("h4"); n@453: span.textContent = "The XML validator returned the following errors when decoding your XML file"; n@453: document.getElementsByTagName('body')[0].appendChild(msg); n@453: document.getElementsByTagName('body')[0].appendChild(span); n@453: xmllint = xmllint.split('\n'); n@453: for (var i in xmllint) n@453: { n@453: document.getElementsByTagName('body')[0].appendChild(document.createElement('br')); n@453: var span = document.createElement("span"); n@453: span.textContent = xmllint[i]; n@453: document.getElementsByTagName('body')[0].appendChild(span); n@453: } n@453: return; n@453: } n@453: n@377: var parse = new DOMParser(); n@377: projectXML = parse.parseFromString(response,'text/xml'); n@430: var errorNode = projectXML.getElementsByTagName('parsererror'); n@430: if (errorNode.length >= 1) n@430: { n@430: var msg = document.createElement("h3"); n@430: msg.textContent = "FATAL ERROR"; n@430: var span = document.createElement("span"); n@430: span.textContent = "The XML parser returned the following errors when decoding your XML file"; n@433: document.getElementsByTagName('body')[0].innerHTML = null; n@430: document.getElementsByTagName('body')[0].appendChild(msg); n@430: document.getElementsByTagName('body')[0].appendChild(span); n@430: document.getElementsByTagName('body')[0].appendChild(errorNode[0]); n@430: return; n@430: } n@377: n@377: // Build the specification n@377: specification.decode(projectXML); n@453: storage.initialise(); n@468: /// CHECK FOR SAMPLE RATE COMPATIBILITY n@468: if (specification.sampleRate != undefined) { n@468: if (Number(specification.sampleRate) != audioContext.sampleRate) { n@468: var errStr = 'Sample rates do not match! Requested '+Number(specification.sampleRate)+', got '+audioContext.sampleRate+'. Please set the sample rate to match before completing this test.'; n@468: alert(errStr); n@468: return; n@468: } n@468: } n@377: n@377: // Detect the interface to use and load the relevant javascripts. n@377: var interfaceJS = document.createElement('script'); n@377: interfaceJS.setAttribute("type","text/javascript"); n@458: switch(specification.interface) n@458: { n@458: case "APE": n@470: interfaceJS.setAttribute("src","interfaces/ape.js"); n@377: n@377: // APE comes with a css file n@377: var css = document.createElement('link'); n@377: css.rel = 'stylesheet'; n@377: css.type = 'text/css'; n@470: css.href = 'interfaces/ape.css'; n@377: n@377: document.getElementsByTagName("head")[0].appendChild(css); n@458: break; n@458: n@458: case "MUSHRA": n@470: interfaceJS.setAttribute("src","interfaces/mushra.js"); n@377: n@377: // MUSHRA comes with a css file n@377: var css = document.createElement('link'); n@377: css.rel = 'stylesheet'; n@377: css.type = 'text/css'; n@470: css.href = 'interfaces/mushra.css'; n@377: n@377: document.getElementsByTagName("head")[0].appendChild(css); n@458: break; n@458: n@458: case "AB": n@470: interfaceJS.setAttribute("src","interfaces/AB.js"); n@458: n@458: // AB comes with a css file n@458: var css = document.createElement('link'); n@458: css.rel = 'stylesheet'; n@458: css.type = 'text/css'; n@470: css.href = 'interfaces/AB.css'; n@458: n@458: document.getElementsByTagName("head")[0].appendChild(css); n@472: case "ABC": n@472: // Above enumerate to horizontal sliders n@472: interfaceJS.setAttribute("src","interfaces/horizontal-sliders.js"); n@472: n@472: // horizontal-sliders comes with a css file n@472: var css = document.createElement('link'); n@472: css.rel = 'stylesheet'; n@472: css.type = 'text/css'; n@472: css.href = 'interfaces/horizontal-sliders.css'; n@472: n@472: document.getElementsByTagName("head")[0].appendChild(css); n@377: } n@377: document.getElementsByTagName("head")[0].appendChild(interfaceJS); n@377: n@379: // Create the audio engine object n@379: audioEngineContext = new AudioEngine(specification); n@379: n@453: $(specification.pages).each(function(index,elem){ n@379: $(elem.audioElements).each(function(i,audioElem){ n@453: var URL = elem.hostURL + audioElem.url; n@379: var buffer = null; n@379: 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: n@453: this.initState = function(node,store) { nicholas@116: //Call this with your preTest and postTest nodes when needed to nicholas@116: // initialise the popup procedure. n@453: if (node.options.length > 0) { n@453: this.popupOptions = []; n@453: this.node = node; n@453: this.store = store; n@453: for (var opt of node.options) n@453: { n@453: this.popupOptions.push({ n@453: specification: opt, n@453: response: null n@453: }); n@453: } 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@453: if (node.specification.type == 'question') { nicholas@116: // Must extract the question data nicholas@116: var textArea = $(popup.popupContent).find('textarea')[0]; n@453: if (node.specification.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 n@453: console.log("Question: "+ node.specification.statement); nicholas@117: console.log("Question Response: "+ textArea.value); n@453: node.response = textArea.value; nicholas@116: } n@453: } else if (node.specification.type == 'checkbox') { nicholas@188: // Must extract checkbox data n@455: console.log("Checkbox: "+ node.specification.statement); n@453: var inputs = this.popupResponse.getElementsByTagName('input'); n@453: node.response = []; n@453: 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@453: node.response = input.value; 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(); n@453: for (var node of this.popupOptions) n@453: { n@453: this.store.postResult(node); 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) n@453: { n@453: createProjectSave(specification.projectReturn); n@453: } n@453: else n@453: { n@453: if (this.currentStateMap == null) n@453: { nicholas@129: this.currentStateMap = this.stateMap[this.stateIndex]; n@463: if (this.currentStateMap.randomiseOrder) n@463: { n@463: this.currentStateMap.audioElements = randomiseOrder(this.currentStateMap.audioElements); n@463: } n@453: storage.createTestPageStore(this.currentStateMap); n@453: if (this.currentStateMap.preTest != null) n@453: { n@453: this.currentStatePosition = 'pre'; n@453: popup.initState(this.currentStateMap.preTest,storage.testPages[this.stateIndex].preTest); nicholas@129: } else { n@453: this.currentStatePosition = 'test'; n@453: } n@453: interfaceContext.newPage(this.currentStateMap,storage.testPages[this.stateIndex]); n@453: return; n@453: } n@453: switch(this.currentStatePosition) n@453: { n@453: case 'pre': n@453: this.currentStatePosition = 'test'; n@453: break; n@453: case 'test': n@453: this.currentStatePosition = 'post'; n@453: // Save the data n@453: this.testPageCompleted(); n@453: if (this.currentStateMap.postTest == null) n@453: { nicholas@129: this.advanceState(); n@453: return; n@453: } else { n@453: popup.initState(this.currentStateMap.postTest,storage.testPages[this.stateIndex].postTest); nicholas@129: } n@453: break; n@453: case 'post': n@453: this.stateIndex++; n@453: this.currentStateMap = null; n@453: this.advanceState(); n@453: break; n@453: }; nicholas@129: } nicholas@129: }; nicholas@129: n@453: this.testPageCompleted = function() { nicholas@129: // Function called each time a test page has been completed n@453: var storePoint = storage.testPages[this.stateIndex]; n@453: // First get the test metric n@453: n@453: var metric = storePoint.XMLDOM.getElementsByTagName('metric')[0]; n@381: if (audioEngineContext.metric.enableTestTimer) n@381: { n@453: var testTime = storePoint.parent.document.createElement('metricresult'); n@381: testTime.id = 'testTime'; n@381: testTime.textContent = audioEngineContext.timer.testDuration; n@381: metric.appendChild(testTime); n@381: } n@453: n@381: var audioObjects = audioEngineContext.audioObjects; n@453: for (var ao of audioEngineContext.audioObjects) n@381: { n@453: ao.exportXMLDOM(); n@381: } n@453: for (var element of interfaceContext.commentQuestions) n@453: { n@453: element.exportXMLDOM(storePoint); n@453: } n@453: pageXMLSave(storePoint.XMLDOM, this.currentStateMap); n@176: }; nicholas@114: } nicholas@114: n@377: function AudioEngine(specification) { nicholas@1: nicholas@1: // Create two output paths, the main outputGain and fooGain. nicholas@1: // Output gain is default to 1 and any items for playback route here nicholas@1: // Foo gain is used for analysis to ensure paths get processed, but are not heard nicholas@1: // because web audio will optimise and any route which does not go to the destination gets ignored. nicholas@1: this.outputGain = audioContext.createGain(); nicholas@1: this.fooGain = audioContext.createGain(); nicholas@1: this.fooGain.gain = 0; nicholas@1: nicholas@7: // Use this to detect playback state: 0 - stopped, 1 - playing nicholas@7: this.status = 0; nicholas@7: nicholas@1: // Connect both gains to output nicholas@1: this.outputGain.connect(audioContext.destination); nicholas@1: this.fooGain.connect(audioContext.destination); nicholas@1: n@49: // Create the timer Object n@49: this.timer = new timer(); n@49: // Create session metrics n@377: this.metric = new sessionMetrics(this,specification); n@49: n@57: this.loopPlayback = false; n@57: n@453: this.pageStore = null; n@453: nicholas@1: // Create store for new audioObjects nicholas@1: this.audioObjects = []; nicholas@1: n@379: this.buffers = []; n@408: this.bufferObj = function() n@379: { n@408: this.url = null; n@379: this.buffer = null; n@379: this.xmlRequest = new XMLHttpRequest(); nicholas@418: this.xmlRequest.parent = this; n@379: this.users = []; n@471: this.ready = function() n@471: { n@471: for (var i=0; i 0) {this.wasMoved = true;} n@49: this.movementTracker[this.movementTracker.length] = [time, position]; n@49: }; n@49: nicholas@132: this.startListening = function(time) n@49: { nicholas@110: if (this.listenHold == false) n@49: { n@49: this.wasListenedTo = true; n@49: this.listenStart = time; nicholas@110: this.listenHold = true; n@164: n@164: var evnt = document.createElement('event'); n@164: var testTime = document.createElement('testTime'); n@164: testTime.setAttribute('start',time); n@164: var bufferTime = document.createElement('bufferTime'); n@164: bufferTime.setAttribute('start',this.parent.getCurrentPosition()); n@164: evnt.appendChild(testTime); n@164: evnt.appendChild(bufferTime); n@164: this.listenTracker.push(evnt); n@164: n@139: console.log('slider ' + this.parent.id + ' played (' + time + ')'); // DEBUG/SAFETY: show played slider id n@139: } n@139: }; nicholas@132: n@203: this.stopListening = function(time,bufferStopTime) nicholas@132: { nicholas@132: if (this.listenHold == true) nicholas@132: { n@164: var diff = time - this.listenStart; n@164: this.listenedTimer += (diff); n@49: this.listenStart = 0; nicholas@110: this.listenHold = false; n@164: n@164: var evnt = this.listenTracker[this.listenTracker.length-1]; n@164: var testTime = evnt.getElementsByTagName('testTime')[0]; n@164: var bufferTime = evnt.getElementsByTagName('bufferTime')[0]; n@164: testTime.setAttribute('stop',time); n@203: if (bufferStopTime == undefined) { n@203: bufferTime.setAttribute('stop',this.parent.getCurrentPosition()); n@203: } else { n@203: bufferTime.setAttribute('stop',bufferStopTime); n@203: } n@164: console.log('slider ' + this.parent.id + ' played for (' + diff + ')'); // DEBUG/SAFETY: show played slider id n@49: } n@49: }; n@177: n@177: this.exportXMLDOM = function() { n@453: var storeDOM = []; n@177: if (audioEngineContext.metric.enableElementTimer) { n@453: var mElementTimer = storage.document.createElement('metricresult'); n@177: mElementTimer.setAttribute('name','enableElementTimer'); n@177: mElementTimer.textContent = this.listenedTimer; n@453: storeDOM.push(mElementTimer); n@177: } n@177: if (audioEngineContext.metric.enableElementTracker) { n@453: var elementTrackerFull = storage.document.createElement('metricResult'); n@177: elementTrackerFull.setAttribute('name','elementTrackerFull'); n@177: for (var k=0; k 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@377: 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@453: this.interface = null; n@453: this.projectReturn = null; n@453: this.randomiseOrder = null; n@453: this.testPages = null; n@453: this.pages = []; n@453: this.metrics = null; n@453: this.interfaces = null; n@453: this.loudness = null; n@453: this.errors = []; n@453: this.schema = null; n@380: n@380: this.randomiseOrder = function(input) n@380: { n@380: // This takes an array of information and randomises the order n@380: var N = input.length; n@380: n@380: var inputSequence = []; // For safety purposes: keep track of randomisation n@380: for (var counter = 0; counter < N; ++counter) n@380: inputSequence.push(counter) // Fill array n@380: var inputSequenceClone = inputSequence.slice(0); n@380: n@380: var holdArr = []; n@380: var outputSequence = []; n@380: for (var n=0; n node n@453: if (schema.getAttribute('name') == undefined && schema.getAttribute('ref') != undefined) n@453: { n@453: schema = this.schema.getElementsByName(schema.getAttribute('ref'))[0]; n@453: } n@453: var defaultOpt = schema.getAttribute('default'); n@453: if (attribute == null) { n@453: attribute = defaultOpt; n@453: } n@453: var dataType = schema.getAttribute('type'); n@453: if (typeof dataType == "string") { dataType = dataType.substr(3);} n@453: else {dataType = "string";} n@453: if (attribute == null) n@453: { n@453: return attribute; n@453: } n@453: switch(dataType) n@453: { n@453: case "boolean": n@453: if (attribute == 'true'){attribute = true;}else{attribute=false;} n@453: break; n@453: case "negativeInteger": n@453: case "positiveInteger": n@453: case "nonNegativeInteger": n@453: case "nonPositiveInteger": n@453: case "integer": n@453: case "decimal": n@453: case "short": n@453: attribute = Number(attribute); n@453: break; n@453: case "string": n@453: default: n@453: attribute = String(attribute); n@453: break; n@453: } n@453: return attribute; n@453: }; n@180: n@374: this.decode = function(projectXML) { n@453: this.errors = []; n@180: // projectXML - DOM Parsed document nicholas@240: this.projectXML = projectXML.childNodes[0]; n@180: var setupNode = projectXML.getElementsByTagName('setup')[0]; n@453: var schemaSetup = this.schema.getElementsByName('setup')[0]; n@453: // First decode the attributes n@453: var attributes = schemaSetup.getElementsByTagName('attribute'); n@453: for (var i in attributes) n@297: { n@453: if (isNaN(Number(i)) == true){break;} n@453: var attributeName = attributes[i].getAttribute('name'); n@453: var projectAttr = setupNode.getAttribute(attributeName); n@453: projectAttr = this.processAttribute(projectAttr,attributes[i]); n@453: switch(typeof projectAttr) n@410: { n@453: case "number": n@453: case "boolean": n@453: eval('this.'+attributeName+' = '+projectAttr); n@453: break; n@453: case "string": n@453: eval('this.'+attributeName+' = "'+projectAttr+'"'); n@453: break; n@410: } n@453: n@374: } n@374: n@453: this.metrics = { n@453: enabled: [], n@453: decode: function(parent, xml) { n@453: var children = xml.getElementsByTagName('metricenable'); n@453: for (var i in children) { n@453: if (isNaN(Number(i)) == true){break;} n@453: this.enabled.push(children[i].textContent); n@453: } n@453: }, n@453: encode: function(root) { n@453: var node = root.createElement('metric'); n@453: for (var i in this.enabled) n@453: { n@453: if (isNaN(Number(i)) == true){break;} n@453: var child = root.createElement('metricenable'); n@453: child.textContent = this.enabled[i]; n@453: node.appendChild(child); n@453: } n@453: return node; n@453: } n@453: }; n@180: n@453: this.metrics.decode(this,setupNode.getElementsByTagName('metric')[0]); n@453: n@453: // Now process the survey node options n@453: var survey = setupNode.getElementsByTagName('survey'); n@453: var surveySchema = specification.schema.getElementsByName('survey')[0]; n@453: for (var i in survey) { n@453: if (isNaN(Number(i)) == true){break;} n@453: var location = survey[i].getAttribute('location'); n@453: if (location == 'pre' || location == 'before') n@453: { n@453: if (this.preTest != null){this.errors.push("Already a pre/before test survey defined! Ignoring second!!");} n@453: else { n@453: this.preTest = new this.surveyNode(); n@453: this.preTest.decode(this,survey[i],surveySchema); n@453: } n@453: } else if (location == 'post' || location == 'after') { n@453: if (this.postTest != null){this.errors.push("Already a post/after test survey defined! Ignoring second!!");} n@453: else { n@453: this.postTest = new this.surveyNode(); n@453: this.postTest.decode(this,survey[i],surveySchema); n@453: } n@180: } n@180: } n@180: n@453: var interfaceNode = setupNode.getElementsByTagName('interface'); n@453: if (interfaceNode.length > 1) n@453: { n@453: this.errors.push("Only one node in the node allowed! Others except first ingnored!"); n@453: } n@453: this.interfaces = new this.interfaceNode(); n@453: if (interfaceNode.length != 0) n@453: { n@453: interfaceNode = interfaceNode[0]; n@453: this.interfaces.decode(this,interfaceNode,this.schema.getElementsByName('interface')[1]); nicholas@213: } nicholas@213: n@453: // Page tags n@453: var pageTags = projectXML.getElementsByTagName('page'); n@453: var pageSchema = this.schema.getElementsByName('page')[0]; n@453: for (var i=0; i n@374: for (var i=0; i n@374: var AHPreTest = root.createElement("PreTest"); n@374: 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@395: popup.resize(event); 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@453: this.string.innerHTML = commentQuestion.statement; 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@453: for (var optNode of commentQuestion.options) n@193: { n@193: var div = document.createElement('div'); n@301: div.style.width = '80px'; n@193: div.style.float = 'left'; n@193: var input = document.createElement('input'); n@193: input.type = 'radio'; n@193: input.name = commentQuestion.id; n@453: input.setAttribute('setvalue',optNode.name); n@193: input.className = 'comment-radio'; n@193: div.appendChild(input); n@193: this.inputs.appendChild(div); n@193: n@193: n@193: div = document.createElement('div'); n@301: div.style.width = '80px'; n@193: div.style.float = 'left'; n@193: div.align = 'center'; n@193: var span = document.createElement('span'); n@453: span.textContent = optNode.text; n@193: span.className = 'comment-radio-span'; n@193: div.appendChild(span); n@193: this.span.appendChild(div); n@193: this.options.push(input); n@193: } n@193: this.holder.appendChild(this.span); n@193: this.holder.appendChild(this.inputs); 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: var question = document.createElement('question'); n@193: question.textContent = this.string.textContent; n@193: var response = document.createElement('response'); n@193: var i=0; n@193: while(this.options[i].checked == false) { n@193: i++; n@193: if (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@467: this.commentBoxes.sort(function(a,b){return a.id - b.id;}); n@182: }; n@182: n@182: this.showCommentBoxes = function(inject, sort) { n@182: if (sort) {interfaceContext.sortCommentBoxes();} n@467: for (var box of interfaceContext.commentBoxes) { n@467: inject.appendChild(box.trackComment); n@182: } n@182: }; n@193: nicholas@211: this.deleteCommentBoxes = function() { nicholas@211: this.commentBoxes = []; nicholas@237: }; nicholas@211: n@193: this.createCommentQuestion = function(element) { n@193: var node; n@453: if (element.type == 'question') { n@193: node = new this.commentBox(element); n@193: } else if (element.type == 'radio') { n@193: node = new this.radioBox(element); n@195: } else if (element.type == 'checkbox') { n@195: node = new this.checkboxBox(element); n@193: } n@193: this.commentQuestions.push(node); n@193: return node; n@193: }; n@201: nicholas@237: this.deleteCommentQuestions = function() nicholas@237: { nicholas@237: this.commentQuestions = []; nicholas@237: }; nicholas@237: n@201: this.playhead = new function() n@201: { n@201: this.object = document.createElement('div'); n@201: this.object.className = 'playhead'; n@201: this.object.align = 'left'; n@201: var curTime = document.createElement('div'); n@201: curTime.style.width = '50px'; n@201: this.curTimeSpan = document.createElement('span'); n@201: this.curTimeSpan.textContent = '00:00'; n@201: curTime.appendChild(this.curTimeSpan); n@201: this.object.appendChild(curTime); n@201: this.scrubberTrack = document.createElement('div'); n@201: this.scrubberTrack.className = 'playhead-scrub-track'; n@201: n@201: this.scrubberHead = document.createElement('div'); n@201: this.scrubberHead.id = 'playhead-scrubber'; n@201: this.scrubberTrack.appendChild(this.scrubberHead); n@201: this.object.appendChild(this.scrubberTrack); n@201: n@201: this.timePerPixel = 0; n@201: this.maxTime = 0; n@201: n@204: this.playbackObject; n@204: n@204: this.setTimePerPixel = function(audioObject) { n@201: //maxTime must be in seconds n@204: this.playbackObject = audioObject; n@379: this.maxTime = audioObject.buffer.buffer.duration; n@201: var width = 490; //500 - 10, 5 each side of the tracker head n@204: this.timePerPixel = this.maxTime/490; n@204: if (this.maxTime < 60) { n@201: this.curTimeSpan.textContent = '0.00'; n@201: } else { n@201: this.curTimeSpan.textContent = '00:00'; n@201: } n@201: }; n@201: n@204: this.update = function() { n@201: // Update the playhead position, startPlay must be called n@201: if (this.timePerPixel > 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: { n@453: for (var ao of audioEngineContext.audioObjects) nicholas@235: { n@453: if (ao.specification.type == "anchor") nicholas@235: { n@454: if (ao.interfaceDOM.getValue() > (ao.specification.marker/100) && ao.specification.marker > 0) { n@453: // Anchor is not set below n@453: console.log('Anchor node not below marker value'); n@453: alert('Please keep listening'); n@453: return false; n@453: } nicholas@235: } nicholas@235: } nicholas@235: return true; nicholas@235: }; nicholas@235: nicholas@235: this.checkHiddenReference = function() nicholas@235: { n@453: for (var ao of audioEngineContext.audioObjects) nicholas@235: { n@453: if (ao.specification.type == "reference") nicholas@235: { n@454: if (ao.interfaceDOM.getValue() < (ao.specification.marker/100) && ao.specification.marker > 0) { n@453: // Anchor is not set below n@453: console.log('Reference node not below marker value'); n@453: alert('Please keep listening'); n@453: return false; n@453: } 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@469: console.log("Continue listening to track-"+audioEngineContext.audioObjects.interfaceDOM.getPresentedId()); n@469: error_obj.push(audioEngineContext.audioObjects.interfaceDOM.getPresentedId()); n@366: } n@366: } n@366: if (check_pass == false) n@366: { nicholas@415: var str_start = "You have not completely listened to fragments "; n@366: for (var i=0; i 0) n@453: { n@453: aeNode.setAttribute('marker',element.marker); n@453: } n@453: } n@453: var ae_metric = this.parent.document.createElement('metric'); n@453: aeNode.appendChild(ae_metric); n@453: this.XMLDOM.appendChild(aeNode); n@453: } n@453: n@453: // Add any commentQuestions n@453: for (var element of this.specification.commentQuestions) n@453: { n@453: var cqNode = this.parent.document.createElement('commentquestion'); n@453: cqNode.id = element.id; n@453: cqNode.setAttribute('type',element.type); n@453: var statement = this.parent.document.createElement('statement'); n@453: statement.textContent = cqNode.statement; n@453: cqNode.appendChild(statement); n@453: var response = this.parent.document.createElement('response'); n@453: cqNode.appendChild(response); n@453: this.XMLDOM.appendChild(cqNode); n@453: } n@453: n@453: this.parent.root.appendChild(this.XMLDOM); n@453: }; n@453: this.finish = function() n@453: { n@453: if (this.state == 0) n@453: { n@453: var projectDocument = specification.projectXML; n@453: projectDocument.setAttribute('file-name',url); n@453: this.root.appendChild(projectDocument); n@453: this.root.appendChild(returnDateNode()); n@453: this.root.appendChild(interfaceContext.returnNavigator()); n@453: } n@453: this.state = 1; n@453: return this.root; n@453: }; n@453: }