SPIN
/
CertainTrustSDK


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<html>
<!--
CertainTrust Demonstrator in JavaScript

Demonstrates Trust Evidences in CertainTrust with a Visualization using the HTI.

@author	Florian Volk <florian.volk@cased.de>
-->
<head>
	<meta charset="utf-8" />
	<title>CertainTrust Demonstrator in JavaScript</title>
	<style type="text/css">
		h1, p { text-align: center; }
		button#AddR_Button, button#AddS_Button, button#SetN_Button { float: right; margin-left: 1em; }
		div#userControls { float:left; margin-right: 2em; }
	</style>

	<!-- include these two scripts and the CSS to enable both CertainTrust and the HTI -->
	<script type="text/javascript" src="CertainTrust.js"></script>
	<script type="text/javascript" src="certainTrustHTI.js"></script>
	<link rel="stylesheet" type="text/css" href="certainTrustHTI.css"/>

</head>
<body>
	<h1>Trust Visualization with the HTI</h1>
	<p>Visualization of Trust Updates with CertainTrust and the Human Trust Interface</p>

	<div style="margin:0 auto;width:800px;">
		<!-- user controls -->
		<div id="userControls">
			<div>
				Positive&nbsp;experiences:&nbsp;<span id="R_Label">0</span>
				<button id="AddR_Button" onclick="AddR_ButtonClick();">Add</button>
			</div>
			<div style="clear:both">
				Negative&nbsp;experiences:&nbsp;<span id="S_Label">0</span>
				<button id="AddS_Button" onclick="AddS_ButtonClick();">Add</button>
			</div>
			<div style="margin-top: 1em;">
				<label for="N_Input">Expected amount of evidence:</label>
				<input id="N_Input" style="width: 4em;" />
				<button id="SetN_Button" onclick="SetN_ButtonClick();">Set</button>
			</div>
			<div style="clear:both">
				<button id="Reset_Button" onclick="Reset_ButtonClick();">Reset</button>
			</div>
		</div>
		<!-- HTI -->
		<script type="text/javascript">
			// initialize expected amount of evidence with 100
			var N = 100;

			// instanciate the CertainTrust and Human Trust Interface objects
			var ctObject = new CertainTrust(N);
			var hti = new CertainTrustHTI(ctObject);
		</script>
		<!-- connect controls with HTI -->
		<script type="text/javascript">
			document.getElementById("N_Input").value = "" + N;

			// LocalObserver is used to update information on the amount of experiences
			// after the user modified the HTI manually
			var LocalObserver = {
				update: function() {
					_updateLabel("R_Label", ctObject.getR());
					_updateLabel("S_Label", ctObject.getS());
				}
			}
			ctObject.addObserver(LocalObserver);

			function Reset_ButtonClick() {
				// reset all internal state of the opinion, set N to last known number
				ctObject.setN(N);
				ctObject.setRS(0,0);
			}

			function SetN_ButtonClick() {
				// change amount of expected evidence
				var newN = parseInt(document.getElementById("N_Input").value);
				if (!isNaN(newN)) {
					N = newN;
					ctObject.setN(N);
				}
			}

			function AddR_ButtonClick() {
				// add a positive experience
				ctObject.addR(1);
			}

			function AddS_ButtonClick() {
				// add a negative experience
				ctObject.addS(1);
			}

			function _updateLabel(id, value) {
				// helper function to nicely format amount of experiences that were made
				document.getElementById(id).innerHTML = "" + Math.round(value * 100) / 100;
			}
		</script>
	</div>

	<br/>
	<p>
		<img src="logo_tudarmstadt.png" alt="Technische Universität Darmstadt" width="176" height="73" />
		<img src="logo_softwarecluster.png" alt="Software-Cluster" width="212" height="73" />
	</p>
</body>
</html>