Mercurial > hg > webaudioevaluationtool
changeset 161:f0fb39c61967 Dev_main
Merge from the default branch
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Tue, 02 Jun 2015 11:24:23 +0100 |
parents | 2799bb693f70 (diff) 826dfaa860d1 (current diff) |
children | 918d9a5943cd |
files | |
diffstat | 1 files changed, 275 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/test_create/test_create.html Mon Jun 01 17:00:45 2015 +0100 +++ b/test_create/test_create.html Tue Jun 02 11:24:23 2015 +0100 @@ -12,14 +12,285 @@ <meta name="author" content=""> <meta name="viewport" content="width=device-width; initial-scale=1.0"> + + <script type="text/javascript"> + // To aid 'one-page set-up' all scripts and CSS must be included directly in this file! + var topLevel; + window.onload = function() { + // Initialise page + topLevel = document.getElementById('topLevelBody'); + var setup = document.createElement('div'); + setup.id = 'setupTagDiv'; + + }; + + function attributePair(string, type){ + var id = document.createElement("span"); + id.textContent = string; + var input = document.createElement("input"); + input.type = type; + return [id, input]; + } + + function removeNode(event) { + event.srcElement.parentElement.parentElement.removeChild(event.srcElement.parentElement); + } + + function questionNode() { + var node = document.createElement("div"); + node.setAttribute('class','head'); + node.setAttribute('name','question-node'); + var nodeTitle = document.createElement("span"); + nodeTitle.textContent = "Question"; + var attributes = document.createElement("div"); + attributes.setAttribute('class','attrib'); + var id = attributePair("ID:","text"); + var question = attributePair("Question:","text"); + node.appendChild(nodeTitle); + id.forEach(function(item){attributes.appendChild(item);},false); + question.forEach(function(item){attributes.appendChild(item);},false); + node.appendChild(attributes); + + var removeButton = document.createElement("button"); + removeButton.textContent = "Remove"; + removeButton.onclick = removeNode; + node.appendChild(removeButton); + return node; + } + + function statementNode() { + var node = document.createElement("div"); + node.setAttribute('class','head'); + node.setAttribute('name','question-node'); + var nodeTitle = document.createElement("span"); + nodeTitle.textContent = "Statement"; + var attributes = document.createElement("div"); + attributes.setAttribute('class','attrib'); + var statement = attributePair("Statement:","text"); + node.appendChild(nodeTitle); + statement.forEach(function(item){attributes.appendChild(item);},false); + node.appendChild(attributes); + + var removeButton = document.createElement("button"); + removeButton.textContent = "Remove"; + removeButton.onclick = removeNode; + node.appendChild(removeButton); + return node; + } + + function audioHolderNode() { + var audioHolderCounts = document.getElementsByName("audio-holder").length; + var node = document.createElement("div"); + node.setAttribute("class","head"); + node.setAttribute("name","audio-holder"); + node.setAttribute("id","audio-holder-"+audioHolderCounts); + var nodeTitle = document.createElement("span"); + nodeTitle.textContent = "Audio Holder "+(audioHolderCounts+1); + + var attributes = document.createElement("div"); + attributes.setAttribute('class','attrib'); + var id = attributePair("ID:","text"); + id[1].value=audioHolderCounts; + var hostURL = attributePair("Host URL:", "text"); + var sampleRate = attributePair("Sample Rate:","text"); + var randomiseOrder = attributePair("Randomise Element Order:","checkbox"); + var repeatCount = attributePair("Repeat Page Count:","number"); + repeatCount[1].value = 0; + var loop = attributePair("Loop Element Playback","checkbox"); + var elementComments = attributePair("Enable Comment Boxes","checkbox"); + id.forEach(function(item){attributes.appendChild(item);},false); + hostURL.forEach(function(item){attributes.appendChild(item);},false); + sampleRate.forEach(function(item){attributes.appendChild(item);},false); + hostURL.forEach(function(item){attributes.appendChild(item);},false); + randomiseOrder.forEach(function(item){attributes.appendChild(item);},false); + repeatCount.forEach(function(item){attributes.appendChild(item);},false); + loop.forEach(function(item){attributes.appendChild(item);},false); + elementComments.forEach(function(item){attributes.appendChild(item);},false); + + node.appendChild(nodeTitle); + node.appendChild(attributes); + + var pretest = document.createElement("div"); + pretest.setAttribute('class','head'); + pretest.setAttribute('name','pre-test'); + var pretestTitle = document.createElement("h4"); + pretestTitle.textContent = "Pre Test"; + var buttonAddQ = document.createElement("button"); + buttonAddQ.textContent = "Add Pre Test Question"; + buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());}; + var buttonAddS = document.createElement("button"); + buttonAddS.textContent = "Add Pre Test Statement"; + buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());}; + pretest.appendChild(pretestTitle); + pretest.appendChild(buttonAddQ); + pretest.appendChild(buttonAddS); + + var posttest = document.createElement("div"); + posttest.setAttribute('class','head'); + posttest.setAttribute('name','post-test'); + var posttestTitle = document.createElement("h4"); + posttestTitle.textContent = "Post Test"; + var buttonAddQ = document.createElement("button"); + buttonAddQ.textContent = "Add Post Test Question"; + buttonAddQ.onclick = function(){event.srcElement.parentElement.appendChild(questionNode());}; + var buttonAddS = document.createElement("button"); + buttonAddS.textContent = "Add Post Test Statement"; + buttonAddS.onclick = function(){event.srcElement.parentElement.appendChild(statementNode());}; + posttest.appendChild(posttestTitle); + posttest.appendChild(buttonAddQ); + posttest.appendChild(buttonAddS); + + node.appendChild(pretest); + node.appendChild(posttest); + + var newAudioElementButton = document.createElement("button"); + newAudioElementButton.textContent = "Add audio element"; + newAudioElementButton.onclick = function(){ + event.srcElement.parentElement.appendChild(audioElementNode()); + }; + node.appendChild(newAudioElementButton); + + var newCommentButton = document.createElement("button"); + newCommentButton.textContent = "Add Comment Box"; + newCommentButton.onclick = function() { + event.srcElement.parentElement.appendChild(commentBox()); + }; + node.appendChild(newCommentButton); + + var removeButton = document.createElement("button"); + removeButton.textContent = "Remove Audio Holder"; + removeButton.onclick = removeNode; + node.appendChild(removeButton); + return node; + } + + function audioElementNode() { + var parentStructure = event.srcElement.parentElement.childNodes; + var audioElemCounts = 0; + for (var i=0; i<parentStructure.length; i++) { + if (parentStructure[i].getAttribute('name') == "audio-element") + {audioElemCounts++;} + } + var node = document.createElement('div'); + node.setAttribute('class','head'); + node.setAttribute('name','audio-element'); + var nodeTitle = document.createElement('span'); + nodeTitle.textContent = 'Audio Element '+(audioElemCounts+1); + + var attributes = document.createElement("div"); + attributes.setAttribute('class','attrib'); + var id = attributePair("ID:","text"); + id[1].value = audioElemCounts; + var url = attributePair("URL:","text"); + id.forEach(function(item){attributes.appendChild(item);},false); + url.forEach(function(item){attributes.appendChild(item);},false); + + node.appendChild(nodeTitle); + node.appendChild(attributes); + + var removeButton = document.createElement("button"); + removeButton.textContent = "Remove Audio Element"; + removeButton.onclick = removeNode; + node.appendChild(removeButton); + return node; + } + + function commentBox() { + var node = document.createElement('div'); + node.setAttribute('class','head'); + node.setAttribute('name','comment-question'); + var nodeTitle = document.createElement('h4'); + nodeTitle.textContent = "Comment Box"; + + var attributes = document.createElement('div'); + attributes.setAttribute('class','attrib'); + var id = attributePair("ID:",'text'); + var question = attributePair("Question:",'text'); + id.forEach(function(item){attributes.appendChild(item);},false); + question.forEach(function(item){attributes.appendChild(item);},false); + + var removeButton = document.createElement("button"); + removeButton.textContent = "Remove Comment Box"; + removeButton.onclick = removeNode; + + node.appendChild(nodeTitle); + node.appendChild(attributes); + node.appendChild(removeButton); + return node; + } + </script> + <style> + div { + padding: 2px; + margin-top: 2px; + margin-bottom: 2px; + } + div.head{ + margin-left: 10px; + border: black; + border-width: 2px; + border-style: solid; + } + div.attrib{ + margin-left:25px; + border: black; + border-width: 2px; + border-style: dashed; + margin-bottom: 10px; + } + </style> + </head> <body> - <div> - <h1>Create Test Setup XML</h1> - </div> - <div id="topLevelBody"> + <h1>Create Test Setup XML</h1> + <div id="topLevelBody" align="left"> <!-- Interface goes here --> + <div name='test-setup'> + <div id="setup" class="head"> + <h2>Setup Tag</h2> + <div id="setup-attribs" class="attrib"> + <span>Interface</span> + <select id="interface"> + <option value='APE'>APE</option> + </select> + <span>Project Return</span> + <input type="text" id="projectReturn"> + <span>Randomise Test Page Order</span> + <input id="randomisePageOrder" type="checkbox" value="false"> + <span>Collect Session Metrics</span> + <input id="collectMetrics" type="checkbox"> + </div> + <div id="globalPreTest" class="head"> + <h3>Pre Test</h3> + <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Pre Test Question</button> + <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Pre Test Statement</button> + </div> + <div id="globalPostTest" class="head"> + <h3>Post Test</h3> + <button id="addPreTestQ" onclick="event.srcElement.parentElement.appendChild(questionNode());">Add Post Test Question</button> + <button id="addPreTestS" onclick="event.srcElement.parentElement.appendChild(statementNode());">Add Post Test Statement</button> + </div> + <div id="globalMetric" class="head"> + <h3>Global Metrics</h3> + <div id="globalMetric-attrib" class="attrib"> + <span>Test Timer</span> + <input type="checkbox" id="testTimer" /> + <span>Element Playback Timer</span> + <input type="checkbox" id="elementTimer" /> + <span>Element Initial Position</span> + <input type="checkbox" id="elementInitialPosition" /> + <span>Element Tracker</span> + <input type="checkbox" id="elementTracker" /> + <span>Element Flag Listened To</span> + <input type="checkbox" id="elementFlagListened" /> + <span>Element Flag Moved</span> + <input type="checkbox" id="elementFlagMoved" /> + </div> + </div> + <button id="addAudioHolder" onclick="event.srcElement.parentElement.appendChild(audioHolderNode());">Add AudioHolder / Test Page</button> + </div> + </div> </div> </body> </html>