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