Mercurial > hg > webaudioevaluationtool
view test_create/test_create.html @ 325:d8fd1699f6de Dev_main
stash. test_create question now shows box size options.
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Tue, 13 Oct 2015 10:20:04 +0100 |
parents | f73d9333ab0d |
children | 4ec19035710e |
line wrap: on
line source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>WAET: Test Creator</title> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <script type="text/javascript"> var APEInterfaceOptions = [["playhead","page-count"],["Show the playhead/scrubber bar", "Show test page count"]]; var APEInterfaceChecks = [["fragmentPlayed","fragmentFullPlayback","fragmentMoved","fragmentComments"],["All Fragments Played","All Fragments Played in entirety","All sliders moved","All fragments have comments"]]; var APEInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]]; var MUSHRAInterfaceOptions = [[],[]]; var MUSHRAInterfaceChecks = [["fragmentPlayed","fragmentMoved","fragmentComments"],["All Fragments Played","All sliders moved","All fragments have comments"]]; var MUSHRAInterfaceMetrics = [["testTimer","elementTimer","elementTracker","elementTrackerFull","elementFlagListenedTo","elementFlagMoved","elementFlagComments"],["Test Duration","Total time each fragment was listened to","Return initialised position of marker","Fragment movement tracker with timestamps","Flag if fragment listened to","Flag if fragment moved","Flag if fragment has comments"]]; var popupInstance; var specificationNode; var audioContext; var audioObjects = []; window.onload = function() { var AudioContext = window.AudioContext || window.webkitAudioContext; audioContext = new AudioContext; popupInstance = new popup(); popupInstance.advanceState(); specificationNode = new Specification(); specificationNode.projectReturn = "null"; }; function popup() { var x = window.innerWidth; var y = window.innerHeight; this.popupHolder = document.createElement('div'); this.popupHolder.style.visibility = 'hidden'; this.popupContent = document.createElement('div'); this.popupTitle = document.createElement('div'); this.popupBody = document.createElement('div'); this.popupFooter = document.createElement('div'); this.popupTitleText = document.createElement('span'); this.popupTitle.appendChild(this.popupTitleText); this.popupHolder.className = "popup"; this.popupHolder.style.left = (x-500)/2 +'px'; this.popupHolder.style.top = (y-400)/2 + 'px'; this.popupContent.style.padding = "20px"; this.popupHolder.appendChild(this.popupContent); this.popupTitle.style.width = "100%"; this.popupTitle.style.height = "50px"; this.popupTitle.style.fontSize = "xx-large"; this.popupContent.appendChild(this.popupTitle); this.popupBody.style.width = "100%"; this.popupBody.style.height = "280px"; this.popupContent.appendChild(this.popupBody); this.popupFooter.style.width = "100%"; this.popupFooter.style.height = "30px"; this.popupContent.appendChild(this.popupFooter); var body = document.getElementsByTagName('body')[0]; body.appendChild(this.popupHolder); this.pageBlank = document.createElement('div'); body.appendChild(this.pageBlank); this.pageBlank.style.width = "100%"; this.pageBlank.style.height = "100%"; this.pageBlank.style.position = "absolute"; this.pageBlank.style.left = "0px"; this.pageBlank.style.top = "0px"; this.pageBlank.style.backgroundColor = "rgba(0,0,0,0.5)"; this.pageBlank.style.visibility = 'hidden'; this.state = 0; this.dataTransfer = null; this.showPopup = function() { this.popupHolder.style.visibility = 'visible'; this.popupHolder.style.zIndex = "3"; this.pageBlank.style.visibility = 'visible'; this.pageBlank.style.zIndex = "2"; }; this.hidePopup = function() { this.popupHolder.style.visibility = 'hidden'; this.popupHolder.style.zIndex = "-1"; this.pageBlank.style.visibility = 'hidden'; this.pageBlank.style.zIndex = "-2"; }; this.init = function() { this.popupTitleText.textContent = "Welcome"; var text = document.createElement('span'); text.textContent = "Thank you for downloading the Web Audio Evaluation Toolbox. This page will help guide you through creating the documents required to run a test. If you have an existing XML file you wish to edit, please drag and drop it into the box below"; var dnd = document.createElement('div'); dnd.style.width = "100%"; dnd.style.height = "50px"; dnd.className = "dragndrop"; this.popupBody.appendChild(text); this.popupBody.appendChild(dnd); this.showPopup(); var button = document.createElement('button'); button.className = "popupButton"; button.textContent = "New File"; button.onclick = function(event) { popupInstance.advanceState(); }; this.popupFooter.appendChild(button); }; this.advanceState = function() { this.popupBody.innerHTML = null; this.popupFooter.innerHTML = null; this.popupTitleText.textContent = null; switch(this.state) { case 0: this.init(); break; case 1: this.popupTitleText.textContent = "Test Type"; var text = document.createElement("span"); text.textContent = "What type of test would you like to use. Currently APE (Audio Perceptual Evaluation) and MUSHRA style interfaces are available"; this.popupBody.appendChild(text); var select = document.createElement("select"); select.id="interface-select"; var opt1 = document.createElement("option"); opt1.value = "APE"; opt1.textContent = "APE"; select.appendChild(opt1); var opt2 = document.createElement("option"); opt2.value = "MUSHRA"; opt2.textContent = "MUSHRA"; select.appendChild(opt2); this.popupBody.appendChild(select); var button = document.createElement('button'); button.className = "popupButton"; button.textContent = "Submit"; button.onclick = function(event) { var select = document.getElementById("interface-select"); specificationNode.interfaceType = select.value; specificationNode.collectMetrics = true; popupInstance.advanceState(); }; this.popupFooter.appendChild(button); break; case 2: this.popupTitleText.textContent = "Test Options"; var holder = document.createElement('div'); holder.style.margin = "5px"; var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = "Randomise-Page"; var text = document.createElement('span'); text.textContent = "Randomise Page Order"; holder.appendChild(checkbox); holder.appendChild(text); this.popupBody.appendChild(holder); switch(specificationNode.interfaceType) { case "APE": for (var i=0; i<APEInterfaceOptions[0].length; i++) { holder = document.createElement('div'); holder.style.margin = "5px"; checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.setAttribute("name","option"); checkbox.id = APEInterfaceOptions[0][i]; text = document.createElement('span'); text.textContent = APEInterfaceOptions[1][i]; holder.appendChild(checkbox); holder.appendChild(text); this.popupBody.appendChild(holder); } for (var i=0; i<APEInterfaceChecks[0].length; i++) { holder = document.createElement('div'); holder.style.margin = "5px"; checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.setAttribute("name","check"); checkbox.id = APEInterfaceChecks[0][i]; text = document.createElement('span'); text.textContent = APEInterfaceChecks[1][i]; holder.appendChild(checkbox); holder.appendChild(text); this.popupBody.appendChild(holder); } break; case "MUSHRA": for (var i=0; i<MUSHRAInterfaceOptions[0].length; i++) { holder = document.createElement('div'); holder.style.margin = "5px"; checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.setAttribute("name","option"); checkbox.id = MUSHRAInterfaceOptions[0][i]; text = document.createElement('span'); text.textContent = MUSHRAInterfaceOptions[1][i]; holder.appendChild(checkbox); holder.appendChild(text); this.popupBody.appendChild(holder); } for (var i=0; i<MUSHRAInterfaceChecks[0].length; i++) { holder = document.createElement('div'); holder.style.margin = "5px"; checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.setAttribute("name","check"); checkbox.id = MUSHRAInterfaceChecks[0][i]; text = document.createElement('span'); text.textContent = MUSHRAInterfaceChecks[1][i]; holder.appendChild(checkbox); holder.appendChild(text); this.popupBody.appendChild(holder); } } var button = document.createElement('button'); button.className = "popupButton"; button.textContent = "Submit"; button.onclick = function(event) { var optHold = popupInstance.popupBody; var opt = optHold.firstChild; var input = opt.getElementsByTagName('input')[0]; specificationNode.randomiseOrder = input.checked; while(opt.nextSibling != null) { opt = opt.nextSibling; input = opt.getElementsByTagName('input')[0]; if (input.checked) { specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(input)); } } popupInstance.advanceState(); }; this.popupFooter.appendChild(button); break; case 3: audioObjects = []; this.popupTitleText.textContent = "Test Page"; var span = document.createElement('span'); span.textContent = "Drag and drop your audio files into the box below to add them to a test page"; this.popupBody.appendChild(span); var dnd = document.createElement('div'); dnd.id = "audio-holder-drop"; dnd.style.width = "100%"; dnd.style.minHeight = "50px"; dnd.style.maxHeight = "220px"; dnd.style.overflow = 'auto'; dnd.className = "dragndrop"; dnd.ondragover = function(e) { if(e.preventDefault) {e.preventDefault();} return false; }; dnd.ondragenter = function(e) { if(e.preventDefault) {e.preventDefault();} return false; }; dnd.ondrop = function(e) { if(e.preventDefault) {e.preventDefault();} var dt = e.dataTransfer; var body = document.getElementById("audio-holder-drop"); var files = dt.files; for (var i = 0, f; f = files[i]; i++) { var ao = new audioObject(); ao.constructTrack(f); audioObjects.push(ao); var dndHeader = document.createElement('div'); dndHeader.style.width = "100%"; dndHeader.style.height = "20px"; dndHeader.style.borderBottom = "#DDD"; dndHeader.style.borderBottomWidth = "1px"; dndHeader.style.borderBottomStyle = "solid"; dndHeader.setAttribute('aoID',audioObjects.length-1); var dndHInclude = document.createElement('div'); dndHInclude.style.width = "30px"; dndHInclude.className = "dndheaderelement"; var includeCheck = document.createElement('input'); includeCheck.type = "checkbox"; includeCheck.name = "include-check"; includeCheck.checked = true; includeCheck.onchange = function() { var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID'); audioObjects[i].include = event.currentTarget.checked; }; dndHInclude.appendChild(includeCheck); dndHeader.appendChild(dndHInclude); var dndHTitle = document.createElement('div'); dndHTitle.style.width = "180px"; dndHTitle.className = "dndheaderelement"; var text = document.createElement('span'); text.textContent = f.name; dndHTitle.appendChild(text); dndHeader.appendChild(dndHTitle); var dndHID = document.createElement('div'); dndHID.style.width = "100px"; dndHID.className = "dndheaderelement"; var IDInput = document.createElement('input'); IDInput.name = "audio-fragment-ID"; IDInput.value = f.name.split('.')[0]; IDInput.onchange = function() { var allIDInput = document.getElementsByName("audio-fragment-ID"); var isCopy = new Array(allIDInput.length); isCopy.fill(0,0,this.length); if (allIDInput.length > 1) { for (var j=0; j<allIDInput.length; j++) { var textCompare1 = allIDInput[j].value; for (var k=j+1; k<allIDInput.length; k++) { var textCompare2 = allIDInput[k].value; if (textCompare1 == textCompare2) { isCopy[j] = 1; isCopy[k] = 1; } } } } var button = document.getElementById('submit'); button.disabled = false; for (var j=0; j<allIDInput.length; j++) { if (isCopy[j] == 1) { allIDInput[j].style.backgroundColor = '#F22'; button.disabled = true; } else { allIDInput[j].style.backgroundColor = '#FFF'; audioObjects[j].id = allIDInput[j].value; } } }; IDInput.style.width = "96px"; dndHID.appendChild(IDInput); dndHeader.appendChild(dndHID); var dndHPlay = document.createElement('div'); dndHPlay.style.width = "100px"; dndHPlay.className = "dndheaderelement"; var audio = document.createElement('button'); audio.textContent = 'Play'; audio.className = "popupButton"; audio.style.height = "inherit"; audio.onclick = function() { var i = event.currentTarget.parentElement.parentElement.getAttribute('aoID'); audioObjects[i].play(); }; dndHPlay.appendChild(audio); dndHeader.appendChild(dndHPlay); dnd.appendChild(dndHeader); IDInput.onchange(); } }; var dndHeader = document.createElement('div'); dndHeader.style.width = "100%"; dndHeader.style.height = "15px"; dndHeader.style.borderBottom = "#DDD"; dndHeader.style.borderBottomWidth = "1px"; dndHeader.style.borderBottomStyle = "solid"; var dndHInclude = document.createElement('div'); dndHInclude.style.width = "30px"; dndHInclude.className = "dndheaderelement"; var text = document.createElement('span'); text.textContent = "Inc."; dndHInclude.appendChild(text); dndHeader.appendChild(dndHInclude); var dndHTitle = document.createElement('div'); dndHTitle.style.width = "180px"; dndHTitle.className = "dndheaderelement"; text = document.createElement('span'); text.textContent = "File Name"; dndHTitle.appendChild(text); dndHeader.appendChild(dndHTitle); var dndHID = document.createElement('div'); dndHID.style.width = "100px"; dndHID.className = "dndheaderelement"; text = document.createElement('span'); text.textContent = "ID"; dndHID.appendChild(text); dndHeader.appendChild(dndHID); var dndHPlay = document.createElement('div'); dndHPlay.style.width = "100px"; dndHPlay.className = "dndheaderelement"; text = document.createElement('span'); text.textContent = "Sample"; dndHPlay.appendChild(text); dndHeader.appendChild(dndHPlay); dnd.appendChild(dndHeader); this.popupBody.appendChild(dnd); var button = document.createElement('button'); button.id = 'submit'; button.className = "popupButton"; button.textContent = "Submit"; button.onclick = function(event) { // Construct the audio-holder nodes; for (var i=0; i<audioObjects.length; i++) { if (!audioObjects[i].include) { audioObjects.pop(audioObjects[i]); } } if (audioObjects.length != 0) { popupInstance.advanceState(); } }; this.popupFooter.appendChild(button); break; case 4: this.popupTitleText.textContent = "Test Page - Options"; var span = document.createElement('span'); span.textContent = "Set your test page options here"; this.popupBody.appendChild(span); var pair = document.createElement('div'); pair.style.margin = '5px'; var text = document.createElement('span'); text.textContent = "Page ID:"; var input = document.createElement('input'); input.value = specificationNode.audioHolders.length; input.id = "id"; pair.appendChild(text); pair.appendChild(input); this.popupBody.appendChild(pair); pair = document.createElement('div'); pair.style.margin = '5px'; text = document.createElement('span'); text.textContent = "Randomise Fragment Order"; input = document.createElement('input'); input.type = "checkbox"; input.id = "randomiseOrder"; pair.appendChild(input); pair.appendChild(text); this.popupBody.appendChild(pair); pair = document.createElement('div'); pair.style.margin = '5px'; text = document.createElement('span'); text.textContent = "Loop Fragment Playback"; input = document.createElement('input'); input.type = "checkbox"; input.id = "loop"; pair.appendChild(input); pair.appendChild(text); this.popupBody.appendChild(pair); pair = document.createElement('div'); pair.style.margin = '5px'; text = document.createElement('span'); text.textContent = "Show fragment comment boxes"; input = document.createElement('input'); input.type = "checkbox"; input.id = "elementComments"; pair.appendChild(input); pair.appendChild(text); this.popupBody.appendChild(pair); var button = document.createElement('button'); button.id = 'submit'; button.className = "popupButton"; button.textContent = "Next"; button.onclick = function(event) { var ah = new specificationNode.audioHolderNode(specificationNode); ah.id = document.getElementById('id').value; ah.presentedId = specificationNode.audioHolders.length; ah.hostURL = ah.id+'/'; ah.randomiseOrder = document.getElementById('randomiseOrder').checked; ah.loop = document.getElementById('loop').checked; ah.elementComments = document.getElementById('elementComments').checked; for (var i=0; i<audioObjects.length; i++) { ah.audioElements.push(new ah.audioElementNode(ah,audioObjects[i])); } specificationNode.audioHolders.push(ah); popupInstance.advanceState(); }; this.popupFooter.appendChild(button); break; case 5: this.dataTransfer = null; this.popupTitleText.textContent = "Test Page - Pre/Post Survey"; var span = document.createElement('span'); span.textContent = "Add your pre test page options here"; this.popupBody.appendChild(span); var preHolder = document.createElement('div'); preHolder.id = "preHolder"; preHolder.style.width = "460px"; preHolder.style.minHeight = "100px"; preHolder.style.maxHeight = "220px"; preHolder.style.overflow = 'auto'; preHolder.style.border = "black"; preHolder.style.borderStyle = "solid"; preHolder.style.borderWidth = "1px"; this.popupBody.appendChild(preHolder); var audioHolder = specificationNode.audioHolders[specificationNode.audioHolders.length-1]; var preHeaderHolder = document.createElement('div'); preHeaderHolder.style.width = "456px"; preHeaderHolder.style.height= "20px"; preHeaderHolder.style.margin= "2px"; preHeaderHolder.style.borderBottom = "#DDD"; preHeaderHolder.style.borderBottomWidth = "1px"; preHeaderHolder.style.borderBottomStyle = "solid"; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var text = document.createElement('span'); text.textContent = "Order"; mvH.appendChild(text); preHeaderHolder.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; text = document.createElement('span'); text.textContent = "ID"; idH.appendChild(text); preHeaderHolder.appendChild(idH); var tH = document.createElement('div'); tH.className = "dndheaderelement"; tH.style.width = "150px"; text = document.createElement('span'); text.textContent = "Type"; tH.appendChild(text); preHeaderHolder.appendChild(tH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Edit"; editH.appendChild(text); preHeaderHolder.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Delete"; deleteH.appendChild(text); preHeaderHolder.appendChild(deleteH); preHolder.appendChild(preHeaderHolder); for (var i=0; i<audioHolder.preTest.options.length; i++) { var optionNode = audioHolder.preTest.options[i]; var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.setAttribute("node-id",i); var node = audioHolder.preTest.options[i]; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var mvup = document.createElement("button"); mvup.textContent = "Up"; mvup.style.width = "25px"; mvup.style.padding = "1px 0px"; mvup.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != 0) { var next = audioHolder.preTest.options[i-1]; var cur = audioHolder.preTest.options[i]; audioHolder.preTest.options[i-1] = cur; audioHolder.preTest.options[i] = next; popupInstance.state = 5; popupInstance.advanceState(); } }; mvH.appendChild(mvup); var mvdn = document.createElement("button"); mvdn.textContent = "Dn"; mvdn.style.width = "25px"; mvdn.style.padding = "1px 0px"; mvdn.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != audioHolder.preTest.options.length-1) { var next = audioHolder.preTest.options[i+1]; var cur = audioHolder.preTest.options[i]; audioHolder.preTest.options[i+1] = cur; audioHolder.preTest.options[i] = next; popupInstance.state = 5; popupInstance.advanceState(); } }; mvH.appendChild(mvdn); entry.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; if (optionNode.type != "statement") { var span = document.createElement('span'); span.textContent = optionNode.id; idH.appendChild(span); } entry.appendChild(idH); var typeH = document.createElement('div'); typeH.className = "dndheaderelement"; typeH.style.width = "150px"; var span = document.createElement('span'); span.textContent = optionNode.type; typeH.appendChild(span); entry.appendChild(typeH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; var editButton = document.createElement("button"); editButton.textContent = "Edit"; editButton.style.width = "48px"; editButton.style.padding = "1px 0px"; editButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); popupInstance.dataTransfer = new function() { this.title = "Edit Test Node"; this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest; this.node = this.parent.options[i]; this.previousState = 5; }; popupInstance.advanceState(); }; editH.appendChild(editButton); entry.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; var deleteButton = document.createElement("button"); deleteButton.textContent = "Del"; deleteButton.style.width = "48px"; deleteButton.style.padding = "1px 0px"; deleteButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); var j = i+1; while(j < audioHolder.preTest.options.length) { audioHolder.preTest.options[i] = audioHolder.preTest.options[j]; j++; i++; } audioHolder.preTest.options.pop(); popupInstance.state = 5; popupInstance.advanceState(); }; deleteH.appendChild(deleteButton); entry.appendChild(deleteH); preHolder.appendChild(entry); } var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.align = "center"; var addPre = document.createElement('button'); addPre.className = "popupButton"; addPre.textContent = "Add New Entry"; addPre.style.height = "20px"; addPre.onclick = function() { popupInstance.dataTransfer = new function() { this.title = "New Pre Test Node"; this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].preTest; this.node = null; this.previousState = 5; }; popupInstance.advanceState(); }; entry.appendChild(addPre); preHolder.appendChild(entry); var span = document.createElement('span'); span.textContent = "Add your post test page options here"; this.popupBody.appendChild(span); var postHolder = document.createElement('div'); postHolder.id = "preHolder"; postHolder.style.width = "100%"; postHolder.style.minHeight = "100px"; postHolder.style.maxHeight = "220px"; postHolder.style.overflow = 'auto'; postHolder.style.border = "black"; postHolder.style.borderStyle = "solid"; postHolder.style.borderWidth = "1px"; this.popupBody.appendChild(postHolder); var postHeaderHolder = document.createElement('div'); postHeaderHolder.style.width = "456px"; postHeaderHolder.style.height= "20px"; postHeaderHolder.style.margin= "2px"; postHeaderHolder.style.borderBottom = "#DDD"; postHeaderHolder.style.borderBottomWidth = "1px"; postHeaderHolder.style.borderBottomStyle = "solid"; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var text = document.createElement('span'); text.textContent = "Order"; mvH.appendChild(text); postHeaderHolder.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; text = document.createElement('span'); text.textContent = "ID"; idH.appendChild(text); postHeaderHolder.appendChild(idH); var tH = document.createElement('div'); tH.className = "dndheaderelement"; tH.style.width = "150px"; text = document.createElement('span'); text.textContent = "Type"; tH.appendChild(text); postHeaderHolder.appendChild(tH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Edit"; editH.appendChild(text); postHeaderHolder.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Delete"; deleteH.appendChild(text); postHeaderHolder.appendChild(deleteH); postHolder.appendChild(postHeaderHolder); for (var i=0; i<audioHolder.postTest.options.length; i++) { var optionNode = audioHolder.postTest.options[i]; var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.setAttribute("node-id",i); var node = audioHolder.postTest.options[i]; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var mvup = document.createElement("button"); mvup.textContent = "Up"; mvup.style.width = "25px"; mvup.style.padding = "1px 0px"; mvup.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != 0) { var next = audioHolder.postTest.options[i-1]; var cur = audioHolder.postTest.options[i]; audioHolder.postTest.options[i-1] = cur; audioHolder.postTest.options[i] = next; popupInstance.state = 5; popupInstance.advanceState(); } }; mvH.appendChild(mvup); var mvdn = document.createElement("button"); mvdn.textContent = "Dn"; mvdn.style.width = "25px"; mvdn.style.padding = "1px 0px"; mvdn.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != audioHolder.postTest.options.length-1) { var next = audioHolder.postTest.options[i+1]; var cur = audioHolder.postTest.options[i]; audioHolder.postTest.options[i+1] = cur; audioHolder.postTest.options[i] = next; popupInstance.state = 5; popupInstance.advanceState(); } }; mvH.appendChild(mvdn); entry.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; if (optionNode.type != "statement") { var span = document.createElement('span'); span.textContent = optionNode.id; idH.appendChild(span); } entry.appendChild(idH); var typeH = document.createElement('div'); typeH.className = "dndheaderelement"; typeH.style.width = "150px"; var span = document.createElement('span'); span.textContent = optionNode.type; typeH.appendChild(span); entry.appendChild(typeH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; var editButton = document.createElement("button"); editButton.textContent = "Edit"; editButton.style.width = "48px"; editButton.style.padding = "1px 0px"; editButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); popupInstance.dataTransfer = new function() { this.title = "Edit Test Node"; this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest; this.node = this.parent.options[i]; this.previousState = 5; }; popupInstance.advanceState(); }; editH.appendChild(editButton); entry.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; var deleteButton = document.createElement("button"); deleteButton.textContent = "Del"; deleteButton.style.width = "48px"; deleteButton.style.padding = "1px 0px"; deleteButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); var j = i+1; while(j < audioHolder.postTest.options.length) { audioHolder.postTest.options[i] = audioHolder.postTest.options[j]; j++; i++; } audioHolder.postTest.options.pop(); popupInstance.state = 5; popupInstance.advanceState(); }; deleteH.appendChild(deleteButton); entry.appendChild(deleteH); postHolder.appendChild(entry); } var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.align = "center"; var addPost = document.createElement('button'); addPost.className = "popupButton"; addPost.textContent = "Add New Entry"; addPost.style.height = "20px"; addPost.onclick = function() { popupInstance.dataTransfer = new function() { this.title = "New Pre Test Node"; this.parent = specificationNode.audioHolders[specificationNode.audioHolders.length-1].postTest; this.node = null; this.previousState = 5; }; popupInstance.advanceState(); }; entry.appendChild(addPost); postHolder.appendChild(entry); var button = document.createElement('button'); button.id = 'submit'; button.className = "popupButton"; button.textContent = "Finish"; button.onclick = function(event) { popupInstance.state = 7; popupInstance.advanceState(); }; this.popupFooter.appendChild(button); button = document.createElement('button'); button.id = 'submit'; button.className = "popupButton"; button.textContent = "Add Another Page"; button.onclick = function(event) { popupInstance.state = 3; popupInstance.advanceState(); }; this.popupFooter.appendChild(button); break; case 6: this.popupTitleText.textContent = this.dataTransfer.title; var span = document.createElement('span'); span.textContent = "Select survey settings here"; this.popupBody.appendChild(span); var div = document.createElement('div'); span = document.createElement("span"); span.textContent = "Survey Type"; var select = document.createElement("select"); select.id="survey-select"; var option = document.createElement('option'); option.textContent = "Statement"; option.value = "statement"; select.appendChild(option); option = document.createElement('option'); option.textContent = "Question"; option.value = "question"; select.appendChild(option); option = document.createElement('option'); option.textContent = "Number"; option.value = "number"; select.appendChild(option); option = document.createElement('option'); option.textContent = "Radio"; option.value = "radio"; select.appendChild(option); option = document.createElement('option'); option.textContent = "Checkbox"; option.value = "checkbox"; select.appendChild(option); this.popupBody.appendChild(select); var options = document.createElement('div'); options.id = "survey-options"; this.popupBody.appendChild(options); var button = document.createElement('button'); button.id = 'submit'; button.className = "popupButton"; button.textContent = "Add"; button.onclick = function(event) { var parent = popupInstance.dataTransfer.parent; if (popupInstance.dataTransfer.node == null) { var node = new parent.OptionNode(); } else { var node = popupInstance.dataTransfer.node; } node.type = document.getElementById("survey-select").value; switch(node.type) { case "statement": node.statement = document.getElementById("statement").value; break; case "question": node.question = document.getElementById("question").value; node.id = document.getElementById("ID").value; node.mandatory = document.getElementById("mandatory").checked; node.boxsize = document.getElementById("boxsize").value; break; } if (popupInstance.dataTransfer.node == null) {parent.options.push(node);} popupInstance.state = popupInstance.dataTransfer.previousState; popupInstance.advanceState(); }; this.popupFooter.appendChild(button); select.onchange = function() { var options = document.getElementById("survey-options"); options.innerHTML = null; switch(this.value) { case "statement": var span = document.createElement('span'); span.textContent = "Enter Statement"; var tA = document.createElement('textarea'); tA.id = "statement"; tA.style.width = "460px"; tA.style.height = "96px"; if (popupInstance.dataTransfer.node != null) {tA.value = this.dataTransfer.node.statement;} options.appendChild(span); options.appendChild(tA); break; case "question": var span = document.createElement('span'); span.textContent = "Enter Question"; var tA = document.createElement('textarea'); tA.style.width = "460px"; tA.style.height = "54px"; tA.id = "question"; options.appendChild(span); options.appendChild(tA); var div = document.createElement('div'); var input = document.createElement('input'); input.id = "ID"; span = document.createElement('span'); span.textContent = "ID:"; div.appendChild(span); div.appendChild(input); options.appendChild(div); div = document.createElement('div'); input = document.createElement('input'); input.type = "checkbox"; input.id = "mandatory"; span = document.createElement('span'); span.textContent = "Mandatory"; div.appendChild(span); div.appendChild(input); options.appendChild(div); div = document.createElement('div'); var boxsize = document.createElement("select"); boxsize.id = "boxsize"; var selOpt = document.createElement("option"); selOpt.value = "normal"; selOpt.textContent = "Normal"; boxsize.appendChild(selOpt); selOpt = document.createElement("option"); selOpt.value = "small"; selOpt.textContent = "Small"; boxsize.appendChild(selOpt); selOpt = document.createElement("option"); selOpt.value = "large"; selOpt.textContent = "Large"; boxsize.appendChild(selOpt); selOpt = document.createElement("option"); selOpt.value = "huge"; selOpt.textContent = "Huge"; boxsize.appendChild(selOpt); span = document.createElement('span'); span.textContent = "Response Text Area"; div.appendChild(span); div.appendChild(boxsize); options.appendChild(div); if (popupInstance.dataTransfer.node != null) { tA.value = popupInstance.dataTransfer.node.question; document.getElementById("ID").value = popupInstance.dataTransfer.node.id; document.getElementById("mandatory").value = popupInstance.dataTransfer.node.mandatory; document.getElementById("boxsize").value = popupInstance.dataTransfer.node.boxsize; } break; case "number": var span = document.createElement('span'); span.textContent = "Enter Question"; var tA = document.createElement('textarea'); tA.style.width = "460px"; tA.style.height = "54px"; tA.id = "question"; options.appendChild(span); options.appendChild(tA); var div = document.createElement('div'); var input = document.createElement('input'); input.id = "ID"; span = document.createElement('span'); span.textContent = "ID:"; div.appendChild(span); div.appendChild(input); options.appendChild(div); div = document.createElement('div'); input = document.createElement('input'); input.type = "checkbox"; input.id = "mandatory"; span = document.createElement('span'); span.textContent = "Mandatory"; div.appendChild(span); div.appendChild(input); options.appendChild(div); div = document.createElement('div'); break; } }; if (this.dataTransfer.node != null) { select.value = this.dataTransfer.node.type; } select.onchange(); break; case 7: this.dataTransfer = null; this.popupTitleText.textContent = "Test Session - Pre/Post Survey"; var span = document.createElement('span'); span.textContent = "Add your pre test session and post test session survey options here"; this.popupBody.appendChild(span); var preHolder = document.createElement('div'); preHolder.id = "preHolder"; preHolder.style.width = "460px"; preHolder.style.minHeight = "100px"; preHolder.style.maxHeight = "220px"; preHolder.style.overflow = 'auto'; preHolder.style.border = "black"; preHolder.style.borderStyle = "solid"; preHolder.style.borderWidth = "1px"; this.popupBody.appendChild(preHolder); var preHeaderHolder = document.createElement('div'); preHeaderHolder.style.width = "456px"; preHeaderHolder.style.height= "20px"; preHeaderHolder.style.margin= "2px"; preHeaderHolder.style.borderBottom = "#DDD"; preHeaderHolder.style.borderBottomWidth = "1px"; preHeaderHolder.style.borderBottomStyle = "solid"; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var text = document.createElement('span'); text.textContent = "Order"; mvH.appendChild(text); preHeaderHolder.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; text = document.createElement('span'); text.textContent = "ID"; idH.appendChild(text); preHeaderHolder.appendChild(idH); var tH = document.createElement('div'); tH.className = "dndheaderelement"; tH.style.width = "150px"; text = document.createElement('span'); text.textContent = "Type"; tH.appendChild(text); preHeaderHolder.appendChild(tH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Edit"; editH.appendChild(text); preHeaderHolder.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Delete"; deleteH.appendChild(text); preHeaderHolder.appendChild(deleteH); preHolder.appendChild(preHeaderHolder); for (var i=0; i<specificationNode.preTest.options.length; i++) { var optionNode = specificationNode.preTest.options[i]; var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.setAttribute("node-id",i); var node = specificationNode.preTest.options[i]; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var mvup = document.createElement("button"); mvup.textContent = "Up"; mvup.style.width = "25px"; mvup.style.padding = "1px 0px"; mvup.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != 0) { var next = specificationNode.preTest.options[i-1]; var cur = specificationNode.preTest.options[i]; specificationNode.preTest.options[i-1] = cur; specificationNode.preTest.options[i] = next; popupInstance.state = 7; popupInstance.advanceState(); } }; mvH.appendChild(mvup); var mvdn = document.createElement("button"); mvdn.textContent = "Dn"; mvdn.style.width = "25px"; mvdn.style.padding = "1px 0px"; mvdn.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != specificationNode.preTest.options.length-1) { var next = specificationNode.preTest.options[i+1]; var cur = specificationNode.preTest.options[i]; specificationNode.preTest.options[i+1] = cur; specificationNode.preTest.options[i] = next; popupInstance.state = 7; popupInstance.advanceState(); } }; mvH.appendChild(mvdn); entry.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; if (optionNode.type != "statement") { var span = document.createElement('span'); span.textContent = optionNode.id; idH.appendChild(span); } entry.appendChild(idH); var typeH = document.createElement('div'); typeH.className = "dndheaderelement"; typeH.style.width = "150px"; var span = document.createElement('span'); span.textContent = optionNode.type; typeH.appendChild(span); entry.appendChild(typeH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; var editButton = document.createElement("button"); editButton.textContent = "Edit"; editButton.style.width = "48px"; editButton.style.padding = "1px 0px"; editButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); popupInstance.dataTransfer = new function() { this.title = "Edit Test Node"; this.parent = specificationNode.preTest; this.node = this.parent.options[i]; this.previousState = 7; }; popupInstace.state = 6; popupInstance.advanceState(); }; editH.appendChild(editButton); entry.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; var deleteButton = document.createElement("button"); deleteButton.textContent = "Del"; deleteButton.style.width = "48px"; deleteButton.style.padding = "1px 0px"; deleteButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); var j = i+1; while(j < specificationNode.preTest.options.length) { specificationNode.preTest.options[i] = specificationNode.preTest.options[j]; j++; i++; } specificationNode.preTest.options.pop(); popupInstance.state = 7; popupInstance.advanceState(); }; deleteH.appendChild(deleteButton); entry.appendChild(deleteH); preHolder.appendChild(entry); } var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.align = "center"; var addPre = document.createElement('button'); addPre.className = "popupButton"; addPre.textContent = "Add New Entry"; addPre.style.height = "20px"; addPre.onclick = function() { popupInstance.dataTransfer = new function() { this.title = "New Pre Test Node"; this.parent = specificationNode.preTest; this.node = null; this.previousState = 7; }; popupInstance.state = 6; popupInstance.advanceState(); }; entry.appendChild(addPre); preHolder.appendChild(entry); var span = document.createElement('span'); span.textContent = "Add your post test page options here"; this.popupBody.appendChild(span); var postHolder = document.createElement('div'); postHolder.id = "preHolder"; postHolder.style.width = "100%"; postHolder.style.minHeight = "100px"; postHolder.style.maxHeight = "220px"; postHolder.style.overflow = 'auto'; postHolder.style.border = "black"; postHolder.style.borderStyle = "solid"; postHolder.style.borderWidth = "1px"; this.popupBody.appendChild(postHolder); var postHeaderHolder = document.createElement('div'); postHeaderHolder.style.width = "456px"; postHeaderHolder.style.height= "20px"; postHeaderHolder.style.margin= "2px"; postHeaderHolder.style.borderBottom = "#DDD"; postHeaderHolder.style.borderBottomWidth = "1px"; postHeaderHolder.style.borderBottomStyle = "solid"; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var text = document.createElement('span'); text.textContent = "Order"; mvH.appendChild(text); postHeaderHolder.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; text = document.createElement('span'); text.textContent = "ID"; idH.appendChild(text); postHeaderHolder.appendChild(idH); var tH = document.createElement('div'); tH.className = "dndheaderelement"; tH.style.width = "150px"; text = document.createElement('span'); text.textContent = "Type"; tH.appendChild(text); postHeaderHolder.appendChild(tH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Edit"; editH.appendChild(text); postHeaderHolder.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; text = document.createElement('span'); text.textContent = "Delete"; deleteH.appendChild(text); postHeaderHolder.appendChild(deleteH); postHolder.appendChild(postHeaderHolder); for (var i=0; i<specificationNode.postTest.options.length; i++) { var optionNode = specificationNode.postTest.options[i]; var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.setAttribute("node-id",i); var node = specificationNode.postTest.options[i]; var mvH = document.createElement('div'); mvH.className = "dndheaderelement"; mvH.style.width = "50px"; var mvup = document.createElement("button"); mvup.textContent = "Up"; mvup.style.width = "25px"; mvup.style.padding = "1px 0px"; mvup.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != 0) { var next = specificationNode.postTest.options[i-1]; var cur = specificationNode.postTest.options[i]; specificationNode.postTest.options[i-1] = cur; specificationNode.postTest.options[i] = next; popupInstance.state = 7; popupInstance.advanceState(); } }; mvH.appendChild(mvup); var mvdn = document.createElement("button"); mvdn.textContent = "Dn"; mvdn.style.width = "25px"; mvdn.style.padding = "1px 0px"; mvdn.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); if (i != specificationNode.postTest.options.length-1) { var next = specificationNode.postTest.options[i+1]; var cur = specificationNode.postTest.options[i]; specificationNode.postTest.options[i+1] = cur; specificationNode.postTest.options[i] = next; popupInstance.state = 7; popupInstance.advanceState(); } }; mvH.appendChild(mvdn); entry.appendChild(mvH); var idH = document.createElement('div'); idH.className = "dndheaderelement"; idH.style.width = "150px"; if (optionNode.type != "statement") { var span = document.createElement('span'); span.textContent = optionNode.id; idH.appendChild(span); } entry.appendChild(idH); var typeH = document.createElement('div'); typeH.className = "dndheaderelement"; typeH.style.width = "150px"; var span = document.createElement('span'); span.textContent = optionNode.type; typeH.appendChild(span); entry.appendChild(typeH); var editH = document.createElement('div'); editH.className = "dndheaderelement"; editH.style.width = "50px"; var editButton = document.createElement("button"); editButton.textContent = "Edit"; editButton.style.width = "48px"; editButton.style.padding = "1px 0px"; editButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); popupInstance.dataTransfer = new function() { this.title = "Edit Test Node"; this.parent = specificationNode.postTest; this.node = this.parent.options[i]; this.previousState = 7; }; popupInstance.state = 6; popupInstance.advanceState(); }; editH.appendChild(editButton); entry.appendChild(editH); var deleteH = document.createElement('div'); deleteH.className = "dndheaderelement"; deleteH.style.width = "50px"; var deleteButton = document.createElement("button"); deleteButton.textContent = "Del"; deleteButton.style.width = "48px"; deleteButton.style.padding = "1px 0px"; deleteButton.onclick = function() { var i = Number(event.currentTarget.parentElement.parentElement.getAttribute("node-id")); var j = i+1; while(j < specificationNode.postTest.options.length) { specificationNode.postTest.options[i] = specificationNode.postTest.options[j]; j++; i++; } audioHolder.postTest.options.pop(); popupInstance.state = 7; popupInstance.advanceState(); }; deleteH.appendChild(deleteButton); entry.appendChild(deleteH); postHolder.appendChild(entry); } var entry = document.createElement('div'); entry.style.width = "456px"; entry.style.height= "20px"; entry.style.margin= "2px"; entry.style.borderBottom = "#DDD"; entry.style.borderBottomWidth = "1px"; entry.style.borderBottomStyle = "solid"; entry.align = "center"; var addPost = document.createElement('button'); addPost.className = "popupButton"; addPost.textContent = "Add New Entry"; addPost.style.height = "20px"; addPost.onclick = function() { popupInstance.dataTransfer = new function() { this.title = "New Pre Test Node"; this.parent = specificationNode.postTest; this.node = null; this.previousState = 7; }; popupInstance.state = 6; popupInstance.advanceState(); }; entry.appendChild(addPost); postHolder.appendChild(entry); var button = document.createElement('button'); button.id = 'submit'; button.className = "popupButton"; button.textContent = "Finish"; button.onclick = function(event) { popupInstance.state = 8; popupInstance.advanceState(); }; this.popupFooter.appendChild(button); break; case 8: this.hidePopup(); this.state = 0; SpecficationToHTML(); } this.state++; }; }; function audioObject() { // Used to hold audio information in buffers for quick playback this.bufferObject; this.bufferNode = undefined; this.state = 0; this.gain = audioContext.createGain(); this.gain.connect(audioContext.destination); this.include = true; this.id = undefined; this.file = undefined; this.play = function() { if (this.bufferNode != undefined) { this.bufferNode.stop(0); this.bufferNode = undefined; } if(this.state == 1) { this.bufferNode = audioContext.createBufferSource(); this.bufferNode.connect(this.gain); this.bufferNode.buffer = this.bufferObject; this.bufferNode.onended = function(event) { // Safari does not like using 'this' to reference the calling object! event.currentTarget = undefined; }; this.bufferNode.start(audioContext.currentTime); this.bufferNode.stop(audioContext.currentTime+3); } }; this.constructTrack = function(file) { var reader = new FileReader(); this.file = file; var audioObj = this; // Create callback to decode the data asynchronously reader.onloadend = function() { audioContext.decodeAudioData(reader.result, function(decodedData) { audioObj.bufferObject = decodedData; audioObj.state = 1; }, function(){}); }; reader.readAsArrayBuffer(file); }; }; function Specification() { // Handles the decoding of the project specification XML into a simple JavaScript Object. this.interfaceType = null; this.commonInterface = new function() { this.options = []; this.optionNode = function(input) { var name = input.getAttribute('name'); this.type = name; if(this.type == "option") { this.name = input.id; } else if (this.type == "check") { this.check = input.id; } }; }; this.projectReturn = null; this.randomiseOrder = null; this.collectMetrics = null; this.testPages = null; this.audioHolders = []; this.metrics = []; this.decode = function() { // projectXML - DOM Parsed document this.projectXML = projectXML.childNodes[0]; var setupNode = projectXML.getElementsByTagName('setup')[0]; this.interfaceType = setupNode.getAttribute('interface'); this.projectReturn = setupNode.getAttribute('projectReturn'); this.testPages = setupNode.getAttribute('testPages'); if (setupNode.getAttribute('randomiseOrder') == "true") { this.randomiseOrder = true; } else {this.randomiseOrder = false;} if (setupNode.getAttribute('collectMetrics') == "true") { this.collectMetrics = true; } else {this.collectMetrics = false;} if (isNaN(Number(this.testPages)) || this.testPages == undefined) { this.testPages = null; } else { this.testPages = Number(this.testPages); if (this.testPages == 0) {this.testPages = null;} } var metricCollection = setupNode.getElementsByTagName('Metric'); this.preTest = new this.prepostNode('pretest',setupNode.getElementsByTagName('PreTest')); this.postTest = new this.prepostNode('posttest',setupNode.getElementsByTagName('PostTest')); if (metricCollection.length > 0) { metricCollection = metricCollection[0].getElementsByTagName('metricEnable'); for (var i=0; i<metricCollection.length; i++) { this.metrics.push(new this.metricNode(metricCollection[i].textContent)); } } var commonInterfaceNode = setupNode.getElementsByTagName('interface'); if (commonInterfaceNode.length > 0) { commonInterfaceNode = commonInterfaceNode[0]; } else { commonInterfaceNode = undefined; } this.commonInterface = new function() { this.OptionNode = function(child) { this.type = child.nodeName; if (this.type == 'option') { this.name = child.getAttribute('name'); } else if (this.type == 'check') { this.check = child.getAttribute('name'); if (this.check == 'scalerange') { this.min = child.getAttribute('min'); this.max = child.getAttribute('max'); if (this.min == null) {this.min = 1;} else if (Number(this.min) > 1 && this.min != null) { this.min = Number(this.min)/100; } else { this.min = Number(this.min); } if (this.max == null) {this.max = 0;} else if (Number(this.max) > 1 && this.max != null) { this.max = Number(this.max)/100; } else { this.max = Number(this.max); } } } else if (this.type == 'anchor' || this.type == 'reference') { this.value = Number(child.textContent); this.enforce = child.getAttribute('enforce'); if (this.enforce == 'true') {this.enforce = true;} else {this.enforce = false;} } }; this.options = []; if (commonInterfaceNode != undefined) { var child = commonInterfaceNode.firstElementChild; while (child != undefined) { this.options.push(new this.OptionNode(child)); child = child.nextElementSibling; } } }; var audioHolders = projectXML.getElementsByTagName('audioHolder'); for (var i=0; i<audioHolders.length; i++) { this.audioHolders.push(new this.audioHolderNode(this,audioHolders[i])); } // New check if we need to randomise the test order if (this.randomiseOrder) { this.audioHolders = randomiseOrder(this.audioHolders); for (var i=0; i<this.audioHolders.length; i++) { this.audioHolders[i].presentedId = i; } } if (this.testPages != null || this.testPages != undefined) { if (this.testPages > audioHolders.length) { console.log('Warning: You have specified '+audioHolders.length+' tests but requested '+this.testPages+' be completed!'); this.testPages = audioHolders.length; } var aH = this.audioHolders; this.audioHolders = []; for (var i=0; i<this.testPages; i++) { this.audioHolders.push(aH[i]); } } }; this.prepostNode = function(type) { this.type = type; this.options = []; this.OptionNode = function() { this.childOption = function() { this.type = 'option'; this.id = element.id; this.name = element.getAttribute('name'); this.text = element.textContent; }; this.type = undefined; this.id = undefined; this.mandatory = undefined; this.question = undefined; this.statement = undefined; this.boxsize = undefined; this.options = []; this.min = undefined; this.max = undefined; this.step = undefined; }; }; this.metricNode = function(name) { this.enabled = name; }; this.audioHolderNode = function(parent) { this.type = 'audioHolder'; this.presentedId = undefined; this.id = undefined; this.hostURL = undefined; this.sampleRate = undefined; this.randomiseOrder = undefined; this.loop = undefined; this.elementComments = undefined; this.preTest = new parent.prepostNode('pretest'); this.postTest = new parent.prepostNode('posttest'); this.interfaces = []; this.commentBoxPrefix = "Comment on track"; this.audioElements = []; this.commentQuestions = []; this.interfaceNode = function(DOM) { var title = DOM.getElementsByTagName('title'); if (title.length == 0) {this.title = null;} else {this.title = title[0].textContent;} this.options = parent.commonInterface.options; var scale = DOM.getElementsByTagName('scale'); this.scale = []; for (var i=0; i<scale.length; i++) { var arr = [null, null]; arr[0] = scale[i].getAttribute('position'); arr[1] = scale[i].textContent; this.scale.push(arr); } }; this.audioElementNode = function(parent,audioObject) { this.url = audioObject.file.name; this.id = audioObject.id; this.parent = parent; this.type = "normal"; this.marker = undefined; }; this.commentQuestionNode = function(xml) { this.childOption = function(element) { this.type = 'option'; this.name = element.getAttribute('name'); this.text = element.textContent; }; this.id = xml.id; if (xml.getAttribute('mandatory') == 'true') {this.mandatory = true;} else {this.mandatory = false;} this.type = xml.getAttribute('type'); if (this.type == undefined) {this.type = 'text';} switch (this.type) { case 'text': this.question = xml.textContent; break; case 'radio': var child = xml.firstElementChild; this.options = []; while (child != undefined) { if (child.nodeName == 'statement' && this.statement == undefined) { this.statement = child.textContent; } else if (child.nodeName == 'option') { this.options.push(new this.childOption(child)); } child = child.nextElementSibling; } break; case 'checkbox': var child = xml.firstElementChild; this.options = []; while (child != undefined) { if (child.nodeName == 'statement' && this.statement == undefined) { this.statement = child.textContent; } else if (child.nodeName == 'option') { this.options.push(new this.childOption(child)); } child = child.nextElementSibling; } break; } }; }; this.preTest = new this.prepostNode("pretest"); this.postTest = new this.prepostNode("posttest"); } function SpecficationToHTML() { // Take information from Specification Node and format it into an HTML layout var destination = document.getElementById("content"); // Setup Header Node var setupNode = document.createElement("div"); setupNode.className = "topLevel"; setupNode.name = "setup"; var title = document.createElement("h2"); title.textContent = "Setup"; setupNode.appendChild(title); // Interface Type var div = document.createElement("div"); div.name = "attributes"; div.style.margin = "5px"; var select = document.createElement("select"); select.id = "interfaceSelect"; select.style.margin = "5px"; var option = document.createElement("option"); option.value = "APE"; option.textContent = "APE"; select.appendChild(option); option = document.createElement("option"); option.value = "MUSHRA"; option.textContent = "MUSHRA"; select.appendChild(option); select.value = specificationNode.interfaceType; var span = document.createElement("span"); span.textContent = "Interface Type"; div.appendChild(span); div.appendChild(select); // Project Return Attribute span = document.createElement("span"); span.style.margin = "5px"; span.textContent = "Project Return"; var input = document.createElement("input"); input.value = specificationNode.projectReturn; input.id = "projectReturn"; input.style.margin = "5px"; div.appendChild(span); div.appendChild(input); // Randomise Order span = document.createElement("span"); span.textContent = "Randomise Order"; input = document.createElement("input"); input.id = "randomiseOrder"; input.style.margin = "5px"; input.type = "checkbox"; input.value = specificationNode.projectReturn; div.appendChild(span); div.appendChild(input); setupNode.appendChild(div); // Now create the common Interface Node var commonInterface = document.createElement("div"); commonInterface.id = "interface"; commonInterface.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Common Interface"; commonInterface.appendChild(title); var div = document.createElement("div"); div.name = "attributes"; var interfaceOptions; var interfaceChecks; switch(select.value) { case "APE": interfaceOptions = APEInterfaceOptions; interfaceChecks = APEInterfaceChecks; break; case "MUSHRA": interfaceOptions = MUSHRAInterfaceOptions; interfaceChecks = MUSHRAInterfaceChecks; break; } for (var i=0; i<interfaceOptions[0].length; i++) { var span = document.createElement("span"); span.textContent = interfaceOptions[1][i]; var input = document.createElement("input"); input.type = "checkbox"; input.id = interfaceOptions[0][i]; div.appendChild(input); div.appendChild(span); commonInterface.appendChild(div); for (var j=0; j<specificationNode.commonInterface.options.length; j++) { if (specificationNode.commonInterface.options[j].name == interfaceOptions[0][i]) { input.checked = true; break; } } } for (var i=0; i<interfaceChecks[0].length; i++) { var span = document.createElement("span"); span.textContent = interfaceChecks[1][i]; var input = document.createElement("input"); input.type = "checkbox"; input.id = interfaceChecks[0][i]; div.appendChild(input); div.appendChild(span); commonInterface.appendChild(div); for (var j=0; j<specificationNode.commonInterface.options.length; j++) { if (specificationNode.commonInterface.options[j].check == interfaceChecks[0][i]) { input.checked = true; break; } } } setupNode.appendChild(commonInterface); // Now the Metric Node var metrics = document.createElement("div"); metrics.id = "metrics"; metrics.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Metric Collections"; metrics.appendChild(title); var div = document.createElement("div"); div.name = "attributes"; metrics.appendChild(div); var supportedMetrics; switch(select.value) { case "APE": supportedMetrics = APEInterfaceMetrics; break; case "MUSHRA": supportedMetrics = MUSHRAInterfaceMetrics; break; } for (var i=0; i<supportedMetrics[0].length; i++) { var span = document.createElement("span"); span.textContent = supportedMetrics[1][i]; var input = document.createElement("input"); input.type = "checkbox"; input.id = supportedMetrics[0][i]; div.appendChild(input); div.appendChild(span); for (var j=0; j<specificationNode.metrics.length; j++) { if (specificationNode.metrics[j].enabled == supportedMetrics[0][i]) { input.checked = true; } } } setupNode.appendChild(metrics); // Test Session Pre Test var preTest = document.createElement("div"); preTest.id = "preTest"; preTest.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Pre test Survey"; preTest.appendChild(title); var div = document.createElement("div"); div.name = "attributes"; for (var j=0; j<specificationNode.preTest.options.length; j++) { var node = PPSurveyToHTML(specificationNode.preTest.options[j]); node.className = "SecondLevel"; node.id = preTest.id+"-"+j; preTest.appendChild(node); } setupNode.appendChild(preTest); // Test Session Post Test var postTest = document.createElement("div"); postTest.id = "postTest"; postTest.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Post test Survey"; postTest.appendChild(title); var div = document.createElement("div"); div.name = "attributes"; for (var j=0; j<specificationNode.postTest.options.length; j++) { var node = PPSurveyToHTML(specificationNode.postTest.options[j]); node.className = "SecondLevel"; node.id = postTest.id+"-"+j; postTest.appendChild(node); } setupNode.appendChild(postTest); destination.appendChild(setupNode); // Now we step through the AudioHolders for (var i=0; i<specificationNode.audioHolders.length; i++) { var aH = specificationNode.audioHolders[i]; var aHTML = document.createElement("div"); aHTML.name = "audioHolder"; aHTML.id = "audioHolder-"+aH.id; aHTML.className = "topLevel"; destination.appendChild(aHTML); var title = document.createElement("h2"); title.textContent = "Audio Holder "+aH.id; aHTML.appendChild(title); var attributes = document.createElement("div"); attributes.name = "attributes"; aHTML.appendChild(attributes); var text = document.createElement("span"); text.textContent = "ID: "; var input = document.createElement("input"); input.id = aHTML.id+"-id"; input.value = aH.id; input.onchange = function() { event.currentTarget.parentElement.parentElement.childNodes[0].textContent = "Audio Holder "+event.currentTarget.value; }; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Host URL: "; input = document.createElement("input"); input.id = aHTML.id+"-hostURL"; input.value = aH.hostURL; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Loop Fragments: "; input = document.createElement("input"); input.id = aHTML.id+"-loop"; input.type = "checkbox"; input.checked = aH.loop; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Randomise Order: "; input = document.createElement("input"); input.id = aHTML.id+"-randomiseOrder"; input.type = "checkbox"; input.checked = aH.randomiseOrder; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Show Fragment Comments"; input = document.createElement("input"); input.id = aHTML.id+"-elementComments"; input.type = "checkbox"; input.checked = aH.elementComments; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); // Test Session Pre Test var preTest = document.createElement("div"); preTest.id = aHTML.id+"-pretest"; preTest.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Pre test Survey"; preTest.appendChild(title); var div = document.createElement("div"); div.name = "attributes"; for (var j=0; j<aH.preTest.options.length; j++) { var node = PPSurveyToHTML(aH.preTest.options[j]); node.className = "SecondLevel"; node.id = preTest.id+"-"+j; preTest.appendChild(node); } aHTML.appendChild(preTest); // Test Session Post Test var postTest = document.createElement("div"); postTest.id = aHTML.id+"-postTest"; postTest.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Post test Survey"; postTest.appendChild(title); var div = document.createElement("div"); div.name = "attributes"; for (var j=0; j<aH.postTest.options.length; j++) { var node = PPSurveyToHTML(aH.postTest.options[j]); node.className = "SecondLevel"; node.id = postTest.id+"-"+j; postTest.appendChild(node); } aHTML.appendChild(postTest); //Audio Elements var audioElems = document.createElement("div"); audioElems.id = aHTML.id+"-audioElements"; audioElems.className = "SecondLevel"; var title = document.createElement("h3"); title.textContent = "Audio Elements"; audioElems.appendChild(title); for (var i=0; i<aH.audioElements.length; i++) { var entry = document.createElement("div"); entry.className = "SecondLevel"; entry.id = audioElems.id+"-"+aH.audioElements[i].id; var text = document.createElement("span"); text.textContent = "ID:"; var input = document.createElement("input"); input.id = entry.id+"-id"; input.value = aH.audioElements[i].id; text.style.margin = "5px"; input.style.margin = "5px"; entry.appendChild(text); entry.appendChild(input); text = document.createElement("span"); text.textContent = "URL:"; input = document.createElement("input"); input.id = entry.id+"-URL"; input.value = aH.audioElements[i].url; text.style.margin = "5px"; input.style.margin = "5px"; entry.appendChild(text); entry.appendChild(input); audioElems.appendChild(entry); } aHTML.appendChild(audioElems); } function PPSurveyToHTML(node) { var holder = document.createElement("div"); var title = document.createElement("h4"); holder.appendChild(title); var attributes = document.createElement("div"); holder.appendChild(attributes); switch(node.type) { case "statement": title.textContent = "Statement"; var tA = document.createElement("textarea"); attributes.style.height = "150px"; tA.style.width = "500px"; tA.style.height = "100px"; tA.value = node.statement; attributes.appendChild(tA); break; case "question": title.textContent = "Question"; var text = document.createElement("span"); text.textContent = "ID :"; var input = document.createElement("input"); input.name = "id"; input.value = node.id; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Question"; input = document.createElement("input"); input.name = "question"; input.style.width = "400px"; input.value = node.question; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Mandatory"; input = document.createElement("input"); input.name = "mandatory"; input.type = "checkbox"; input.checked = node.mandatory; text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); text = document.createElement("span"); text.textContent = "Reply box size"; input = document.createElement("select"); input.name = "boxsize"; var option = document.createElement("option"); option.textContent = "Normal"; option.value = "normal"; input.appendChild(option); option = document.createElement("option"); option.textContent = "Large"; option.value = "large"; input.appendChild(option); option = document.createElement("option"); option.textContent = "Small"; option.value = "small"; input.appendChild(option); option = document.createElement("option"); option.textContent = "Huge"; option.value = "huge"; input.appendChild(option); text.style.margin = "5px"; input.style.margin = "5px"; attributes.appendChild(text); attributes.appendChild(input); input.value = node.boxsize; break; } return holder; } } </script> <style> div.popup { width: 500px; position: absolute; height: 400px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 50px #000; z-index: 2; } button.popupButton { /* Button for popup window */ min-width: 50px; height: 25px; position: relative; border-radius: 5px; border: #444; border-width: 1px; border-style: solid; background-color: #fff; } div.dragndrop { margin-top: 10px; border:#000000; border-style: dashed; border-width: 2px; } div.dndheaderelement { float: left; height: 100%; border-right: #DDDDDD; border-right-width: 1px; border-right-style: solid; } div.dndheaderelement span{ padding-left: 5px; } div.topLevel { border: #000; border-style: solid; border-width: 5px; padding: 10px; margin: 10px; } div.SecondLevel { border: #000; border-style: solid; border-width: 1px; padding: 10px; margin: 10px; } </style> </head> <body> <div id="content"></div> </body> </html>