Total Beginner Question

261 views

Skip to first unread message

Jake Yu

unread,

Jan 3, 2016, 5:50:40 PM1/3/16

to Tangle Talk

Hi all,

I followed the example from http://worrydream.com/Tangle/guide.html about cookies, and I made it about the effect of Russian sanctions on Cost of living and Oil prices.

So I have the script in Notepad, basically copied word for word from worrydream.com, how do I turn that into a reactive document?

sanction-coli.txt

devinm...@gmail.com

unread,

Jan 21, 2016, 9:27:41 AM1/21/16

to Tangle Talk


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Tangle document</title>

	<!-- Tangle -->
	<script type="text/javascript" src="http://worrydream.com/Tangle/Tangle.js"></script>

	<!-- TangleKit (optional) -->
	<link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css" type="text/css">
	<script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
	<script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
	<script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
	<script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>

	<!-- example -->
	<script type="text/javascript">

		function setUpTangle () {

			var element = document.getElementById("example");

			var tangle = new Tangle(element, {
		    	initialize: function () {
					this.oildecrease = 2;
					this.colifactor = 5/2;
					this.opchngfactor = 0.15;
				},

				update: function () {
					this.colifactor = this.oildecrease * this.colifactor;
					this.opchngfactor = this.oildecrease * this.opchngfactor;
			    }

		});
        }

	</script>
</head>

<body onload="setUpTangle();">


	<p id="example">
	    When Russia cuts oil imports by <span data-var="oildecrease" class="TKAdjustableNumber"> % </span>, Turkey's Cost of Living Index increases by <span data-var="colifactor"> % </span>. That translates into a $ <span data-var="opchngfactor"></span> rise in oil prices.
    </p>

</body>
</html>

Basically it needs to be in an HTML document, and needs to reference the Tangle Scripts, and have all the proper boiler plate for everything to come together. The above code works, but doesn't do what I think you want it to do. If you ever put this on your own site, download Tangle and reference it on your own site, not Bret's.

Reply all

Reply to author

Forward

0 new messages