kodeplay.github.io/1 at master · kodeplay/kodeplay.github.io · 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
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
---
layout: cook
---

<div class = "row">
 <div class = "col s12 m4 l4">
   <div id = "incredients">
   incredients
   <svg width="200" height="300">
     <g id = "sugar-packet">
   <rect x = "20" y = "20" width = "40" height = "40"
   style = "fill:white;stroke:orange"/>
   <text x = "20" y = "75">sugar</text>
     </g>
      <g id = "tea-packet">
   <rect x = "80" y = "20" width = "40" height = "40"
   style = "fill:orange;stroke:brown"/>
   <text x = "80" y = "75">tea</text>
     </g>

      <g id = "water-container">
   <rect x = "20" y = "95" width = "40" height = "40"
   style = "fill:blue;stroke:grey"/>
   <text x = "20" y = "150">water</text>
     </g>
    <g id = "ginger-container">
   <rect x = "80" y = "95" width = "40" height = "40"
   style = "fill:brown;stroke:grey"/>
   <text x = "80" y = "150">ginger</text>
     </g>
     <g id = "milk-container">
   <rect x = "20" y = "170" width = "40" height = "40"
   style = "fill:white;stroke:blue"/>
   <text x = "20" y = "225">milk</text>
     </g>
   </svg>
   </div>
   <hr/>
   <div id = "amounts">
        Amounts
        <svg width = "200" height = "300" >
   <g id = "teaspoon">
   <rect x = "20" y = "20" width = "40" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "20" y = "75">teaspoon</text>
     </g>
    <g id = "tablespoon">
   <rect x = "100" y = "20" width = "40" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "100" y = "75">tablespoon</text>
     </g>
     <g id = "cup">
   <rect x = "20" y = "90" width = "40" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "20" y = "145">cup</text>
     </g>
      <g id = "pinch">
   <rect x = "100" y = "90" width = "40" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "100" y = "145">pinch</text>
     </g>
        </svg>
   </div>
 </div>

  <div  class = "col s12 m4 l4">
    <div style = "min-height:300px;">
    workarea      1
    </div>
   <hr/>
     <div id = "workarea-2-container" style = "min-height:300px;">
    workarea      1
    <svg  onclick = "updateworkarea();" id = "workarea-2" width = "400" height = "300">
    <rect x = "20" y = "95" width = "40" height = "40"
   style = "fill:blue;stroke:grey"/>
    </svg>
    </div>

 </div>
  <div class = "col s12 m4 l4">
   tools
   <svg width = "200" height = "300">
    <g id = "pan">
   <rect x = "20" y = "20" width = "40" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "20" y = "75">pan</text>
     </g>
     <g id = "cookingstove">
   <rect x = "20" y = "90" width = "135" height = "20"
   style = "fill:grey;stroke:grey"/>
   <text x = "20" y = "125">cooking stove</text>
     </g>
     <g id = "knife">
   <rect x = "20" y = "140" width = "20" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "20" y = "195">knife</text>
     </g>
    <g id = "cooker">
   <rect x = "20" y = "205" width = "40" height = "40"
   style = "fill:silver;stroke:grey"/>
   <text x = "20" y = "260">cooker</text>
     </g>
   </svg>
 </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript">
var ginger_container = '<g id = "ginger-container">'+
'   <rect x = "20" y = "20" width = "40" height = "40"'+
'   style = "fill:brown;stroke:grey"/>'+
'   <text x = "20" y = "75">ginger</text>'+
'     </g>      '
 var knife =
function updateworkarea(){
alert("hi");
$("#workarea-2").append(ginger_container);
$("#workarea-2-container").html($("#workarea-2-container").html());
}
</script>