From 7ccd56a8324d6a67f12d3a165457063e69ad172b Mon Sep 17 00:00:00 2001
From: Eilif Hjermann Lindblad <eilifhl@stud.ntnu.no>
Date: Sat, 2 May 2026 13:36:15 +0200
Subject: [PATCH] feat: more task editing (#128)

* allow editing

* add missing pages

* update fetchJson to accept empty json

* fix remove and approve pupils

* show already added teachers

* add task page with creation, deleting and editing

* remove comments

* add edit and create task page

* add pending page

* move store to model, update classroom table

* add confirmation modal

* add option to delete classroom

* remove +

* i18n

* i18n

* update task view and creation

* move task related classroom components to own folder

* update tests

* update task view

* update task view to match stops better

* update task creation and editing

* styling

* update task view

* route to classroom details

* allow seeing unpublished tasks

* update join routing to determine path based on membership

* add option to publish and delete tasks

* add task creation and updating to task store

* remove unused file

* i18n

* reload en.ts

* update routing

* update routing

* add notebook back to pupiltable

* add notebook back to pupiltable

* fix test

* fix build errors

* fix routing for join page

* i18n

* remove double route

* route to task slug

* fix add teacher

* fix merge breaks

* formatting

* formatting

* change id to classroomId to match rest

* comment

* remove comment

* change id to classroomId

* remove double add teacher logic

* fixes

* update names

* fix test

* format

* add options for different types of tasks

* add back targets

* format

* add memebrshipStatus where missing

* add image uploading

* format

* lint

* hide imageselect tasks

* readd things left to find

* avoid navigating withoiut slug

* clear task item metadata when changing type

* increment difficulty if new stop already has difficulty

---------

Co-authored-by: Maria <145002050+marikolafs@users.noreply.github.com>
Co-authored-by: Maria Kristin Olafsdottir <marikola@stud.ntnu.no>
---
 .../components/tasks/TaskItemsEditor.vue      | 109 ++++++-
 .../components/tasks/TaskMetaEditor.vue       | 119 ++++---
 .../components/tasks/TaskOptionEditor.vue     |   6 +-
 .../model/__tests__/task-editor.utils.spec.ts |  74 +++++
 .../tasks/model/task-editor.mappers.ts        | 277 +++++++++++++++++
 .../tasks/model/task-editor.types.ts          | 109 +++++++
 .../tasks/model/task-editor.utils.ts          | 108 +++++++
 src/classrooms/pages/ClassroomTasks.vue       |   8 +
 src/classrooms/pages/EditClassroomTask.vue    | 174 +----------
 src/classrooms/pages/NewClassroomTask.vue     | 204 +-----------
 src/classrooms/pages/TaskEditorPage.vue       | 290 ++++++++++++++++++
 src/classrooms/routes.ts                      |  21 +-
 src/locales/en.ts                             |  46 +++
 src/locales/nb.ts                             |  14 +
 src/stops/api/stops.api.ts                    |  23 ++
 15 files changed, 1152 insertions(+), 430 deletions(-)
 create mode 100644 src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
 create mode 100644 src/classrooms/components/tasks/model/task-editor.mappers.ts
 create mode 100644 src/classrooms/components/tasks/model/task-editor.types.ts
 create mode 100644 src/classrooms/components/tasks/model/task-editor.utils.ts
 create mode 100644 src/classrooms/pages/TaskEditorPage.vue

diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index 447fd95c..4662f56e 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,18 +1,69 @@
 <script setup lang="ts">
-import type { TaskItemResponse, TaskType } from '@/stops/api/stops.api.ts'
+import { computed, reactive } from 'vue'
+import { useAuthStore } from '@/auth/model/auth.store'
+import type { TaskType } from '@/stops/api/stops.api.ts'
+import type { TaskEditorItemDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import TaskOptionEditor from '@/classrooms/components/tasks/TaskOptionEditor.vue'
+import { requestUploadTaskMedia } from '@/stops/api/stops.api.ts'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
+const authStore = useAuthStore()
 
-defineProps<{
-  items: TaskItemResponse[]
+const props = defineProps<{
+  items: TaskEditorItemDraft[]
+  classroomId: number
   taskType: TaskType
 }>()
 
 const emit = defineEmits<{
   remove: [index: number]
 }>()
+
+const uploadingByItemId = reactive<Record<number, boolean>>({})
+const uploadErrorByItemId = reactive<Record<number, string | null>>({})
+
+const allowedUploadTypes = 'image/jpeg,image/png,image/gif,image/webp'
+const isImageTask = computed(
+  () =>
+    props.taskType === 'IMAGE_ASSESSMENT' || props.taskType === 'IMAGE_SELECT',
+)
+
+async function onFileSelected(item: TaskEditorItemDraft, event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0] ?? null
+
+  uploadErrorByItemId[item.id] = null
+
+  if (!file) return
+  if (!authStore.authorizationHeader) {
+    uploadErrorByItemId[item.id] = t('newTask.uploadAuth')
+    input.value = ''
+    return
+  }
+
+  uploadingByItemId[item.id] = true
+
+  try {
+    const result = await requestUploadTaskMedia(
+      props.classroomId,
+      authStore.authorizationHeader,
+      file,
+    )
+    item.mediaUrl = result.url
+  } catch (e) {
+    uploadErrorByItemId[item.id] =
+      e instanceof Error ? e.message : t('newTask.uploadFail')
+  } finally {
+    uploadingByItemId[item.id] = false
+    input.value = ''
+  }
+}
+
+function clearImage(item: TaskEditorItemDraft) {
+  item.mediaUrl = null
+  uploadErrorByItemId[item.id] = null
+}
 </script>
 
 <template>
@@ -52,6 +103,58 @@ const emit = defineEmits<{
         />
       </div>
 
+      <div
+        v-if="isImageTask"
+        class="space-y-3 rounded-xl border bg-slate-50 p-4"
+      >
+        <div class="flex items-center justify-between gap-3">
+          <p class="text-xs font-semibold uppercase text-gray-500">
+            {{ t('newTask.image') }}
+          </p>
+          <label
+            class="inline-flex cursor-pointer items-center rounded-lg border border-blue-200 bg-white px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+          >
+            <input
+              type="file"
+              class="hidden"
+              :accept="allowedUploadTypes"
+              :disabled="uploadingByItemId[item.id]"
+              @change="onFileSelected(item, $event)"
+            />
+            {{
+              uploadingByItemId[item.id]
+                ? t('newTask.uploading')
+                : t('newTask.uploadImage')
+            }}
+          </label>
+        </div>
+
+        <input
+          v-model="item.mediaUrl"
+          :placeholder="t('newTask.imageUrl')"
+          class="input"
+        />
+
+        <p v-if="uploadErrorByItemId[item.id]" class="text-sm text-red-600">
+          {{ uploadErrorByItemId[item.id] }}
+        </p>
+
+        <div v-if="item.mediaUrl" class="space-y-3">
+          <img
+            :src="item.mediaUrl"
+            alt=""
+            class="max-h-72 w-full rounded-xl border border-slate-200 object-contain bg-white"
+          />
+
+          <button
+            type="button"
+            class="text-sm font-medium text-red-600 hover:text-red-700"
+            @click="clearImage(item)"
+          >
+            {{ t('newTask.removeImage') }}
+          </button>
+        </div>
+      </div>
       <div class="pt-2">
         <TaskOptionEditor v-if="item.options" v-model="item.options" />
       </div>
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index 17943750..8e0b89ba 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -1,26 +1,37 @@
 <script setup lang="ts">
-import type { TaskResponse } from '@/stops/api/stops.api.ts'
+import { computed } from 'vue'
+import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import {
+  changeDraftTaskType,
+  createEmptyTaskDraft,
+} from '@/classrooms/components/tasks/model/task-editor.utils'
+import type { TaskType } from '@/stops/api/stops.api'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-const form = defineModel<TaskResponse>({
-  default: () => ({
-    id: 0,
-    classroomId: 0,
-    stopId: 0,
-    createdByTeacherId: 0,
-    title: { en: '', nb: '' },
-    introText: { en: '', nb: '' },
-    difficultyLevel: 1,
-    taskType: 'GENERIC',
-    passingRule: 'ALL_CORRECT',
-    passingScore: null,
-    maxScore: 1,
-    published: false,
-    items: [],
-  }),
+const form = defineModel<TaskEditorDraft>({
+  default: () => createEmptyTaskDraft(0),
 })
+
+const taskTypeOptions: Array<{ value: TaskType; label: string }> = [
+  { value: 'NEWS_COMPARISON', label: 'newTask.news' },
+  { value: 'IMAGE_ASSESSMENT', label: 'newTask.imageAssessment' },
+  { value: 'PASSWORD_EVALUATION', label: 'newTask.passwordEvaluation' },
+  { value: 'SOCIAL_SCENARIO', label: 'newTask.socialScenario' },
+]
+
+const selectedTaskType = computed({
+  get: () => form.value.taskType,
+  set: (taskType: TaskType) => {
+    form.value = changeDraftTaskType(form.value, taskType)
+  },
+})
+
+const localizedFieldClasses =
+  'w-full rounded-xl border border-slate-300 bg-slate-50 px-4 py-3 text-lg text-slate-900 shadow-sm transition focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-100'
+
+const localizedTextareaClasses = `${localizedFieldClasses} min-h-36 resize-y leading-relaxed`
 </script>
 
 <template>
@@ -29,37 +40,67 @@ const form = defineModel<TaskResponse>({
 
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Title</p>
-      <input
-        v-model="form.title.en"
-        :placeholder="t('newTask.et')"
-        class="input"
-      />
-      <input
-        v-model="form.title.nb"
-        :placeholder="t('newTask.nt')"
-        class="input"
-      />
+      <div class="grid gap-3 lg:grid-cols-2">
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.en') }}
+          </span>
+          <input
+            v-model="form.title.en"
+            :placeholder="t('newTask.et')"
+            :class="localizedFieldClasses"
+          />
+        </label>
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.nb') }}
+          </span>
+          <input
+            v-model="form.title.nb"
+            :placeholder="t('newTask.nt')"
+            :class="localizedFieldClasses"
+          />
+        </label>
+      </div>
     </div>
 
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Introduction</p>
-      <textarea
-        v-model="form.introText.en"
-        :placeholder="t('newTask.ei')"
-        class="input"
-      />
-      <textarea
-        v-model="form.introText.nb"
-        :placeholder="t('newTask.ni')"
-        class="input"
-      />
+      <div class="grid gap-3 lg:grid-cols-2">
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.en') }}
+          </span>
+          <textarea
+            v-model="form.introText.en"
+            :placeholder="t('newTask.ei')"
+            :class="localizedTextareaClasses"
+          />
+        </label>
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.nb') }}
+          </span>
+          <textarea
+            v-model="form.introText.nb"
+            :placeholder="t('newTask.ni')"
+            :class="localizedTextareaClasses"
+          />
+        </label>
+      </div>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
       <div class="space-y-2">
         <p class="text-xs uppercase text-gray-500">Type</p>
-        <select v-model="form.taskType" class="input">
-          <option value="NEWS_COMPARISON">{{ t('newTask.news') }}</option>
+        <select v-model="selectedTaskType" class="input">
+          <option
+            v-for="option in taskTypeOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ t(option.label) }}
+          </option>
         </select>
       </div>
 
diff --git a/src/classrooms/components/tasks/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
index adf0f696..09c7cbd3 100644
--- a/src/classrooms/components/tasks/TaskOptionEditor.vue
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { TaskOptionResponse } from '@/stops/api/stops.api.ts'
+import type { TaskEditorOptionDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-const options = defineModel<TaskOptionResponse[]>({
+const options = defineModel<TaskEditorOptionDraft[]>({
   default: () => [],
 })
 
-function ensureExplanation(opt: TaskOptionResponse) {
+function ensureExplanation(opt: TaskEditorOptionDraft) {
   if (!opt.explanationText) {
     opt.explanationText = { en: '', nb: '' }
   }
diff --git a/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts b/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
new file mode 100644
index 00000000..d5a2d3db
--- /dev/null
+++ b/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+
+import { taskEditorDraftToTaskForm } from '@/classrooms/components/tasks/model/task-editor.mappers'
+import type { NewsComparisonDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import { changeDraftTaskType } from '@/classrooms/components/tasks/model/task-editor.utils'
+
+function createNewsComparisonDraft(): NewsComparisonDraft {
+  return {
+    id: 1,
+    classroomId: 2,
+    stopId: 3,
+    createdByTeacherId: 4,
+    title: { en: 'Title', nb: 'Tittel' },
+    introText: { en: '', nb: '' },
+    difficultyLevel: 1,
+    taskType: 'NEWS_COMPARISON',
+    passingRule: 'ALL_CORRECT',
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [
+      {
+        id: 5,
+        itemOrder: 1,
+        promptText: { en: 'Prompt', nb: 'Ledetekst' },
+        mediaUrl: null,
+        metadataJson: JSON.stringify({
+          articles: [
+            {
+              optionOrder: 1,
+              domain: 'example.test',
+              headline: { en: 'Old', nb: 'Gammel' },
+              body: null,
+              mediaUrl: null,
+            },
+          ],
+        }),
+        options: [],
+      },
+    ],
+    parsedMetadata: {
+      articlesByItemOrder: {
+        1: [
+          {
+            optionOrder: 1,
+            domain: 'example.test',
+            headline: { en: 'Old', nb: 'Gammel' },
+            body: null,
+            mediaUrl: null,
+          },
+        ],
+      },
+    },
+  }
+}
+
+describe('changeDraftTaskType', () => {
+  it('clears item metadata when changing task type', () => {
+    const draft = changeDraftTaskType(
+      createNewsComparisonDraft(),
+      'PASSWORD_EVALUATION',
+    )
+
+    expect(draft.items[0]?.metadataJson).toBeNull()
+    expect(taskEditorDraftToTaskForm(draft).items[0]?.metadataJson).toBeNull()
+  })
+
+  it('preserves item metadata when keeping the same task type', () => {
+    const original = createNewsComparisonDraft()
+    const draft = changeDraftTaskType(original, 'NEWS_COMPARISON')
+
+    expect(draft.items[0]?.metadataJson).toBe(original.items[0]?.metadataJson)
+  })
+})
diff --git a/src/classrooms/components/tasks/model/task-editor.mappers.ts b/src/classrooms/components/tasks/model/task-editor.mappers.ts
new file mode 100644
index 00000000..658a3c06
--- /dev/null
+++ b/src/classrooms/components/tasks/model/task-editor.mappers.ts
@@ -0,0 +1,277 @@
+import type {
+  ImageSelectHeaderMeta,
+  ImageSelectHotspotMeta,
+  NewsComparisonTaskMeta,
+  TaskForm,
+  TaskResponse,
+} from '@/stops/api/stops.api'
+import type {
+  ImageAssessmentDraft,
+  ImageSelectDraft,
+  NewsComparisonDraft,
+  PasswordEvaluationDraft,
+  SocialScenarioDraft,
+  TaskEditorDraft,
+  TaskEditorItemDraft,
+  TaskEditorOptionDraft,
+  UnsupportedTaskDraft,
+} from '@/classrooms/components/tasks/model/task-editor.types'
+
+function cloneOptions(
+  options: TaskResponse['items'][number]['options'],
+): TaskEditorOptionDraft[] {
+  return options.map((option) => ({
+    id: option.id,
+    optionOrder: option.optionOrder,
+    optionText: { ...option.optionText },
+    isCorrect: option.isCorrect ?? false,
+    explanationText: { ...option.explanationText },
+  }))
+}
+
+function cloneItems(items: TaskResponse['items']): TaskEditorItemDraft[] {
+  return items.map((item) => ({
+    id: item.id,
+    itemOrder: item.itemOrder,
+    promptText: { ...item.promptText },
+    mediaUrl: item.mediaUrl,
+    metadataJson: item.metadataJson,
+    options: cloneOptions(item.options),
+  }))
+}
+
+function parseJson<T>(value: string | null): T | null {
+  if (!value) return null
+
+  try {
+    return JSON.parse(value) as T
+  } catch {
+    return null
+  }
+}
+
+function createBaseDraft(task: TaskResponse) {
+  return {
+    id: task.id,
+    classroomId: task.classroomId,
+    stopId: task.stopId,
+    createdByTeacherId: task.createdByTeacherId,
+    title: { ...task.title },
+    introText: { ...task.introText },
+    difficultyLevel: task.difficultyLevel,
+    taskType: task.taskType,
+    passingRule: task.passingRule,
+    passingScore: task.passingScore,
+    maxScore: task.maxScore,
+    published: task.published,
+    items: cloneItems(task.items),
+  }
+}
+
+function mapNewsComparisonDraft(task: TaskResponse): NewsComparisonDraft {
+  const base = createBaseDraft(task)
+  const articlesByItemOrder: Record<
+    number,
+    NewsComparisonDraft['parsedMetadata']['articlesByItemOrder'][number]
+  > = {}
+
+  for (const item of task.items) {
+    const parsed = parseJson<NewsComparisonTaskMeta>(item.metadataJson)
+    articlesByItemOrder[item.itemOrder] = parsed?.articles ?? []
+  }
+
+  return {
+    ...base,
+    taskType: 'NEWS_COMPARISON',
+    parsedMetadata: {
+      articlesByItemOrder,
+    },
+  }
+}
+
+function mapImageAssessmentDraft(task: TaskResponse): ImageAssessmentDraft {
+  const base = createBaseDraft(task)
+  const rolesByItemOrder: Record<
+    number,
+    'imageChoice' | 'reasonChoice' | null
+  > = {}
+
+  for (const item of task.items) {
+    const parsed = parseJson<{ role?: unknown }>(item.metadataJson)
+    rolesByItemOrder[item.itemOrder] =
+      parsed?.role === 'imageChoice' || parsed?.role === 'reasonChoice'
+        ? parsed.role
+        : null
+  }
+
+  return {
+    ...base,
+    taskType: 'IMAGE_ASSESSMENT',
+    parsedMetadata: {
+      rolesByItemOrder,
+    },
+  }
+}
+
+function mapImageSelectDraft(task: TaskResponse): ImageSelectDraft {
+  const base = createBaseDraft(task)
+  const headerMediaByItemOrder: Record<
+    number,
+    ImageSelectHeaderMeta['mediaUrl'] | null
+  > = {}
+  const hotspotsByItemOrder: Record<number, ImageSelectHotspotMeta | null> = {}
+
+  for (const item of task.items) {
+    if (item.itemOrder === 1) {
+      const parsed = parseJson<ImageSelectHeaderMeta>(item.metadataJson)
+      headerMediaByItemOrder[item.itemOrder] = parsed?.mediaUrl ?? null
+      continue
+    }
+
+    const parsed = parseJson<ImageSelectHotspotMeta>(item.metadataJson)
+    hotspotsByItemOrder[item.itemOrder] = parsed
+  }
+
+  return {
+    ...base,
+    taskType: 'IMAGE_SELECT',
+    parsedMetadata: {
+      headerMediaByItemOrder,
+      hotspotsByItemOrder,
+    },
+  }
+}
+
+function mapPasswordEvaluationDraft(
+  task: TaskResponse,
+): PasswordEvaluationDraft {
+  const base = createBaseDraft(task)
+  const itemMetadataByItemOrder: PasswordEvaluationDraft['parsedMetadata']['itemMetadataByItemOrder'] =
+    {}
+
+  for (const item of task.items) {
+    itemMetadataByItemOrder[item.itemOrder] = parseJson(item.metadataJson)
+  }
+
+  return {
+    ...base,
+    taskType: 'PASSWORD_EVALUATION',
+    parsedMetadata: {
+      itemMetadataByItemOrder,
+    },
+  }
+}
+
+function mapSocialScenarioDraft(task: TaskResponse): SocialScenarioDraft {
+  const base = createBaseDraft(task)
+  const actionsByItemOrder: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'] =
+    {}
+
+  for (const item of task.items) {
+    const parsed = parseJson<{
+      actions?: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'][number]
+    }>(item.metadataJson)
+    actionsByItemOrder[item.itemOrder] = parsed?.actions ?? []
+  }
+
+  return {
+    ...base,
+    taskType: 'SOCIAL_SCENARIO',
+    parsedMetadata: {
+      actionsByItemOrder,
+    },
+  }
+}
+
+function mapUnsupportedDraft(task: TaskResponse): UnsupportedTaskDraft {
+  return {
+    ...createBaseDraft(task),
+    taskType: task.taskType as UnsupportedTaskDraft['taskType'],
+    parsedMetadata: {},
+  }
+}
+
+function serializeMetadata(
+  item: TaskEditorItemDraft,
+  draft: TaskEditorDraft,
+): string | null {
+  switch (draft.taskType) {
+    case 'NEWS_COMPARISON': {
+      const articles = draft.parsedMetadata.articlesByItemOrder[item.itemOrder]
+      return articles ? JSON.stringify({ articles }) : item.metadataJson
+    }
+    case 'IMAGE_ASSESSMENT': {
+      const role = draft.parsedMetadata.rolesByItemOrder[item.itemOrder]
+      return role ? JSON.stringify({ role }) : item.metadataJson
+    }
+    case 'IMAGE_SELECT': {
+      if (item.itemOrder === 1) {
+        const mediaUrl =
+          draft.parsedMetadata.headerMediaByItemOrder[item.itemOrder]
+        return mediaUrl ? JSON.stringify({ mediaUrl }) : item.metadataJson
+      }
+
+      const hotspot = draft.parsedMetadata.hotspotsByItemOrder[item.itemOrder]
+      return hotspot ? JSON.stringify(hotspot) : item.metadataJson
+    }
+    case 'PASSWORD_EVALUATION': {
+      const metadata =
+        draft.parsedMetadata.itemMetadataByItemOrder[item.itemOrder]
+      return metadata ? JSON.stringify(metadata) : item.metadataJson
+    }
+    case 'SOCIAL_SCENARIO': {
+      const actions = draft.parsedMetadata.actionsByItemOrder[item.itemOrder]
+      return actions ? JSON.stringify({ actions }) : item.metadataJson
+    }
+    default:
+      return item.metadataJson
+  }
+}
+
+export function createTaskEditorDraft(task: TaskResponse): TaskEditorDraft {
+  switch (task.taskType) {
+    case 'NEWS_COMPARISON':
+      return mapNewsComparisonDraft(task)
+    case 'IMAGE_ASSESSMENT':
+      return mapImageAssessmentDraft(task)
+    case 'IMAGE_SELECT':
+      return mapImageSelectDraft(task)
+    case 'PASSWORD_EVALUATION':
+      return mapPasswordEvaluationDraft(task)
+    case 'SOCIAL_SCENARIO':
+      return mapSocialScenarioDraft(task)
+    default:
+      return mapUnsupportedDraft(task)
+  }
+}
+
+export function taskEditorDraftToTaskForm(draft: TaskEditorDraft): TaskForm {
+  return {
+    stopId: draft.stopId,
+    title: { ...draft.title },
+    introText: { ...draft.introText },
+    difficultyLevel: draft.difficultyLevel,
+    taskType: draft.taskType,
+    passingRule: draft.passingRule,
+    passingScore: draft.passingScore,
+    maxScore: draft.maxScore,
+    items: draft.items
+      .slice()
+      .sort((a, b) => a.itemOrder - b.itemOrder)
+      .map((item) => ({
+        itemOrder: item.itemOrder,
+        promptText: { ...item.promptText },
+        mediaUrl: item.mediaUrl,
+        metadataJson: serializeMetadata(item, draft),
+        options: item.options
+          .slice()
+          .sort((a, b) => a.optionOrder - b.optionOrder)
+          .map((option) => ({
+            optionOrder: option.optionOrder,
+            optionText: { ...option.optionText },
+            isCorrect: option.isCorrect,
+            explanationText: { ...option.explanationText },
+          })),
+      })),
+  }
+}
diff --git a/src/classrooms/components/tasks/model/task-editor.types.ts b/src/classrooms/components/tasks/model/task-editor.types.ts
new file mode 100644
index 00000000..7ea8f005
--- /dev/null
+++ b/src/classrooms/components/tasks/model/task-editor.types.ts
@@ -0,0 +1,109 @@
+import type {
+  ImageSelectHeaderMeta,
+  ImageSelectHotspotMeta,
+  LocalizedOptionalText,
+  LocalizedText,
+  NewsComparisonArticleMeta,
+  TaskForm,
+  TaskType,
+} from '@/stops/api/stops.api'
+
+export type TaskEditorCommonFields = Omit<TaskForm, 'items'>
+
+export interface TaskEditorOptionDraft {
+  id: number
+  optionOrder: number
+  optionText: LocalizedText
+  isCorrect: boolean
+  explanationText: LocalizedOptionalText
+}
+
+export interface TaskEditorItemDraft {
+  id: number
+  itemOrder: number
+  promptText: LocalizedText
+  mediaUrl: string | null
+  metadataJson: string | null
+  options: TaskEditorOptionDraft[]
+}
+
+export interface TaskEditorDraftBase extends TaskEditorCommonFields {
+  id: number
+  classroomId: number
+  createdByTeacherId: number
+  published: boolean
+  items: TaskEditorItemDraft[]
+}
+
+export interface NewsComparisonDraft extends TaskEditorDraftBase {
+  taskType: 'NEWS_COMPARISON'
+  parsedMetadata: {
+    articlesByItemOrder: Record<number, NewsComparisonArticleMeta[]>
+  }
+}
+
+export interface ImageAssessmentDraft extends TaskEditorDraftBase {
+  taskType: 'IMAGE_ASSESSMENT'
+  parsedMetadata: {
+    rolesByItemOrder: Record<number, 'imageChoice' | 'reasonChoice' | null>
+  }
+}
+
+export interface ImageSelectDraft extends TaskEditorDraftBase {
+  taskType: 'IMAGE_SELECT'
+  parsedMetadata: {
+    headerMediaByItemOrder: Record<
+      number,
+      ImageSelectHeaderMeta['mediaUrl'] | null
+    >
+    hotspotsByItemOrder: Record<number, ImageSelectHotspotMeta | null>
+  }
+}
+
+export interface PasswordEvaluationItemMetadataDraft {
+  role?: string
+  passOptionOrder?: number
+  failOptionOrder?: number
+}
+
+export interface PasswordEvaluationDraft extends TaskEditorDraftBase {
+  taskType: 'PASSWORD_EVALUATION'
+  parsedMetadata: {
+    itemMetadataByItemOrder: Record<
+      number,
+      PasswordEvaluationItemMetadataDraft | null
+    >
+  }
+}
+
+export interface SocialScenarioActionDraft {
+  order: number
+  label: LocalizedText
+}
+
+export interface SocialScenarioDraft extends TaskEditorDraftBase {
+  taskType: 'SOCIAL_SCENARIO'
+  parsedMetadata: {
+    actionsByItemOrder: Record<number, SocialScenarioActionDraft[]>
+  }
+}
+
+export interface UnsupportedTaskDraft extends TaskEditorDraftBase {
+  taskType: Exclude<
+    TaskType,
+    | 'NEWS_COMPARISON'
+    | 'IMAGE_ASSESSMENT'
+    | 'IMAGE_SELECT'
+    | 'PASSWORD_EVALUATION'
+    | 'SOCIAL_SCENARIO'
+  >
+  parsedMetadata: Record<string, never>
+}
+
+export type TaskEditorDraft =
+  | NewsComparisonDraft
+  | ImageAssessmentDraft
+  | ImageSelectDraft
+  | PasswordEvaluationDraft
+  | SocialScenarioDraft
+  | UnsupportedTaskDraft
diff --git a/src/classrooms/components/tasks/model/task-editor.utils.ts b/src/classrooms/components/tasks/model/task-editor.utils.ts
new file mode 100644
index 00000000..2b0055f6
--- /dev/null
+++ b/src/classrooms/components/tasks/model/task-editor.utils.ts
@@ -0,0 +1,108 @@
+import type {
+  TaskEditorDraft,
+  TaskEditorItemDraft,
+} from '@/classrooms/components/tasks/model/task-editor.types'
+import type { TaskType } from '@/stops/api/stops.api'
+
+export function createEmptyTaskDraft(classroomId: number): TaskEditorDraft {
+  return {
+    id: 0,
+    classroomId,
+    stopId: 0,
+    createdByTeacherId: 0,
+    title: { en: '', nb: '' },
+    introText: { en: '', nb: '' },
+    difficultyLevel: 1,
+    taskType: 'NEWS_COMPARISON',
+    passingRule: 'ALL_CORRECT',
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [],
+    parsedMetadata: {
+      articlesByItemOrder: {},
+    },
+  }
+}
+
+export function createEmptyTaskItemDraft(
+  itemOrder: number,
+): TaskEditorItemDraft {
+  return {
+    id: Date.now(),
+    itemOrder,
+    promptText: { en: '', nb: '' },
+    mediaUrl: null,
+    metadataJson: null,
+    options: [],
+  }
+}
+
+export function changeDraftTaskType(
+  draft: TaskEditorDraft,
+  taskType: TaskType,
+): TaskEditorDraft {
+  const items =
+    draft.taskType === taskType
+      ? draft.items
+      : draft.items.map((item) => ({
+          ...item,
+          metadataJson: null,
+        }))
+
+  const base = {
+    ...draft,
+    taskType,
+    items,
+  }
+
+  switch (taskType) {
+    case 'NEWS_COMPARISON':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          articlesByItemOrder: {},
+        },
+      }
+    case 'IMAGE_ASSESSMENT':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          rolesByItemOrder: {},
+        },
+      }
+    case 'IMAGE_SELECT':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          headerMediaByItemOrder: {},
+          hotspotsByItemOrder: {},
+        },
+      }
+    case 'PASSWORD_EVALUATION':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          itemMetadataByItemOrder: {},
+        },
+      }
+    case 'SOCIAL_SCENARIO':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          actionsByItemOrder: {},
+        },
+      }
+    default:
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {},
+      }
+  }
+}
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index ac547fe0..a455ea65 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -215,7 +215,15 @@ watch(
           />
 
           <div class="flex justify-end gap-2">
+            <span
+              v-if="task.taskType === 'IMAGE_SELECT'"
+              class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm text-gray-500"
+            >
+              {{ t('taskOverview.imageSelectLocked') }}
+            </span>
+
             <button
+              v-else
               class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
               @click="goToEdit(task.id)"
             >
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index 3e89f725..3e188a3f 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -1,177 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useI18n } from 'vue-i18n'
-import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
-import {
-  requestCreateTask,
-  requestTask,
-  requestUpdateTask,
-  type TaskResponse,
-} from '@/stops/api/stops.api'
-
-import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
-import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
-
-const route = useRoute()
-const router = useRouter()
-const authStore = useAuthStore()
-
-const { t } = useI18n()
-
-const classroomId = computed(() => Number(route.params.classroomId))
-const { stops } = useTeacherStops(classroomId)
-const taskId = route.params.taskId ? Number(route.params.taskId) : null
-
-const isEditMode = computed(() => taskId !== null)
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-
-const form = ref<TaskResponse>({
-  id: 0,
-  classroomId: classroomId.value,
-  stopId: 1,
-  createdByTeacherId: 0,
-  title: { en: '', nb: '' },
-  introText: { en: '', nb: '' },
-  difficultyLevel: 1,
-  taskType: 'GENERIC',
-  passingRule: 'ALL_CORRECT',
-  passingScore: null,
-  maxScore: 1,
-  published: false,
-  items: [],
-})
-
-const selectedStop = computed(() =>
-  stops.value.find((s) => s.stopId === form.value.stopId),
-)
-
-async function load() {
-  if (!taskId) return
-  if (!authStore.authorizationHeader) return
-
-  loading.value = true
-  error.value = null
-
-  try {
-    const data = await requestTask(
-      classroomId.value,
-      taskId,
-      authStore.authorizationHeader,
-    )
-
-    form.value = data
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : t('newTask.savefail')
-  } finally {
-    loading.value = false
-  }
-}
-
-function addItem() {
-  form.value.items.push({
-    id: Date.now(),
-    itemOrder: form.value.items.length + 1,
-    promptText: { en: '', nb: '' },
-    mediaUrl: null,
-    metadataJson: null,
-    options: [],
-  })
-}
-
-async function save() {
-  if (!authStore.authorizationHeader) return
-
-  loading.value = true
-  error.value = null
-
-  try {
-    if (isEditMode.value && taskId !== null) {
-      await requestUpdateTask(
-        classroomId.value,
-        taskId,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    } else {
-      await requestCreateTask(
-        classroomId.value,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    }
-
-    const slug = selectedStop.value?.slug
-
-    if (!slug) {
-      error.value = 'Could not determine stop slug'
-      return
-    }
-
-    await router.push({
-      name: 'classroom-tasks',
-      params: {
-        classroomId: classroomId.value,
-        slug,
-      },
-    })
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : t('newTask.savefail')
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(load)
+import TaskEditorPage from '@/classrooms/pages/TaskEditorPage.vue'
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl px-6 py-8 pt-28 space-y-8">
-    <div class="space-y-1">
-      <h1 class="text-3xl font-bold text-gray-900">
-        {{ isEditMode ? 'Edit Task' : 'Create Task' }}
-      </h1>
-
-      <p v-if="error" class="text-sm text-red-600">
-        {{ error }}
-      </p>
-    </div>
-
-    <TaskMetaEditor v-model="form" />
-
-    <div class="flex items-center justify-between pt-2">
-      <h2 class="text-xl font-semibold text-gray-900">
-        {{ t('newTask.item') }}
-      </h2>
-
-      <button
-        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
-        @click="addItem"
-      >
-        {{ t('newTask.additem') }}
-      </button>
-    </div>
-
-    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
-
-    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
-      <button
-        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
-        @click="router.back()"
-      >
-        {{ t('newTask.cancel') }}
-      </button>
-
-      <button
-        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 transition disabled:opacity-50"
-        :disabled="loading"
-        @click="save"
-      >
-        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
-      </button>
-    </div>
-  </div>
+  <TaskEditorPage />
 </template>
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 9a4b2db7..3e188a3f 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -1,207 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useI18n } from 'vue-i18n'
-
-import {
-  requestCreateTask,
-  requestTask,
-  requestUpdateTask,
-  type TaskResponse,
-} from '@/stops/api/stops.api'
-
-import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
-import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
-import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
-
-const route = useRoute()
-const router = useRouter()
-const authStore = useAuthStore()
-
-const { t } = useI18n()
-
-const classroomId = computed(() => Number(route.params.classroomId))
-const taskId = route.params.taskId ? Number(route.params.taskId) : null
-
-const isEditMode = computed(() => taskId !== null)
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-
-const {
-  stops,
-  status: stopsStatus,
-  error: stopsError,
-} = useTeacherStops(classroomId)
-
-const selectedStopId = ref<number | null>(null)
-
-const form = ref<TaskResponse>({
-  id: 0,
-  classroomId: classroomId.value,
-  stopId: 0,
-  createdByTeacherId: 0,
-  title: { en: '', nb: '' },
-  introText: { en: '', nb: '' },
-  difficultyLevel: 1,
-  taskType: 'GENERIC',
-  passingRule: 'ALL_CORRECT',
-  passingScore: null,
-  maxScore: 1,
-  published: false,
-  items: [],
-})
-
-async function load() {
-  if (!taskId || !authStore.authorizationHeader) return
-
-  loading.value = true
-  try {
-    const task = await requestTask(
-      classroomId.value,
-      taskId,
-      authStore.authorizationHeader,
-    )
-
-    form.value = task
-    selectedStopId.value = task.stopId
-  } finally {
-    loading.value = false
-  }
-}
-
-watch(stops, (newStops) => {
-  if (!selectedStopId.value && newStops.length > 0) {
-    selectedStopId.value = newStops[0]!.stopId
-  }
-})
-
-function addItem() {
-  form.value.items.push({
-    id: Date.now(),
-    itemOrder: form.value.items.length + 1,
-    promptText: { en: '', nb: '' },
-    mediaUrl: null,
-    metadataJson: null,
-    options: [],
-  })
-}
-
-async function save() {
-  if (!authStore.authorizationHeader || selectedStopId.value === null) return
-
-  loading.value = true
-  error.value = null
-
-  try {
-    form.value.stopId = selectedStopId.value
-
-    if (isEditMode.value) {
-      await requestUpdateTask(
-        classroomId.value,
-        taskId!,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    } else {
-      await requestCreateTask(
-        classroomId.value,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    }
-
-    const selectedStop = computed(() =>
-      stops.value.find((s) => s.stopId === selectedStopId.value),
-    )
-
-    router.push({
-      name: 'classroom-tasks',
-      params: {
-        classroomId: classroomId.value,
-        slug: selectedStop.value?.slug ?? undefined,
-      },
-    })
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : t('newTask.savefail')
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(load)
+import TaskEditorPage from '@/classrooms/pages/TaskEditorPage.vue'
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
-    <div class="space-y-2">
-      <h1 class="text-3xl font-bold">
-        {{ isEditMode ? t('newTask.edit') : t('newTask.create') }}
-      </h1>
-
-      <p v-if="error" class="text-red-600">
-        {{ error }}
-      </p>
-    </div>
-
-    <div class="space-y-2">
-      <label class="text-sm font-medium text-gray-700">Stop</label>
-
-      <select
-        v-model="selectedStopId"
-        class="w-full rounded-lg border px-3 py-2"
-      >
-        <option disabled :value="null">
-          {{ t('newTask.select') }}
-        </option>
-
-        <option v-for="stop in stops" :key="stop.stopId" :value="stop.stopId">
-          {{ stop.displayOrder }}. {{ stop.title }}
-        </option>
-      </select>
-
-      <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
-        {{ t('newTask.loading') }}
-      </p>
-
-      <p v-if="stopsError" class="text-sm text-red-600">
-        {{ stopsError }}
-      </p>
-    </div>
-
-    <TaskMetaEditor v-model="form" />
-
-    <div class="flex items-center justify-between pt-2">
-      <h2 class="text-xl font-semibold">
-        {{ t('newTask.item') }}
-      </h2>
-
-      <button
-        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
-        @click="addItem"
-      >
-        {{ t('newTask.additem') }}
-      </button>
-    </div>
-
-    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
-
-    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
-      <button
-        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
-        @click="router.back()"
-      >
-        {{ t('newTask.cancel') }}
-      </button>
-
-      <button
-        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
-        :disabled="loading || selectedStopId === null"
-        @click="save"
-      >
-        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
-      </button>
-    </div>
-  </div>
+  <TaskEditorPage />
 </template>
diff --git a/src/classrooms/pages/TaskEditorPage.vue b/src/classrooms/pages/TaskEditorPage.vue
new file mode 100644
index 00000000..cf0818c7
--- /dev/null
+++ b/src/classrooms/pages/TaskEditorPage.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
+import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
+import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
+import {
+  createEmptyTaskDraft,
+  createEmptyTaskItemDraft,
+} from '@/classrooms/components/tasks/model/task-editor.utils'
+import {
+  createTaskEditorDraft,
+  taskEditorDraftToTaskForm,
+} from '@/classrooms/components/tasks/model/task-editor.mappers'
+import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import {
+  requestCreateTask,
+  requestTasksForStop,
+  requestTask,
+  requestUpdateTask,
+  type TaskSummaryResponse,
+} from '@/stops/api/stops.api'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const { t } = useI18n()
+
+const classroomId = computed(() => Number(route.params.classroomId))
+const taskId = computed(() =>
+  route.params.taskId ? Number(route.params.taskId) : null,
+)
+const isEditMode = computed(() => taskId.value !== null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const isSyncingStopDifficulty = ref(false)
+
+const {
+  stops,
+  status: stopsStatus,
+  error: stopsError,
+} = useTeacherStops(classroomId)
+
+const form = ref<TaskEditorDraft>(createEmptyTaskDraft(classroomId.value))
+
+const selectedStop = computed(() =>
+  stops.value.find((stop) => stop.stopId === form.value.stopId),
+)
+
+watch(stops, (nextStops) => {
+  if (form.value.stopId <= 0 && nextStops.length > 0) {
+    form.value.stopId = nextStops[0]!.stopId
+  }
+})
+
+function nextAvailableDifficulty(tasks: TaskSummaryResponse[]) {
+  const usedDifficulties = new Set(
+    tasks
+      .filter((task) => task.id !== taskId.value)
+      .map((task) => task.difficultyLevel),
+  )
+
+  if (!usedDifficulties.has(form.value.difficultyLevel)) {
+    return form.value.difficultyLevel
+  }
+
+  let difficultyLevel = 1
+  while (usedDifficulties.has(difficultyLevel)) {
+    difficultyLevel += 1
+  }
+
+  return difficultyLevel
+}
+
+async function syncDifficultyForStop(stopId: number) {
+  if (!authStore.authorizationHeader || stopId <= 0) return
+
+  isSyncingStopDifficulty.value = true
+
+  try {
+    const tasks = await requestTasksForStop(
+      classroomId.value,
+      stopId,
+      authStore.authorizationHeader,
+    )
+
+    if (form.value.stopId === stopId) {
+      form.value.difficultyLevel = nextAvailableDifficulty(tasks)
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    isSyncingStopDifficulty.value = false
+  }
+}
+
+watch(
+  () => form.value.stopId,
+  (stopId) => {
+    syncDifficultyForStop(stopId)
+  },
+)
+
+async function redirectFromImageSelectTask(stopId: number) {
+  const stop = stops.value.find((candidate) => candidate.stopId === stopId)
+
+  if (stop) {
+    await router.replace({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug: stop.slug,
+      },
+    })
+    return
+  }
+
+  await router.replace({
+    name: 'teacher-classroom-details',
+    params: {
+      classroomId: classroomId.value,
+    },
+  })
+}
+
+async function navigateAfterSave() {
+  const slug = selectedStop.value?.slug
+
+  if (slug) {
+    await router.push({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug,
+      },
+    })
+    return
+  }
+
+  await router.push({
+    name: 'teacher-classroom-details',
+    params: {
+      classroomId: classroomId.value,
+    },
+  })
+}
+
+async function loadTask() {
+  if (!taskId.value || !authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const task = await requestTask(
+      classroomId.value,
+      taskId.value,
+      authStore.authorizationHeader,
+    )
+
+    form.value = createTaskEditorDraft(task)
+
+    if (task.taskType === 'IMAGE_SELECT') {
+      await redirectFromImageSelectTask(task.stopId)
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+function addItem() {
+  form.value.items.push(createEmptyTaskItemDraft(form.value.items.length + 1))
+}
+
+async function save() {
+  if (!authStore.authorizationHeader || form.value.stopId <= 0) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const payload = taskEditorDraftToTaskForm(form.value)
+
+    if (isEditMode.value && taskId.value !== null) {
+      await requestUpdateTask(
+        classroomId.value,
+        taskId.value,
+        payload,
+        authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+        classroomId.value,
+        payload,
+        authStore.authorizationHeader,
+      )
+    }
+
+    await navigateAfterSave()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadTask)
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
+    <div class="space-y-2">
+      <h1 class="text-3xl font-bold">
+        {{ isEditMode ? t('newTask.edit') : t('newTask.create') }}
+      </h1>
+
+      <p v-if="error" class="text-red-600">
+        {{ error }}
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-gray-700">Stop</label>
+
+      <select
+        v-model.number="form.stopId"
+        class="w-full rounded-lg border px-3 py-2"
+      >
+        <option disabled :value="null">
+          {{ t('newTask.select') }}
+        </option>
+
+        <option v-for="stop in stops" :key="stop.stopId" :value="stop.stopId">
+          {{ stop.displayOrder }}. {{ stop.title }}
+        </option>
+      </select>
+
+      <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
+        {{ t('newTask.loading') }}
+      </p>
+
+      <p v-if="stopsError" class="text-sm text-red-600">
+        {{ stopsError }}
+      </p>
+    </div>
+
+    <TaskMetaEditor v-model="form" />
+
+    <div class="flex items-center justify-between pt-2">
+      <h2 class="text-xl font-semibold">
+        {{ t('newTask.item') }}
+      </h2>
+
+      <button
+        class="rounded-lg bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700"
+        @click="addItem"
+      >
+        {{ t('newTask.additem') }}
+      </button>
+    </div>
+
+    <TaskItemsEditor
+      :items="form.items"
+      :classroom-id="classroomId"
+      :task-type="form.taskType"
+    />
+
+    <div class="sticky bottom-0 flex justify-end gap-3 p-4">
+      <button
+        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
+        @click="router.back()"
+      >
+        {{ t('newTask.cancel') }}
+      </button>
+
+      <button
+        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
+        :disabled="loading || isSyncingStopDifficulty || form.stopId <= 0"
+        @click="save"
+      >
+        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index fec88d79..181e137f 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -9,8 +9,7 @@ import TeacherPlaytestMapPage from '@/teacher-playtest/pages/TeacherPlaytestMapP
 import NotificationsPage from '@/notifications/pages/NotificationsPage.vue'
 import TeacherPlaytestStopPage from '@/teacher-playtest/pages/TeacherPlaytestStopPage.vue'
 import ClassroomTasks from '@/classrooms/pages/ClassroomTasks.vue'
-import NewClassroomTask from '@/classrooms/pages/NewClassroomTask.vue'
-import EditClassroomTask from '@/classrooms/pages/EditClassroomTask.vue'
+import TaskEditorPage from '@/classrooms/pages/TaskEditorPage.vue'
 import PendingApproval from '@/classrooms/pages/PendingApproval.vue'
 import TeacherMystery from '@/teacher-mystery/pages/TeacherMystery.vue'
 import TeacherPupilNotebookPage from '@/notebook/pages/TeacherPupilNotebookPage.vue'
@@ -114,25 +113,25 @@ export function createClassroomRoutes(
       },
     },
     {
-      path: 'classrooms/:classroomId/tasks/:slug',
-      name: 'classroom-tasks',
-      component: ClassroomTasks,
+      path: 'classrooms/:classroomId/tasks/new',
+      name: 'new-classroom-task',
+      component: TaskEditorPage,
       meta: {
         backTarget: classroomDetailsBackTarget,
       },
     },
     {
-      path: 'classrooms/:classroomId/tasks/new',
-      name: 'new-classroom-task',
-      component: NewClassroomTask,
+      path: 'classrooms/:classroomId/tasks/:taskId/edit',
+      name: 'edit-classroom-task',
+      component: TaskEditorPage,
       meta: {
         backTarget: classroomDetailsBackTarget,
       },
     },
     {
-      path: 'classrooms/:classroomId/tasks/:taskId',
-      name: 'edit-classroom-task',
-      component: EditClassroomTask,
+      path: 'classrooms/:classroomId/tasks/:slug',
+      name: 'classroom-tasks',
+      component: ClassroomTasks,
       meta: {
         backTarget: classroomDetailsBackTarget,
       },
diff --git a/src/locales/en.ts b/src/locales/en.ts
index f36dd86a..22472043 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -156,6 +156,8 @@ export const en = {
     tasksToRetry: 'Tasks to fix',
     goToTask: 'Go to task',
     welcomeToStop: 'Welcome to {stop}',
+    imageThingsLeftToFind: '{count} things left to find',
+    imageAllThingsFound: 'All things found',
     email: {
       inbox: 'Innboks',
       whatWouldYouDo: 'Hva ville du gjort?',
@@ -1010,6 +1012,50 @@ export const en = {
     },
     joinCode: 'Classroom code',
   },
+  taskOverview: {
+    imageSelectLocked: 'Cannot be edited',
+  },
+  newTask: {
+    savefail: 'Saving failed',
+    edit: 'Edit task',
+    create: 'Create task',
+    select: 'Select stop',
+    loading: 'Loading stop...',
+    additem: 'Add item',
+    cancel: 'Cancel',
+    save: 'Save',
+    stops: 'Stops',
+    remove: 'Remove',
+    item: 'Item',
+    prompt: 'Question',
+    ep: 'English question',
+    np: 'Norwegian question',
+    et: 'English title',
+    nt: 'Norwegian title',
+    ei: 'English introduction',
+    ni: 'Norwegian introduction',
+    news: 'News comparison',
+    imageAssessment: 'Image assessment',
+    imageSelect: 'Image select',
+    passwordEvaluation: 'Password evaluation',
+    socialScenario: 'Social scenario',
+    image: 'Image',
+    imageUrl: 'Image URL',
+    uploadImage: 'Upload image',
+    uploading: 'Uploading...',
+    removeImage: 'Remove image',
+    uploadFail: 'Could not upload image',
+    uploadAuth: 'You must be logged in to upload an image',
+    difficulty: 'Difficulty',
+    options: 'Options',
+    eo: 'English option',
+    no: 'Norwegian option',
+    correct: 'Correct',
+    answer: 'Answer key',
+    ea: 'English explanation',
+    na: 'Norwegian explanation',
+    addoption: 'Add option',
+  },
   classroomModeration: {
     title: 'Word filter',
     description:
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 870c8a43..822644f3 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -158,6 +158,8 @@ export const nb = {
     tasksToRetry: 'Oppgaver å gjenta',
     goToTask: 'Gå til oppgave',
     welcomeToStop: 'Velkommen til {stop}',
+    imageThingsLeftToFind: '{count} ting igjen å finne',
+    imageAllThingsFound: 'Alle ting er funnet',
     email: {
       inbox: 'Innboks',
       whatWouldYouDo: 'Hva ville du gjort?',
@@ -985,6 +987,7 @@ export const nb = {
     unpublished: 'Ikke publisert',
     published: 'Publisert',
     edit: 'Rediger',
+    imageSelectLocked: 'Kan ikke redigeres',
     cancel: 'Avbryt',
   },
   newTask: {
@@ -1007,6 +1010,17 @@ export const nb = {
     ei: 'Engelsk introduksjon',
     ni: 'Norsk introduksjon',
     news: 'Nyhetssammenligning',
+    imageAssessment: 'Bildevurdering',
+    imageSelect: 'Bildevalg',
+    passwordEvaluation: 'Passordvurdering',
+    socialScenario: 'Sosialt scenario',
+    image: 'Bilde',
+    imageUrl: 'Bildeadresse',
+    uploadImage: 'Last opp bilde',
+    uploading: 'Laster opp...',
+    removeImage: 'Fjern bilde',
+    uploadFail: 'Kunne ikke laste opp bildet',
+    uploadAuth: 'Du må være logget inn for å laste opp bilde',
     difficulty: 'Vanskelighetsgrad',
     options: 'Valgmuligheter',
     eo: 'Engelsk valgmulighet',
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 0c7c7525..81b84b70 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -292,6 +292,29 @@ export function requestUpdateTaskPublishState(
   )
 }
 
+export function requestUploadTaskMedia(
+  classroomId: number,
+  authorizationHeader: string,
+  file: File,
+): Promise<{ url: string }> {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  return fetch(`${CLASSROOMS_BASE}/${classroomId}/tasks/upload`, {
+    method: 'POST',
+    headers: { Authorization: authorizationHeader },
+    body: formData,
+    credentials: 'include',
+  }).then(async (response) => {
+    if (!response.ok) {
+      const fallback = `Request failed with status ${response.status}`
+      const errorMessage = await readJsonErrorMessage(response)
+      throw new Error(errorMessage || fallback)
+    }
+
+    return response.json() as Promise<{ url: string }>
+  })
+}
 export function requestDeleteTask(
   classroomId: number,
   taskId: number,