estimate3DStep/estimate3D.html at master · petermalcolm/estimate3DStep · GitHub

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
<html>
	<head>
		<script type="text/javascript">
			var estimate3D;

			function loadContentAfterScriptsLoad(node) {
	        	estimate3D = new Estimate3D(node);
	        	estimate3D.render();
	        };

	        function loadContent(node) {
		        /*
		         * this loadScripts() function call will load the javascript imports
		         * into this html file
		         */
	        	scriptloader.loadScripts('estimate3D', document, node.id, eventManager);
	        };

	        /*
	         * This is called when the student clicks on the save button below in the body
	         */
	        function save() {
		        /*
		         * calls the save function in estimate3D.js
		         */
				estimate3D.save();
	        }
		</script>
	</head>

	<body>
		<!-- TODO create the html UI that the student will see when they visit the step -->

		<!-- the promptDiv, responseDiv, saveButtonDiv are not required, they are only provided as an example,
			 you may delete all of these divs and create the body however you like -->
                <!-- SVG: only 2px high -->
                <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height="0cm">
                <defs>
                  <linearGradient id='gradneg' x1='0%' y1='0%' x2='100%' y2='0%'>
                    <stop offset='0%' style='stop-color:rgb(100,100,255);stop-opacity:1' />
                    <stop offset='100%' style='stop-color:rgb(255,128,0);stop-opacity:1' />
                  </linearGradient>
                  <linearGradient id='gradpos' x1='0%' y1='0%' x2='100%' y2='0%'>
                    <stop offset='0%' style='stop-color:rgb(255,128,0);stop-opacity:1' />
                    <stop offset='100%' style='stop-color:rgb(100,100,255);stop-opacity:1' />
                  </linearGradient>
                </defs>
                </svg>

                <div id="container">
                    <div id="threeDDiv">
                        <br />
                        <div id='promptDiv'></div>
                        <div id='saveButtonDiv' style='display: none'><input type='button' value='Save' onclick='save()' /></div>
                        <div id='pleaseRotateDiv'><br />(You may click and drag to rotate the shape.)</div>
                        <div id="viewer" style="width:400px;height:400px"></div>
                        <div id="debugDiv"><textarea style="display:  none" id="debugArea" rows ='8' cols='40'></textarea></div>
                    </div>

                    <div id="estimationDiv">
                        <p>Please estimate the volume of this shape. &nbsp;
                           You may start by estimating the aspects, such as length, width, height, or radius. &nbsp;
                           If you prefer you may skip any of these aspects.  Just make sure to estimate the volume.<br />
                           <br />
                        NOTE: Estimate to the nearest whole number. </p>
                    </div>
                </div>
	</body>
</html>