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