webcoding
diff --git a/‎algorithm/category.json
+1-1 b/‎algorithm/category.json
+1-1
diff --git a/‎algorithm/sandbox/2DMatrix/desc.json
+8 b/‎algorithm/sandbox/2DMatrix/desc.json
+8
diff --git a/‎algorithm/sandbox/sandbox/sandbox/code.js renamed to ‎algorithm/sandbox/2DMatrix/normal/code.js b/‎algorithm/sandbox/sandbox/sandbox/code.js renamed to ‎algorithm/sandbox/2DMatrix/normal/code.js
diff --git a/‎algorithm/sandbox/sandbox/sandbox/data.js renamed to ‎algorithm/sandbox/2DMatrix/normal/data.js b/‎algorithm/sandbox/sandbox/sandbox/data.js renamed to ‎algorithm/sandbox/2DMatrix/normal/data.js
diff --git a/‎algorithm/sandbox/sandbox/desc.json
-9 b/‎algorithm/sandbox/sandbox/desc.json
-9
diff --git a/‎css/stylesheet.css
+15-1 b/‎css/stylesheet.css
+15-1
diff --git a/‎index.html
+15-13 b/‎index.html
+15-13
diff --git a/‎js/create/index.js
+24 b/‎js/create/index.js
+24
@@ -70,7 +70,7 @@
    },
    "sandbox": {
       "list": {
-         "sandbox": "Sand Box"
+         "2DMatrix": "2D Matrix"
       },
       "name": "Sandbox"
    },
 
@@ -0,0 +1,8 @@
+{
+  "2DMatrix": "2DMatrix for drag and drop tracers!",
+  "References": [
+  ],
+  "files": {
+    "normal": "2D Matrix"
+  }
+}
@@ -675,6 +675,20 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .inputField{
-    width: 16px;
+    width: 25px;
     border: 0;
 }
+
+.sb-button{
+    border: 1px solid #515151;
+}
+
+.inputContainer{
+    position: relative;
+    width: 100%;
+}
+
+.inputs{
+    position: relative;
+    display: block;
+}
@@ -129,24 +129,26 @@ <h3>
     </div>
     <div class="sandbox_container">
         <div>
-            <div>
-            # of Rows:
-            <input id="numRows" type="number" value="5">
-            </div>
+            <div class="inputContainer">
+                <div>
+                # of Rows:
+                <input class="inputs"id="numRows" type="number" value="5">
+                </div>
 
-            <div>
-            # of Columns:
-            <input id="numColumns" type="number" value="5">
-            </div>
+                <div>
+                # of Columns:
+                <input class="inputs"id="numColumns" type="number" value="5">
+                </div>
 
-            <div>
-            Tracer Name:
-            <input id="tracerName" type="text" value="default">
+                <div>
+                Tracer Name:
+                <input class="inputs"id="tracerName" type="text" value="default">
+                </div>
             </div>
 
             <div>
-                <button id="button-2DMatrix">Create 2DMatrix</button>
-                <button id="button-generateJS">Generate Javascript</button>
+                <button class='sb-button' id="button-2DMatrix">Create 2DMatrix</button>
+                <button class='sb-button' id="button-generateJS">Generate Javascript</button>
             </div>
         </div>
     </div>
 
@@ -102,12 +102,35 @@ const positionModules = () =>{
     }
 }
 
+const clearModules = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    if(elems.length > 0){
+        var parent = elems[0].parentElement;
+        var numChild = parent.childNodes.length;
+        for(var i = 0; i < numChild; i++){
+            parent.removeChild(parent.firstChild);
+        }
+    }
+}
+
+const enabledHightlighting = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    var logger = elems[1];
+    var wrapper = logger.childNodes[1];
+    console.log(elems);
+    console.log(wrapper);
+    for (var i = 0; i < wrapper.childNodes.length; i++) {
+        wrapper.childNodes[i].style["-webkit-user-select"] = "all";
+    }
+}
+
 const setupButtons = () => {
 
     var button_2DMatrix = document.getElementById("button-2DMatrix");
     var logger;
     var arr2DTracer;
     button_2DMatrix.addEventListener('click',function(){
+        clearModules();
         arr2DTracer = new modules.Array2DTracer();
         logger = new modules.LogTracer('Generated Javascript');
 
@@ -123,6 +146,7 @@ const setupButtons = () => {
     var button_JS = document.getElementById('button-generateJS');
     button_JS.addEventListener('click',function(){
         generateJS(logger);
+        enabledHightlighting();
     },false);
 
 };