Finish remaining question types

app/javascript/acrostic_answer.js

@@ -0,0 +1,39 @@
+import { submitValueDebounced } from './submit_value.js'
+
+export default function initAcrosticQuestions() {
+    document.querySelectorAll('[data-behaviour="question_acrostic"]').forEach((acrostic) => {
+        const submitUrl = acrostic.dataset.submitUrl
+        const _submit = submitValueDebounced()
+
+        const allInputs = Array.from(acrostic.querySelectorAll(".acrostic-input"))
+
+        function submit() {
+            const data = allInputs.map((input) => input.value)
+            _submit(submitUrl, {data})
+        }
+
+        allInputs.forEach((input) => {
+            const index = Number.parseInt(input.dataset.index)
+            const previous = acrostic.querySelector(`.acrostic-input[data-index="${index - 1}"]`)
+            const next = acrostic.querySelector(`.acrostic-input[data-index="${index + 1}"]`)
+            input.addEventListener('input', (event) => {
+                if (event.data) {
+                    input.value = event.data[0]
+                }
+                submit()
+                if (event.data) {
+                    if (next) {
+                        next.focus()
+                    }
+                } else {
+                    if (previous) {
+                        previous.focus()
+                    }
+                }
+            })
+            input.addEventListener('focus', () => {
+                input.select()
+            })
+        })
+    })
+}

app/javascript/application.js

@@ -2,9 +2,19 @@
 import initSimpleQuestions from './simple_input.js'
 import initImageQuestions from './image_input.js'
 import initPoliticianQuestions from './politicians_answer.js'
+import initAcrosticQuestions from './acrostic_answer.js'
+import initConnectionsQuestions from './connections_answer.js'
+import initLyricsQuestions from './lyrics_answer.js'
+
+import { Sortable, Swap } from 'sortablejs'
+
+Sortable.mount(new Swap())
 
 addEventListener("DOMContentLoaded", () => {
     initSimpleQuestions()
     initImageQuestions()
     initPoliticianQuestions()
+    initAcrosticQuestions()
+    initConnectionsQuestions()
+    initLyricsQuestions()
 })

app/javascript/connections_answer.js

@@ -0,0 +1,19 @@
+import { Sortable } from 'sortablejs'
+
+import { submitValue } from './submit_value.js'
+
+export default function initConnectionsQuestions() {
+
+
+    document.querySelectorAll('[data-behaviour="connections_answer').forEach((list) => {
+        const submitUrl = list.dataset.submitUrl
+
+        Sortable.create(list, {
+            swap: true,
+            onUpdate: (event) => {
+                const newOrder = Array.from(event.to.children).map((el) => Number.parseInt(el.dataset.id))
+                submitValue(submitUrl, { order: newOrder })
+            }
+        })
+    })
+}

app/javascript/lyrics_answer.js

@@ -0,0 +1,21 @@
+import { submitValueDebounced } from './submit_value.js'
+
+export default function initLyricsQuestions() {
+    document.querySelectorAll('[data-behaviour="lyrics_answer"]').forEach((lyrics) => {
+        const submitUrl = lyrics.dataset.submitUrl
+        const _submit = submitValueDebounced()
+
+        const allInputs = Array.from(lyrics.querySelectorAll(".lyrics-input"))
+
+        function submit() {
+            const data = allInputs.map((input) => input.value)
+            _submit(submitUrl, {data})
+        }
+
+        allInputs.forEach((input) => {
+            const index = Number.parseInt(input.dataset.index)
+            input.addEventListener('input', () => submit())
+            input.addEventListener('change', () => submit())
+        })
+    })
+}

app/javascript/politicians_answer.js

@@ -1,11 +1,8 @@
-import { Sortable, Swap } from 'sortablejs'
+import { Sortable } from 'sortablejs'
 
 import { submitValue } from './submit_value.js'
 
 export default function initPoliticianQuestions() {
-
-    Sortable.mount(new Swap())
-
     document.querySelectorAll('[data-behaviour="politicians_answer').forEach((list) => {
         const submitUrl = list.dataset.submitUrl