Adding modules in Builder now also adds a text field

_data/modules.csv

@@ -1,5 +1,5 @@
 name,id,description, url
-Approval voting,approval_voting,,https://democraticmediums.info/mediums/approval_voting/
+Approval voting,approval_voting,,https://democraticmediums.info/mediums/approval_voting/,
 Audit,audit,,https://democraticmediums.info/mediums/audit/
 Board,board,,https://democraticmediums.info/mediums/board/
 Bureaucracy,bureaucracy,,https://democraticmediums.info/mediums/bureaucracy/

_layouts/rule.html

@@ -8,7 +8,7 @@ layout: default
   // Enter JavaScript-land!
   // First, some functions, followed by initialization commands
 
-  // Module-related drag-and-drop functions
+  // Begin BUILDER functions
   // source: https://www.codecanal.com/html5-drag-and-copy/
   function allowDrop(ev) {
       ev.preventDefault();
@@ -29,6 +29,10 @@ layout: default
       var module = document.getElementById(data);
       if (module.parentElement.id == "module-menu") {
           module = module.cloneNode(true);
+          // Add a corresponding text field
+          var name = module.innerHTML.replace(/(<([^>]+)>)/ig,'');
+          var query = "Explain how the " + name + " module works.";
+          addField(query);
       }
       // append name
       module.id += "-dropped";
@@ -38,11 +42,22 @@ layout: default
       target.appendChild(module);
       // be sure the dummy text is gone
       document.getElementById("drag-directions").style.display = "none";
+      // Send field contents to console to aid in database stuff
+      console.log(document.getElementById("module-input"));   
+  }
 
-      // Send field contents to console
-      // To aid in database stuff
-      console.log(document.getElementById("module-input"));
+  // Adds a new question field
+  function addField(content) {
+      // if input is null, add an empty field to the list
+      // include a field removal button
+      var destination = document.getElementById("builder-field");
+      if (content == null) { content = ""; }     
+      var output = '\n<div><a onclick="this.parentNode.remove()" id="delete-module"><img src="{% link assets/tabler_icons/x.svg %}" align="right"/></a>';
+      output += '<span class="question">' + content + '</span>';
+      output += '<p contenteditable="true" class="editable output" id="custom-field"></p></div>\n';
+      destination.innerHTML += output;
   }
+  // end BUILDER functions
   
   // toggleVisible(id)
   // Toggles the visibility of a given element by given ID
@@ -366,7 +381,7 @@ layout: default
 
     <p class="question"><strong>RuleBuilder</strong></p>
     
-    <!-- Modules -->
+    <!-- BUILDER -->
     <div ondrop="drop(event)" ondragover="allowDrop(event)"
          class="modulebox" id="module-input">
       <span class="question" id="drag-directions">
@@ -400,6 +415,8 @@ layout: default
         </div>
       </div>
     </div>
+    <div id="builder-field">
+    </div>
 
     <p class="question"><strong>RuleWriter</strong></p>