Formatting

UI/Popup/TagRendering/Questionbox.svelte

@@ -14,6 +14,7 @@
     import TagRenderingQuestion from "./TagRenderingQuestion.svelte";
     import Tr from "../../Base/Tr.svelte";
     import Translations from "../../i18n/Translations.js";
+    import {Utils} from "../../../Utils";
 
     export let layer: LayerConfig;
     export let tags: UIEventSource<Record<string, string>>;
@@ -42,7 +43,7 @@
     }
 
     let skippedQuestions = new UIEventSource<Set<string>>(new Set<string>());
-
+    let questionboxElem: HTMLBaseElement
     let questionsToAsk = tags.map(tags => {
         const baseQuestions = (layer.tagRenderings ?? [])?.filter(tr => allowed(tr.labels) && tr.question !== undefined);
         const questionsToAsk: TagRenderingConfig[] = [];
@@ -72,9 +73,6 @@
     let answered: number = 0;
     let skipped: number = 0;
 
-  function focus(){
-    
-  }
     function skip(question: TagRenderingConfig, didAnswer: boolean = false) {
         skippedQuestions.data.add(question.id);
         skippedQuestions.ping();
@@ -83,10 +81,14 @@
         } else {
             skipped++;
         }
+        window.setTimeout(() => {
+            Utils.scrollIntoView(questionboxElem)
+        }, 50)
     }
-  $: console.log("Current questionbox state:", {answered, skipped, questionsToAsk, layer, selectedElement, tags})
+
 </script>
 
+<div bind:this={questionboxElem}>
     {#if _questionsToAsk.length === 0}
 
         {#if skipped + answered > 0 }
@@ -132,7 +134,8 @@
             <If condition={state.userRelatedState.showAllQuestionsAtOnce}>
                 <div>
                     {#each _questionsToAsk as question (question.id)}
-          <TagRenderingQuestion config={question} {tags} {selectedElement} {state} {layer}></TagRenderingQuestion>
+                        <TagRenderingQuestion config={question} {tags} {selectedElement} {state}
+                                              {layer}></TagRenderingQuestion>
                     {/each}
                 </div>
 
@@ -151,3 +154,4 @@
             </If>
         </div>
     {/if}
+</div>