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@527: // Add a prototype to the bufferSourceNode to hold when the object was given a play command n@527: AudioBufferSourceNode.prototype.playbackStartTime = 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: n@477: // Firefox does not have an XMLDocument.prototype.getElementsByName n@477: // and there is no searchAll style command, this custom function will n@477: // search all children recusrively for the name. Used for XSD where all n@477: // element nodes must have a name and therefore can pull the schema node n@477: XMLDocument.prototype.getAllElementsByName = function(name) n@477: { n@477: name = String(name); n@477: var selected = this.documentElement.getAllElementsByName(name); n@477: return selected; n@477: } n@477: n@477: Element.prototype.getAllElementsByName = function(name) n@477: { n@477: name = String(name); n@477: var selected = []; n@477: var node = this.firstElementChild; n@477: while(node != null) n@477: { n@477: if (node.getAttribute('name') == name) n@477: { n@477: selected.push(node); n@477: } n@477: if (node.childElementCount > 0) n@477: { n@477: selected = selected.concat(node.getAllElementsByName(name)); n@477: } n@477: node = node.nextElementSibling; n@477: } n@477: return selected; n@477: } n@477: n@477: XMLDocument.prototype.getAllElementsByTagName = function(name) n@477: { n@477: name = String(name); n@477: var selected = this.documentElement.getAllElementsByTagName(name); n@477: return selected; n@477: } n@477: n@477: Element.prototype.getAllElementsByTagName = function(name) n@477: { n@477: name = String(name); n@477: var selected = []; n@477: var node = this.firstElementChild; n@477: while(node != null) n@477: { n@477: if (node.nodeName == name) n@477: { n@477: selected.push(node); n@477: } n@477: if (node.childElementCount > 0) n@477: { n@477: selected = selected.concat(node.getAllElementsByTagName(name)); n@477: } n@477: node = node.nextElementSibling; n@477: } n@477: return selected; n@477: } n@477: n@477: // Firefox does not have an XMLDocument.prototype.getElementsByName n@477: if (typeof XMLDocument.prototype.getElementsByName != "function") { n@477: XMLDocument.prototype.getElementsByName = function(name) n@477: { n@477: name = String(name); n@477: var node = this.documentElement.firstElementChild; n@477: var selected = []; n@477: while(node != null) n@477: { n@477: if (node.getAttribute('name') == name) n@477: { n@477: selected.push(node); n@477: } n@477: node = node.nextElementSibling; n@477: } n@477: return selected; n@477: } n@477: } n@477: 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@501: n@501: // 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@543: r.onerror = function() { n@543: document.getElementsByTagName('body')[0].innerHTML = null; n@543: var msg = document.createElement("h3"); n@543: msg.textContent = "FATAL ERROR"; n@543: var span = document.createElement("p"); n@543: span.textContent = "There was an error when loading your XML file. Please check your path in the URL. After the path to this page, there should be '?url=path/to/your/file.xml'. Check the spelling of your filename as well. If you are still having issues, check the log of the python server or your webserver distribution for 404 codes for your file."; n@543: document.getElementsByTagName('body')[0].appendChild(msg); n@543: document.getElementsByTagName('body')[0].appendChild(span); n@543: } 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@584: // Check if XML is new or a resumption n@584: var parse = new DOMParser(); n@584: var responseDocument = parse.parseFromString(response,'text/xml'); n@584: var errorNode = responseDocument.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@627: if (responseDocument == undefined) { n@627: var msg = document.createElement("h3"); n@627: msg.textContent = "FATAL ERROR"; n@627: var span = document.createElement("span"); n@627: span.textContent = "The project XML was not decoded properly, try refreshing your browser and clearing caches. If the problem persists, contact the test creator."; n@627: document.getElementsByTagName('body')[0].innerHTML = null; n@627: document.getElementsByTagName('body')[0].appendChild(msg); n@627: document.getElementsByTagName('body')[0].appendChild(span); n@627: return; n@627: } n@584: if (responseDocument.children[0].nodeName == "waet") { n@584: // document is a specification n@584: n@584: // Perform XML schema validation n@584: var Module = { n@584: xml: response, n@584: schema: schemaXSD, n@584: arguments:["--noout", "--schema", 'test-schema.xsd','document.xml'] n@584: }; n@584: projectXML = responseDocument; n@584: var xmllint = validateXML(Module); n@584: console.log(xmllint); n@584: if(xmllint != 'document.xml validates\n') n@584: { n@584: document.getElementsByTagName('body')[0].innerHTML = null; n@584: var msg = document.createElement("h3"); n@584: msg.textContent = "FATAL ERROR"; n@584: var span = document.createElement("h4"); n@584: span.textContent = "The XML validator returned the following errors when decoding your XML file"; n@584: document.getElementsByTagName('body')[0].appendChild(msg); n@584: document.getElementsByTagName('body')[0].appendChild(span); n@584: xmllint = xmllint.split('\n'); n@584: for (var i in xmllint) n@584: { n@584: document.getElementsByTagName('body')[0].appendChild(document.createElement('br')); n@584: var span = document.createElement("span"); n@584: span.textContent = xmllint[i]; n@584: document.getElementsByTagName('body')[0].appendChild(span); n@584: } n@584: return; n@584: } n@587: // Build the specification n@587: specification.decode(projectXML); n@584: // Generate the session-key n@584: storage.initialise(); n@584: n@584: } else if (responseDocument.children[0].nodeName == "waetresult") { n@584: // document is a result n@602: projectXML = document.implementation.createDocument(null,"waet"); n@602: projectXML.children[0].appendChild(responseDocument.getElementsByTagName('waet')[0].getElementsByTagName("setup")[0].cloneNode(true)); n@602: var child = responseDocument.children[0].children[0]; n@602: while (child != null) { n@602: if (child.nodeName == "survey") { n@602: // One of the global survey elements n@602: if (child.getAttribute("state") == "complete") { n@602: // We need to remove this survey from n@602: var location = child.getAttribute("location"); n@602: var globalSurveys = projectXML.getElementsByTagName("setup")[0].getElementsByTagName("survey")[0]; n@602: while(globalSurveys != null) { n@602: if (location == "pre" || location == "before") { n@602: if (globalSurveys.getAttribute("location") == "pre" || globalSurveys.getAttribute("location") == "before") { n@602: projectXML.getElementsByTagName("setup")[0].removeChild(globalSurveys); n@602: break; n@602: } n@602: } else { n@602: if (globalSurveys.getAttribute("location") == "post" || globalSurveys.getAttribute("location") == "after") { n@602: projectXML.getElementsByTagName("setup")[0].removeChild(globalSurveys); n@602: break; n@602: } n@602: } n@602: globalSurveys = globalSurveys.nextElementSibling; n@602: } n@602: } else { n@602: // We need to complete this, so it must be regenerated by store n@602: var copy = child; n@602: child = child.previousElementSibling; n@602: responseDocument.children[0].removeChild(copy); n@602: } n@602: } else if (child.nodeName == "page") { n@602: if (child.getAttribute("state") == "empty") { n@602: // We need to complete this page n@602: projectXML.children[0].appendChild(responseDocument.getElementById(child.getAttribute("ref")).cloneNode(true)); n@602: var copy = child; n@602: child = child.previousElementSibling; n@602: responseDocument.children[0].removeChild(copy); n@602: } n@602: } n@602: child = child.nextElementSibling; n@602: } n@587: // Build the specification n@587: specification.decode(projectXML); n@602: // Use the original n@602: storage.initialise(responseDocument); n@584: } 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@619: interfaceJS.setAttribute("src","interfaces/ape.js"); n@619: n@619: // APE comes with a css file n@619: var css = document.createElement('link'); n@619: css.rel = 'stylesheet'; n@619: css.type = 'text/css'; n@619: css.href = 'interfaces/ape.css'; n@619: n@619: document.getElementsByTagName("head")[0].appendChild(css); n@619: break; n@619: n@458: case "MUSHRA": n@619: interfaceJS.setAttribute("src","interfaces/mushra.js"); n@619: n@619: // MUSHRA comes with a css file n@619: var css = document.createElement('link'); n@619: css.rel = 'stylesheet'; n@619: css.type = 'text/css'; n@619: css.href = 'interfaces/mushra.css'; n@619: n@619: document.getElementsByTagName("head")[0].appendChild(css); n@619: break; n@458: n@458: case "AB": n@619: interfaceJS.setAttribute("src","interfaces/AB.js"); n@619: n@619: // AB comes with a css file n@619: var css = document.createElement('link'); n@619: css.rel = 'stylesheet'; n@619: css.type = 'text/css'; n@619: css.href = 'interfaces/AB.css'; n@619: n@619: document.getElementsByTagName("head")[0].appendChild(css); n@619: break; n@619: n@619: case "ABX": n@619: interfaceJS.setAttribute("src","interfaces/ABX.js"); n@619: n@619: // AB comes with a css file n@619: var css = document.createElement('link'); n@619: css.rel = 'stylesheet'; n@619: css.type = 'text/css'; n@619: css.href = 'interfaces/ABX.css'; n@619: n@619: document.getElementsByTagName("head")[0].appendChild(css); n@619: break; n@619: n@474: case "Bipolar": n@474: case "ACR": n@474: case "DCR": n@474: case "CCR": n@472: case "ABC": n@619: // Above enumerate to horizontal sliders n@619: interfaceJS.setAttribute("src","interfaces/horizontal-sliders.js"); n@619: n@619: // horizontal-sliders comes with a css file n@619: var css = document.createElement('link'); n@619: css.rel = 'stylesheet'; n@619: css.type = 'text/css'; n@619: css.href = 'interfaces/horizontal-sliders.css'; n@619: n@619: document.getElementsByTagName("head")[0].appendChild(css); n@619: break; n@474: case "discrete": n@474: case "likert": n@619: // Above enumerate to horizontal discrete radios n@619: interfaceJS.setAttribute("src","interfaces/discrete.js"); n@619: n@619: // horizontal-sliders comes with a css file n@619: var css = document.createElement('link'); n@619: css.rel = 'stylesheet'; n@619: css.type = 'text/css'; n@619: css.href = 'interfaces/discrete.css'; n@619: n@619: document.getElementsByTagName("head")[0].appendChild(css); n@619: break; 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@377: } n@377: n@377: function createProjectSave(destURL) { n@625: // Clear the window.onbeforeunload n@625: window.onbeforeunload = null; n@377: // Save the data from interface into XML and send to destURL n@377: // If destURL is null then download XML in client n@377: // Now time to render file locally n@377: var xmlDoc = interfaceXMLSave(); n@377: var parent = document.createElement("div"); n@377: parent.appendChild(xmlDoc); n@377: var file = [parent.innerHTML]; n@589: if (destURL == "local") { n@377: var bb = new Blob(file,{type : 'application/xml'}); n@377: var dnlk = window.URL.createObjectURL(bb); n@377: var a = document.createElement("a"); n@377: a.hidden = ''; n@377: a.href = dnlk; n@377: a.download = "save.xml"; n@377: a.textContent = "Save File"; n@377: n@377: popup.showPopup(); n@461: popup.popupContent.innerHTML = "Please save the file below to give to your test supervisor
"; n@377: popup.popupContent.appendChild(a); n@377: } else { n@377: var xmlhttp = new XMLHttpRequest; n@601: xmlhttp.open("POST","\save.php?key="+storage.SessionKey.key,true); n@377: xmlhttp.setRequestHeader('Content-Type', 'text/xml'); n@377: xmlhttp.onerror = function(){ n@377: console.log('Error saving file to server! Presenting download locally'); n@601: createProjectSave("local"); n@377: }; n@589: xmlhttp.onload = function() { n@589: console.log(xmlhttp); n@589: if (this.status >= 300) { n@589: console.log("WARNING - Could not update at this time"); n@601: createProjectSave("local"); n@589: } else { n@589: var parser = new DOMParser(); n@589: var xmlDoc = parser.parseFromString(xmlhttp.responseText, "application/xml"); n@589: var response = xmlDoc.getElementsByTagName('response')[0]; n@589: if (response.getAttribute("state") == "OK") { n@589: var file = response.getElementsByTagName("file")[0]; n@589: console.log("Save: OK, written "+file.getAttribute("bytes")+"B"); n@637: popup.popupContent.textContent = specification.exitText; n@589: } else { n@589: var message = response.getElementsByTagName("message"); n@589: console.log("Save: Error! "+message.textContent); n@589: createProjectSave("local"); n@589: } n@589: } n@589: }; n@377: xmlhttp.send(file); n@461: popup.showPopup(); n@461: popup.popupContent.innerHTML = null; n@461: popup.popupContent.textContent = "Submitting. Please Wait"; n@539: popup.hideNextButton(); n@539: popup.hidePreviousButton(); n@377: } n@377: } n@377: n@377: function errorSessionDump(msg){ n@377: // Create the partial interface XML save n@377: // Include error node with message on why the dump occured n@430: popup.showPopup(); n@430: popup.popupContent.innerHTML = null; n@430: var err = document.createElement('error'); n@430: var parent = document.createElement("div"); n@430: if (typeof msg === "object") n@430: { n@430: err.appendChild(msg); n@430: popup.popupContent.appendChild(msg); n@430: n@430: } else { n@430: err.textContent = msg; n@430: popup.popupContent.innerHTML = "ERROR : "+msg; n@430: } n@377: var xmlDoc = interfaceXMLSave(); n@377: xmlDoc.appendChild(err); n@377: parent.appendChild(xmlDoc); n@377: var file = [parent.innerHTML]; n@377: var bb = new Blob(file,{type : 'application/xml'}); n@377: var dnlk = window.URL.createObjectURL(bb); n@377: var a = document.createElement("a"); n@377: a.hidden = ''; n@377: a.href = dnlk; n@377: a.download = "save.xml"; n@377: a.textContent = "Save File"; n@377: n@430: n@430: n@377: popup.popupContent.appendChild(a); n@377: } n@377: n@377: // Only other global function which must be defined in the interface class. Determines how to create the XML document. n@377: function interfaceXMLSave(){ n@377: // Create the XML string to be exported with results n@453: return storage.finish(); n@377: } n@377: n@400: function linearToDecibel(gain) n@400: { n@400: return 20.0*Math.log10(gain); n@400: } n@400: n@400: function decibelToLinear(gain) n@400: { n@400: return Math.pow(10,gain/20.0); n@400: } n@400: n@584: function randomString(length) { n@584: return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1); n@584: } n@584: 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; n@453: this.node = null; n@453: this.store = null; n@396: $(window).keypress(function(e){ n@396: if (e.keyCode == 13 && popup.popup.style.visibility == 'visible') n@396: { n@396: console.log(e); n@396: popup.buttonProceed.onclick(); n@398: e.preventDefault(); n@396: } n@396: }); n@181: nicholas@116: this.createPopup = function(){ nicholas@116: // Create popup window interface nicholas@116: var insertPoint = document.getElementById("topLevelBody"); nicholas@116: n@510: this.popup = document.getElementById('popupHolder'); nicholas@116: this.popup.style.left = (window.innerWidth/2)-250 + 'px'; nicholas@116: this.popup.style.top = (window.innerHeight/2)-125 + 'px'; nicholas@116: n@510: this.popupContent = document.getElementById('popupContent'); nicholas@116: n@510: this.popupTitle = document.getElementById('popupTitle'); n@303: n@510: this.popupResponse = document.getElementById('popupResponse'); n@303: n@510: this.buttonProceed = document.getElementById('popup-proceed'); n@197: this.buttonProceed.onclick = function(){popup.proceedClicked();}; n@199: n@510: this.buttonPrevious = document.getElementById('popup-previous'); n@199: this.buttonPrevious.onclick = function(){popup.previousClick();}; n@199: n@510: this.hidePopup(); n@510: n@181: this.popup.style.zIndex = -1; n@181: this.popup.style.visibility = 'hidden'; 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@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'; 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@453: this.popupTitle.textContent = node.specification.statement; n@453: if (node.specification.type == 'question') { nicholas@116: var textArea = document.createElement('textarea'); n@453: switch (node.specification.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@490: if (node.response == undefined) { n@490: node.response = ""; n@490: } else { n@490: textArea.value = node.response; n@490: } n@303: this.popupResponse.appendChild(textArea); n@303: textArea.focus(); n@513: this.popupResponse.style.textAlign="center"; n@513: this.popupResponse.style.left="0%"; n@453: } else if (node.specification.type == 'checkbox') { n@490: if (node.response == undefined) { n@490: node.response = Array(node.specification.options.length); n@490: } n@490: var index = 0; n@513: var max_w = 0; n@453: for (var option of node.specification.options) { nicholas@188: var input = document.createElement('input'); n@448: input.id = option.name; nicholas@188: input.type = 'checkbox'; nicholas@188: var span = document.createElement('span'); nicholas@188: span.textContent = option.text; nicholas@188: var hold = document.createElement('div'); nicholas@188: hold.setAttribute('name','option'); n@636: hold.className = "popup-option-checbox"; nicholas@188: hold.appendChild(input); nicholas@188: hold.appendChild(span); n@453: this.popupResponse.appendChild(hold); n@490: if (node.response[index] != undefined){ n@490: if (node.response[index].checked == true) { n@490: input.checked = "true"; n@490: } n@490: } n@636: var w = $(hold).width(); n@513: if (w > max_w) n@513: max_w = w; n@490: index++; nicholas@188: } n@513: this.popupResponse.style.textAlign=""; n@636: var leftP = 50-(((max_w/$('#popupContent').width())/2)*100); n@513: this.popupResponse.style.left=leftP+"%"; n@453: } else if (node.specification.type == 'radio') { n@490: if (node.response == undefined) { n@490: node.response = {name: "", text: ""}; n@490: } n@490: var index = 0; n@513: var max_w = 0; n@453: for (var option of node.specification.options) { nicholas@189: var input = document.createElement('input'); nicholas@189: input.id = option.name; nicholas@189: input.type = 'radio'; n@453: input.name = node.specification.id; nicholas@189: var span = document.createElement('span'); nicholas@189: span.textContent = option.text; nicholas@189: var hold = document.createElement('div'); nicholas@189: hold.setAttribute('name','option'); n@636: hold.className = "popup-option-checbox"; nicholas@189: hold.appendChild(input); nicholas@189: hold.appendChild(span); n@453: this.popupResponse.appendChild(hold); n@490: if (input.id == node.response.name) { n@490: input.checked = "true"; n@490: } n@636: var w = $(hold).width(); n@513: if (w > max_w) n@513: max_w = w; nicholas@189: } n@513: this.popupResponse.style.textAlign=""; n@636: var leftP = 50-(((max_w/$('#popupContent').width())/2)*100); n@513: this.popupResponse.style.left=leftP+"%"; n@453: } else if (node.specification.type == 'number') { n@196: var input = document.createElement('input'); nicholas@224: input.type = 'textarea'; n@453: if (node.min != null) {input.min = node.specification.min;} n@453: if (node.max != null) {input.max = node.specification.max;} n@453: if (node.step != null) {input.step = node.specification.step;} n@490: if (node.response != undefined) { n@490: input.value = node.response; n@490: } n@303: this.popupResponse.appendChild(input); n@513: this.popupResponse.style.textAlign="center"; n@513: this.popupResponse.style.left="0%"; nicholas@116: } n@199: if(this.currentIndex+1 == this.popupOptions.length) { n@453: if (this.node.location == "pre") { nicholas@268: this.buttonProceed.textContent = 'Start'; nicholas@268: } else { nicholas@268: this.buttonProceed.textContent = 'Submit'; nicholas@268: } n@199: } else { n@199: this.buttonProceed.textContent = 'Next'; n@199: } n@199: if(this.currentIndex > 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: } n@602: this.store.complete(); 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: this.postNode(); n@199: } n@199: }; n@395: n@395: this.resize = function(event) n@395: { n@395: // Called on window resize; n@473: if (this.popup != null) { n@473: this.popup.style.left = (window.innerWidth/2)-250 + 'px'; n@473: this.popup.style.top = (window.innerHeight/2)-125 + 'px'; n@473: var blank = document.getElementsByClassName('testHalt')[0]; n@473: blank.style.width = window.innerWidth; n@473: blank.style.height = window.innerHeight; n@473: } n@395: }; n@539: this.hideNextButton = function() { n@539: this.buttonProceed.style.visibility = "hidden"; n@539: } n@539: this.hidePreviousButton = function() { n@539: this.buttonPrevious.style.visibility = "hidden"; n@539: } n@539: this.showNextButton = function() { n@539: this.buttonProceed.style.visibility = "visible"; n@539: } n@539: this.showPreviousButton = function() { n@539: this.buttonPrevious.style.visibility = "visible"; n@539: } nicholas@114: } nicholas@114: nicholas@116: function advanceState() nicholas@114: { nicholas@129: // Just for complete clarity nicholas@129: testState.advanceState(); nicholas@129: } nicholas@129: nicholas@129: function stateMachine() nicholas@129: { nicholas@129: // Object prototype for tracking and managing the test state nicholas@129: this.stateMap = []; n@453: this.preTestSurvey = null; n@453: this.postTestSurvey = null; nicholas@129: this.stateIndex = null; n@453: this.currentStateMap = null; n@453: this.currentStatePosition = null; n@483: this.currentStore = null; nicholas@129: this.initialise = function(){ n@453: n@453: // Get the data from Specification n@453: var pageHolder = []; n@453: for (var page of specification.pages) n@453: { n@511: var repeat = page.repeatCount; n@511: while(repeat >= 0) n@511: { n@511: pageHolder.push(page); n@511: repeat--; n@511: } n@453: } n@453: if (specification.randomiseOrder) n@453: { n@453: pageHolder = randomiseOrder(pageHolder); n@453: } n@453: 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: } else { b@254: console.log('FATAL - StateMap not correctly constructed. EMPTY_STATE_MAP'); nicholas@116: } nicholas@129: }; nicholas@129: this.advanceState = function(){ nicholas@129: if (this.stateIndex == null) { nicholas@129: this.initialise(); nicholas@129: } n@589: storage.update(); nicholas@129: if (this.stateIndex == -1) { n@471: this.stateIndex++; nicholas@129: console.log('Starting test...'); n@453: if (this.preTestSurvey != null) n@453: { n@453: popup.initState(this.preTestSurvey,storage.globalPreTest); n@471: } else { n@471: this.advanceState(); nicholas@129: } n@453: } else if (this.stateIndex == this.stateMap.length) n@453: { n@453: // All test pages complete, post test n@453: console.log('Ending test ...'); n@453: this.stateIndex++; n@453: if (this.postTestSurvey == null) { n@453: this.advanceState(); nicholas@129: } else { n@453: popup.initState(this.postTestSurvey,storage.globalPostTest); n@453: } n@453: } else if (this.stateIndex > 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@587: this.currentStore = storage.testPages[this.stateIndex]; 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@602: storePoint.complete(); 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@496: this.progress = 0; n@496: this.status = 0; n@471: this.ready = function() n@471: { n@496: if (this.status >= 2) n@496: { n@496: this.status = 3; n@496: } 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 node n@453: if (schema.getAttribute('name') == undefined && schema.getAttribute('ref') != undefined) n@453: { n@623: schema = schemaRoot.getAllElementsByName(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@477: var schemaSetup = this.schema.getAllElementsByName('setup')[0]; n@453: // First decode the attributes n@477: var attributes = schemaSetup.getAllElementsByTagName('xs:attribute'); n@453: for (var i in attributes) n@297: { n@453: if (isNaN(Number(i)) == true){break;} n@623: var attributeName = attributes[i].getAttribute('name') || attributes[i].getAttribute('ref'); n@453: var projectAttr = setupNode.getAttribute(attributeName); n@623: projectAttr = this.processAttribute(projectAttr,attributes[i],this.schema); 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@637: n@637: var exitTextNode = setupNode.getElementsByTagName('exitText'); n@637: if (exitTextNode.length == 1) { n@637: this.exitText = exitTextNode[0].textContent; n@637: } n@374: n@501: this.metrics = new this.metricNode(); 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: 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@501: this.preTest.decode(this,survey[i]); 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@501: this.postTest.decode(this,survey[i]); 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@477: this.interfaces.decode(this,interfaceNode,this.schema.getAllElementsByName('interface')[1]); nicholas@213: } nicholas@213: n@453: // Page tags n@453: var pageTags = projectXML.getElementsByTagName('page'); n@477: var pageSchema = this.schema.getAllElementsByName('page')[0]; n@453: for (var i=0; i n@503: var commentboxprefix = root.createElement("commentboxprefix"); n@503: commentboxprefix.textContent = this.commentBoxPrefix; n@503: AHNode.appendChild(commentboxprefix); n@503: n@374: for (var i=0; i 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 n@628: // DD/MM/YY n@628: // n@628: // n@628: var dateTime = new Date(); n@628: var hold = storage.document.createElement("datetime"); n@628: var date = storage.document.createElement("date"); n@628: var time = storage.document.createElement("time"); n@628: date.setAttribute('year',dateTime.getFullYear()); n@628: date.setAttribute('month',dateTime.getMonth()+1); n@628: date.setAttribute('day',dateTime.getDate()); n@628: time.setAttribute('hour',dateTime.getHours()); n@633: time.setAttribute('minute',dateTime.getMinutes()); n@628: time.setAttribute('secs',dateTime.getSeconds()); n@628: n@628: hold.appendChild(date); n@628: hold.appendChild(time); n@628: return hold; n@628: n@628: } n@356: n@550: this.commentBoxes = new function() { n@550: this.boxes = []; n@550: this.injectPoint = null; n@550: this.elementCommentBox = function(audioObject) { n@550: var element = audioObject.specification; n@550: this.audioObject = audioObject; n@550: this.id = audioObject.id; n@550: var audioHolderObject = audioObject.specification.parent; n@550: // Create document objects to hold the comment boxes n@550: this.trackComment = document.createElement('div'); n@550: this.trackComment.className = 'comment-div'; n@550: this.trackComment.id = 'comment-div-'+audioObject.id; n@550: // Create a string next to each comment asking for a comment n@550: this.trackString = document.createElement('span'); n@550: this.trackString.innerHTML = audioHolderObject.commentBoxPrefix+' '+audioObject.interfaceDOM.getPresentedId(); n@550: // Create the HTML5 comment box 'textarea' n@550: this.trackCommentBox = document.createElement('textarea'); n@550: this.trackCommentBox.rows = '4'; n@550: this.trackCommentBox.cols = '100'; n@550: this.trackCommentBox.name = 'trackComment'+audioObject.id; n@550: this.trackCommentBox.className = 'trackComment'; n@550: var br = document.createElement('br'); n@550: // Add to the holder. n@550: this.trackComment.appendChild(this.trackString); n@550: this.trackComment.appendChild(br); n@550: this.trackComment.appendChild(this.trackCommentBox); n@550: n@550: this.exportXMLDOM = function() { n@550: var root = document.createElement('comment'); n@550: var question = document.createElement('question'); n@550: question.textContent = this.trackString.textContent; n@550: var response = document.createElement('response'); n@550: response.textContent = this.trackCommentBox.value; n@550: console.log("Comment frag-"+this.id+": "+response.textContent); n@550: root.appendChild(question); n@550: root.appendChild(response); n@550: return root; n@550: }; n@550: this.resize = function() n@550: { n@550: var boxwidth = (window.innerWidth-100)/2; n@550: if (boxwidth >= 600) n@550: { n@550: boxwidth = 600; n@550: } n@550: else if (boxwidth < 400) n@550: { n@550: boxwidth = 400; n@550: } n@550: this.trackComment.style.width = boxwidth+"px"; n@550: this.trackCommentBox.style.width = boxwidth-6+"px"; n@550: }; n@550: this.resize(); n@550: }; n@550: this.createCommentBox = function(audioObject) { n@550: var node = new this.elementCommentBox(audioObject); n@550: this.boxes.push(node); n@550: audioObject.commentDOM = node; n@550: return node; n@550: }; n@550: this.sortCommentBoxes = function() { n@550: this.boxes.sort(function(a,b){return a.id - b.id;}); n@550: }; n@550: n@550: this.showCommentBoxes = function(inject, sort) { n@550: this.injectPoint = inject; n@550: if (sort) {this.sortCommentBoxes();} n@550: for (var box of this.boxes) { n@550: inject.appendChild(box.trackComment); n@550: } n@550: }; n@550: n@550: this.deleteCommentBoxes = function() { n@550: if (this.injectPoint != null) { n@550: for (var box of this.boxes) { n@550: this.injectPoint.removeChild(box.trackComment); n@550: } n@550: this.injectPoint = null; n@550: } n@550: this.boxes = []; n@550: }; n@550: } 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@520: this.exportXMLDOM = function(storePoint) { n@520: var root = storePoint.parent.document.createElement('comment'); n@193: root.id = this.specification.id; n@193: root.setAttribute('type',this.specification.type); b@254: console.log("Question: "+this.string.textContent); b@254: console.log("Response: "+root.textContent); n@520: var question = storePoint.parent.document.createElement('question'); n@520: question.textContent = this.string.textContent; n@520: var response = storePoint.parent.document.createElement('response'); n@520: response.textContent = this.textArea.value; n@520: root.appendChild(question); n@520: root.appendChild(response); n@520: storePoint.XMLDOM.appendChild(root); 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@520: this.exportXMLDOM = function(storePoint) { n@520: var root = storePoint.parent.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@520: storePoint.XMLDOM.appendChild(root); 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: }; 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: }; n@634: n@634: this.outsideReferenceDOM = function(audioObject,index,inject) n@634: { n@634: this.parent = audioObject; n@634: this.outsideReferenceHolder = document.createElement('button'); n@634: this.outsideReferenceHolder.id = 'outside-reference'; n@634: this.outsideReferenceHolder.className = 'outside-reference'; n@634: this.outsideReferenceHolder.setAttribute('track-id',index); n@634: this.outsideReferenceHolder.textContent = "Play Reference"; n@634: this.outsideReferenceHolder.disabled = true; n@634: n@634: this.outsideReferenceHolder.onclick = function(event) n@634: { n@634: audioEngineContext.play(event.currentTarget.getAttribute('track-id')); n@634: }; n@634: inject.appendChild(this.outsideReferenceHolder); n@634: this.enable = function() n@634: { n@634: if (this.parent.state == 1) n@634: { n@634: this.outsideReferenceHolder.disabled = false; n@634: } n@634: }; n@634: this.updateLoading = function(progress) n@634: { n@634: if (progress != 100) n@634: { n@634: progress = String(progress); n@634: progress = progress.split('.')[0]; n@634: this.outsideReferenceHolder.textContent = progress+'%'; n@634: } else { n@634: this.outsideReferenceHolder.textContent = "Play Reference"; n@634: } n@634: }; n@634: this.startPlayback = function() n@634: { n@634: // Called when playback has begun n@634: $('.track-slider').removeClass('track-slider-playing'); n@634: $('.comment-div').removeClass('comment-box-playing'); n@634: this.outsideReferenceHolder.style.backgroundColor = "#FDD"; n@634: }; n@634: this.stopPlayback = function() n@634: { n@634: // Called when playback has stopped. This gets called even if playback never started! n@634: this.outsideReferenceHolder.style.backgroundColor = ""; n@634: }; n@634: this.exportXMLDOM = function(audioObject) n@634: { n@634: return null; n@634: }; n@634: this.getValue = function() n@634: { n@634: return 0; n@634: }; n@634: this.getPresentedId = function() n@634: { n@634: return 'Reference'; n@634: }; n@634: this.canMove = function() n@634: { n@634: return false; n@634: }; n@634: this.error = function() { n@634: // audioObject has an error!! n@634: this.outsideReferenceHolder.textContent = "Error"; n@634: this.outsideReferenceHolder.style.backgroundColor = "#F00"; n@634: } n@634: } 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(); n@498: if (time > 0 && time < this.maxTime) { 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; n@527: 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@204: }; n@201: }; n@483: n@483: this.volume = new function() n@483: { n@483: // An in-built volume module which can be viewed on page n@483: // Includes trackers on page-by-page data n@483: // Volume does NOT reset to 0dB on each page load n@483: this.valueLin = 1.0; n@483: this.valueDB = 0.0; n@483: this.object = document.createElement('div'); n@483: this.object.id = 'master-volume-holder'; n@483: this.slider = document.createElement('input'); n@483: this.slider.id = 'master-volume-control'; n@483: this.slider.type = 'range'; n@483: this.valueText = document.createElement('span'); n@483: this.valueText.id = 'master-volume-feedback'; n@483: this.valueText.textContent = '0dB'; n@483: n@483: this.slider.min = -60; n@483: this.slider.max = 12; n@483: this.slider.value = 0; n@483: this.slider.step = 1; n@483: this.slider.onmousemove = function(event) n@483: { n@483: interfaceContext.volume.valueDB = event.currentTarget.value; n@483: interfaceContext.volume.valueLin = decibelToLinear(interfaceContext.volume.valueDB); n@483: interfaceContext.volume.valueText.textContent = interfaceContext.volume.valueDB+'dB'; n@483: audioEngineContext.outputGain.gain.value = interfaceContext.volume.valueLin; n@483: } n@483: this.slider.onmouseup = function(event) n@483: { n@526: var storePoint = testState.currentStore.XMLDOM.getElementsByTagName('metric')[0].getAllElementsByName('volumeTracker'); n@483: if (storePoint.length == 0) n@483: { n@483: storePoint = storage.document.createElement('metricresult'); n@483: storePoint.setAttribute('name','volumeTracker'); n@526: testState.currentStore.XMLDOM.getElementsByTagName('metric')[0].appendChild(storePoint); n@483: } n@483: else { n@483: storePoint = storePoint[0]; n@483: } n@483: var node = storage.document.createElement('movement'); n@483: node.setAttribute('test-time',audioEngineContext.timer.getTestTime()); n@483: node.setAttribute('volume',interfaceContext.volume.valueDB); n@483: node.setAttribute('format','dBFS'); n@483: storePoint.appendChild(node); n@483: } n@483: n@484: var title = document.createElement('div'); n@484: title.innerHTML = 'Master Volume Control'; n@484: title.style.fontSize = '0.75em'; n@484: title.style.width = "100%"; n@484: title.align = 'center'; n@484: this.object.appendChild(title); n@484: n@483: this.object.appendChild(this.slider); n@483: this.object.appendChild(this.valueText); n@483: } n@643: n@643: this.calibrationModule = function() { n@643: // This creates an on-page calibration module n@643: this.storeDOM = storage.document.createElement("calibration"); n@643: storage.root.children[0].appendChild(this.storeDOM); n@643: // The calibration is a fixed state module n@643: this.calibrationNodes = []; n@643: var f0 = 62.5; n@643: while(f0 < 20000) { n@643: var obj = { n@643: root: document.createElement("div"), n@643: input: document.createElement("input"), n@643: oscillator: audioContext.createOscillator(), n@643: gain: audioContext.createGain(), n@643: parent: this, n@643: handleEvent: function(event) { n@643: gain.gain.value = Math.pow(10,input.value/20); n@643: }, n@643: disconnect: function() { n@643: this.gain.disconnect(); n@643: } n@643: } n@643: obj.root.appendChild(obj.input); n@643: obj.oscillator.connect(obj.gain); n@643: obj.gain.connect(audioContext.destination); n@643: obj.gain.gain.value = Math.random()*2; n@643: obj.input.value = obj.gain.gain.value; n@643: obj.input.type = "range"; n@643: obj.input.min = -60; n@643: obj.input.max = 12; n@643: obj.input.step = 0.25; n@643: obj.oscillator.frequency.value = f0; n@643: this.calibrationNodes.push(obj); n@643: f0 *= 2; n@643: } n@643: } n@643: n@643: 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@498: this.storeErrorNode('Anchor node not below marker value'); 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@498: console.log('Reference node not above marker value'); n@498: this.storeErrorNode('Reference node not above 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@598: console.log("Continue listening to track-"+object.interfaceDOM.getPresentedId()); n@598: error_obj.push(object.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= 300) { n@589: console.log("WARNING - Could not update at this time"); n@589: } else { n@589: var parser = new DOMParser(); n@589: var xmlDoc = parser.parseFromString(xmlhttp.responseText, "application/xml"); n@589: var response = xmlDoc.getElementsByTagName('response')[0]; n@589: if (response.getAttribute("state") == "OK") { n@589: var file = response.getElementsByTagName("file")[0]; n@589: console.log("Intermediate save: OK, written "+file.getAttribute("bytes")+"B"); n@589: } else { n@589: var message = response.getElementsByTagName("message"); n@589: console.log("Intermediate save: Error! "+message.textContent); n@589: } n@587: } n@587: } n@589: xmlhttp.send([hold.innerHTML]); n@584: } n@584: } n@453: n@453: this.createTestPageStore = function(specification) n@453: { n@453: var store = new this.pageNode(this,specification); n@453: this.testPages.push(store); n@453: return this.testPages[this.testPages.length-1]; n@453: }; n@453: n@453: this.surveyNode = function(parent,root,specification) n@453: { n@453: this.specification = specification; n@453: this.parent = parent; n@602: this.state = "empty"; n@453: this.XMLDOM = this.parent.document.createElement('survey'); n@453: this.XMLDOM.setAttribute('location',this.specification.location); n@602: this.XMLDOM.setAttribute("state",this.state); n@453: for (var optNode of this.specification.options) n@453: { n@453: if (optNode.type != 'statement') n@453: { n@453: var node = this.parent.document.createElement('surveyresult'); n@602: node.setAttribute("ref",optNode.id); n@453: node.setAttribute('type',optNode.type); n@453: this.XMLDOM.appendChild(node); n@453: } n@453: } n@453: root.appendChild(this.XMLDOM); n@453: n@453: this.postResult = function(node) n@453: { n@453: // From popup: node is the popupOption node containing both spec. and results n@453: // ID is the position n@453: if (node.specification.type == 'statement'){return;} n@602: var surveyresult = this.XMLDOM.children[0]; n@602: while(surveyresult != null) { n@602: if (surveyresult.getAttribute("ref") == node.specification.id) n@602: { n@602: break; n@602: } n@602: surveyresult = surveyresult.nextElementSibling; n@602: } n@453: switch(node.specification.type) n@453: { n@453: case "number": n@453: case "question": n@453: var child = this.parent.document.createElement('response'); n@453: child.textContent = node.response; n@453: surveyresult.appendChild(child); n@453: break; n@453: case "radio": n@453: var child = this.parent.document.createElement('response'); n@453: child.setAttribute('name',node.response.name); n@453: child.textContent = node.response.text; n@453: surveyresult.appendChild(child); n@453: break; n@453: case "checkbox": n@453: 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: this.parent.root.appendChild(this.XMLDOM); n@602: n@602: this.complete = function() { n@602: this.state = "complete"; n@602: this.XMLDOM.setAttribute("state","complete"); n@602: } n@453: }; n@589: this.update = function() { n@589: this.SessionKey.update(); n@589: } n@453: this.finish = function() n@453: { n@453: if (this.state == 0) n@453: { n@589: this.update(); n@453: } n@453: this.state = 1; n@453: return this.root; n@453: }; n@453: }