New list response

ui/src/components/ListInput.svelte

@@ -0,0 +1,43 @@
+<script>
+ import { createEventDispatcher, tick } from 'svelte';
+
+ const dispatch = createEventDispatcher();
+
+ let className = '';
+ export { className as class };
+
+ export let qid = "";
+ export let kind = "list";
+ export let value = "";
+ export let placeholder = "";
+
+ let nb;
+ let mval = [];
+ $: mval = value?value.split('\n'):[];
+ $: {
+     nb = Number(kind.substring(4));
+     while (mval.length < nb) {
+         mval.push("");
+     }
+ }
+</script>
+
+{#each mval as v, i}
+    <input
+        id={qid + "l" + i}
+        class={className}
+        type="text"
+        bind:value={mval[i]}
+        {placeholder}
+        on:change={() => { value = mval.join('\n').trim(); dispatch("change"); }}
+        on:blur={() => { if (kind == "list" && i == mval.length - 1 && mval[i] == "") { mval.pop(); mval = mval; } }}
+    >
+{/each}
+{#if kind == "list" && (mval.length == 0 || mval[mval.length-1] != "")}
+    <input
+        class={className}
+        type="text"
+        {placeholder}
+        on:focus={() => { mval.push(""); mval = mval; tick().then(() => document.getElementById(qid + "l" + (mval.length-1)).focus()); }}
+    >
+{/if}

ui/src/components/QuestionForm.svelte

@@ -1,6 +1,7 @@
 <script>
  import { createEventDispatcher } from 'svelte';
 
+ import ListInput from './ListInput.svelte';
  import QuestionHeader from './QuestionHeader.svelte';
  import QuestionProposals from './QuestionProposals.svelte';
  import ResponseCorrected from './ResponseCorrected.svelte';
@@ -69,7 +70,7 @@
             </div>
         {/if}
         {#if edit}
-            {#if question.kind == 'text' || question.kind == 'int'}
+            {#if question.kind && (question.kind == 'text' || question.kind == 'int' || question.kind.startsWith('list'))}
                 <div class="form-group row">
 	            <label class="col-2 col-form-label" for="q{qid}placeholder">Placeholder</label>
 	            <div class="col">
@@ -127,6 +128,14 @@
                 placeholder={question.placeholder}
                 on:change={() => { dispatch("change"); }}
             >
+        {:else if question.kind && question.kind.startsWith('list')}
+            <ListInput
+                class="ml-5 col-sm-2 form-control my-1"
+                kind={question.kind}
+                bind:value={value}
+                placeholder={question.placeholder}
+                on:change={() => { dispatch("change"); }}
+            />
         {:else}
             <textarea
                 class="form-control"

ui/src/components/QuestionHeader.svelte

@@ -30,6 +30,8 @@
 	    <div class="col">
 	        <select class="form-select" id="q{qid}kind" bind:value={question.kind}>
 	            <option value="text">Texte</option>
+	            <option value="list">Liste de champs de texte</option>
+	            <option value="list5">Liste de champs de texte (5 champs)</option>
 	            <option value="int">Entier</option>
 	            <option value="ucq">QCU</option>
 	            <option value="mcq">QCM</option>