All basic question types

app/javascript/application.js

@@ -1 +1,8 @@
 // Entry point for the build script in your package.json
+import initSimpleQuestions from './simple_input.js'
+import initImageQuestions from './image_input.js'
+
+addEventListener("DOMContentLoaded", () => {
+    initSimpleQuestions()
+    initImageQuestions()
+})

app/javascript/image_input.js

@@ -0,0 +1,35 @@
+const csrfToken = document.querySelector("[name='csrf-token']").content
+
+export default function initImageQuestions() {
+    document.querySelectorAll('[data-behaviour="question_image_input"]').forEach((input) => {
+        const submitUrl = input.dataset.submitUrl
+
+        input.addEventListener('change', () => {
+            const file = input.files[0];
+            const fileReader = new FileReader();
+            fileReader.onload = (ev) => {
+                fetch(submitUrl, {
+                    method: 'PUT',
+                    headers: {
+                        "x-csrf-token": csrfToken,
+                        "content-type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        filename: file.name,
+                        mimetype: file.type,
+                        data: ev.target.result.replace(/^data:[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+\/[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+;base64,/, ""),
+                    })
+                })
+            }
+            fileReader.readAsDataURL(file);
+            const preview = document.querySelector(`#${input.id}_preview`)
+            while (preview.firstChild) {
+                preview.removeChild(preview.firstChild)
+            }
+            const previewImage = document.createElement("img")
+            previewImage.src = URL.createObjectURL(file)
+            previewImage.alt = previewImage.title = file.name
+            preview.appendChild(previewImage)
+        })
+    })
+}

app/javascript/simple_input.js

@@ -0,0 +1,23 @@
+import debounce from 'debounce'
+
+const csrfToken = document.querySelector("[name='csrf-token']").content
+
+export default function initSimpleQuestions() {
+    document.querySelectorAll('[data-behaviour="question_simple_input"]').forEach((input) => {
+        const submitUrl = input.dataset.submitUrl
+
+        const handleInput = debounce(() => {
+            fetch(submitUrl, {
+                method: 'PUT',
+                headers: {
+                    "x-csrf-token": csrfToken,
+                    "content-type": "application/json",
+                },
+                body: JSON.stringify({ value: input.value }),
+            })
+        }, 300)
+
+        input.addEventListener('change', handleInput)
+        input.addEventListener('input', handleInput)
+    })
+}