Add question box as special rendering

UI/InputElement/ValidatedInput.svelte

@@ -1,41 +1,53 @@
 <script lang="ts">
 
-  import { Store, UIEventSource } from "../../Logic/UIEventSource";
+  import { UIEventSource } from "../../Logic/UIEventSource";
   import type { ValidatorType } from "./Validators";
   import Validators from "./Validators";
   import { ExclamationIcon } from "@rgossiaux/svelte-heroicons/solid";
   import { Translation } from "../i18n/Translation";
+  import { createEventDispatcher } from "svelte";
 
   export let value: UIEventSource<string>;
   // Internal state, only copied to 'value' so that no invalid values leak outside
-  let _value = new UIEventSource(value.data ?? "")
+  let _value = new UIEventSource(value.data ?? "");
   export let type: ValidatorType;
   let validator = Validators.get(type);
-  export let feedback: UIEventSource<Translation> | undefined = undefined
+  export let feedback: UIEventSource<Translation> | undefined = undefined;
   _value.addCallbackAndRun(v => {
-    if(validator.isValid(v)){
-      feedback?.setData(undefined)
-      value.setData(v)
-      return
+    if (validator.isValid(v)) {
+      feedback?.setData(undefined);
+      value.setData(v);
+      return;
     }
-    value.setData(undefined)
+    value.setData(undefined);
     feedback?.setData(validator.getFeedback(v));
-  })
+  });
 
   if (validator === undefined) {
     throw "Not a valid type for a validator:" + type;
   }
 
   const isValid = _value.map(v => validator.isValid(v));
-  
 
+  let htmlElem: HTMLInputElement;
+
+  let dispatch = createEventDispatcher<{ selected }>();
+  $: {
+    console.log(htmlElem)
+    if (htmlElem !== undefined) {
+      htmlElem.onfocus = () => {
+        console.log("Dispatching selected event")
+        return dispatch("selected");
+      };
+    }
+  }
 </script>
 
 {#if validator.textArea}
   <textarea bind:value={$_value} inputmode={validator.inputmode ?? "text"}></textarea>
 {:else }
   <div class="flex">
-    <input bind:value={$_value} inputmode={validator.inputmode ?? "text"}>
+    <input bind:this={htmlElem} bind:value={$_value} inputmode={validator.inputmode ?? "text"}>
     {#if !$isValid}
       <ExclamationIcon class="h-6 w-6 -ml-6"></ExclamationIcon>
     {/if}