From 5374f25cf9133e65593f19a351e9c0833bb907d3 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 24 Jul 2024 15:23:17 +0200
Subject: [PATCH 01/23] feat(project-view): bind tutorial

---
 src/views/ProjectView.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 81ca8ca..bae20d4 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -43,6 +43,7 @@ export default defineComponent({
       project: null,
       projectContributions: [],
       tasks: null,
+      tutorial: null,
       to: null,
     }
   },
@@ -116,6 +117,7 @@ export default defineComponent({
       onValue(getProjectRef(this.projectId), (snapshot) => {
         const data = snapshot.val() || {}
         this.project = data
+        if (this.project?.tutorialId) this.bindTutorial()
       })
     },
     bindProjectContributions() {
@@ -157,6 +159,13 @@ export default defineComponent({
         this.tasks = tasks
       })
     },
+    bindTutorial() {
+      onValue(getProjectRef(this.project?.tutorialId), (snapshot) => {
+        const data = snapshot.val() || {}
+        console.log(this.informationPages)
+        this.informationPages = data
+      })
+    },
     completeOptions(option, index) {
       option.title ??= option.label
       option.iconColor ??= option.color || '#d1dad1'
@@ -235,6 +244,7 @@ export default defineComponent({
 
 <template>
   <basic-page page-name="project">
+    {{ tutorial }}
     <component
       :is="taskComponent"
       v-if="project && group && tasks && mode === 'contribute'"

From 4f13ff733263537f378c48260b622965da8dac86 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 24 Jul 2024 15:28:39 +0200
Subject: [PATCH 02/23] fix(project-view): bind tutorial

---
 src/views/ProjectView.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index bae20d4..1e08ca4 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -117,7 +117,9 @@ export default defineComponent({
       onValue(getProjectRef(this.projectId), (snapshot) => {
         const data = snapshot.val() || {}
         this.project = data
-        if (this.project?.tutorialId) this.bindTutorial()
+        if (this.project?.tutorialId) {
+            this.bindTutorial()
+        }
       })
     },
     bindProjectContributions() {
@@ -162,8 +164,8 @@ export default defineComponent({
     bindTutorial() {
       onValue(getProjectRef(this.project?.tutorialId), (snapshot) => {
         const data = snapshot.val() || {}
-        console.log(this.informationPages)
-        this.informationPages = data
+        console.log(this.tutorial)
+        this.tutorial = data
       })
     },
     completeOptions(option, index) {

From 0b4c79f3a9c3eea5c790dfb22f160678aefc2cdf Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 24 Jul 2024 16:04:54 +0200
Subject: [PATCH 03/23] feat(find-project): create information pages object

---
 src/components/FindProject.vue | 65 ++++++++++++++++++++++++++++++++++
 src/views/ProjectView.vue      |  5 ++-
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 8bcd938..5f550f3 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -22,6 +22,11 @@ export default defineComponent({
       type: Object,
       require: true,
     },
+    informationPages: {
+      type: Array,
+      require: false,
+    },
+    // TODO: change this so that instructions dialog is opened with tutorial, but not with project
     first: {
       type: Boolean,
       default: false,
@@ -45,6 +50,10 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
@@ -169,6 +178,59 @@ export default defineComponent({
       const clamp = Math.min(Math.max(value, min), max)
       return clamp
     },
+    createInformationPages() {
+      var informationPages = {}
+      if (this.tutorial) {
+        // We want to show the information pages for a project
+        informationPages =
+          this.tutorial.informationPages || this.createFallbackInformationPages(this.tutorial)
+      } else {
+        // We want to show the information pages for a tutorial.
+        informationPages =
+          this.project.informationPages || this.createFallbackInformationPages(this.project)
+      }
+      return informationPages
+    },
+    createFallbackInformationPages(tutorial) {
+      if (tutorial.exampleImage1 && tutorial.exampleImage2) {
+        return [
+          {
+            blocks: [
+              {
+                blockNumber: 1,
+                blockType: 'text',
+                textDescription: `You are looking for ${tutorial.lookFor}`,
+              },
+              {
+                blockNumber: 2,
+                blockType: 'text',
+                textDescription: 'From the ground, it looks like this:',
+              },
+              {
+                blockNumber: 3,
+                blockType: 'image',
+                image: tutorial.exampleImage1,
+              },
+              {
+                blockNumber: 4,
+                blockType: 'text',
+                textDescription:
+                  'But the images you will see will show it from above, and it looks like this:',
+              },
+              {
+                blockNumber: 5,
+                blockType: 'image',
+                image: tutorial.exampleImage2,
+              },
+            ],
+            pageNumber: 1,
+            title: 'What to look for',
+          },
+        ]
+      } else {
+        return undefined
+      }
+    },
     getCheckboxIcon(taskId) {
       const selected = this.isTaskSelected(taskId)
       const icon = selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
@@ -284,11 +346,13 @@ export default defineComponent({
   created() {
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
+    this.createInformationPages()
   },
 })
 </script>
 
 <template>
+  {{ informationPages }}
   <project-header :instructionMessage="instructionMessage" :title="project.projectTopic">
     <v-chip v-if="tilesInSelection" color="primary" :ripple="false">
       {{ selectedTaskIds.length }}
@@ -313,6 +377,7 @@ export default defineComponent({
       :attribution="attribution"
       :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
       :first="first"
+      :informationPages="informationPages"
       :instructionMessage="instructionMessage"
       :manualUrl="project?.manualUrl"
       :options="options"
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 1e08ca4..1392524 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -118,7 +118,7 @@ export default defineComponent({
         const data = snapshot.val() || {}
         this.project = data
         if (this.project?.tutorialId) {
-            this.bindTutorial()
+          this.bindTutorial()
         }
       })
     },
@@ -164,7 +164,6 @@ export default defineComponent({
     bindTutorial() {
       onValue(getProjectRef(this.project?.tutorialId), (snapshot) => {
         const data = snapshot.val() || {}
-        console.log(this.tutorial)
         this.tutorial = data
       })
     },
@@ -246,7 +245,6 @@ export default defineComponent({
 
 <template>
   <basic-page page-name="project">
-    {{ tutorial }}
     <component
       :is="taskComponent"
       v-if="project && group && tasks && mode === 'contribute'"
@@ -255,6 +253,7 @@ export default defineComponent({
       :options="options"
       :project="project"
       :tasks="tasks"
+      :tutorial="tutorial"
       @created="handleTaskComponentCreated"
     />
 

From 8b0b3693bae64f7d403f8785c2912383f2685a0c Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 24 Jul 2024 16:08:53 +0200
Subject: [PATCH 04/23] feat(find-project-instructions): receive
 informationPages prop

---
 src/components/FindProject.vue             | 8 +-------
 src/components/FindProjectInstructions.vue | 4 ++++
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 5f550f3..5ffe702 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -22,10 +22,6 @@ export default defineComponent({
       type: Object,
       require: true,
     },
-    informationPages: {
-      type: Array,
-      require: false,
-    },
     // TODO: change this so that instructions dialog is opened with tutorial, but not with project
     first: {
       type: Boolean,
@@ -346,13 +342,11 @@ export default defineComponent({
   created() {
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
-    this.createInformationPages()
   },
 })
 </script>
 
 <template>
-  {{ informationPages }}
   <project-header :instructionMessage="instructionMessage" :title="project.projectTopic">
     <v-chip v-if="tilesInSelection" color="primary" :ripple="false">
       {{ selectedTaskIds.length }}
@@ -377,7 +371,7 @@ export default defineComponent({
       :attribution="attribution"
       :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
       :first="first"
-      :informationPages="informationPages"
+      :informationPages="createInformationPages()"
       :instructionMessage="instructionMessage"
       :manualUrl="project?.manualUrl"
       :options="options"
diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 4f3413c..8673f92 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -7,6 +7,10 @@ export default defineComponent({
     imageTile: ImageTile,
   },
   props: {
+    informationPages: {
+      type: Array,
+      required: false,
+    },
     instructionMessage: {
       type: String,
       required: true,

From 96cb9f6e21aff214caa9d520ac56efa692f07a22 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 24 Jul 2024 18:30:05 +0200
Subject: [PATCH 05/23] feat(find-project-instructions): show information pages
 (wip)

---
 src/components/FindProjectInstructions.vue | 304 ++++++++++++---------
 1 file changed, 172 insertions(+), 132 deletions(-)

diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 8673f92..354c981 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
 import ImageTile from '@/components/ImageTile.vue'
 import { defineComponent } from 'vue'
+import VueMarkdown from 'vue-markdown-render'
 
 export default defineComponent({
   components: {
     imageTile: ImageTile,
+    VueMarkdown,
   },
   props: {
     informationPages: {
@@ -42,6 +44,7 @@ export default defineComponent({
     eyeOff: false,
     overlay: true,
     selected: false,
+    tabs: null,
   }),
   methods: {
     closeDialog() {
@@ -61,150 +64,187 @@ export default defineComponent({
     color="primary"
     @click="dialog = true"
   />
-  <v-dialog v-model="dialog" max-width="800" scrollable>
+  <v-dialog v-model="dialog" max-width="80vw" height="80vh">
     <v-card v-click-outside="closeDialog">
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
-        <v-row class="mt-2" dense>
-          <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
-            <v-card color="white" height="7em" width="7em" variant="outlined" rounded="0">
-              <v-overlay
-                v-model="overlay"
-                @update:modelValue="overlay = true"
-                :opacity="index == 0 ? 0 : 0.5"
-                :scrim="option.color"
-                class="justify-center align-center"
-                contained
-              >
-                <h4>{{ option.label }}</h4>
-              </v-overlay>
-              <image-tile
-                :url="exampleTileUrls[0]"
-                :urlB="exampleTileUrls[1]"
-                :opacityB="eyeOff ? 0.3 : 1"
-                :spinner="false"
-              />
-            </v-card>
-          </v-col>
-        </v-row>
-        <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
-        <v-row class="align-center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              color="neutral"
-              style="opacity: 0.6"
-              @click.stop="selected = !selected"
-              :icon="selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'"
-              size="small"
-              variant="text"
-            />
-          </v-col>
-          <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
-        </v-row>
-        <v-row class="align-center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
-              @click="allSelected = !allSelected"
-              color="primary"
-              variant="text"
-            />
-          </v-col>
-          <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
-        </v-row>
-        <div class="text-p mt-2">{{ $t('findProjectInstructions.selectionInstruction') }}.</div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.haveCloserLook') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn
-                color="neutral"
-                style="opacity: 0.6"
-                icon="mdi-magnify"
-                size="small"
-                variant="text"
+      <v-tabs v-model="tabs" show-arrows>
+        <v-tab
+          v-for="page in informationPages"
+          :text="page.title"
+          :value="page.title"
+          :key="page.pageNumber"
+        ></v-tab>
+        <v-tab :text="$t('findProjectInstructions.howToContribute')" value="instructions"></v-tab>
+      </v-tabs>
+
+      <v-window v-model="tabs" class="scroll">
+        <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
+          <span v-for="block in page.blocks" :key="block.blockNumber">
+            <v-card-text v-if="block.blockType === 'text'">
+              <vue-markdown
+                :source="block.textDescription.replaceAll('\\n', '\n')"
+                :options="{ typographer: true }"
               />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.magnifyInstruction') }}.</v-col>
-          </v-row>
-        </div>
-        <span v-if="exampleTileUrls[1]">
-          <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
-          <div class="text-p mt-2">
+            </v-card-text>
+            <v-img v-if="block.blockType === 'image'" :src="block.image"></v-img>
+          </span>
+        </v-window-item>
+        <v-window-item value="instructions">
+          <v-card-text>
+            <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+            <div class="text-p">
+              {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
+            </div>
+            <v-row class="mt-2" dense>
+              <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
+                <v-card color="white" height="7em" width="7em" variant="outlined" rounded="0">
+                  <v-overlay
+                    v-model="overlay"
+                    @update:modelValue="overlay = true"
+                    :opacity="index == 0 ? 0 : 0.5"
+                    :scrim="option.color"
+                    class="justify-center align-center"
+                    contained
+                  >
+                    <h4>{{ option.label }}</h4>
+                  </v-overlay>
+                  <image-tile
+                    :url="exampleTileUrls[0]"
+                    :urlB="exampleTileUrls[1]"
+                    :opacityB="eyeOff ? 0.3 : 1"
+                    :spinner="false"
+                  />
+                </v-card>
+              </v-col>
+            </v-row>
+            <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
+            <v-row class="align-center" dense>
+              <v-col cols="auto" class="mr-4">
+                <v-btn
+                  color="neutral"
+                  style="opacity: 0.6"
+                  @click.stop="selected = !selected"
+                  :icon="
+                    selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
+                  "
+                  size="small"
+                  variant="text"
+                />
+              </v-col>
+              <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
+            </v-row>
             <v-row class="align-center" dense>
               <v-col cols="auto" class="mr-4">
                 <v-btn
-                  :icon="'mdi-eye'.concat(eyeoff ? '-off' : '')"
-                  @click="eyeoff = !eyeoff"
+                  :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
+                  @click="allSelected = !allSelected"
                   color="primary"
                   variant="text"
                 />
               </v-col>
-              <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+              <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
             </v-row>
-          </div>
-        </span>
-        <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
-          </v-row>
-        </div>
+            <div class="text-p mt-2">{{ $t('findProjectInstructions.selectionInstruction') }}.</div>
+            <div class="text-h6 mt-10">{{ $t('findProjectInstructions.haveCloserLook') }}</div>
+            <div class="text-p mt-2">
+              <v-row class="align-center" dense>
+                <v-col cols="auto" class="mr-4">
+                  <v-btn
+                    color="neutral"
+                    style="opacity: 0.6"
+                    icon="mdi-magnify"
+                    size="small"
+                    variant="text"
+                  />
+                </v-col>
+                <v-col>{{ $t('findProjectInstructions.magnifyInstruction') }}.</v-col>
+              </v-row>
+            </div>
+            <span v-if="exampleTileUrls[1]">
+              <div class="text-h6 mt-10">
+                {{ $t('findProjectInstructions.toggleOpacityTitle') }}
+              </div>
+              <div class="text-p mt-2">
+                <v-row class="align-center" dense>
+                  <v-col cols="auto" class="mr-4">
+                    <v-btn
+                      :icon="'mdi-eye'.concat(eyeoff ? '-off' : '')"
+                      @click="eyeoff = !eyeoff"
+                      color="primary"
+                      variant="text"
+                    />
+                  </v-col>
+                  <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+                </v-row>
+              </div>
+            </span>
+            <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
+            <div class="text-p mt-2">
+              <v-row align="center" dense>
+                <v-col cols="auto" class="mr-4">
+                  <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+                </v-col>
+                <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
+              </v-row>
+            </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
-          </v-row>
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
+            <div class="text-h6 mt-10">
+              {{ $t('findProjectInstructions.useButtonsToNavigate') }}
+            </div>
+            <div class="text-p mt-2">
+              <v-row class="align-center" dense>
+                <v-col cols="auto" class="mr-4">
+                  <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+                  <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+                </v-col>
+                <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
+              </v-row>
+              <v-row class="align-center" dense>
+                <v-col cols="auto" class="mr-4">
+                  <v-btn
+                    icon="mdi-chevron-double-left"
+                    color="secondary"
+                    class="mr-2"
+                    variant="text"
+                  />
+                  <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
+                </v-col>
+                <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
+              </v-row>
+            </div>
+            <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+            <div class="text-p mt-2">
+              <v-row class="align-center" dense>
+                <v-col cols="auto" class="mr-4">
+                  <v-btn icon="mdi-content-save" color="primary" variant="text" />
+                </v-col>
+                <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+              </v-row>
+            </div>
+            <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+            <div class="text-p">{{ attribution }}</div>
+          </v-card-text>
+          <v-card-actions class="justify-end">
+            <v-spacer />
+            <v-btn
+              v-if="manualUrl"
+              color="primary"
+              :href="manualUrl"
+              target="_blank"
+              prepend-icon="mdi-help-circle"
+              >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
+            >
+            <v-btn color="primary" @click="dialog = false">{{
+              $t('findProjectInstructions.close')
+            }}</v-btn>
+          </v-card-actions>
+        </v-window-item>
+      </v-window>
     </v-card>
   </v-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.scroll {
+  overflow-y: auto;
+}
+</style>

From 239c6a016986200eca0f5ce829701d87323011a0 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 09:50:09 +0200
Subject: [PATCH 06/23] feat(find-project-instructions): set max-width for
 images in information pages

---
 src/components/FindProjectInstructions.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 354c981..5b6177c 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -64,7 +64,7 @@ export default defineComponent({
     color="primary"
     @click="dialog = true"
   />
-  <v-dialog v-model="dialog" max-width="80vw" height="80vh">
+  <v-dialog v-model="dialog" max-width="70vw" height="80vh">
     <v-card v-click-outside="closeDialog">
       <v-tabs v-model="tabs" show-arrows>
         <v-tab
@@ -85,7 +85,7 @@ export default defineComponent({
                 :options="{ typographer: true }"
               />
             </v-card-text>
-            <v-img v-if="block.blockType === 'image'" :src="block.image"></v-img>
+            <v-img v-if="block.blockType === 'image'" :src="block.image" max-width="400"></v-img>
           </span>
         </v-window-item>
         <v-window-item value="instructions">
@@ -243,8 +243,4 @@ export default defineComponent({
   </v-dialog>
 </template>
 
-<style scoped>
-.scroll {
-  overflow-y: auto;
-}
-</style>
+<style scoped></style>

From c7411408be915aa2952dbf6c6ef1ae9322a5727f Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 11:20:59 +0200
Subject: [PATCH 07/23] feat(find-project-instructions): fixed height, add tab
 navigation buttons

---
 src/components/FindProjectInstructions.vue | 77 ++++++++++++++++------
 src/i18n/locales/de.json                   |  2 +
 src/i18n/locales/en.json                   |  2 +
 3 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 5b6177c..8cca6c1 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -44,15 +44,32 @@ export default defineComponent({
     eyeOff: false,
     overlay: true,
     selected: false,
-    tabs: null,
+    activeTab: null,
   }),
+  computed: {
+    tabs() {
+      const tabs = Array.from({ length: this.informationPages.length }, (v, i) => i).concat([
+        'instructions',
+      ])
+      return tabs
+    },
+  },
   methods: {
     closeDialog() {
       this.dialog = false
     },
+    back() {
+      const currentTabIndex = this.tabs.indexOf(this.activeTab)
+      if (currentTabIndex > 0) this.activeTab = this.tabs[currentTabIndex - 1]
+    },
+    forward() {
+      const currentTabIndex = this.tabs.indexOf(this.activeTab)
+      if (currentTabIndex < this.tabs.length - 1) this.activeTab = this.tabs[currentTabIndex + 1]
+    },
   },
   created() {
     this.dialog = this.first
+    this.activeTab = this.tabs[0]
   },
 })
 </script>
@@ -64,19 +81,19 @@ export default defineComponent({
     color="primary"
     @click="dialog = true"
   />
-  <v-dialog v-model="dialog" max-width="70vw" height="80vh">
-    <v-card v-click-outside="closeDialog">
-      <v-tabs v-model="tabs" show-arrows>
+  <v-dialog v-model="dialog" max-width="70vw">
+    <v-card v-click-outside="closeDialog" class="pa-5">
+      <v-tabs v-model="activeTab">
         <v-tab
-          v-for="page in informationPages"
+          v-for="(page, index) in informationPages"
           :text="page.title"
-          :value="page.title"
+          :value="index"
           :key="page.pageNumber"
         ></v-tab>
         <v-tab :text="$t('findProjectInstructions.howToContribute')" value="instructions"></v-tab>
       </v-tabs>
 
-      <v-window v-model="tabs" class="scroll">
+      <v-window v-model="activeTab" style="height: 70vh">
         <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
           <span v-for="block in page.blocks" :key="block.blockNumber">
             <v-card-text v-if="block.blockType === 'text'">
@@ -223,22 +240,40 @@ export default defineComponent({
             <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
             <div class="text-p">{{ attribution }}</div>
           </v-card-text>
-          <v-card-actions class="justify-end">
-            <v-spacer />
-            <v-btn
-              v-if="manualUrl"
-              color="primary"
-              :href="manualUrl"
-              target="_blank"
-              prepend-icon="mdi-help-circle"
-              >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-            >
-            <v-btn color="primary" @click="dialog = false">{{
-              $t('findProjectInstructions.close')
-            }}</v-btn>
-          </v-card-actions>
         </v-window-item>
       </v-window>
+      <v-card-actions class="justify-end">
+        <v-btn
+          :title="$t('findProjectInstructions.moveLeft')"
+          icon="mdi-chevron-left"
+          color="secondary"
+          :disabled="tabs.indexOf(activeTab) == 0"
+          @click="back"
+          v-shortkey.native="['arrowleft']"
+          @shortkey="back"
+        />
+        <v-btn
+          :title="$t('findProjectInstructions.moveRight')"
+          icon="mdi-chevron-right"
+          color="secondary"
+          :disabled="tabs.indexOf(activeTab) >= tabs.length - 1"
+          @click="forward"
+          v-shortkey.native="['arrowright']"
+          @shortkey="forward"
+        />
+        <v-spacer />
+        <v-btn
+          v-if="manualUrl"
+          color="primary"
+          :href="manualUrl"
+          target="_blank"
+          prepend-icon="mdi-help-circle"
+          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
+        >
+        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="dialog = false">{{
+          $t('findProjectInstructions.close')
+        }}</v-btn>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 9e47122..a8d393b 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -147,6 +147,8 @@
     "classifyTitle": "Klicke oder tippe, um zu klassifizieren",
     "close": "Schließen",
     "moreInfo": "Mehr Info",
+    "moveLeft": "Vorherige Seite",
+    "moveRight": "Nächste Seite",
     "selectionTitle": "Mehrere Bildkacheln auswählen",
     "selectTile": "... oder Rechtsklick/Halten, um die Bildkachel der Auswahl hinzuzufügen. Wiederholen, um sie von der Auswahl zu entfernen",
     "selectAll": "Alle Bildkacheln der aktuellen Ansicht auswählen. Wiederholen, um die Auswahl zu leeren",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 2c16633..6b1085d 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -147,6 +147,8 @@
     "classifyInstruction": "Click or tap each image tile, until the appropriate answer appears",
     "close": "Close",
     "moreInfo": "More Info",
+    "moveLeft": "Back to previous page",
+    "moveRight": "Go to next page",
     "selectionTitle": "Select multiple tiles",
     "selectTile": "... or right click/hold touch to add a tile to the selection. Repeat to remove the tile from the selection",
     "selectAll": "Select all tiles in view. Repeat to clear selection",

From dbac695fe927e5136c6af5f9adf5eaa9a31a2ff6 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 11:28:28 +0200
Subject: [PATCH 08/23] feat(find-project-instructions): scrollable window
 items

---
 src/components/FindProjectInstructions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 8cca6c1..6523232 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -82,7 +82,7 @@ export default defineComponent({
     @click="dialog = true"
   />
   <v-dialog v-model="dialog" max-width="70vw">
-    <v-card v-click-outside="closeDialog" class="pa-5">
+    <v-card v-click-outside="closeDialog" class="pa-3">
       <v-tabs v-model="activeTab">
         <v-tab
           v-for="(page, index) in informationPages"
@@ -93,7 +93,7 @@ export default defineComponent({
         <v-tab :text="$t('findProjectInstructions.howToContribute')" value="instructions"></v-tab>
       </v-tabs>
 
-      <v-window v-model="activeTab" style="height: 70vh">
+      <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
         <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
           <span v-for="block in page.blocks" :key="block.blockNumber">
             <v-card-text v-if="block.blockType === 'text'">

From 73db182b5d2467f566b99e3a657923e78dfea0ca Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 11:46:44 +0200
Subject: [PATCH 09/23] feat(find-project-instructions): align information page
 contents

---
 src/components/FindProjectInstructions.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 6523232..d58da85 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -96,13 +96,18 @@ export default defineComponent({
       <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
         <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
           <span v-for="block in page.blocks" :key="block.blockNumber">
-            <v-card-text v-if="block.blockType === 'text'">
+            <v-card-text v-if="block.blockType === 'text'" class="text-justify">
               <vue-markdown
                 :source="block.textDescription.replaceAll('\\n', '\n')"
                 :options="{ typographer: true }"
               />
             </v-card-text>
-            <v-img v-if="block.blockType === 'image'" :src="block.image" max-width="400"></v-img>
+            <v-img
+              v-if="block.blockType === 'image'"
+              :src="block.image"
+              max-width="400"
+              class="mx-auto"
+            />
           </span>
         </v-window-item>
         <v-window-item value="instructions">

From 36b68c211f4d0288da7219a01685f4770b33528d Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 13:47:51 +0200
Subject: [PATCH 10/23] feat(find-project-instructions): handle undefined
 informationPages

---
 src/components/FindProject.vue             | 4 ++--
 src/components/FindProjectInstructions.vue | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 5ffe702..e75d8ad 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -188,14 +188,14 @@ export default defineComponent({
       return informationPages
     },
     createFallbackInformationPages(tutorial) {
-      if (tutorial.exampleImage1 && tutorial.exampleImage2) {
+      if (tutorial.exampleImage1 && tutorial.exampleImage2 && tutorial.lookFor) {
         return [
           {
             blocks: [
               {
                 blockNumber: 1,
                 blockType: 'text',
-                textDescription: `You are looking for ${tutorial.lookFor}`,
+                textDescription: `You are looking for ${tutorial.lookFor}.`,
               },
               {
                 blockNumber: 2,
diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index d58da85..b16a8d8 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -48,9 +48,9 @@ export default defineComponent({
   }),
   computed: {
     tabs() {
-      const tabs = Array.from({ length: this.informationPages.length }, (v, i) => i).concat([
-        'instructions',
-      ])
+      const tabs = this.informationPages
+        ? Array.from({ length: this.informationPages.length }, (v, i) => i).concat(['instructions'])
+        : ['instructions']
       return tabs
     },
   },
@@ -252,7 +252,7 @@ export default defineComponent({
           :title="$t('findProjectInstructions.moveLeft')"
           icon="mdi-chevron-left"
           color="secondary"
-          :disabled="tabs.indexOf(activeTab) == 0"
+          :disabled="tabs.indexOf(activeTab) <= 0"
           @click="back"
           v-shortkey.native="['arrowleft']"
           @shortkey="back"

From a028d3335391513a63268792500840787c5e56a8 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 14:20:46 +0200
Subject: [PATCH 11/23] refactor(find-project): project-info component with
 instructions slot

---
 src/components/FindProject.vue             |  19 +-
 src/components/FindProjectInstructions.vue | 366 +++++++--------------
 src/components/ProjectInfo.vue             | 131 ++++++++
 3 files changed, 267 insertions(+), 249 deletions(-)
 create mode 100644 src/components/ProjectInfo.vue

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index e75d8ad..3254db6 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -5,6 +5,7 @@ import FindProjectInstructions from '@/components/FindProjectInstructions.vue'
 import ImageTile from '@/components/ImageTile.vue'
 import MagnifyImageTile from '@/components/MagnifyImageTile.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import TileMap from '@/components/TileMap.vue'
 
@@ -14,6 +15,7 @@ export default defineComponent({
     imageTile: ImageTile,
     magnifyImageTile: MagnifyImageTile,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     tileMap: TileMap,
     taskProgress: TaskProgress,
   },
@@ -367,15 +369,20 @@ export default defineComponent({
       color="primary"
     />
     <tile-map :page="page" :zoomLevel="project.zoomLevel" :key="columnsPerPage" />
-    <find-project-instructions
-      :attribution="attribution"
-      :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
+    <project-info
       :first="first"
       :informationPages="createInformationPages()"
-      :instructionMessage="instructionMessage"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+    >
+      <template #instructions>
+        <find-project-instructions
+          :attribution="attribution"
+          :exampleTileUrls="[page.flat()[0]?.url, page.flat()[0]?.urlB]"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
 
   <v-container
diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index b16a8d8..78ca5c4 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -1,18 +1,12 @@
 <script lang="ts">
 import ImageTile from '@/components/ImageTile.vue'
 import { defineComponent } from 'vue'
-import VueMarkdown from 'vue-markdown-render'
 
 export default defineComponent({
   components: {
     imageTile: ImageTile,
-    VueMarkdown,
   },
   props: {
-    informationPages: {
-      type: Array,
-      required: false,
-    },
     instructionMessage: {
       type: String,
       required: true,
@@ -29,258 +23,144 @@ export default defineComponent({
       type: Array,
       require: true,
     },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
-    first: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: () => ({
     allSelected: false,
-    dialog: false,
     eyeOff: false,
     overlay: true,
     selected: false,
-    activeTab: null,
   }),
-  computed: {
-    tabs() {
-      const tabs = this.informationPages
-        ? Array.from({ length: this.informationPages.length }, (v, i) => i).concat(['instructions'])
-        : ['instructions']
-      return tabs
-    },
-  },
-  methods: {
-    closeDialog() {
-      this.dialog = false
-    },
-    back() {
-      const currentTabIndex = this.tabs.indexOf(this.activeTab)
-      if (currentTabIndex > 0) this.activeTab = this.tabs[currentTabIndex - 1]
-    },
-    forward() {
-      const currentTabIndex = this.tabs.indexOf(this.activeTab)
-      if (currentTabIndex < this.tabs.length - 1) this.activeTab = this.tabs[currentTabIndex + 1]
-    },
-  },
-  created() {
-    this.dialog = this.first
-    this.activeTab = this.tabs[0]
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="70vw">
-    <v-card v-click-outside="closeDialog" class="pa-3">
-      <v-tabs v-model="activeTab">
-        <v-tab
-          v-for="(page, index) in informationPages"
-          :text="page.title"
-          :value="index"
-          :key="page.pageNumber"
-        ></v-tab>
-        <v-tab :text="$t('findProjectInstructions.howToContribute')" value="instructions"></v-tab>
-      </v-tabs>
-
-      <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
-        <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
-          <span v-for="block in page.blocks" :key="block.blockNumber">
-            <v-card-text v-if="block.blockType === 'text'" class="text-justify">
-              <vue-markdown
-                :source="block.textDescription.replaceAll('\\n', '\n')"
-                :options="{ typographer: true }"
-              />
-            </v-card-text>
-            <v-img
-              v-if="block.blockType === 'image'"
-              :src="block.image"
-              max-width="400"
-              class="mx-auto"
-            />
-          </span>
-        </v-window-item>
-        <v-window-item value="instructions">
-          <v-card-text>
-            <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-            <div class="text-p">
-              {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-            </div>
-            <v-row class="mt-2" dense>
-              <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
-                <v-card color="white" height="7em" width="7em" variant="outlined" rounded="0">
-                  <v-overlay
-                    v-model="overlay"
-                    @update:modelValue="overlay = true"
-                    :opacity="index == 0 ? 0 : 0.5"
-                    :scrim="option.color"
-                    class="justify-center align-center"
-                    contained
-                  >
-                    <h4>{{ option.label }}</h4>
-                  </v-overlay>
-                  <image-tile
-                    :url="exampleTileUrls[0]"
-                    :urlB="exampleTileUrls[1]"
-                    :opacityB="eyeOff ? 0.3 : 1"
-                    :spinner="false"
-                  />
-                </v-card>
-              </v-col>
-            </v-row>
-            <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
-            <v-row class="align-center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn
-                  color="neutral"
-                  style="opacity: 0.6"
-                  @click.stop="selected = !selected"
-                  :icon="
-                    selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
-                  "
-                  size="small"
-                  variant="text"
-                />
-              </v-col>
-              <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
-            </v-row>
-            <v-row class="align-center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn
-                  :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
-                  @click="allSelected = !allSelected"
-                  color="primary"
-                  variant="text"
-                />
-              </v-col>
-              <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
-            </v-row>
-            <div class="text-p mt-2">{{ $t('findProjectInstructions.selectionInstruction') }}.</div>
-            <div class="text-h6 mt-10">{{ $t('findProjectInstructions.haveCloserLook') }}</div>
-            <div class="text-p mt-2">
-              <v-row class="align-center" dense>
-                <v-col cols="auto" class="mr-4">
-                  <v-btn
-                    color="neutral"
-                    style="opacity: 0.6"
-                    icon="mdi-magnify"
-                    size="small"
-                    variant="text"
-                  />
-                </v-col>
-                <v-col>{{ $t('findProjectInstructions.magnifyInstruction') }}.</v-col>
-              </v-row>
-            </div>
-            <span v-if="exampleTileUrls[1]">
-              <div class="text-h6 mt-10">
-                {{ $t('findProjectInstructions.toggleOpacityTitle') }}
-              </div>
-              <div class="text-p mt-2">
-                <v-row class="align-center" dense>
-                  <v-col cols="auto" class="mr-4">
-                    <v-btn
-                      :icon="'mdi-eye'.concat(eyeoff ? '-off' : '')"
-                      @click="eyeoff = !eyeoff"
-                      color="primary"
-                      variant="text"
-                    />
-                  </v-col>
-                  <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
-                </v-row>
-              </div>
-            </span>
-            <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
-            <div class="text-p mt-2">
-              <v-row align="center" dense>
-                <v-col cols="auto" class="mr-4">
-                  <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
-                </v-col>
-                <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
-              </v-row>
-            </div>
-
-            <div class="text-h6 mt-10">
-              {{ $t('findProjectInstructions.useButtonsToNavigate') }}
-            </div>
-            <div class="text-p mt-2">
-              <v-row class="align-center" dense>
-                <v-col cols="auto" class="mr-4">
-                  <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-                  <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-                </v-col>
-                <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
-              </v-row>
-              <v-row class="align-center" dense>
-                <v-col cols="auto" class="mr-4">
-                  <v-btn
-                    icon="mdi-chevron-double-left"
-                    color="secondary"
-                    class="mr-2"
-                    variant="text"
-                  />
-                  <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
-                </v-col>
-                <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
-              </v-row>
-            </div>
-            <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-            <div class="text-p mt-2">
-              <v-row class="align-center" dense>
-                <v-col cols="auto" class="mr-4">
-                  <v-btn icon="mdi-content-save" color="primary" variant="text" />
-                </v-col>
-                <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-              </v-row>
-            </div>
-            <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-            <div class="text-p">{{ attribution }}</div>
-          </v-card-text>
-        </v-window-item>
-      </v-window>
-      <v-card-actions class="justify-end">
+  <v-card-text>
+    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
+    </div>
+    <v-row class="mt-2" dense>
+      <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
+        <v-card color="white" height="7em" width="7em" variant="outlined" rounded="0">
+          <v-overlay
+            v-model="overlay"
+            @update:modelValue="overlay = true"
+            :opacity="index == 0 ? 0 : 0.5"
+            :scrim="option.color"
+            class="justify-center align-center"
+            contained
+          >
+            <h4>{{ option.label }}</h4>
+          </v-overlay>
+          <image-tile
+            :url="exampleTileUrls[0]"
+            :urlB="exampleTileUrls[1]"
+            :opacityB="eyeOff ? 0.3 : 1"
+            :spinner="false"
+          />
+        </v-card>
+      </v-col>
+    </v-row>
+    <div class="text-h6 mt-5">{{ $t('findProjectInstructions.selectionTitle') }}</div>
+    <v-row class="align-center" dense>
+      <v-col cols="auto" class="mr-4">
         <v-btn
-          :title="$t('findProjectInstructions.moveLeft')"
-          icon="mdi-chevron-left"
-          color="secondary"
-          :disabled="tabs.indexOf(activeTab) <= 0"
-          @click="back"
-          v-shortkey.native="['arrowleft']"
-          @shortkey="back"
+          color="neutral"
+          style="opacity: 0.6"
+          @click.stop="selected = !selected"
+          :icon="selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'"
+          size="small"
+          variant="text"
         />
+      </v-col>
+      <v-col>{{ $t('findProjectInstructions.selectTile') }}.</v-col>
+    </v-row>
+    <v-row class="align-center" dense>
+      <v-col cols="auto" class="mr-4">
         <v-btn
-          :title="$t('findProjectInstructions.moveRight')"
-          icon="mdi-chevron-right"
-          color="secondary"
-          :disabled="tabs.indexOf(activeTab) >= tabs.length - 1"
-          @click="forward"
-          v-shortkey.native="['arrowright']"
-          @shortkey="forward"
-        />
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
+          :icon="'mdi-select-'.concat(allSelected ? 'off' : 'all')"
+          @click="allSelected = !allSelected"
           color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+          variant="text"
+        />
+      </v-col>
+      <v-col>{{ $t('findProjectInstructions.selectAll') }}.</v-col>
+    </v-row>
+    <div class="text-p mt-2">{{ $t('findProjectInstructions.selectionInstruction') }}.</div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.haveCloserLook') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn
+            color="neutral"
+            style="opacity: 0.6"
+            icon="mdi-magnify"
+            size="small"
+            variant="text"
+          />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.magnifyInstruction') }}.</v-col>
+      </v-row>
+    </div>
+    <span v-if="exampleTileUrls[1]">
+      <div class="text-h6 mt-10">
+        {{ $t('findProjectInstructions.toggleOpacityTitle') }}
+      </div>
+      <div class="text-p mt-2">
+        <v-row class="align-center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn
+              :icon="'mdi-eye'.concat(eyeoff ? '-off' : '')"
+              @click="eyeoff = !eyeoff"
+              color="primary"
+              variant="text"
+            />
+          </v-col>
+          <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+        </v-row>
+      </div>
+    </span>
+    <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">
+      {{ $t('findProjectInstructions.useButtonsToNavigate') }}
+    </div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
+      </v-row>
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>
diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
new file mode 100644
index 0000000..1b4b9dd
--- /dev/null
+++ b/src/components/ProjectInfo.vue
@@ -0,0 +1,131 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import VueMarkdown from 'vue-markdown-render'
+
+export default defineComponent({
+  components: {
+    VueMarkdown,
+  },
+  props: {
+    informationPages: {
+      type: Array,
+      required: false,
+    },
+    manualUrl: {
+      type: String,
+      require: false,
+    },
+    first: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    activeTab: null,
+    dialog: false,
+  }),
+  computed: {
+    tabs() {
+      const tabs = this.informationPages
+        ? Array.from({ length: this.informationPages.length }, (v, i) => i).concat(['instructions'])
+        : ['instructions']
+      return tabs
+    },
+  },
+  methods: {
+    closeDialog() {
+      this.dialog = false
+    },
+    back() {
+      const currentTabIndex = this.tabs.indexOf(this.activeTab)
+      if (currentTabIndex > 0) this.activeTab = this.tabs[currentTabIndex - 1]
+    },
+    forward() {
+      const currentTabIndex = this.tabs.indexOf(this.activeTab)
+      if (currentTabIndex < this.tabs.length - 1) this.activeTab = this.tabs[currentTabIndex + 1]
+    },
+  },
+  created() {
+    this.dialog = this.first
+    this.activeTab = this.tabs[0]
+  },
+})
+</script>
+
+<template>
+  <v-btn
+    :title="$t('findProjectInstructions.howToContribute')"
+    icon="mdi-information"
+    color="primary"
+    @click="dialog = true"
+  />
+  <v-dialog v-model="dialog" max-width="70vw">
+    <v-card v-click-outside="closeDialog" class="pa-3">
+      <v-tabs v-model="activeTab">
+        <v-tab
+          v-for="(page, index) in informationPages"
+          :text="page.title"
+          :value="index"
+          :key="page.pageNumber"
+        ></v-tab>
+        <v-tab :text="$t('findProjectInstructions.howToContribute')" value="instructions"></v-tab>
+      </v-tabs>
+
+      <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
+        <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
+          <span v-for="block in page.blocks" :key="block.blockNumber">
+            <v-card-text v-if="block.blockType === 'text'" class="text-justify">
+              <vue-markdown
+                :source="block.textDescription.replaceAll('\\n', '\n')"
+                :options="{ typographer: true }"
+              />
+            </v-card-text>
+            <v-img
+              v-if="block.blockType === 'image'"
+              :src="block.image"
+              max-width="400"
+              class="mx-auto"
+            />
+          </span>
+        </v-window-item>
+        <v-window-item value="instructions">
+          <slot name="instructions"></slot>
+        </v-window-item>
+      </v-window>
+      <v-card-actions class="justify-end">
+        <v-btn
+          :title="$t('findProjectInstructions.moveLeft')"
+          icon="mdi-chevron-left"
+          color="secondary"
+          :disabled="tabs.indexOf(activeTab) <= 0"
+          @click="back"
+          v-shortkey.native="['arrowleft']"
+          @shortkey="back"
+        />
+        <v-btn
+          :title="$t('findProjectInstructions.moveRight')"
+          icon="mdi-chevron-right"
+          color="secondary"
+          :disabled="tabs.indexOf(activeTab) >= tabs.length - 1"
+          @click="forward"
+          v-shortkey.native="['arrowright']"
+          @shortkey="forward"
+        />
+        <v-spacer />
+        <v-btn
+          v-if="manualUrl"
+          color="primary"
+          :href="manualUrl"
+          target="_blank"
+          prepend-icon="mdi-help-circle"
+          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
+        >
+        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="dialog = false">{{
+          $t('findProjectInstructions.close')
+        }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped></style>

From 1314632e174f22e8a791c076f831ad5b210c4546 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 15:06:23 +0200
Subject: [PATCH 12/23] feat(find-project, project-info): sort information
 pages and blocks

---
 src/components/FindProject.vue | 3 ++-
 src/components/ProjectInfo.vue | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 3254db6..51f7bd7 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -177,7 +177,7 @@ export default defineComponent({
       return clamp
     },
     createInformationPages() {
-      var informationPages = {}
+      var informationPages = []
       if (this.tutorial) {
         // We want to show the information pages for a project
         informationPages =
@@ -187,6 +187,7 @@ export default defineComponent({
         informationPages =
           this.project.informationPages || this.createFallbackInformationPages(this.project)
       }
+      informationPages?.sort((a, b) => a.pageNumber - b.pageNumber)
       return informationPages
     },
     createFallbackInformationPages(tutorial) {
diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
index 1b4b9dd..538533c 100644
--- a/src/components/ProjectInfo.vue
+++ b/src/components/ProjectInfo.vue
@@ -73,7 +73,10 @@ export default defineComponent({
 
       <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
         <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
-          <span v-for="block in page.blocks" :key="block.blockNumber">
+          <span
+            v-for="block in page.blocks?.sort((a, b) => a.blockNumber - b.blockNumber)"
+            :key="block.blockNumber"
+          >
             <v-card-text v-if="block.blockType === 'text'" class="text-justify">
               <vue-markdown
                 :source="block.textDescription.replaceAll('\\n', '\n')"

From 7a38c1f811b9b47b4b1a99a344cbe21979b380df Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 15:13:02 +0200
Subject: [PATCH 13/23] fix(project-info): use index as value on window items

---
 src/components/ProjectInfo.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
index 538533c..c649d8d 100644
--- a/src/components/ProjectInfo.vue
+++ b/src/components/ProjectInfo.vue
@@ -47,7 +47,6 @@ export default defineComponent({
   },
   created() {
     this.dialog = this.first
-    this.activeTab = this.tabs[0]
   },
 })
 </script>
@@ -72,7 +71,11 @@ export default defineComponent({
       </v-tabs>
 
       <v-window v-model="activeTab" style="height: 70vh; overflow-y: auto">
-        <v-window-item v-for="page in informationPages" :value="page.title" :key="page.pageNumber">
+        <v-window-item
+          v-for="(page, index) in informationPages"
+          :value="index"
+          :key="page.pageNumber"
+        >
           <span
             v-for="block in page.blocks?.sort((a, b) => a.blockNumber - b.blockNumber)"
             :key="block.blockNumber"

From d9ac6245bd1cbcde1220d30fb10894dd0cbd6f82 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 16:05:11 +0200
Subject: [PATCH 14/23] refactor(find-project): outsource
 createInformationPages fun

---
 src/components/FindProject.vue      | 18 +++---------------
 src/utils/createInformationPages.ts | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/createInformationPages.ts

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 51f7bd7..283a1ab 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import buildTasks from '@/utils/buildTasks'
+import createInformationPages from '@/utils/createInformationPages'
 import FindProjectInstructions from '@/components/FindProjectInstructions.vue'
 import ImageTile from '@/components/ImageTile.vue'
 import MagnifyImageTile from '@/components/MagnifyImageTile.vue'
@@ -176,20 +177,7 @@ export default defineComponent({
       const clamp = Math.min(Math.max(value, min), max)
       return clamp
     },
-    createInformationPages() {
-      var informationPages = []
-      if (this.tutorial) {
-        // We want to show the information pages for a project
-        informationPages =
-          this.tutorial.informationPages || this.createFallbackInformationPages(this.tutorial)
-      } else {
-        // We want to show the information pages for a tutorial.
-        informationPages =
-          this.project.informationPages || this.createFallbackInformationPages(this.project)
-      }
-      informationPages?.sort((a, b) => a.pageNumber - b.pageNumber)
-      return informationPages
-    },
+    createInformationPages,
     createFallbackInformationPages(tutorial) {
       if (tutorial.exampleImage1 && tutorial.exampleImage2 && tutorial.lookFor) {
         return [
@@ -372,7 +360,7 @@ export default defineComponent({
     <tile-map :page="page" :zoomLevel="project.zoomLevel" :key="columnsPerPage" />
     <project-info
       :first="first"
-      :informationPages="createInformationPages()"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
     >
       <template #instructions>
diff --git a/src/utils/createInformationPages.ts b/src/utils/createInformationPages.ts
new file mode 100644
index 0000000..e858400
--- /dev/null
+++ b/src/utils/createInformationPages.ts
@@ -0,0 +1,14 @@
+const createInformationPages = (tutorial, project, fallbackFn) => {
+  let informationPages = []
+  if (tutorial) {
+    // We want to show the information pages for a project
+    informationPages = tutorial.informationPages || fallbackFn(tutorial)
+  } else {
+    // We want to show the information pages for a tutorial.
+    informationPages = project.informationPages || fallbackFn(project)
+  }
+  informationPages?.sort((a, b) => a.pageNumber - b.pageNumber)
+  return informationPages
+}
+
+export default createInformationPages

From 3f1c108f2e9f0b06141d90539b0c75c2e39aa59f Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 16:20:55 +0200
Subject: [PATCH 15/23] feat(validate-project): add information pages

---
 src/components/ValidateProject.vue            |  52 +++++-
 .../ValidateProjectInstructions.vue           | 169 +++++++-----------
 2 files changed, 112 insertions(+), 109 deletions(-)

diff --git a/src/components/ValidateProject.vue b/src/components/ValidateProject.vue
index f5e5640..602e040 100644
--- a/src/components/ValidateProject.vue
+++ b/src/components/ValidateProject.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
 import { theme } from '@/plugins/vuetify'
 import OptionButtons from '@/components/OptionButtons.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import ValidateProjectInstructions from '@/components/ValidateProjectInstructions.vue'
 import { GeoJSON } from 'ol/format'
@@ -16,6 +18,7 @@ export default defineComponent({
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
   },
   props: {
     group: {
@@ -73,6 +76,10 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
@@ -113,6 +120,37 @@ export default defineComponent({
         this.updateTaskFeature()
       }
     },
+    createInformationPages,
+    createFallbackInformationPages(tutorial) {
+      if (tutorial.lookFor) {
+        return [
+          {
+            blocks: [
+              {
+                blockNumber: 1,
+                blockType: 'text',
+                textDescription: "You'll see a shape on an image. Use the buttons to answer.",
+              },
+              {
+                blockNumber: 2,
+                blockType: 'text',
+                textDescription: 'Does the shape outline a ${tutorial.lookFor}?',
+              },
+              {
+                blockNumber: 3,
+                blockType: 'text',
+                textDescription:
+                  "Every time you select an option, you'll be shown a new shape and image.",
+              },
+            ],
+            pageNumber: 1,
+            title: 'What to look for',
+          },
+        ]
+      } else {
+        return undefined
+      }
+    },
     fitView(duration = 600, delay = 100) {
       const map = this.$refs.map.map
       const mapView = this.$refs.mapView
@@ -183,12 +221,18 @@ export default defineComponent({
       @click="fitView()"
       color="primary"
     />
-    <validate-project-instructions
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+    >
+      <template #instructions>
+        <validate-project-instructions
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
     <ol-map
diff --git a/src/components/ValidateProjectInstructions.vue b/src/components/ValidateProjectInstructions.vue
index 7edbe53..c508cc8 100644
--- a/src/components/ValidateProjectInstructions.vue
+++ b/src/components/ValidateProjectInstructions.vue
@@ -7,125 +7,84 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }} {{ $t('validateProjectInstructions.classifyInstruction') }}.
-        </div>
+  <v-card-text>
+    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }} {{ $t('validateProjectInstructions.classifyInstruction') }}.
+    </div>
 
-        <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              class="mx-2 text-caption"
-              width="6rem"
-              :text="'(' + option.shortkey + ') ' + option.title"
-              :color="option.iconColor"
-              :prepend-icon="option.mdiIcon"
-              variant="plain"
-              stacked
-            />
-          </v-col>
-          <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
-        </v-row>
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn
-                :title="$t('tileMap.resetView')"
-                color="primary"
-                icon="mdi-fit-to-screen-outline"
-                size="small"
-                variant="text"
-              >
-              </v-btn>
-            </v-col>
-            <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn
+            :title="$t('tileMap.resetView')"
+            color="primary"
+            icon="mdi-fit-to-screen-outline"
+            size="small"
+            variant="text"
+          >
+          </v-btn>
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+  </v-card-text>
 </template>
 
 <style scoped></style>

From f4dc9d6a9e74224d14319bcbfca2c08be4018126 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 16:41:51 +0200
Subject: [PATCH 16/23] feat(compare-project): add information pages

---
 src/components/CompareProject.vue             |  27 +++-
 src/components/CompareProjectInstructions.vue | 149 ++++++------------
 2 files changed, 72 insertions(+), 104 deletions(-)

diff --git a/src/components/CompareProject.vue b/src/components/CompareProject.vue
index 6aa64a2..014ddf5 100644
--- a/src/components/CompareProject.vue
+++ b/src/components/CompareProject.vue
@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import OptionButtons from '@/components/OptionButtons.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import TileMap from '@/components/TileMap.vue'
 import ImageTile from '@/components/ImageTile.vue'
@@ -13,6 +15,7 @@ export default defineComponent({
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     imageTile: ImageTile,
     tileMap: TileMap,
   },
@@ -72,6 +75,10 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
@@ -111,6 +118,10 @@ export default defineComponent({
         this.taskId = this.tasks[this.taskIndex].taskId
       }
     },
+    createInformationPages,
+    createFallbackInformationPages() {
+      return undefined
+    },
     forward() {
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
@@ -135,13 +146,19 @@ export default defineComponent({
 <template>
   <project-header :instructionMessage="instructionMessage" :title="project.projectTopic">
     <tile-map :page="[tasks[taskIndex]]" :zoomLevel="project.zoomLevel" />
-    <compare-project-instructions
-      :attribution="attribution"
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+    >
+      <template #instructions>
+        <compare-project-instructions
+          :attribution="attribution"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="pa-0" v-touch="{ left: () => forward(), right: () => back() }">
     <v-row>
diff --git a/src/components/CompareProjectInstructions.vue b/src/components/CompareProjectInstructions.vue
index fcf9030..f42d68a 100644
--- a/src/components/CompareProjectInstructions.vue
+++ b/src/components/CompareProjectInstructions.vue
@@ -11,118 +11,69 @@ export default defineComponent({
       type: String,
       require: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    results: {},
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
+  <v-card-text>
+    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
+    </div>
 
-        <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              class="mx-2 text-caption"
-              width="6rem"
-              :text="'(' + option.shortkey + ') ' + option.title"
-              :color="option.iconColor"
-              :prepend-icon="option.mdiIcon"
-              variant="plain"
-              stacked
-            />
-          </v-col>
-          <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
-        </v-row>
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
 
-        <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.moveColumn') }}</v-col>
-          </v-row>
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>

From 0c7889a152cbac4c27702ab9bc858e49675dcbb9 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 16:56:59 +0200
Subject: [PATCH 17/23] feat(digitize-project): add information pages

---
 src/components/DigitizeProject.vue            |  25 ++-
 .../DigitizeProjectInstructions.vue           | 177 +++++++-----------
 2 files changed, 89 insertions(+), 113 deletions(-)

diff --git a/src/components/DigitizeProject.vue b/src/components/DigitizeProject.vue
index f1b790e..2bc9168 100644
--- a/src/components/DigitizeProject.vue
+++ b/src/components/DigitizeProject.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
 import { theme } from '@/plugins/vuetify'
 import DigitizeProjectInstructions from '@/components/DigitizeProjectInstructions.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import { GeoJSON } from 'ol/format'
 import { createBox } from 'ol/interaction/Draw'
@@ -15,6 +17,7 @@ export default defineComponent({
     digitizeProjectInstructions: DigitizeProjectInstructions,
     taskProgress: TaskProgress,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
   },
   props: {
     group: {
@@ -33,6 +36,10 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
@@ -86,6 +93,10 @@ export default defineComponent({
         this.updateTaskFeature()
       }
     },
+    createInformationPages,
+    createFallbackInformationPages() {
+      return undefined
+    },
     drawCondition() {
       return this.withinTaskGeom || this.drawing
     },
@@ -234,12 +245,18 @@ export default defineComponent({
       @click="fitView()"
       color="primary"
     />
-    <digitize-project-instructions
+    <project-info
       :first="first"
-      :drawType="drawType"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-    />
+    >
+      <template #instructions>
+        <digitize-project-instructions
+          :drawType="drawType"
+          :instructionMessage="instructionMessage"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
     <ol-map
diff --git a/src/components/DigitizeProjectInstructions.vue b/src/components/DigitizeProjectInstructions.vue
index 796158a..c14bfea 100644
--- a/src/components/DigitizeProjectInstructions.vue
+++ b/src/components/DigitizeProjectInstructions.vue
@@ -7,126 +7,85 @@ export default defineComponent({
       type: String,
       required: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
     instructionMessage: {
       type: String,
       required: true,
     },
-    manualUrl: {
-      type: String,
-      required: false,
-    },
-  },
-  data: () => ({
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
   },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-p">{{ instructionMessage }}.</div>
-        <div class="text-h6 mt-10">{{ $t('digitizeProjectInstructions.switchMode') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-draw" color="primary" variant="tonal" rounded="0" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.drawNewFeature') }}</v-col>
-          </v-row>
-          <v-row align="center" v-if="drawType != 'Box'" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-vector-polyline-edit" color="primary" variant="tonal" rounded="0" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.modifyFeature') }}</v-col>
-          </v-row>
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-delete" color="warning" variant="tonal" rounded="0" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.deleteFeature') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
-          </v-row>
-          <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
-          <div class="text-p mt-2">
-            <v-row align="center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
-              </v-col>
-              <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
-            </v-row>
-          </div>
+  <v-card-text>
+    <div class="text-p">{{ instructionMessage }}.</div>
+    <div class="text-h6 mt-10">{{ $t('digitizeProjectInstructions.switchMode') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-draw" color="primary" variant="tonal" rounded="0" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.drawNewFeature') }}</v-col>
+      </v-row>
+      <v-row align="center" v-if="drawType != 'Box'" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-vector-polyline-edit" color="primary" variant="tonal" rounded="0" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.modifyFeature') }}</v-col>
+      </v-row>
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-delete" color="warning" variant="tonal" rounded="0" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.deleteFeature') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+      </v-row>
+      <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
+      <div class="text-p mt-2">
+        <v-row align="center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
+          </v-col>
+          <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+        </v-row>
+      </div>
 
-          <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
-          <div class="text-p mt-2">
-            <v-row align="center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn
-                  :title="$t('tileMap.resetView')"
-                  color="primary"
-                  icon="mdi-fit-to-screen-outline"
-                  size="small"
-                  variant="text"
-                >
-                </v-btn>
-              </v-col>
-              <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
-            </v-row>
-          </div>
+      <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
+      <div class="text-p mt-2">
+        <v-row align="center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn
+              :title="$t('tileMap.resetView')"
+              color="primary"
+              icon="mdi-fit-to-screen-outline"
+              size="small"
+              variant="text"
+            >
+            </v-btn>
+          </v-col>
+          <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
+        </v-row>
+      </div>
 
-          <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-          <div class="text-p mt-2">
-            <v-row class="align-center" dense>
-              <v-col cols="auto" class="mr-4">
-                <v-btn icon="mdi-content-save" color="primary" variant="text" />
-              </v-col>
-              <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
-            </v-row>
-          </div>
-        </div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+      <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+      <div class="text-p mt-2">
+        <v-row class="align-center" dense>
+          <v-col cols="auto" class="mr-4">
+            <v-btn icon="mdi-content-save" color="primary" variant="text" />
+          </v-col>
+          <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+        </v-row>
+      </div>
+    </div>
+  </v-card-text>
 </template>
 
 <style scoped></style>

From 65674e3428b3bd3f8a1af427f9c882bf9b9dd36f Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 25 Jul 2024 17:13:46 +0200
Subject: [PATCH 18/23] feat(media-project): add information pages

---
 src/components/MediaProject.vue             |  30 +++--
 src/components/MediaProjectInstructions.vue | 124 +++++++-------------
 2 files changed, 63 insertions(+), 91 deletions(-)

diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index 2e25fee..fae266b 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import OptionButtons from './OptionButtons.vue'
 import ProjectHeader from './ProjectHeader.vue'
+import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import MediaProjectInstructions from './MediaProjectInstructions.vue'
 
@@ -10,6 +12,7 @@ export default defineComponent({
     mediaProjectInstructions: MediaProjectInstructions,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     taskProgress: TaskProgress,
   },
   props: {
@@ -39,6 +42,10 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
@@ -90,6 +97,10 @@ export default defineComponent({
         this.taskId = this.tasks[this.taskIndex].taskId
       }
     },
+    createInformationPages,
+    createFallbackInformationPages() {
+      return undefined
+    },
     forward() {
       if (this.isImageLoaded && this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.imageLoaded = false
@@ -117,16 +128,19 @@ export default defineComponent({
 
 <template>
   <project-header :instructionMessage="instructionMessage" :title="project?.projectTopic">
-    <media-project-instructions
-      :attribution="attribution"
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
-      :question="questions"
-      :mediaType="isImageTask ? 'image' : 'video'"
-      :textColor="contrastingTextColor"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+    >
+      <template #instructions>
+        <media-project-instructions
+          :attribution="attribution"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container
     class="ma-0 pa-0"
diff --git a/src/components/MediaProjectInstructions.vue b/src/components/MediaProjectInstructions.vue
index f47188d..1cfcb6c 100644
--- a/src/components/MediaProjectInstructions.vue
+++ b/src/components/MediaProjectInstructions.vue
@@ -11,101 +11,59 @@ export default defineComponent({
       type: String,
       require: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    results: {},
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
+  <v-card-text>
+    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }} {{ $t('validateProjectInstructions.classifyInstruction') }}.
+    </div>
 
-        <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
-          <v-col cols="auto" class="mr-4">
-            <v-btn
-              class="mx-2 text-caption"
-              width="6rem"
-              :text="'(' + option.shortkey + ') ' + option.title"
-              :color="option.iconColor"
-              :prepend-icon="option.mdiIcon"
-              variant="plain"
-              stacked
-            />
-          </v-col>
-          <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
-        </v-row>
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
-        <div class="text-p mt-2">
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-content-save" color="primary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>

From 6e976d32b3e1dd35785c278a2ad45fd2a2943ac6 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 29 Jul 2024 14:58:05 +0200
Subject: [PATCH 19/23] fix(project): deactivate arrow keys on project while
 project-info dialog is open

---
 src/components/CompareProject.vue  |  6 ++++--
 src/components/DigitizeProject.vue |  6 ++++--
 src/components/FindProject.vue     | 10 ++++++----
 src/components/MediaProject.vue    |  6 ++++--
 src/components/ProjectInfo.vue     | 13 +++++++------
 src/components/ValidateProject.vue |  6 ++++--
 6 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/CompareProject.vue b/src/components/CompareProject.vue
index 014ddf5..09eaf66 100644
--- a/src/components/CompareProject.vue
+++ b/src/components/CompareProject.vue
@@ -83,6 +83,7 @@ export default defineComponent({
   data() {
     return {
       allAnswered: false,
+      arrowKeys: true,
       overlay: true,
       results: {},
       startTime: null,
@@ -150,6 +151,7 @@ export default defineComponent({
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
         <compare-project-instructions
@@ -232,7 +234,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -248,7 +250,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/DigitizeProject.vue b/src/components/DigitizeProject.vue
index 2bc9168..5c1d7a7 100644
--- a/src/components/DigitizeProject.vue
+++ b/src/components/DigitizeProject.vue
@@ -43,6 +43,7 @@ export default defineComponent({
   },
   data() {
     return {
+      arrowKeys: true,
       endReached: false,
       center: [0, 0],
       drawing: false,
@@ -249,6 +250,7 @@ export default defineComponent({
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
         <digitize-project-instructions
@@ -392,7 +394,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -408,7 +410,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 283a1ab..7a12e01 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -56,6 +56,7 @@ export default defineComponent({
   },
   data() {
     return {
+      arrowKeys: true,
       columnIndex: 0,
       containerWidth: 1,
       endReached: false,
@@ -362,6 +363,7 @@ export default defineComponent({
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
         <find-project-instructions
@@ -449,7 +451,7 @@ export default defineComponent({
       color="secondary"
       :disabled="columnIndex <= 0"
       @click="fastBack"
-      v-shortkey.once="['arrowdown']"
+      v-shortkey.once="[arrowKeys ? 'arrowdown' : '']"
       @shortkey="fastBack"
     />
     <v-btn
@@ -458,7 +460,7 @@ export default defineComponent({
       color="secondary"
       :disabled="columnIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -474,7 +476,7 @@ export default defineComponent({
       color="secondary"
       :disabled="isLastPage"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-btn
@@ -483,7 +485,7 @@ export default defineComponent({
       color="secondary"
       :disabled="isLastPage"
       @click="fastForward"
-      v-shortkey.once="['arrowup']"
+      v-shortkey.once="[arrowKeys ? 'arrowup' : '']"
       @shortkey="fastForward"
     />
     <v-spacer />
diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index fae266b..eaeb256 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -49,6 +49,7 @@ export default defineComponent({
   },
   data() {
     return {
+      arrowKeys: true,
       isImageLoaded: false,
       results: {},
       startTime: null,
@@ -132,6 +133,7 @@ export default defineComponent({
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
         <media-project-instructions
@@ -180,7 +182,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -196,7 +198,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isImageLoaded || !isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />
diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
index c649d8d..35cb2b9 100644
--- a/src/components/ProjectInfo.vue
+++ b/src/components/ProjectInfo.vue
@@ -33,8 +33,9 @@ export default defineComponent({
     },
   },
   methods: {
-    closeDialog() {
-      this.dialog = false
+    toggleDialog() {
+      this.$emit('toggleDialog')
+      this.dialog = !this.dialog
     },
     back() {
       const currentTabIndex = this.tabs.indexOf(this.activeTab)
@@ -46,7 +47,7 @@ export default defineComponent({
     },
   },
   created() {
-    this.dialog = this.first
+    if (this.first) this.toggleDialog()
   },
 })
 </script>
@@ -56,10 +57,10 @@ export default defineComponent({
     :title="$t('findProjectInstructions.howToContribute')"
     icon="mdi-information"
     color="primary"
-    @click="dialog = true"
+    @click="toggleDialog()"
   />
   <v-dialog v-model="dialog" max-width="70vw">
-    <v-card v-click-outside="closeDialog" class="pa-3">
+    <v-card v-click-outside="toggleDialog" class="pa-3">
       <v-tabs v-model="activeTab">
         <v-tab
           v-for="(page, index) in informationPages"
@@ -126,7 +127,7 @@ export default defineComponent({
           prepend-icon="mdi-help-circle"
           >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
         >
-        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="dialog = false">{{
+        <v-btn v-if="activeTab == 'instructions'" color="primary" @click="toggleDialog()">{{
           $t('findProjectInstructions.close')
         }}</v-btn>
       </v-card-actions>
diff --git a/src/components/ValidateProject.vue b/src/components/ValidateProject.vue
index 602e040..608ce09 100644
--- a/src/components/ValidateProject.vue
+++ b/src/components/ValidateProject.vue
@@ -83,6 +83,7 @@ export default defineComponent({
   },
   data() {
     return {
+      arrowKeys: true,
       center: [0, 0],
       results: {},
       startTime: null,
@@ -225,6 +226,7 @@ export default defineComponent({
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
         <validate-project-instructions
@@ -302,7 +304,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -318,7 +320,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />

From e49abbb814175503c306597e93ea48e1112b3274 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 29 Jul 2024 15:51:36 +0200
Subject: [PATCH 20/23] feat(project-find): restrict dialog width on wide
 screens

---
 src/components/ProjectInfo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProjectInfo.vue b/src/components/ProjectInfo.vue
index 35cb2b9..55b1f64 100644
--- a/src/components/ProjectInfo.vue
+++ b/src/components/ProjectInfo.vue
@@ -59,7 +59,7 @@ export default defineComponent({
     color="primary"
     @click="toggleDialog()"
   />
-  <v-dialog v-model="dialog" max-width="70vw">
+  <v-dialog v-model="dialog" width="80vw" max-width="1024">
     <v-card v-click-outside="toggleDialog" class="pa-3">
       <v-tabs v-model="activeTab">
         <v-tab

From 53b0bc98e48a55af4d6470b4bd74168bad179560 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 29 Jul 2024 16:52:05 +0200
Subject: [PATCH 21/23] feat(i18n): restructure project instruction
 translations

---
 src/components/CompareProjectInstructions.vue | 18 ++++-----
 .../DigitizeProjectInstructions.vue           | 16 ++++----
 src/components/FindProjectInstructions.vue    | 20 +++++-----
 src/components/MediaProjectInstructions.vue   | 14 +++----
 .../ValidateProjectInstructions.vue           | 18 ++++-----
 src/i18n/locales/de.json                      | 37 ++++++++++---------
 src/i18n/locales/en.json                      | 36 +++++++++---------
 7 files changed, 80 insertions(+), 79 deletions(-)

diff --git a/src/components/CompareProjectInstructions.vue b/src/components/CompareProjectInstructions.vue
index f42d68a..de622d5 100644
--- a/src/components/CompareProjectInstructions.vue
+++ b/src/components/CompareProjectInstructions.vue
@@ -21,9 +21,9 @@ export default defineComponent({
 
 <template>
   <v-card-text>
-    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
     <div class="text-p">
-      {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
+      {{ instructionMessage }}. {{ $t('projectInstructions.classifyInstruction') }}.
     </div>
 
     <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
@@ -41,37 +41,37 @@ export default defineComponent({
       <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
     </v-row>
 
-    <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.whereIamTitle') }}</div>
     <div class="text-p mt-2">
       <v-row align="center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
         </v-col>
-        <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
+        <v-col>{{ $t('projectInstructions.whereIamInstruction') }}</v-col>
       </v-row>
     </div>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
           <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
         </v-col>
-        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
       </v-row>
     </div>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-content-save" color="primary" variant="text" />
         </v-col>
-        <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
     <div class="text-p">{{ attribution }}</div>
   </v-card-text>
 </template>
diff --git a/src/components/DigitizeProjectInstructions.vue b/src/components/DigitizeProjectInstructions.vue
index c14bfea..902c675 100644
--- a/src/components/DigitizeProjectInstructions.vue
+++ b/src/components/DigitizeProjectInstructions.vue
@@ -39,26 +39,26 @@ export default defineComponent({
         <v-col>{{ $t('digitizeProjectInstructions.deleteFeature') }}</v-col>
       </v-row>
     </div>
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
           <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
         </v-col>
-        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
       </v-row>
-      <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
+      <div class="text-h6 mt-10">{{ $t('projectInstructions.toggleOpacityTitle') }}</div>
       <div class="text-p mt-2">
         <v-row align="center" dense>
           <v-col cols="auto" class="mr-4">
             <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
           </v-col>
-          <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+          <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
         </v-row>
       </div>
 
-      <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
+      <div class="text-h6 mt-10">{{ $t('projectInstructions.resetTitle') }}</div>
       <div class="text-p mt-2">
         <v-row align="center" dense>
           <v-col cols="auto" class="mr-4">
@@ -71,17 +71,17 @@ export default defineComponent({
             >
             </v-btn>
           </v-col>
-          <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
+          <v-col>{{ $t('projectInstructions.resetInstruction') }}</v-col>
         </v-row>
       </div>
 
-      <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+      <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
       <div class="text-p mt-2">
         <v-row class="align-center" dense>
           <v-col cols="auto" class="mr-4">
             <v-btn icon="mdi-content-save" color="primary" variant="text" />
           </v-col>
-          <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+          <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
         </v-row>
       </div>
     </div>
diff --git a/src/components/FindProjectInstructions.vue b/src/components/FindProjectInstructions.vue
index 78ca5c4..1132682 100644
--- a/src/components/FindProjectInstructions.vue
+++ b/src/components/FindProjectInstructions.vue
@@ -35,9 +35,9 @@ export default defineComponent({
 
 <template>
   <v-card-text>
-    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
     <div class="text-p">
-      {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
+      {{ instructionMessage }}. {{ $t('projectInstructions.classifyInstruction') }}.
     </div>
     <v-row class="mt-2" dense>
       <v-col sm="auto" lg="auto" v-for="(option, index) in options" :key="index">
@@ -104,7 +104,7 @@ export default defineComponent({
     </div>
     <span v-if="exampleTileUrls[1]">
       <div class="text-h6 mt-10">
-        {{ $t('findProjectInstructions.toggleOpacityTitle') }}
+        {{ $t('projectInstructions.toggleOpacityTitle') }}
       </div>
       <div class="text-p mt-2">
         <v-row class="align-center" dense>
@@ -116,22 +116,22 @@ export default defineComponent({
               variant="text"
             />
           </v-col>
-          <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+          <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
         </v-row>
       </div>
     </span>
-    <div class="text-h6 mt-10">{{ $t('compareProjectInstructions.whereIamTitle') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.whereIamTitle') }}</div>
     <div class="text-p mt-2">
       <v-row align="center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
         </v-col>
-        <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
+        <v-col>{{ $t('projectInstructions.whereIamInstruction') }}</v-col>
       </v-row>
     </div>
 
     <div class="text-h6 mt-10">
-      {{ $t('findProjectInstructions.useButtonsToNavigate') }}
+      {{ $t('projectInstructions.useButtonsToNavigate') }}
     </div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
@@ -149,16 +149,16 @@ export default defineComponent({
         <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
       </v-row>
     </div>
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-content-save" color="primary" variant="text" />
         </v-col>
-        <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
     <div class="text-p">{{ attribution }}</div>
   </v-card-text>
 </template>
diff --git a/src/components/MediaProjectInstructions.vue b/src/components/MediaProjectInstructions.vue
index 1cfcb6c..5090c27 100644
--- a/src/components/MediaProjectInstructions.vue
+++ b/src/components/MediaProjectInstructions.vue
@@ -21,9 +21,9 @@ export default defineComponent({
 
 <template>
   <v-card-text>
-    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
     <div class="text-p">
-      {{ instructionMessage }} {{ $t('validateProjectInstructions.classifyInstruction') }}.
+      {{ instructionMessage }} {{ $t('projectInstructions.classifyInstruction') }}.
     </div>
 
     <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
@@ -41,27 +41,27 @@ export default defineComponent({
       <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
     </v-row>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
           <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
         </v-col>
-        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
       </v-row>
     </div>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-content-save" color="primary" variant="text" />
         </v-col>
-        <v-col>{{ $t('findProjectInstructions.seenAll') }}</v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
       </v-row>
     </div>
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
     <div class="text-p">{{ attribution }}</div>
   </v-card-text>
 </template>
diff --git a/src/components/ValidateProjectInstructions.vue b/src/components/ValidateProjectInstructions.vue
index c508cc8..ea122ed 100644
--- a/src/components/ValidateProjectInstructions.vue
+++ b/src/components/ValidateProjectInstructions.vue
@@ -17,9 +17,9 @@ export default defineComponent({
 
 <template>
   <v-card-text>
-    <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
     <div class="text-p">
-      {{ instructionMessage }} {{ $t('validateProjectInstructions.classifyInstruction') }}.
+      {{ instructionMessage }} {{ $t('projectInstructions.classifyInstruction') }}.
     </div>
 
     <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
@@ -37,17 +37,17 @@ export default defineComponent({
       <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
     </v-row>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.toggleOpacityTitle') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.toggleOpacityTitle') }}</div>
     <div class="text-p mt-2">
       <v-row align="center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn color="primary" icon="mdi-eye" size="small" variant="text"> </v-btn>
         </v-col>
-        <v-col>{{ $t('findProjectInstructions.toggleOpacityInstruction') }}.</v-col>
+        <v-col>{{ $t('projectInstructions.toggleOpacityInstruction') }}.</v-col>
       </v-row>
     </div>
 
-    <div class="text-h6 mt-10">{{ $t('validateProjectInstructions.resetTitle') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.resetTitle') }}</div>
     <div class="text-p mt-2">
       <v-row align="center" dense>
         <v-col cols="auto" class="mr-4">
@@ -60,22 +60,22 @@ export default defineComponent({
           >
           </v-btn>
         </v-col>
-        <v-col>{{ $t('validateProjectInstructions.resetInstruction') }}</v-col>
+        <v-col>{{ $t('projectInstructions.resetInstruction') }}</v-col>
       </v-row>
     </div>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
           <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
           <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
         </v-col>
-        <v-col>{{ $t('digitizeProjectInstructions.move') }}</v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
       </v-row>
     </div>
 
-    <div class="text-h6 mt-10">{{ $t('findProjectInstructions.saveYourAnswers') }}</div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
     <div class="text-p mt-2">
       <v-row class="align-center" dense>
         <v-col cols="auto" class="mr-4">
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index a8d393b..a993c8d 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -141,10 +141,23 @@
     "resetView": "Ansicht zurücksetzen",
     "close": "Schließen"
   },
+  "projectInstructions": {
+    "classifyTitle": "Klicke oder tippe, um zu klassifizieren",
+    "classifyInstruction": "Klicke oder tippe auf jede Bildkachel, bis die passende Antwort erscheint",
+    "imageCredits": "Bildnachweis",
+    "move": "Zurück und weiter bewegen",
+    "resetTitle": "Ansicht zurücksetzen",
+    "resetInstruction": "Zoom auf die aktuelle Geometrie",
+    "saveYourAnswers": "Speichere deine Antworten",
+    "seenAll": "sobald du alle Bildkacheln gesehen und klassifiziert hast",
+    "toggleOpacityTitle": "Transparenz umschalten",
+    "toggleOpacityInstruction": "Schalte die Transparenz der oberen Schicht für eine bessere Sicht auf die Bildkacheln um",
+    "useButtonsToNavigate": "Navigationstasten",
+    "whereIamTitle": "Wo bin ich?",
+    "whereIamInstruction": "Öffne eine Karte, um zu sehen wo du gerade beiträgst"
+  },
   "findProjectInstructions": {
     "howToContribute": "Wie kann ich beitragen?",
-    "classifyInstruction": "Klicke oder tippe auf jede Bildkachel, bis die passende Antwort erscheint",
-    "classifyTitle": "Klicke oder tippe, um zu klassifizieren",
     "close": "Schließen",
     "moreInfo": "Mehr Info",
     "moveLeft": "Vorherige Seite",
@@ -153,16 +166,10 @@
     "selectTile": "... oder Rechtsklick/Halten, um die Bildkachel der Auswahl hinzuzufügen. Wiederholen, um sie von der Auswahl zu entfernen",
     "selectAll": "Alle Bildkacheln der aktuellen Ansicht auswählen. Wiederholen, um die Auswahl zu leeren",
     "selectionInstruction": "Jeder Klick zur Klassifizierung wird auf alle Bildkacheln in der Auswahl angewandt",
-    "useButtonsToNavigate": "Navigationstasten",
     "moveColumn": "Spaltenweise links/rechts bewegen",
     "movePage": "Seitenweise links/rechts bewegen",
-    "toggleOpacityTitle": "Transparenz umschalten",
-    "toggleOpacityInstruction": "Schalte die Transparenz der oberen Schicht für eine bessere Sicht auf die Bildkacheln um",
     "haveCloserLook": "Schau genauer hin",
-    "magnifyInstruction": "Klicke das Symbol in der oberen rechten Ecke der Bildkachel, um das Bild zu vergrößern",
-    "saveYourAnswers": "Speichere deine Antworten",
-    "seenAll": ", sobald du alle Bildkacheln gesehen und klassifiziert hast",
-    "imageCredits": "Bildnachweis"
+    "magnifyInstruction": "Klicke das Symbol in der oberen rechten Ecke der Bildkachel, um das Bild zu vergrößern"
   },
   "validateProject": {
     "doesTheShapeOutline": "Ist der Umriss ein {feature}?",
@@ -170,14 +177,13 @@
     "moveRight": "Weiter zum nächsten Umriss"
   },
   "validateProjectInstructions": {
-    "resetTitle": "Ansicht zurücksetzen",
-    "resetInstruction": "Zoom auf die aktuelle Geometrie",
     "seenAll": "sobald du alle Umrisse gesehen und klassifiziert hast.",
     "classifyInstruction": "Benutze die Buttons, um deine Antwort zu geben"
   },
   "compareProject": {
     "before": "Vorher",
-    "after": "Nachher"
+    "after": "Nachher",
+    "lookForChange": "Vergleiche {lookFor}"
   },
   "digitizeProject": {
     "moveLeft": "Zurück",
@@ -186,10 +192,6 @@
     "modify": "Bearbeiten",
     "delete": "Löschen"
   },
-  "compareProjectInstructions": {
-    "whereIamTitle": "Wollen Sie wissen, wo Sie kartieren?",
-    "whereIamInstruction": "Öffne eine Karte wo du gerade beiträgst"
-  },
   "mediaProject": {
     "moveLeft": "Zurück",
     "moveRight": "Weiter"
@@ -198,7 +200,6 @@
     "switchMode": "Editiermodus umschalten",
     "drawNewFeature": "Neue Objekte einzeichnen",
     "modifyFeature": "Objekte bearbeiten",
-    "deleteFeature": "Objekte löschen",
-    "move": "Zurück und weiter bewegen"
+    "deleteFeature": "Objekte löschen"
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 6b1085d..df70037 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -141,9 +141,23 @@
     "resetView": "Reset view",
     "close": "Close"
   },
+  "projectInstructions": {
+    "classifyTitle": "Click or tap to classify",
+    "classifyInstruction": "Use buttons to provide your answers",
+    "imageCredits": "Image credits",
+    "move": "Move back and forward",
+    "resetInstruction": "Zoom to the current shape",
+    "resetTitle": "Reset the view",
+    "saveYourAnswers": "Save your answers",
+    "seenAll": "as soon as you have seen and classified all images",
+    "toggleOpacityTitle": "Toggle the overlay opacity",
+    "toggleOpacityInstruction": "For a clearer view of the underlying imagery, toggle the opacity of the overlay",
+    "useButtonsToNavigate": "Use buttons to navigate",
+    "whereIamTitle": "Where am I mapping?",
+    "whereIamInstruction": "Open a map of where you are currently contributing"
+  },
   "findProjectInstructions": {
     "howToContribute": "How to Contribute?",
-    "classifyTitle": "Click or tap to classify",
     "classifyInstruction": "Click or tap each image tile, until the appropriate answer appears",
     "close": "Close",
     "moreInfo": "More Info",
@@ -153,16 +167,10 @@
     "selectTile": "... or right click/hold touch to add a tile to the selection. Repeat to remove the tile from the selection",
     "selectAll": "Select all tiles in view. Repeat to clear selection",
     "selectionInstruction": "Any click to classify applies to all selected tiles",
-    "useButtonsToNavigate": "Use buttons to navigate",
     "moveColumn": "Move left/right by column",
     "movePage": "Move left/right by page",
-    "toggleOpacityTitle": "Toggle the overlay opacity",
-    "toggleOpacityInstruction": "For a clearer view of the underlying imagery, toggle the opacity of the overlay",
     "haveCloserLook": "Have a closer look",
-    "magnifyInstruction": "Click this icon in the upper right corner of a tile to magnify the image",
-    "saveYourAnswers": "Save your answers",
-    "seenAll": "as soon as you have seen and classified all images",
-    "imageCredits": "Image credits"
+    "magnifyInstruction": "Click this icon in the upper right corner of a tile to magnify the image"
   },
   "validateProject": {
     "doesTheShapeOutline": "Does the shape outline a {feature}?",
@@ -170,10 +178,7 @@
     "moveRight": "Forward to next feature"
   },
   "validateProjectInstructions": {
-    "resetTitle": "Reset the view",
-    "resetInstruction": "Zoom to the current shape",
-    "seenAll": "as soon as you have seen and classified all the features.",
-    "classifyInstruction": "Use buttons to provide your answers"
+    "seenAll": "as soon as you have seen and classified all the features."
   },
   "compareProject": {
     "before": "Before",
@@ -187,10 +192,6 @@
     "modify": "Modify",
     "delete": "Delete"
   },
-  "compareProjectInstructions": {
-    "whereIamTitle": "Where am I mapping?",
-    "whereIamInstruction": "Open a map of where you are currently contributing"
-  },
   "mediaProject": {
     "moveLeft": "Back",
     "moveRight": "Forward"
@@ -199,7 +200,6 @@
     "switchMode": "Switch editing mode",
     "drawNewFeature": "Draw new features",
     "modifyFeature": "Modify features",
-    "deleteFeature": "Delete features",
-    "move": "Move back and forward"
+    "deleteFeature": "Delete features"
   }
 }

From e5c614e17e0d39857efee36a142d1e3a49ea8b02 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 29 Jul 2024 17:11:56 +0200
Subject: [PATCH 22/23] docs(project-info): add comments on fallback
 information pages

---
 src/components/CompareProject.vue  | 1 +
 src/components/DigitizeProject.vue | 1 +
 src/components/MediaProject.vue    | 1 +
 src/components/ValidateProject.vue | 6 +++++-
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/CompareProject.vue b/src/components/CompareProject.vue
index 09eaf66..59aa847 100644
--- a/src/components/CompareProject.vue
+++ b/src/components/CompareProject.vue
@@ -120,6 +120,7 @@ export default defineComponent({
       }
     },
     createInformationPages,
+    // currently no fallback information pages defined in mobile map, same here
     createFallbackInformationPages() {
       return undefined
     },
diff --git a/src/components/DigitizeProject.vue b/src/components/DigitizeProject.vue
index 5c1d7a7..38a4fee 100644
--- a/src/components/DigitizeProject.vue
+++ b/src/components/DigitizeProject.vue
@@ -95,6 +95,7 @@ export default defineComponent({
       }
     },
     createInformationPages,
+    // fallback information pages for digitize projects tbd
     createFallbackInformationPages() {
       return undefined
     },
diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index eaeb256..ba78897 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -99,6 +99,7 @@ export default defineComponent({
       }
     },
     createInformationPages,
+    // fallback information pages for media projects tbd (could be similar to find projects)
     createFallbackInformationPages() {
       return undefined
     },
diff --git a/src/components/ValidateProject.vue b/src/components/ValidateProject.vue
index 608ce09..87768cc 100644
--- a/src/components/ValidateProject.vue
+++ b/src/components/ValidateProject.vue
@@ -122,6 +122,7 @@ export default defineComponent({
       }
     },
     createInformationPages,
+    // fallback information pages of mobile app adapted to web app:
     createFallbackInformationPages(tutorial) {
       if (tutorial.lookFor) {
         return [
@@ -130,11 +131,14 @@ export default defineComponent({
               {
                 blockNumber: 1,
                 blockType: 'text',
-                textDescription: "You'll see a shape on an image. Use the buttons to answer.",
+                // web app displays shapes on a web map rather than on a single image
+                textDescription:
+                  "You'll see a shape on an interactive imagery map. Use the buttons to answer.",
               },
               {
                 blockNumber: 2,
                 blockType: 'text',
+                // instead of 'buildings', we get the feature of interest from Firebase (similar as in Find projects)
                 textDescription: 'Does the shape outline a ${tutorial.lookFor}?',
               },
               {

From 357d271e087be5d52b268d99c18040bf50bd2ed6 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 29 Jul 2024 17:13:57 +0200
Subject: [PATCH 23/23] docs(find-project): adapt todo comment

---
 src/components/FindProject.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FindProject.vue b/src/components/FindProject.vue
index 7a12e01..53140f0 100644
--- a/src/components/FindProject.vue
+++ b/src/components/FindProject.vue
@@ -25,7 +25,7 @@ export default defineComponent({
       type: Object,
       require: true,
     },
-    // TODO: change this so that instructions dialog is opened with tutorial, but not with project
+    // TODO: On implementation of interactive tutorials, change this so that instructions dialog is opened with tutorial, but not with project
     first: {
       type: Boolean,
       default: false,