forked from knowuh/mysystem
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmysystem-demo.html
156 lines (131 loc) · 6.92 KB
/
mysystem-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MySystem Pre-Prototype</title>
<link rel="icon" href="res/favicon.ico" type="image/png" />
<link rel="SHORTCUT ICON" href="res/favicon.ico" type="image/png" />
<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='lib/inputex/css/inputEx.css' />
<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="css/WireItEditor.css" />
<link rel="stylesheet" type="text/css" href="css/mysystem.css" />
<!-- Prototype -->
<script type="text/javascript" src="lib/prototype.js"></script>
<!--Include YUI Loader: -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js"></script>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&2.7.0/build/base/base-min.css&2.7.0/build/assets/skins/sam/skin.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/utilities/utilities.js&2.7.0/build/container/container-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/button/button-min.js&2.7.0/build/cookie/cookie-min.js&2.7.0/build/resize/resize-min.js&2.7.0/build/imagecropper/imagecropper-min.js&2.7.0/build/imageloader/imageloader-min.js&2.7.0/build/selector/selector-min.js&2.7.0/build/layout/layout-min.js&2.7.0/build/stylesheet/stylesheet-min.js"></script>
<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/wireit/WireIt.js"></script>
<script type="text/javascript" src="js/wireit/CanvasElement.js"></script>
<script type="text/javascript" src="js/wireit/Wire.js"></script>
<script type="text/javascript" src="js/wireit/Terminal.js"></script>
<script type="text/javascript" src="js/wireit/util/DD.js"></script>
<script type="text/javascript" src="js/wireit/util/DDResize.js"></script>
<script type="text/javascript" src="js/wireit/Container.js"></script>
<script type="text/javascript" src="js/wireit/ImageContainer.js"></script>
<script type="text/javascript" src="js/wireit/Layer.js"></script>
<script type="text/javascript" src="js/wireit/util/inputex/FormContainer-beta.js"></script>
<script type="text/javascript" src="js/wireit/LayerMap.js"></script>
<script type="text/javascript" src="js/wireit/ImageContainer.js"></script>
<script type="text/javascript" src="js/MySystemPropEditor.js"></script>
<script type="text/javascript" src="js/MySystemWireLabel.js"></script>
<script type="text/javascript" src="js/MySystemContainer.js"></script>
<script type="text/javascript" src="js/MySystemData.js"></script>
<script type="text/javascript" src="js/MySystemEditor.js"></script>
<script type="text/javascript" src="js/MySystemDemo.js"></script>
<script type="text/javascript" src="lib/http.js"></script>
</head>
<body class="yui-skin-sam">
<script>
YAHOO.util.Event.onDOMReady(MySystemDemo.init, MySystemDemo, true);
</script>
<div id="top">
<div class="logo">MySystem Demo</a></div>
<div id="toolbar"></div>
<div class="topright">
<span>Pre-Prototype Version</span>
</div>
</div>
<div id="left">
</div>
<div id="right">
<div id="prop_form" display="hidden">
<h3><span id="prop_name"></span></h3>
<form id="prop_form_form">
<div id="prop_fields"></div>
</form>
</div>
<h2>Minimap</h2>
<div id="layerMap"></div>
<div style="font-size: 14px; padding: 10px 10px 0px 10px;"><b>MySystem Pre-prototype Demo</b></div>
<div id="Explanation" style="padding: 10px 10px 10px 20px; font-size: 12px">
<p>To try the demo out,
drag the objects at left into the main field, then connect them with arrows by dragging from one
terminal to another. Try using this
demo space to create a MySystem diagram for the energy story
below:</p><br/>
<p>"Jimmy made some breakfast on a lazy Saturday morning. He turned
on the stove, put some water in a pot and heated it until it
boiled. He took an egg out of the refrigerator and put it in the
boiling water. When he was done, he enjoyed a perfect
hard-boiled egg."</p><br/>
<p>Make a diagram showing how energy was transformed from one form
to another and transferred from one place to another <b>while the
egg was in the boiling water</b>. Add a label to each energy
transformation describing the process. Also label each arrow
with the form of energy being transferred.</p><br/>
<p><i>Note: Where energy is lost to the surroundings, indicate this
loss by showing energy being transferred to the world image.</i></p>
</div>
</div>
<div id="center">
</div>
<div id="props">
<!-- modal floating property editor for nodes (AKA modules, AKA containers...) -->
</div>
<div id="helpPanel">
<div class="hd">Welcome to the MySystem pre-prototype demo</div>
<div class="bd" style="text-align: left;">
<br />
<p style="font-weight: bold;">What this example does :</p>
<ul style="margin-left: 20px;">
<li>* Provides a field for composing a MySystem diagram</li>
<li>* Provides sample images of objects where energy is transformed</li>
<li>* Enables objects to be connected by arrows to show how energy
is transferred</li>
<li>* Provides comment boxes</li>
</ul>
<br />
<p style="font-weight: bold;">How to use it :</p>
<ul style="margin-left: 20px;">
<li>* Drag and drop objects from the left-hand sidebar to the main
field.</li>
<li>* Connect the modules with arrows by dragging from one
button to another.</li>
</ul>
<br />
<p style="font-weight: bold;">Planned features for the beta and final versions:</p>
<ul style="margin-left: 20px;">
<li>* Diagrams will be able to be saved, shared and embedded into blogs or Web pages</li>
<li>* Embedded assessment is integrated into the diagramming process</li>
<li>* A library of images will be available, with the ability to upload images</li>
<li>* Blocks and connecting arrows will be label-able</li>
<li>* Arrow widths will be able to be varied to indicate quantities</li>
<li>* Colors or textures of arrows will be changeable to indicate the type of energy transferred</li>
<li>* Objects will be able to contain subsystems within them, and students will zoom in to view and edit these subsystems</li>
<li>* Quantities of energy and efficiencies of
transformation will be displayable</li>
<li>* Units will be able to be tracked and converted</li>
</ul>
<br />
</div>
</div>
</body>
</html>