Merge remote-tracking branch 'origin/helping-friendly-book'

example-puzzles/example/5/helpers.js

@@ -17,6 +17,9 @@ function helperUpdateAnswer(event) {
         values.push(c.value)
       }
     }
+    if (e.classList.contains("sort")) {
+      values.sort()
+    }
     let join = e.dataset.join
     if (join === undefined) {
       join = ","
@@ -37,8 +40,42 @@ function helperUpdateAnswer(event) {
   answer.dispatchEvent(new InputEvent("input"))
 }
 
+function helperRemoveInput(e) {
+  let item = e.target.parentElement
+  let container = item.parentElement
+  item.remove()
+  
+  var event = new Event("input")
+  container.dispatchEvent(event)
+}
+
+function helperExpandInputs(e) {
+  let item = e.target.parentElement
+  let container = item.parentElement
+  let template = container.firstElementChild
+  let newElement = template.cloneNode(true)
+
+  // Add remove button
+  let remove = document.createElement("button")
+  remove.innerText = "➖"
+  remove.title = "Remove this input"
+  remove.addEventListener("click", helperRemoveInput)
+  newElement.appendChild(remove)
+
+  // Zero it out, otherwise whatever's in first element is copied too
+  newElement.querySelector("input").value = ""
+
+  container.insertBefore(newElement, item)
+  
+  var event = new Event("input")
+  container.dispatchEvent(event)
+}
+
 function helperActivate(e) {
   e.addEventListener("input", helperUpdateAnswer)
+  for (let exp of e.querySelectorAll(".expand")) {
+    exp.addEventListener("click", helperExpandInputs)
+  }
 }
 
 function helperInit(event) {

example-puzzles/example/5/puzzle.moth

@@ -36,6 +36,12 @@ Multiple concatenated values
   <input>
 </div>
 
+Free input, sorted, concatenated values
+<ul class="answer lower sort">
+  <li><input></li>
+  <li><button class="expand" title="Add another input">➕</button><l/i>
+</ul>
+
 Select from an ordered list of options
 <ul class="answer">
   <li><input type="checkbox" value="horn">Horns</li>