columnizer

index.html

@@ -23,7 +23,7 @@
                         </tr>
                         <tr>
                             <td>
-                                <div id="trashcan" ondrop="droptrash(event)" ondragover="allowDrop(event)">
+                                <div id="trashcan" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
                                     
                                 </div>
                             </td>

index.js

@@ -2,10 +2,12 @@ var ranid = 1;
 
 var cntdrag = 1;
 
-let data_tabl = ["A", "B", "C"];
+let data_tabl = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
 
 let prefix = "assets/";
 
+let numcolumns = 2;
+
 function cleanup(){
     var htmls = [];
     var returntos = [];
@@ -70,19 +72,46 @@ function getRandomElement(array){
     return array[getRandomInt(0, array.length)];
 }
   
+// imageholder.append();
+//         letterholder.append
+
+function columnize(arrayin, columns){
+    var tmp2 = "<table><tbody>";
+    for (var i = 0; i < arrayin.length; i += columns) {
+        var tmp = "<tr>";
+        for (var x = i; x < i + columns; x++) {
+            if (x > arrayin.length - 1){
+                break;
+            }
+            tmp += "<td>" + arrayin[x] + "</td>";
+        }
+        tmp += "</tr>";
+        tmp2 += tmp;
+    }
+    tmp2 += "</tbody></table>";
+    return tmp2;
+}
+
 function showImages() {
-    for (let i = 0 ; i < data_tabl.length; i++) {
-        let imagepath = prefix + "images/" + data_tabl[i] + ".png";
-        let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
+    var images = [];
+    var letters = [];
 
     let imageholder = $("#imageholder");
     let letterholder = $("#letterholder");
 
-        imageholder.append("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + imagepath + "\" /></div>");
+    for (let i = 0 ; i < data_tabl.length; i++) {
+        let imagepath = prefix + "images/" + data_tabl[i] + ".png";
+        let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
+        
+        images.push("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + imagepath + "\" /></div>");
         ranid += 1;
-        letterholder.append("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + letterpath + "\" /></div>");
+        letters.push("<div returntarget=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak\" class=\"place holderak\"><img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" src=\"" + letterpath + "\" /></div>");
         ranid += 1;
     }
+
+    imageholder.append(columnize(images, numcolumns));
+    letterholder.append(columnize(letters, numcolumns));
+    
 }
 
 function generatePair(){
@@ -128,7 +157,7 @@ function drop(ev) {
     let cntdrag = ev.dataTransfer.getData("cntdrag");
     let datacode = ev.dataTransfer.getData("datacode");
     if (!ev.target.outerHTML.includes("img")){
-        $('[cntdrag="' + cntdrag + '"]').remove();
+        //$('[cntdrag="' + cntdrag + '"]').remove();
         ev.target.setAttribute("datacode", datacode);
         ev.target.innerHTML = data;
     }