comparison test_create/test_create.html @ 838:0920172d9478

test_create.html: Modifying items on page updates the specification nodes.

 				button.textContent = "Delete";
 				button.onclick = function(event)
 				{
 					var node = event.target.parentElement;
 					node.parentElement.removeChild(node);	
-				}
+				};
 				return button;
 			}
 			
 			function SpecficationToHTML()
 			{

 				option = document.createElement("option");
 				option.value = "MUSHRA";
 				option.textContent = "MUSHRA";
 				select.appendChild(option);
 				select.value = specificationNode.interfaceType;
+				select.onchange = function(event)
+				{
+					specificationNode.interfaceType = event.currentTarget.value;
+				};
 				var span = document.createElement("span");
 				span.textContent = "Interface Type";
 				div.appendChild(span);
 				div.appendChild(select);
 				// Project Return Attribute

 				span.textContent = "Project Return";
 				var input = document.createElement("input");
 				input.value = specificationNode.projectReturn;
 				input.id = "projectReturn";
 				input.style.margin = "5px";
+				input.onchange = function(event) {
+					specificationNode.projectReturn = event.currentTarget.value;
+				};
 				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;
+				input.checked = specificationNode.randomiseOrder;
+				input.onchange = function(event) {
+					specificationNode.randomiseOrder = event.currentTarget.checked;
+				};
 				div.appendChild(span);
 				div.appendChild(input);
 				setupNode.appendChild(div);
 				
 				// Now create the common Interface Node

 					var span = document.createElement("span");
 					span.textContent = interfaceOptions[1][i];
 					var input = document.createElement("input");
 					input.type = "checkbox";
 					input.id = interfaceOptions[0][i];
+					input.setAttribute("name", "option");
 					div.appendChild(input);
 					div.appendChild(span);
 					commonInterface.appendChild(div);
 					for (var j=0; j<specificationNode.commonInterface.options.length; j++)
 					{

 						{
 							input.checked = true;
 							break;
 						}
 					}
+					input.onchange = function(event) {
+						var id = event.currentTarget.id;
+						if (event.currentTarget.checked) {
+							specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget));
+						} else {
+							for (var j=0; j<specificationNode.commonInterface.options.length; j++)
+							{
+								if (specificationNode.commonInterface.options[j].name == event.currentTarget.id)
+								{
+									specificationNode.commonInterface.options.splice(j,1);
+									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];
+					input.setAttribute("name", "check");
 					div.appendChild(input);
 					div.appendChild(span);
 					commonInterface.appendChild(div);
 					for (var j=0; j<specificationNode.commonInterface.options.length; j++)
 					{

 						{
 							input.checked = true;
 							break;
 						}
 					}
+					input.onchange = function(event) {
+						var id = event.currentTarget.id;
+						if (event.currentTarget.checked) {
+							specificationNode.commonInterface.options.push(new specificationNode.commonInterface.optionNode(event.currentTarget));
+						} else {
+							for (var j=0; j<specificationNode.commonInterface.options.length; j++)
+							{
+								if (specificationNode.commonInterface.options[j].name == event.currentTarget.id)
+								{
+									specificationNode.commonInterface.options.splice(j,1);
+									break;
+								}
+							}
+						}
+					};
 				}
 				setupNode.appendChild(commonInterface);
 				// Now the Metric Node
 				var metrics = document.createElement("div");
 				metrics.id = "metrics";

 						if (specificationNode.metrics[j].enabled == supportedMetrics[0][i])
 						{
 							input.checked = true;
 						}
 					}
+					input.onchange = function(event)
+					{
+						if (event.currentTarget.checked) {
+							specificationNode.metrics.push(new specificationNode.metricNode(event.currentTarget.id));
+						} else {
+							for (var j=0; j<specificationNode.metrics.length; j++)
+							{
+								if (specificationNode.metrics[j].enabled == event.currentTarget.id)
+								{
+									specificationNode.metrics.splice(j,1);
+									break;
+								}
+							}
+						}
+					};
 				}
 				
 				setupNode.appendChild(metrics);
 				
 				// Test Session Pre Test

 				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;
-					node.appendChild(createDeleteNodeButton());
+					var del_button = document.createElement("button");
+					del_button.textContent = "Delete";
+					del_button.onclick = function(event) {
+						var node = event.currentTarget.parentElement;
+						var id = node.id.split("-")[1];
+						specificationNode.preTest.options.splice(id,1);
+						node.parentElement.removeChild(node);	
+					};
+					node.appendChild(del_button);
 					preTest.appendChild(node);
 				}
 				setupNode.appendChild(preTest);
 				
 				// Test Session Post Test

 				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;
-					node.appendChild(createDeleteNodeButton());
+					var del_button = document.createElement("button");
+					del_button.textContent = "Delete";
+					del_button.onclick = function(event) {
+						var node = event.currentTarget.parentElement;
+						var id = node.id.split("-")[1];
+						specificationNode.postTest.options.splice(id,1);
+						node.parentElement.removeChild(node);	
+					};
+					node.appendChild(del_button);
 					postTest.appendChild(node);
 				}
 				
 				setupNode.appendChild(postTest);
 				

 				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.id = "audioHolder-"+i;
 					aHTML.className = "topLevel";
 					aHTML.appendChild(createDeleteNodeButton());
 					destination.appendChild(aHTML);
 					var title = document.createElement("h2");
 					title.textContent = "Audio Holder "+aH.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;
+						var IDSplit = event.currentTarget.id.split('-');
+						var aholderID = IDSplit[0]+"-"+IDSplit[1];
+						var aholder = document.getElementById(aholderID);
+						title = aholder.getElementsByTagName("h2")[0];
+						title.textContent = "Audio Holder "+event.currentTarget.value;
+						specificationNode.audioHolders[IDSplit[1]].id = 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;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].hostURL = event.currentTarget.value;
+					};
 					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;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].loop = event.currentTarget.checked;
+					};
 					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;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].randomiseOrder = event.currentTarget.checked;
+					};
 					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;
+					input.onchange = function()
+					{
+						var IDSplit = event.currentTarget.id.split('-');
+						specificationNode.audioHolders[IDSplit[1]].elementComments = event.currentTarget.checked;
+					};
 					text.style.margin = "5px";
 					input.style.margin = "5px";
 					attributes.appendChild(text);
 					attributes.appendChild(input);
 					

 					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;
-						node.appendChild(createDeleteNodeButton());
+						var button_delete = document.createElement("button");
+						button_delete.textContent = "Delete";
+						button_delete.onclick = function(event)
+						{
+							var node = event.currentTarget.parentElement;
+							var IDSplit = node.id.split("-");
+							var preTest = specificationNode.audioHolders[IDSplit[1]].preTest;
+							preTest.options.splice(IDSplit[3],1);
+							node.parentElement.removeChild(node);
+						};
+						node.appendChild(button_delete);
 						preTest.appendChild(node);
 					}
 					
 					aHTML.appendChild(preTest);
 					

 					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;
-						node.appendChild(createDeleteNodeButton());
+						var button_delete = document.createElement("button");
+						button_delete.textContent = "Delete";
+						button_delete.onclick = function(event)
+						{
+							var node = event.currentTarget.parentElement;
+							var IDSplit = node.id.split("-");
+							var postTest = specificationNode.audioHolders[IDSplit[1]].postTest;
+							postTest.options.splice(IDSplit[3],1);
+							node.parentElement.removeChild(node);
+						};
+						node.appendChild(button_delete);
 						postTest.appendChild(node);
 					}
 					
 					aHTML.appendChild(postTest);
 					

 						var text = document.createElement("span");
 						text.textContent = "ID:";
 						var input = document.createElement("input");
 						input.id = entry.id+"-id";
 						input.value = aH.audioElements[i].id;
+						input.onchange = function() {
+							var IDSplit = event.currentTarget.id.split("-");
+							var ahNode = specificationNode.audioHolders[IDSplit[1]];
+							ahNode.audioElements[IDSplit[3]].id = event.currentTarget.value;
+						};
 						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;
+						input.onchange = function() {
+							var IDSplit = event.currentTarget.id.split("-");
+							var ahNode = specificationNode.audioHolders[IDSplit[1]];
+							ahNode.audioElements[IDSplit[3]].url = event.currentTarget.value;
+						};
 						text.style.margin = "5px";
 						input.style.margin = "5px";
 						entry.appendChild(text);
 						entry.appendChild(input);
-						entry.appendChild(createDeleteNodeButton());
+						var button_delete = document.createElement("button");
+						button_delete.textContent = "Delete";
+						button_delete.onclick = function() {
+							var node = event.currentTarget.parentElement;
+							var IDSplit = node.id.split("-");
+							var ahNode = specificationNode.audioHolders[IDSplit[1]];
+							ahNode.audioElements.splice(IDSplit[3],1);
+							node.parentElement.removeChild(node);
+						};
+						entry.appendChild(button_delete);
 						audioElems.appendChild(entry);
 					}
 					aHTML.appendChild(audioElems);
 				}
 				

 			}
 		</style>
 	</head>
 
 	<body>
+		<div id="export">
+			<button id="exportToXML" onclick="specificationNode.exportToXML();">Export XML</button>
+		</div>
 		<div id="content"></div>
 	</body>
 </html>