From 4cee4133a8a81321c2c0169191f9dcfca5018704 Mon Sep 17 00:00:00 2001
From: Ivan Procaccini <ivanprocaccini905@gmail.com>
Date: Wed, 2 Oct 2024 12:55:40 +0200
Subject: [PATCH 1/5] feat: implement read-only task components for marking

---
 .../Task/{ => assessment}/index.tsx           |  6 +--
 .../{ => assessment}/variants/CodeTask.tsx    | 10 ++--
 .../{ => assessment}/variants/EssayTask.tsx   |  8 +--
 .../variants/FlagTask.tsx}                    |  6 +--
 .../Task/{ => assessment}/variants/MCQ.tsx    |  8 +--
 .../{ => assessment}/variants/NumberTask.tsx  |  8 +--
 .../handwriting/ProcessedHandwritingTask.tsx  |  6 +--
 .../handwriting/RawHandwritingTask.tsx        |  6 +--
 .../handwriting/components/Canvas/index.scss  |  0
 .../handwriting/components/Canvas/index.tsx   |  2 +-
 .../components/ViewOnlyCanvas/index.scss      |  0
 .../components/ViewOnlyCanvas/index.tsx       |  0
 .../ProcessedHandwritingEditor/index.css      |  0
 .../ProcessedHandwritingEditor/index.tsx      |  0
 .../editors/RawHandwritingEditor/index.css    |  0
 .../rawHandwritingEditor.tsx                  |  0
 .../handwriting/hooks/live-updates.hook.ts    |  4 +-
 .../variants/handwriting/types.ts             |  0
 .../FlagTask/index.css => flagTask.css}       |  4 +-
 .../questionStructure/Task/marking/index.tsx  | 49 +++++++++++++++++++
 .../Task/marking/variants/CodeTask.tsx        | 22 +++++++++
 .../Task/marking/variants/EssayTask.tsx       | 20 ++++++++
 .../Task/marking/variants/FlagTask.tsx        | 33 +++++++++++++
 .../Task/marking/variants/MCQ.tsx             | 45 +++++++++++++++++
 .../Task/marking/variants/NumberTask.tsx      | 13 +++++
 .../handwriting/ProcessedHandwritingTask.tsx  | 31 ++++++++++++
 .../handwriting/RawHandwritingTask.tsx        | 18 +++++++
 .../components/ViewOnlyCanvas/index.scss      | 16 ++++++
 .../components/ViewOnlyCanvas/index.tsx       | 44 +++++++++++++++++
 .../marking/variants/handwriting/types.ts     | 21 ++++++++
 .../questionStructure/Task/types.ts           |  3 ++
 src/pages/MarkingPage/MarkableSubmission.tsx  |  6 +--
 src/pages/QuestionPage/index.tsx              |  2 +-
 .../questionStructure/Task.test.tsx           |  6 +--
 .../questionStructure/TaskVariants.test.tsx   | 13 +++--
 35 files changed, 363 insertions(+), 47 deletions(-)
 rename src/components/questionStructure/Task/{ => assessment}/index.tsx (93%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/CodeTask.tsx (83%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/EssayTask.tsx (84%)
 rename src/components/questionStructure/Task/{variants/FlagTask/index.tsx => assessment/variants/FlagTask.tsx} (92%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/MCQ.tsx (90%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/NumberTask.tsx (82%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/ProcessedHandwritingTask.tsx (92%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/RawHandwritingTask.tsx (91%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/components/Canvas/index.scss (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/components/Canvas/index.tsx (98%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/components/ViewOnlyCanvas/index.scss (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/components/ViewOnlyCanvas/index.tsx (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/editors/ProcessedHandwritingEditor/index.css (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/editors/RawHandwritingEditor/index.css (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx (100%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/hooks/live-updates.hook.ts (97%)
 rename src/components/questionStructure/Task/{ => assessment}/variants/handwriting/types.ts (100%)
 rename src/components/questionStructure/Task/{variants/FlagTask/index.css => flagTask.css} (83%)
 create mode 100644 src/components/questionStructure/Task/marking/index.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/CodeTask.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/EssayTask.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/FlagTask.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/MCQ.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/NumberTask.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/handwriting/ProcessedHandwritingTask.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/handwriting/RawHandwritingTask.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.scss
 create mode 100644 src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.tsx
 create mode 100644 src/components/questionStructure/Task/marking/variants/handwriting/types.ts

diff --git a/src/components/questionStructure/Task/index.tsx b/src/components/questionStructure/Task/assessment/index.tsx
similarity index 93%
rename from src/components/questionStructure/Task/index.tsx
rename to src/components/questionStructure/Task/assessment/index.tsx
index cd72aa5..d974bd4 100644
--- a/src/components/questionStructure/Task/index.tsx
+++ b/src/components/questionStructure/Task/assessment/index.tsx
@@ -1,9 +1,9 @@
 import { Flex } from '@radix-ui/themes'
 import React, { FC } from 'react'
 
-import Markdown from '../../Markdown'
-import { TaskType } from './constants'
-import './index.css'
+import Markdown from '../../../Markdown'
+import { TaskType } from '../constants'
+import '../index.css'
 import { CodeTask, CodeTaskProps } from './variants/CodeTask'
 import { EssayTask, EssayTaskProps } from './variants/EssayTask'
 import { FlagTask, FlagTaskProps } from './variants/FlagTask'
diff --git a/src/components/questionStructure/Task/variants/CodeTask.tsx b/src/components/questionStructure/Task/assessment/variants/CodeTask.tsx
similarity index 83%
rename from src/components/questionStructure/Task/variants/CodeTask.tsx
rename to src/components/questionStructure/Task/assessment/variants/CodeTask.tsx
index da6eeff..1fbfbb2 100644
--- a/src/components/questionStructure/Task/variants/CodeTask.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/CodeTask.tsx
@@ -2,12 +2,12 @@ import { TextArea, TextField } from '@radix-ui/themes'
 import { isEqual } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import useDebounce from '../../../../hooks/debouncing'
-import { TaskType } from '../constants'
-import '../index.css'
-import { TaskBaseProps } from '../types'
+import useDebounce from '../../../../../hooks/debouncing'
+import { TaskType } from '../../constants'
+import '../../index.css'
+import { AssessmentTaskProps } from '../../types'
 
-export interface CodeTaskProps extends TaskBaseProps {
+export interface CodeTaskProps extends AssessmentTaskProps {
   type: TaskType.CODE
   lines?: number
 }
diff --git a/src/components/questionStructure/Task/variants/EssayTask.tsx b/src/components/questionStructure/Task/assessment/variants/EssayTask.tsx
similarity index 84%
rename from src/components/questionStructure/Task/variants/EssayTask.tsx
rename to src/components/questionStructure/Task/assessment/variants/EssayTask.tsx
index 9cd0dea..80002b1 100644
--- a/src/components/questionStructure/Task/variants/EssayTask.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/EssayTask.tsx
@@ -2,11 +2,11 @@ import { TextArea, TextField } from '@radix-ui/themes'
 import { isEqual } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import useDebounce from '../../../../hooks/debouncing'
-import { TaskType } from '../constants'
-import { TaskBaseProps } from '../types'
+import useDebounce from '../../../../../hooks/debouncing'
+import { TaskType } from '../../constants'
+import { AssessmentTaskProps } from '../../types'
 
-export interface EssayTaskProps extends TaskBaseProps {
+export interface EssayTaskProps extends AssessmentTaskProps {
   type: TaskType.ESSAY
   lines?: number
 }
diff --git a/src/components/questionStructure/Task/variants/FlagTask/index.tsx b/src/components/questionStructure/Task/assessment/variants/FlagTask.tsx
similarity index 92%
rename from src/components/questionStructure/Task/variants/FlagTask/index.tsx
rename to src/components/questionStructure/Task/assessment/variants/FlagTask.tsx
index d93d88f..839b55c 100644
--- a/src/components/questionStructure/Task/variants/FlagTask/index.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/FlagTask.tsx
@@ -5,10 +5,10 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
-import { TaskBaseProps } from '../../types'
-import './index.css'
+import '../../flagTask.css'
+import { AssessmentTaskProps } from '../../types'
 
-export interface FlagTaskProps extends TaskBaseProps {
+export interface FlagTaskProps extends AssessmentTaskProps {
   type: TaskType.FLAG
   showOrnament?: boolean
 }
diff --git a/src/components/questionStructure/Task/variants/MCQ.tsx b/src/components/questionStructure/Task/assessment/variants/MCQ.tsx
similarity index 90%
rename from src/components/questionStructure/Task/variants/MCQ.tsx
rename to src/components/questionStructure/Task/assessment/variants/MCQ.tsx
index b4f83d5..887f3b6 100644
--- a/src/components/questionStructure/Task/variants/MCQ.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/MCQ.tsx
@@ -2,20 +2,20 @@ import { CheckboxGroup, RadioGroup } from '@radix-ui/themes'
 import { isEqual, map } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import { TaskType } from '../constants'
-import { TaskBaseProps } from '../types'
+import { TaskType } from '../../constants'
+import { AssessmentTaskProps } from '../../types'
 
 type MCQOption = {
   value: string
   label: string
 }
 
-export interface MCQOneTaskProps extends TaskBaseProps {
+export interface MCQOneTaskProps extends AssessmentTaskProps {
   type: TaskType.MULTIPLE_CHOICE_SELECT_ONE
   choices: MCQOption[]
 }
 
-export interface MCQMultiTaskProps extends TaskBaseProps {
+export interface MCQMultiTaskProps extends AssessmentTaskProps {
   type: TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL
   choices: MCQOption[]
 }
diff --git a/src/components/questionStructure/Task/variants/NumberTask.tsx b/src/components/questionStructure/Task/assessment/variants/NumberTask.tsx
similarity index 82%
rename from src/components/questionStructure/Task/variants/NumberTask.tsx
rename to src/components/questionStructure/Task/assessment/variants/NumberTask.tsx
index 90502d0..ab2ee24 100644
--- a/src/components/questionStructure/Task/variants/NumberTask.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/NumberTask.tsx
@@ -2,11 +2,11 @@ import { TextField } from '@radix-ui/themes'
 import { isEqual } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
-import useDebounce from '../../../../hooks/debouncing'
-import { TaskType } from '../constants'
-import { TaskBaseProps } from '../types'
+import useDebounce from '../../../../../hooks/debouncing'
+import { TaskType } from '../../constants'
+import { AssessmentTaskProps } from '../../types'
 
-export interface NumberTaskProps extends TaskBaseProps {
+export interface NumberTaskProps extends AssessmentTaskProps {
   type: TaskType.INTEGER
 }
 
diff --git a/src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/assessment/variants/handwriting/ProcessedHandwritingTask.tsx
similarity index 92%
rename from src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx
rename to src/components/questionStructure/Task/assessment/variants/handwriting/ProcessedHandwritingTask.tsx
index 19c52e2..f79dfa7 100644
--- a/src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -4,12 +4,12 @@ import { MathJax } from 'better-react-mathjax'
 import { isEmpty, isEqual } from 'lodash'
 import { FC, useEffect, useMemo, useState } from 'react'
 
-import { TaskType } from '../../constants'
-import { TaskBaseProps } from '../../types'
+import { TaskType } from '../../../constants'
+import { AssessmentTaskProps } from '../../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import { ProcessedHandwritingEditor } from './editors/ProcessedHandwritingEditor'
 
-export interface ProcessedHandwritingProps extends TaskBaseProps {
+export interface ProcessedHandwritingProps extends AssessmentTaskProps {
   type: TaskType.PROCESSED_HANDWRITING
 }
 
diff --git a/src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/assessment/variants/handwriting/RawHandwritingTask.tsx
similarity index 91%
rename from src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx
rename to src/components/questionStructure/Task/assessment/variants/handwriting/RawHandwritingTask.tsx
index 5a23b27..bf460a0 100644
--- a/src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/handwriting/RawHandwritingTask.tsx
@@ -3,12 +3,12 @@ import { Button, Dialog, Flex } from '@radix-ui/themes'
 import { isEmpty, isEqual } from 'lodash'
 import { FC, useEffect, useMemo, useState } from 'react'
 
-import { TaskType } from '../../constants'
-import { TaskBaseProps } from '../../types'
+import { TaskType } from '../../../constants'
+import { AssessmentTaskProps } from '../../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import RawHandwritingEditor from './editors/RawHandwritingEditor/rawHandwritingEditor'
 
-export interface RawHandwritingProps extends TaskBaseProps {
+export interface RawHandwritingProps extends AssessmentTaskProps {
   type: TaskType.RAW_HANDWRITING
 }
 
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.scss b/src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.scss
rename to src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.scss
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.tsx b/src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.tsx
similarity index 98%
rename from src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.tsx
rename to src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.tsx
index ecc2046..5238244 100644
--- a/src/components/questionStructure/Task/variants/handwriting/components/Canvas/index.tsx
+++ b/src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.tsx
@@ -13,7 +13,7 @@ import React, {
   useState,
 } from 'react'
 
-import { ConfirmDialog } from '../../../../../../ConfirmDialog'
+import { ConfirmDialog } from '../../../../../../../ConfirmDialog'
 import { RawHandwritingAnswer } from '../../types'
 import './index.scss'
 
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.scss b/src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.scss
rename to src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.scss
diff --git a/src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.tsx b/src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/components/ViewOnlyCanvas/index.tsx
rename to src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.tsx
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.css b/src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
rename to src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx b/src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
rename to src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/index.css b/src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/index.css
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/index.css
rename to src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/index.css
diff --git a/src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx b/src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
rename to src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
diff --git a/src/components/questionStructure/Task/variants/handwriting/hooks/live-updates.hook.ts b/src/components/questionStructure/Task/assessment/variants/handwriting/hooks/live-updates.hook.ts
similarity index 97%
rename from src/components/questionStructure/Task/variants/handwriting/hooks/live-updates.hook.ts
rename to src/components/questionStructure/Task/assessment/variants/handwriting/hooks/live-updates.hook.ts
index 5369052..95d3554 100644
--- a/src/components/questionStructure/Task/variants/handwriting/hooks/live-updates.hook.ts
+++ b/src/components/questionStructure/Task/assessment/variants/handwriting/hooks/live-updates.hook.ts
@@ -7,8 +7,8 @@ import { SceneData } from '@excalidraw/excalidraw/types/types'
 import axios, { AxiosError } from 'axios'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import axiosInstance from '../../../../../../api/axiosInstance'
-import routes from '../../../../../../api/routes'
+import axiosInstance from '../../../../../../../api/axiosInstance'
+import routes from '../../../../../../../api/routes'
 
 // Constants
 /** Time to wait with user putting no stroks on the pages before API call */
diff --git a/src/components/questionStructure/Task/variants/handwriting/types.ts b/src/components/questionStructure/Task/assessment/variants/handwriting/types.ts
similarity index 100%
rename from src/components/questionStructure/Task/variants/handwriting/types.ts
rename to src/components/questionStructure/Task/assessment/variants/handwriting/types.ts
diff --git a/src/components/questionStructure/Task/variants/FlagTask/index.css b/src/components/questionStructure/Task/flagTask.css
similarity index 83%
rename from src/components/questionStructure/Task/variants/FlagTask/index.css
rename to src/components/questionStructure/Task/flagTask.css
index 767ced1..9480411 100644
--- a/src/components/questionStructure/Task/variants/FlagTask/index.css
+++ b/src/components/questionStructure/Task/flagTask.css
@@ -1,7 +1,7 @@
 .flag {
   /* the very anonymous value of 18 was obtained via trial and error
-       * TODO identify a more programmatic way to derive it
-       */
+   * TODO identify a more programmatic way to derive it
+   */
   width: calc(var(--default-font-size) * 18);
 }
 
diff --git a/src/components/questionStructure/Task/marking/index.tsx b/src/components/questionStructure/Task/marking/index.tsx
new file mode 100644
index 0000000..d974bd4
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/index.tsx
@@ -0,0 +1,49 @@
+import { Flex } from '@radix-ui/themes'
+import React, { FC } from 'react'
+
+import Markdown from '../../../Markdown'
+import { TaskType } from '../constants'
+import '../index.css'
+import { CodeTask, CodeTaskProps } from './variants/CodeTask'
+import { EssayTask, EssayTaskProps } from './variants/EssayTask'
+import { FlagTask, FlagTaskProps } from './variants/FlagTask'
+import { MCQMultiTask, MCQMultiTaskProps, MCQOneTask, MCQOneTaskProps } from './variants/MCQ'
+import { NumberTask, NumberTaskProps } from './variants/NumberTask'
+import {
+  ProcessedHandwritingProps,
+  ProcessedHandwritingTask,
+} from './variants/handwriting/ProcessedHandwritingTask'
+import { RawHandwritingProps, RawHandwritingTask } from './variants/handwriting/RawHandwritingTask'
+
+export type TaskProps =
+  | FlagTaskProps
+  | NumberTaskProps
+  | EssayTaskProps
+  | CodeTaskProps
+  | MCQOneTaskProps
+  | MCQMultiTaskProps
+  | ProcessedHandwritingProps
+  | RawHandwritingProps
+
+const taskComponentMap = {
+  [TaskType.ESSAY]: EssayTask,
+  [TaskType.CODE]: CodeTask,
+  [TaskType.INTEGER]: NumberTask,
+  [TaskType.FLAG]: FlagTask,
+  [TaskType.MULTIPLE_CHOICE_SELECT_ONE]: MCQOneTask,
+  [TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL]: MCQMultiTask,
+  [TaskType.RAW_HANDWRITING]: RawHandwritingTask,
+  [TaskType.PROCESSED_HANDWRITING]: ProcessedHandwritingTask,
+} as const
+
+type TaskComponent = FC<TaskProps & { instructions?: string }>
+
+export const TaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
+  const Component = taskComponentMap[taskProps.type] as TaskComponent
+  return (
+    <Flex gap="3" direction="column">
+      {instructions && <Markdown>{instructions}</Markdown>}
+      <Component {...taskProps} />
+    </Flex>
+  )
+}
diff --git a/src/components/questionStructure/Task/marking/variants/CodeTask.tsx b/src/components/questionStructure/Task/marking/variants/CodeTask.tsx
new file mode 100644
index 0000000..d1d47d9
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/CodeTask.tsx
@@ -0,0 +1,22 @@
+import { TextArea, TextField } from '@radix-ui/themes'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import '../../index.css'
+import { TaskBaseProps } from '../../types'
+
+export interface CodeTaskProps extends TaskBaseProps {
+  type: TaskType.ESSAY
+  lines?: number
+}
+
+export const CodeTask: FC<CodeTaskProps> = ({ answer, lines }) => {
+  const commonProps = {
+    value: answer.answer,
+    disabled: true,
+    variant: 'soft' as 'soft',
+    className: 'monospaced',
+  }
+  if (lines === 1) return <TextField.Root {...commonProps} />
+  return <TextArea {...commonProps} resize="vertical" rows={lines} />
+}
diff --git a/src/components/questionStructure/Task/marking/variants/EssayTask.tsx b/src/components/questionStructure/Task/marking/variants/EssayTask.tsx
new file mode 100644
index 0000000..c954a07
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/EssayTask.tsx
@@ -0,0 +1,20 @@
+import { TextArea, TextField } from '@radix-ui/themes'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import { TaskBaseProps } from '../../types'
+
+export interface EssayTaskProps extends TaskBaseProps {
+  type: TaskType.ESSAY
+  lines?: number
+}
+
+export const EssayTask: FC<EssayTaskProps> = ({ answer, lines }) => {
+  const commonProps = {
+    value: answer.answer,
+    disabled: true,
+    variant: 'soft' as 'soft',
+  }
+  if (lines === 1) return <TextField.Root {...commonProps} />
+  return <TextArea {...commonProps} resize="vertical" rows={lines} />
+}
diff --git a/src/components/questionStructure/Task/marking/variants/FlagTask.tsx b/src/components/questionStructure/Task/marking/variants/FlagTask.tsx
new file mode 100644
index 0000000..fded32a
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/FlagTask.tsx
@@ -0,0 +1,33 @@
+import { Code, Flex } from '@radix-ui/themes'
+import classnames from 'classnames'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import '../../flagTask.css'
+import '../../index.css'
+import { AssessmentTaskProps } from '../../types'
+
+export interface FlagTaskProps extends AssessmentTaskProps {
+  type: TaskType.FLAG
+  showOrnament?: boolean
+}
+
+export const FlagTask: FC<FlagTaskProps> = ({ answer, showOrnament = true }) => {
+  return (
+    <Flex align="stretch">
+      {showOrnament && (
+        <Flex pl="2" align="center" className={classnames('ornament', 'left-flag-ornament')}>
+          <span className="monospaced">{'FLAG {'}</span>
+        </Flex>
+      )}
+      <Code variant="ghost" className="flag">
+        {answer.answer}
+      </Code>
+      {showOrnament && (
+        <Flex pr="2" align="center" className={classnames('ornament', 'right-flag-ornament')}>
+          <span className="monospaced">{'}'}</span>
+        </Flex>
+      )}
+    </Flex>
+  )
+}
diff --git a/src/components/questionStructure/Task/marking/variants/MCQ.tsx b/src/components/questionStructure/Task/marking/variants/MCQ.tsx
new file mode 100644
index 0000000..d9e9016
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/MCQ.tsx
@@ -0,0 +1,45 @@
+import { CheckboxGroup, RadioGroup } from '@radix-ui/themes'
+import { map } from 'lodash'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import { TaskBaseProps } from '../../types'
+
+type MCQOption = {
+  value: string
+  label: string
+}
+
+export interface MCQOneTaskProps extends TaskBaseProps {
+  type: TaskType.MULTIPLE_CHOICE_SELECT_ONE
+  choices: MCQOption[]
+}
+
+export interface MCQMultiTaskProps extends TaskBaseProps {
+  type: TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL
+  choices: MCQOption[]
+}
+
+export const MCQOneTask: FC<MCQOneTaskProps> = ({ answer, choices }) => {
+  return (
+    <RadioGroup.Root variant="soft" value={answer.answer}>
+      {map(choices, (o) => (
+        <RadioGroup.Item key={o.value} value={o.value} disabled>
+          {o.label}
+        </RadioGroup.Item>
+      ))}
+    </RadioGroup.Root>
+  )
+}
+
+export const MCQMultiTask: FC<MCQMultiTaskProps> = ({ answer, choices }) => {
+  return (
+    <CheckboxGroup.Root value={answer.answer.split(',')}>
+      {map(choices, (o) => (
+        <CheckboxGroup.Item key={o.value} value={o.value} disabled>
+          {o.label}
+        </CheckboxGroup.Item>
+      ))}
+    </CheckboxGroup.Root>
+  )
+}
diff --git a/src/components/questionStructure/Task/marking/variants/NumberTask.tsx b/src/components/questionStructure/Task/marking/variants/NumberTask.tsx
new file mode 100644
index 0000000..fc2e600
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/NumberTask.tsx
@@ -0,0 +1,13 @@
+import { TextField } from '@radix-ui/themes'
+import React, { FC } from 'react'
+
+import { TaskType } from '../../constants'
+import { TaskBaseProps } from '../../types'
+
+export interface NumberTaskProps extends TaskBaseProps {
+  type: TaskType.INTEGER
+}
+
+export const NumberTask: FC<NumberTaskProps> = ({ answer }) => {
+  return <TextField.Root disabled value={answer.answer} type="number" variant="soft" />
+}
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/marking/variants/handwriting/ProcessedHandwritingTask.tsx
new file mode 100644
index 0000000..1884640
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -0,0 +1,31 @@
+import { Box, Card, Flex } from '@radix-ui/themes'
+import { MathJax } from 'better-react-mathjax'
+import { isEmpty } from 'lodash'
+import { FC } from 'react'
+
+import { TaskType } from '../../../constants'
+import { TaskBaseProps } from '../../../types'
+import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
+
+export interface ProcessedHandwritingProps extends TaskBaseProps {
+  type: TaskType.PROCESSED_HANDWRITING
+}
+
+export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({ answer }) => {
+  const value = JSON.parse(answer.answer)
+  const strokes = value?.raw?.elements
+  return (
+    <Box width="100%">
+      <Flex gap="3" align="center">
+        {value?.latex && (
+          <Card className="latex-preview">
+            <Flex p="3">
+              <MathJax>{`\\( ${value.latex} \\)`}</MathJax>
+            </Flex>
+          </Card>
+        )}
+      </Flex>
+      {!isEmpty(strokes) && <ViewOnlyCanvas initialData={strokes ?? []} />}
+    </Box>
+  )
+}
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/marking/variants/handwriting/RawHandwritingTask.tsx
new file mode 100644
index 0000000..70440cf
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/handwriting/RawHandwritingTask.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+import { TaskType } from '../../../constants'
+import { TaskBaseProps } from '../../../types'
+import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
+
+export interface RawHandwritingProps extends TaskBaseProps {
+  type: TaskType.RAW_HANDWRITING
+}
+
+export const RawHandwritingTask: FC<RawHandwritingProps> = ({ answer }) => {
+  return (
+    <ViewOnlyCanvas
+      initialData={JSON.parse(answer.answer)?.raw?.elements ?? []}
+      minHeight="500px"
+    />
+  )
+}
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.scss b/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.scss
new file mode 100644
index 0000000..92cfc0a
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.scss
@@ -0,0 +1,16 @@
+.excalidraw-view-container {
+  .App-bottom-bar {
+    display: none;
+  }
+  .App-menu_top {
+    display: none !important;
+  }
+  .layer-ui__wrapper__footer-right {
+    display: none !important;
+  }
+}
+
+.excalidraw-box {
+  margin: 2px;
+  height: calc(100% - 4px);
+}
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.tsx b/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.tsx
new file mode 100644
index 0000000..120df13
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.tsx
@@ -0,0 +1,44 @@
+import { Excalidraw } from '@excalidraw/excalidraw'
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
+import { Box, Card } from '@radix-ui/themes'
+import React, { useEffect, useState } from 'react'
+
+import './index.scss'
+
+interface ViewOnlyCanvasProps {
+  initialData: readonly ExcalidrawElement[]
+  minHeight?: string
+}
+
+export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({
+  initialData,
+  minHeight = '200px',
+}) => {
+  const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
+
+  useEffect(() => {
+    if (excalidrawAPI && initialData) {
+      excalidrawAPI.updateScene({
+        elements: initialData,
+      })
+    }
+    setTimeout(() => {
+      excalidrawAPI?.scrollToContent(undefined, {
+        fitToContent: true,
+      })
+    })
+  }, [excalidrawAPI, initialData])
+
+  return (
+    <Card>
+      <Box minHeight={minHeight}>
+        <Excalidraw
+          excalidrawAPI={setExcalidrawAPI}
+          viewModeEnabled
+          initialData={{ elements: initialData }}
+        />
+      </Box>
+    </Card>
+  )
+}
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/types.ts b/src/components/questionStructure/Task/marking/variants/handwriting/types.ts
new file mode 100644
index 0000000..3989153
--- /dev/null
+++ b/src/components/questionStructure/Task/marking/variants/handwriting/types.ts
@@ -0,0 +1,21 @@
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import { AppState } from '@excalidraw/excalidraw/types/types'
+import React from 'react'
+
+export interface RawHandwritingAnswer {
+  raw: {
+    elements: readonly ExcalidrawElement[]
+    appState?: Omit<AppState, 'offsetTop' | 'offsetLeft' | 'width' | 'height'>
+  }
+}
+
+export interface ProcessedHandwritingAnswer extends RawHandwritingAnswer {
+  latex: string
+}
+
+export interface GenericHandwritingEditorProps<T> {
+  answer?: T
+  onAnswerChange: (value: T) => void
+  children?: React.ReactNode
+  restricted?: boolean
+}
diff --git a/src/components/questionStructure/Task/types.ts b/src/components/questionStructure/Task/types.ts
index d1721a4..3a98447 100644
--- a/src/components/questionStructure/Task/types.ts
+++ b/src/components/questionStructure/Task/types.ts
@@ -4,6 +4,9 @@ import { TaskType } from './constants'
 export interface TaskBaseProps {
   type: TaskType
   answer: Answer
+}
+
+export interface AssessmentTaskProps extends TaskBaseProps {
   onAnswerUpdate: (answer: Answer) => void
   disabled?: boolean
 }
diff --git a/src/pages/MarkingPage/MarkableSubmission.tsx b/src/pages/MarkingPage/MarkableSubmission.tsx
index d2ef434..2a8c679 100644
--- a/src/pages/MarkingPage/MarkableSubmission.tsx
+++ b/src/pages/MarkingPage/MarkableSubmission.tsx
@@ -6,7 +6,7 @@ import React, { FC } from 'react'
 import Part from '../../components/questionStructure/Part'
 import Question from '../../components/questionStructure/Question'
 import Section from '../../components/questionStructure/Section'
-import { TaskFactory, TaskProps } from '../../components/questionStructure/Task'
+import { TaskFactory, TaskProps } from '../../components/questionStructure/Task/marking'
 import { Answer, Question as QuestionType } from '../../types/exam'
 import { MarkRoot, Student } from '../../types/marking'
 import MarkInputPanel from './MarkInputPanel'
@@ -61,14 +61,12 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
                             {section.tasks.map((task, t_) => {
                               const t = t_ + 1
                               const answer = lookupAnswer(student.username, q, p, s, t)
-                              if (!answer) return <NoAnswerBanner key={t_} />
+                              if (!answer) return <NoAnswerBanner key={`${sectionId}-${t}`} />
                               return (
                                 <TaskFactory
                                   key={`${sectionId}-${t}`}
                                   {...({
-                                    disabled: true,
                                     answer: answer,
-                                    onAnswerUpdate: (v) => {},
                                     ...instanceToPlain(task),
                                   } as TaskProps)}
                                 />
diff --git a/src/pages/QuestionPage/index.tsx b/src/pages/QuestionPage/index.tsx
index 12b8f4f..b986ea9 100644
--- a/src/pages/QuestionPage/index.tsx
+++ b/src/pages/QuestionPage/index.tsx
@@ -8,7 +8,7 @@ import Header from '../../components/pageStructure/Header'
 import Part from '../../components/questionStructure/Part'
 import Question from '../../components/questionStructure/Question'
 import Section from '../../components/questionStructure/Section'
-import { TaskFactory, TaskProps } from '../../components/questionStructure/Task'
+import { TaskFactory, TaskProps } from '../../components/questionStructure/Task/assessment'
 import { Answer, Question as QuestionSpec } from '../../types/exam'
 import AnswerStatus from './AnswerStatus'
 
diff --git a/src/tests/components/questionStructure/Task.test.tsx b/src/tests/components/questionStructure/Task.test.tsx
index 2c84233..5bbfd78 100644
--- a/src/tests/components/questionStructure/Task.test.tsx
+++ b/src/tests/components/questionStructure/Task.test.tsx
@@ -1,12 +1,12 @@
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen } from '@testing-library/react'
 
-import { TaskFactory } from '../../../components/questionStructure/Task'
+import { TaskFactory } from '../../../components/questionStructure/Task/assessment'
+import { EssayTask } from '../../../components/questionStructure/Task/assessment/variants/EssayTask'
 import { TaskType } from '../../../components/questionStructure/Task/constants'
-import { EssayTask } from '../../../components/questionStructure/Task/variants/EssayTask'
 import { Answer } from '../../../types/exam'
 
-jest.mock('../../../components/questionStructure/Task/variants/EssayTask', () => ({
+jest.mock('../../../components/questionStructure/Task/assessment/variants/EssayTask', () => ({
   EssayTask: jest.fn(),
 }))
 
diff --git a/src/tests/components/questionStructure/TaskVariants.test.tsx b/src/tests/components/questionStructure/TaskVariants.test.tsx
index 0f5adaa..61aaa2a 100644
--- a/src/tests/components/questionStructure/TaskVariants.test.tsx
+++ b/src/tests/components/questionStructure/TaskVariants.test.tsx
@@ -1,12 +1,15 @@
 import '@testing-library/jest-dom/extend-expect'
 import { fireEvent, render, screen } from '@testing-library/react'
 
+import { CodeTask } from '../../../components/questionStructure/Task/assessment/variants/CodeTask'
+import { EssayTask } from '../../../components/questionStructure/Task/assessment/variants/EssayTask'
+import { FlagTask } from '../../../components/questionStructure/Task/assessment/variants/FlagTask'
+import {
+  MCQMultiTask,
+  MCQOneTask,
+} from '../../../components/questionStructure/Task/assessment/variants/MCQ'
+import { NumberTask } from '../../../components/questionStructure/Task/assessment/variants/NumberTask'
 import { TaskType } from '../../../components/questionStructure/Task/constants'
-import { CodeTask } from '../../../components/questionStructure/Task/variants/CodeTask'
-import { EssayTask } from '../../../components/questionStructure/Task/variants/EssayTask'
-import { FlagTask } from '../../../components/questionStructure/Task/variants/FlagTask'
-import { MCQMultiTask, MCQOneTask } from '../../../components/questionStructure/Task/variants/MCQ'
-import { NumberTask } from '../../../components/questionStructure/Task/variants/NumberTask'
 import { Answer } from '../../../types/exam'
 
 const options = [

From 657879a0407cba8db2f4a1db347541014dc56ebf Mon Sep 17 00:00:00 2001
From: Ivan Procaccini <ivanprocaccini905@gmail.com>
Date: Wed, 2 Oct 2024 13:00:45 +0200
Subject: [PATCH 2/5] refactor: move NoAnswerBanner to marking TaskFactory

---
 src/components/questionStructure/Task/marking/index.tsx        | 3 ++-
 .../Task/marking/variants}/NoAnswerBanner.tsx                  | 0
 src/pages/MarkingPage/MarkableSubmission.tsx                   | 2 --
 3 files changed, 2 insertions(+), 3 deletions(-)
 rename src/{pages/MarkingPage => components/questionStructure/Task/marking/variants}/NoAnswerBanner.tsx (100%)

diff --git a/src/components/questionStructure/Task/marking/index.tsx b/src/components/questionStructure/Task/marking/index.tsx
index d974bd4..a4f0b93 100644
--- a/src/components/questionStructure/Task/marking/index.tsx
+++ b/src/components/questionStructure/Task/marking/index.tsx
@@ -8,6 +8,7 @@ import { CodeTask, CodeTaskProps } from './variants/CodeTask'
 import { EssayTask, EssayTaskProps } from './variants/EssayTask'
 import { FlagTask, FlagTaskProps } from './variants/FlagTask'
 import { MCQMultiTask, MCQMultiTaskProps, MCQOneTask, MCQOneTaskProps } from './variants/MCQ'
+import NoAnswerBanner from './variants/NoAnswerBanner'
 import { NumberTask, NumberTaskProps } from './variants/NumberTask'
 import {
   ProcessedHandwritingProps,
@@ -43,7 +44,7 @@ export const TaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
   return (
     <Flex gap="3" direction="column">
       {instructions && <Markdown>{instructions}</Markdown>}
-      <Component {...taskProps} />
+      {taskProps.answer ? <Component {...taskProps} /> : <NoAnswerBanner />}
     </Flex>
   )
 }
diff --git a/src/pages/MarkingPage/NoAnswerBanner.tsx b/src/components/questionStructure/Task/marking/variants/NoAnswerBanner.tsx
similarity index 100%
rename from src/pages/MarkingPage/NoAnswerBanner.tsx
rename to src/components/questionStructure/Task/marking/variants/NoAnswerBanner.tsx
diff --git a/src/pages/MarkingPage/MarkableSubmission.tsx b/src/pages/MarkingPage/MarkableSubmission.tsx
index 2a8c679..b9239dd 100644
--- a/src/pages/MarkingPage/MarkableSubmission.tsx
+++ b/src/pages/MarkingPage/MarkableSubmission.tsx
@@ -10,7 +10,6 @@ import { TaskFactory, TaskProps } from '../../components/questionStructure/Task/
 import { Answer, Question as QuestionType } from '../../types/exam'
 import { MarkRoot, Student } from '../../types/marking'
 import MarkInputPanel from './MarkInputPanel'
-import NoAnswerBanner from './NoAnswerBanner'
 import QuestionHeader from './QuestionHeader'
 
 interface MarkableSubmissionProps {
@@ -61,7 +60,6 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
                             {section.tasks.map((task, t_) => {
                               const t = t_ + 1
                               const answer = lookupAnswer(student.username, q, p, s, t)
-                              if (!answer) return <NoAnswerBanner key={`${sectionId}-${t}`} />
                               return (
                                 <TaskFactory
                                   key={`${sectionId}-${t}`}

From 3d60b2cadb93cbdc1178cd9c9fb1431b1ff65ff9 Mon Sep 17 00:00:00 2001
From: Ivan Procaccini <ivanprocaccini905@gmail.com>
Date: Wed, 2 Oct 2024 13:09:49 +0200
Subject: [PATCH 3/5] fix: improve flag read-only task

---
 .../Task/marking/variants/FlagTask.tsx        | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/questionStructure/Task/marking/variants/FlagTask.tsx b/src/components/questionStructure/Task/marking/variants/FlagTask.tsx
index fded32a..1128dd2 100644
--- a/src/components/questionStructure/Task/marking/variants/FlagTask.tsx
+++ b/src/components/questionStructure/Task/marking/variants/FlagTask.tsx
@@ -1,33 +1,34 @@
-import { Code, Flex } from '@radix-ui/themes'
+import { Flex, TextField } from '@radix-ui/themes'
 import classnames from 'classnames'
 import React, { FC } from 'react'
 
 import { TaskType } from '../../constants'
 import '../../flagTask.css'
 import '../../index.css'
-import { AssessmentTaskProps } from '../../types'
+import { TaskBaseProps } from '../../types'
 
-export interface FlagTaskProps extends AssessmentTaskProps {
+export interface FlagTaskProps extends TaskBaseProps {
   type: TaskType.FLAG
-  showOrnament?: boolean
 }
 
-export const FlagTask: FC<FlagTaskProps> = ({ answer, showOrnament = true }) => {
+export const FlagTask: FC<FlagTaskProps> = ({ answer }) => {
   return (
     <Flex align="stretch">
-      {showOrnament && (
-        <Flex pl="2" align="center" className={classnames('ornament', 'left-flag-ornament')}>
-          <span className="monospaced">{'FLAG {'}</span>
-        </Flex>
-      )}
-      <Code variant="ghost" className="flag">
-        {answer.answer}
-      </Code>
-      {showOrnament && (
-        <Flex pr="2" align="center" className={classnames('ornament', 'right-flag-ornament')}>
-          <span className="monospaced">{'}'}</span>
-        </Flex>
-      )}
+      <Flex pl="2" align="center" className={classnames('ornament', 'left-flag-ornament')}>
+        <span className="monospaced">{'FLAG {'}</span>
+      </Flex>
+      <TextField.Root
+        disabled
+        value={answer.answer}
+        radius="none"
+        type="text"
+        maxLength={32}
+        variant="soft"
+        className={classnames('flag', 'monospaced')}
+      />
+      <Flex pr="2" align="center" className={classnames('ornament', 'right-flag-ornament')}>
+        <span className="monospaced">{'}'}</span>
+      </Flex>
     </Flex>
   )
 }

From 473a54a93b2c0d8b06972308f8e32ec2a6bbac01 Mon Sep 17 00:00:00 2001
From: Ivan Procaccini <ivanprocaccini905@gmail.com>
Date: Wed, 2 Oct 2024 13:54:10 +0200
Subject: [PATCH 4/5] refactor: generic improvements

---
 .../Task/{assessment => editable}/index.tsx   |  4 +-
 .../variants/CodeTask.tsx                     | 10 +--
 .../variants/EssayTask.tsx                    |  8 +-
 .../variants/FlagTask.tsx                     | 10 +--
 .../{assessment => editable}/variants/MCQ.tsx | 18 +---
 .../variants/NumberTask.tsx                   |  3 +-
 .../handwriting/ProcessedHandwritingTask.tsx  | 15 ++--
 .../handwriting/RawHandwritingTask.tsx        | 24 ++---
 .../handwriting/components/Canvas/index.scss  |  0
 .../handwriting/components/Canvas/index.tsx   |  0
 .../components/ViewOnlyCanvas/index.scss      |  0
 .../components/ViewOnlyCanvas/index.tsx       |  0
 .../ProcessedHandwritingEditor/index.css      |  0
 .../ProcessedHandwritingEditor/index.tsx      |  0
 .../editors/RawHandwritingEditor/index.css    |  0
 .../rawHandwritingEditor.tsx                  |  0
 .../handwriting/hooks/live-updates.hook.ts    |  0
 .../variants/handwriting/types.ts             |  0
 .../marking/variants/handwriting/types.ts     | 21 -----
 .../Task/{marking => readonly}/index.tsx      |  4 +-
 .../variants/CodeTask.tsx                     | 10 ++-
 .../variants/EssayTask.tsx                    |  8 +-
 .../variants/FlagTask.tsx                     |  4 +-
 .../{marking => readonly}/variants/MCQ.tsx    |  0
 .../variants/NoAnswerBanner.tsx               |  0
 .../variants/NumberTask.tsx                   |  0
 .../handwriting/ProcessedHandwritingTask.tsx  |  0
 .../handwriting/RawHandwritingTask.tsx        |  0
 .../components/ViewOnlyCanvas/index.scss      |  0
 .../components/ViewOnlyCanvas/index.tsx       |  0
 .../Task/{index.css => styles/common.css}     |  0
 .../Task/{flagTask.css => styles/flag.css}    |  0
 .../questionStructure/Task/types.ts           |  1 -
 src/pages/MarkingPage/MarkableSubmission.tsx  |  4 +-
 src/pages/QuestionPage/index.tsx              |  4 +-
 .../questionStructure/Task.test.tsx           | 12 +--
 .../questionStructure/TaskVariants.test.tsx   | 88 ++-----------------
 37 files changed, 59 insertions(+), 189 deletions(-)
 rename src/components/questionStructure/Task/{assessment => editable}/index.tsx (93%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/CodeTask.tsx (88%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/EssayTask.tsx (89%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/FlagTask.tsx (90%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/MCQ.tsx (82%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/NumberTask.tsx (94%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/ProcessedHandwritingTask.tsx (85%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/RawHandwritingTask.tsx (75%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/components/Canvas/index.scss (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/components/Canvas/index.tsx (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/components/ViewOnlyCanvas/index.scss (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/components/ViewOnlyCanvas/index.tsx (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/editors/ProcessedHandwritingEditor/index.css (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/editors/RawHandwritingEditor/index.css (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/hooks/live-updates.hook.ts (100%)
 rename src/components/questionStructure/Task/{assessment => editable}/variants/handwriting/types.ts (100%)
 delete mode 100644 src/components/questionStructure/Task/marking/variants/handwriting/types.ts
 rename src/components/questionStructure/Task/{marking => readonly}/index.tsx (93%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/CodeTask.tsx (70%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/EssayTask.tsx (72%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/FlagTask.tsx (93%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/MCQ.tsx (100%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/NoAnswerBanner.tsx (100%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/NumberTask.tsx (100%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/handwriting/ProcessedHandwritingTask.tsx (100%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/handwriting/RawHandwritingTask.tsx (100%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/handwriting/components/ViewOnlyCanvas/index.scss (100%)
 rename src/components/questionStructure/Task/{marking => readonly}/variants/handwriting/components/ViewOnlyCanvas/index.tsx (100%)
 rename src/components/questionStructure/Task/{index.css => styles/common.css} (100%)
 rename src/components/questionStructure/Task/{flagTask.css => styles/flag.css} (100%)

diff --git a/src/components/questionStructure/Task/assessment/index.tsx b/src/components/questionStructure/Task/editable/index.tsx
similarity index 93%
rename from src/components/questionStructure/Task/assessment/index.tsx
rename to src/components/questionStructure/Task/editable/index.tsx
index d974bd4..afa916b 100644
--- a/src/components/questionStructure/Task/assessment/index.tsx
+++ b/src/components/questionStructure/Task/editable/index.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react'
 
 import Markdown from '../../../Markdown'
 import { TaskType } from '../constants'
-import '../index.css'
+import '../styles/common.css'
 import { CodeTask, CodeTaskProps } from './variants/CodeTask'
 import { EssayTask, EssayTaskProps } from './variants/EssayTask'
 import { FlagTask, FlagTaskProps } from './variants/FlagTask'
@@ -38,7 +38,7 @@ const taskComponentMap = {
 
 type TaskComponent = FC<TaskProps & { instructions?: string }>
 
-export const TaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
+export const EditableTaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
   const Component = taskComponentMap[taskProps.type] as TaskComponent
   return (
     <Flex gap="3" direction="column">
diff --git a/src/components/questionStructure/Task/assessment/variants/CodeTask.tsx b/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
similarity index 88%
rename from src/components/questionStructure/Task/assessment/variants/CodeTask.tsx
rename to src/components/questionStructure/Task/editable/variants/CodeTask.tsx
index 1fbfbb2..855bcbd 100644
--- a/src/components/questionStructure/Task/assessment/variants/CodeTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
@@ -4,7 +4,7 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
-import '../../index.css'
+import '../../styles/common.css'
 import { AssessmentTaskProps } from '../../types'
 
 export interface CodeTaskProps extends AssessmentTaskProps {
@@ -12,12 +12,7 @@ export interface CodeTaskProps extends AssessmentTaskProps {
   lines?: number
 }
 
-export const CodeTask: FC<CodeTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  lines = 5,
-  disabled = false,
-}) => {
+export const CodeTask: FC<CodeTaskProps> = ({ answer, onAnswerUpdate, lines = 5 }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   const debouncedValue = useDebounce(value)
@@ -38,7 +33,6 @@ export const CodeTask: FC<CodeTaskProps> = ({
     value: value,
     onChange: handleOnChange,
     placeholder: 'Your answer here…',
-    disabled: disabled,
     variant: 'soft' as 'soft',
     className: 'monospaced',
   }
diff --git a/src/components/questionStructure/Task/assessment/variants/EssayTask.tsx b/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
similarity index 89%
rename from src/components/questionStructure/Task/assessment/variants/EssayTask.tsx
rename to src/components/questionStructure/Task/editable/variants/EssayTask.tsx
index 80002b1..91dba98 100644
--- a/src/components/questionStructure/Task/assessment/variants/EssayTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
@@ -11,12 +11,7 @@ export interface EssayTaskProps extends AssessmentTaskProps {
   lines?: number
 }
 
-export const EssayTask: FC<EssayTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  lines = 5,
-  disabled = false,
-}) => {
+export const EssayTask: FC<EssayTaskProps> = ({ answer, onAnswerUpdate, lines = 5 }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   const debouncedValue = useDebounce(value)
@@ -38,7 +33,6 @@ export const EssayTask: FC<EssayTaskProps> = ({
     value: value,
     onChange: handleOnChange,
     placeholder: 'Your answer here…',
-    disabled: disabled,
     variant: 'soft' as 'soft',
   }
   if (lines === 1) return <TextField.Root {...commonProps} />
diff --git a/src/components/questionStructure/Task/assessment/variants/FlagTask.tsx b/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
similarity index 90%
rename from src/components/questionStructure/Task/assessment/variants/FlagTask.tsx
rename to src/components/questionStructure/Task/editable/variants/FlagTask.tsx
index 839b55c..2fcc624 100644
--- a/src/components/questionStructure/Task/assessment/variants/FlagTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
@@ -5,7 +5,7 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
-import '../../flagTask.css'
+import '../../styles/flag.css'
 import { AssessmentTaskProps } from '../../types'
 
 export interface FlagTaskProps extends AssessmentTaskProps {
@@ -13,12 +13,7 @@ export interface FlagTaskProps extends AssessmentTaskProps {
   showOrnament?: boolean
 }
 
-export const FlagTask: FC<FlagTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  showOrnament = true,
-  disabled = false,
-}) => {
+export const FlagTask: FC<FlagTaskProps> = ({ answer, onAnswerUpdate, showOrnament = true }) => {
   const FLAG_LENGTH = 32
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
@@ -45,7 +40,6 @@ export const FlagTask: FC<FlagTaskProps> = ({
         </Flex>
       )}
       <TextField.Root
-        disabled={disabled}
         value={value}
         onChange={handleChange}
         radius="none"
diff --git a/src/components/questionStructure/Task/assessment/variants/MCQ.tsx b/src/components/questionStructure/Task/editable/variants/MCQ.tsx
similarity index 82%
rename from src/components/questionStructure/Task/assessment/variants/MCQ.tsx
rename to src/components/questionStructure/Task/editable/variants/MCQ.tsx
index 887f3b6..beebc91 100644
--- a/src/components/questionStructure/Task/assessment/variants/MCQ.tsx
+++ b/src/components/questionStructure/Task/editable/variants/MCQ.tsx
@@ -20,12 +20,7 @@ export interface MCQMultiTaskProps extends AssessmentTaskProps {
   choices: MCQOption[]
 }
 
-export const MCQOneTask: FC<MCQOneTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  choices,
-  disabled = false,
-}) => {
+export const MCQOneTask: FC<MCQOneTaskProps> = ({ answer, onAnswerUpdate, choices }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   useEffect(() => {
@@ -41,7 +36,7 @@ export const MCQOneTask: FC<MCQOneTaskProps> = ({
   }
 
   return (
-    <RadioGroup.Root variant="soft" disabled={disabled} value={value} onClick={handleOnClick}>
+    <RadioGroup.Root variant="soft" value={value} onClick={handleOnClick}>
       {map(choices, (o) => (
         <RadioGroup.Item key={o.value} value={o.value}>
           {o.label}
@@ -51,12 +46,7 @@ export const MCQOneTask: FC<MCQOneTaskProps> = ({
   )
 }
 
-export const MCQMultiTask: FC<MCQMultiTaskProps> = ({
-  answer,
-  onAnswerUpdate,
-  choices,
-  disabled = false,
-}) => {
+export const MCQMultiTask: FC<MCQMultiTaskProps> = ({ answer, onAnswerUpdate, choices }) => {
   const initialValue = useMemo(() => (answer?.answer ? answer.answer.split(',') : []), [answer])
   const [value, setValue] = useState(initialValue)
   useEffect(() => {
@@ -74,7 +64,7 @@ export const MCQMultiTask: FC<MCQMultiTaskProps> = ({
   }
 
   return (
-    <CheckboxGroup.Root disabled={disabled} variant="soft" value={value}>
+    <CheckboxGroup.Root variant="soft" value={value}>
       {map(choices, (o) => (
         <CheckboxGroup.Item key={o.value} value={o.value} onClick={handleOnClick}>
           {o.label}
diff --git a/src/components/questionStructure/Task/assessment/variants/NumberTask.tsx b/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
similarity index 94%
rename from src/components/questionStructure/Task/assessment/variants/NumberTask.tsx
rename to src/components/questionStructure/Task/editable/variants/NumberTask.tsx
index ab2ee24..3cd4564 100644
--- a/src/components/questionStructure/Task/assessment/variants/NumberTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
@@ -10,7 +10,7 @@ export interface NumberTaskProps extends AssessmentTaskProps {
   type: TaskType.INTEGER
 }
 
-export const NumberTask: FC<NumberTaskProps> = ({ answer, onAnswerUpdate, disabled = false }) => {
+export const NumberTask: FC<NumberTaskProps> = ({ answer, onAnswerUpdate }) => {
   const initialValue = useMemo(() => answer?.answer ?? '', [answer])
   const [value, setValue] = useState(initialValue)
   const debouncedValue = useDebounce(value)
@@ -34,7 +34,6 @@ export const NumberTask: FC<NumberTaskProps> = ({ answer, onAnswerUpdate, disabl
       onChange={handleChange}
       type="number"
       variant="soft"
-      disabled={disabled}
       placeholder="Your number here..."
     />
   )
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
similarity index 85%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/ProcessedHandwritingTask.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
index f79dfa7..d6215a7 100644
--- a/src/components/questionStructure/Task/assessment/variants/handwriting/ProcessedHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -16,7 +16,6 @@ export interface ProcessedHandwritingProps extends AssessmentTaskProps {
 export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({
   answer,
   onAnswerUpdate,
-  disabled = false,
 }) => {
   const initialValue = useMemo(
     () => (answer?.answer ? JSON.parse(answer.answer) : { latex: '' }),
@@ -35,14 +34,12 @@ export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({
   return (
     <Dialog.Root>
       <Flex gap="3" align="center">
-        {!disabled && (
-          <Dialog.Trigger>
-            <Button disabled={disabled} size="4">
-              {strokes?.length ? 'Edit answer' : 'Enter answer'}{' '}
-              <Pencil2Icon width="1.5rem" height="1.5rem" />
-            </Button>
-          </Dialog.Trigger>
-        )}
+        <Dialog.Trigger>
+          <Button size="4">
+            {strokes?.length ? 'Edit answer' : 'Enter answer'}{' '}
+            <Pencil2Icon width="1.5rem" height="1.5rem" />
+          </Button>
+        </Dialog.Trigger>
         {value?.latex && (
           <Card className="latex-preview">
             <Flex p="3">
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
similarity index 75%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/RawHandwritingTask.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
index bf460a0..541eb7d 100644
--- a/src/components/questionStructure/Task/assessment/variants/handwriting/RawHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
@@ -12,11 +12,7 @@ export interface RawHandwritingProps extends AssessmentTaskProps {
   type: TaskType.RAW_HANDWRITING
 }
 
-export const RawHandwritingTask: FC<RawHandwritingProps> = ({
-  answer,
-  onAnswerUpdate,
-  disabled = false,
-}) => {
+export const RawHandwritingTask: FC<RawHandwritingProps> = ({ answer, onAnswerUpdate }) => {
   const initialValue = useMemo(() => (answer?.answer ? JSON.parse(answer.answer) : {}), [answer])
 
   const [value, setValue] = useState(initialValue)
@@ -29,16 +25,14 @@ export const RawHandwritingTask: FC<RawHandwritingProps> = ({
 
   return (
     <Dialog.Root>
-      {!disabled && (
-        <Flex gap="3" align="center">
-          <Dialog.Trigger>
-            <Button disabled={disabled} size="4">
-              {value?.raw?.elements.length ? 'Edit answer' : 'Enter answer'}{' '}
-              <Pencil2Icon width="1.5rem" height="1.5rem" />
-            </Button>
-          </Dialog.Trigger>
-        </Flex>
-      )}
+      <Flex gap="3" align="center">
+        <Dialog.Trigger>
+          <Button size="4">
+            {value?.raw?.elements.length ? 'Edit answer' : 'Enter answer'}{' '}
+            <Pencil2Icon width="1.5rem" height="1.5rem" />
+          </Button>
+        </Dialog.Trigger>
+      </Flex>
       {!isEmpty(value?.raw?.elements) && (
         <ViewOnlyCanvas initialData={value?.raw?.elements ?? []} minHeight="500px" />
       )}
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.scss b/src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.scss
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.scss
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/components/Canvas/index.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/Canvas/index.tsx
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.scss b/src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.scss
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.scss
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/components/ViewOnlyCanvas/index.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/components/ViewOnlyCanvas/index.tsx
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.css b/src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.css
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/ProcessedHandwritingEditor/index.tsx
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/index.css b/src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/index.css
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/index.css
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/index.css
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
rename to src/components/questionStructure/Task/editable/variants/handwriting/editors/RawHandwritingEditor/rawHandwritingEditor.tsx
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/hooks/live-updates.hook.ts b/src/components/questionStructure/Task/editable/variants/handwriting/hooks/live-updates.hook.ts
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/hooks/live-updates.hook.ts
rename to src/components/questionStructure/Task/editable/variants/handwriting/hooks/live-updates.hook.ts
diff --git a/src/components/questionStructure/Task/assessment/variants/handwriting/types.ts b/src/components/questionStructure/Task/editable/variants/handwriting/types.ts
similarity index 100%
rename from src/components/questionStructure/Task/assessment/variants/handwriting/types.ts
rename to src/components/questionStructure/Task/editable/variants/handwriting/types.ts
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/types.ts b/src/components/questionStructure/Task/marking/variants/handwriting/types.ts
deleted file mode 100644
index 3989153..0000000
--- a/src/components/questionStructure/Task/marking/variants/handwriting/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
-import { AppState } from '@excalidraw/excalidraw/types/types'
-import React from 'react'
-
-export interface RawHandwritingAnswer {
-  raw: {
-    elements: readonly ExcalidrawElement[]
-    appState?: Omit<AppState, 'offsetTop' | 'offsetLeft' | 'width' | 'height'>
-  }
-}
-
-export interface ProcessedHandwritingAnswer extends RawHandwritingAnswer {
-  latex: string
-}
-
-export interface GenericHandwritingEditorProps<T> {
-  answer?: T
-  onAnswerChange: (value: T) => void
-  children?: React.ReactNode
-  restricted?: boolean
-}
diff --git a/src/components/questionStructure/Task/marking/index.tsx b/src/components/questionStructure/Task/readonly/index.tsx
similarity index 93%
rename from src/components/questionStructure/Task/marking/index.tsx
rename to src/components/questionStructure/Task/readonly/index.tsx
index a4f0b93..19fcd64 100644
--- a/src/components/questionStructure/Task/marking/index.tsx
+++ b/src/components/questionStructure/Task/readonly/index.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react'
 
 import Markdown from '../../../Markdown'
 import { TaskType } from '../constants'
-import '../index.css'
+import '../styles/common.css'
 import { CodeTask, CodeTaskProps } from './variants/CodeTask'
 import { EssayTask, EssayTaskProps } from './variants/EssayTask'
 import { FlagTask, FlagTaskProps } from './variants/FlagTask'
@@ -39,7 +39,7 @@ const taskComponentMap = {
 
 type TaskComponent = FC<TaskProps & { instructions?: string }>
 
-export const TaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
+export const ReadOnlyTaskFactory: TaskComponent = ({ instructions, ...taskProps }) => {
   const Component = taskComponentMap[taskProps.type] as TaskComponent
   return (
     <Flex gap="3" direction="column">
diff --git a/src/components/questionStructure/Task/marking/variants/CodeTask.tsx b/src/components/questionStructure/Task/readonly/variants/CodeTask.tsx
similarity index 70%
rename from src/components/questionStructure/Task/marking/variants/CodeTask.tsx
rename to src/components/questionStructure/Task/readonly/variants/CodeTask.tsx
index d1d47d9..8a4cbcd 100644
--- a/src/components/questionStructure/Task/marking/variants/CodeTask.tsx
+++ b/src/components/questionStructure/Task/readonly/variants/CodeTask.tsx
@@ -1,16 +1,18 @@
 import { TextArea, TextField } from '@radix-ui/themes'
+import { countBy } from 'lodash'
 import React, { FC } from 'react'
 
 import { TaskType } from '../../constants'
-import '../../index.css'
+import '../../styles/common.css'
 import { TaskBaseProps } from '../../types'
 
 export interface CodeTaskProps extends TaskBaseProps {
   type: TaskType.ESSAY
-  lines?: number
 }
 
-export const CodeTask: FC<CodeTaskProps> = ({ answer, lines }) => {
+const LINES_PADDING = 2
+export const CodeTask: FC<CodeTaskProps> = ({ answer }) => {
+  const lines = countBy(answer.answer)['\n']
   const commonProps = {
     value: answer.answer,
     disabled: true,
@@ -18,5 +20,5 @@ export const CodeTask: FC<CodeTaskProps> = ({ answer, lines }) => {
     className: 'monospaced',
   }
   if (lines === 1) return <TextField.Root {...commonProps} />
-  return <TextArea {...commonProps} resize="vertical" rows={lines} />
+  return <TextArea {...commonProps} resize="vertical" rows={lines + LINES_PADDING} />
 }
diff --git a/src/components/questionStructure/Task/marking/variants/EssayTask.tsx b/src/components/questionStructure/Task/readonly/variants/EssayTask.tsx
similarity index 72%
rename from src/components/questionStructure/Task/marking/variants/EssayTask.tsx
rename to src/components/questionStructure/Task/readonly/variants/EssayTask.tsx
index c954a07..b778cd1 100644
--- a/src/components/questionStructure/Task/marking/variants/EssayTask.tsx
+++ b/src/components/questionStructure/Task/readonly/variants/EssayTask.tsx
@@ -1,4 +1,5 @@
 import { TextArea, TextField } from '@radix-ui/themes'
+import { countBy } from 'lodash'
 import React, { FC } from 'react'
 
 import { TaskType } from '../../constants'
@@ -6,15 +7,16 @@ import { TaskBaseProps } from '../../types'
 
 export interface EssayTaskProps extends TaskBaseProps {
   type: TaskType.ESSAY
-  lines?: number
 }
 
-export const EssayTask: FC<EssayTaskProps> = ({ answer, lines }) => {
+const LINES_PADDING = 2
+export const EssayTask: FC<EssayTaskProps> = ({ answer }) => {
+  const lines = countBy(answer.answer)['\n']
   const commonProps = {
     value: answer.answer,
     disabled: true,
     variant: 'soft' as 'soft',
   }
   if (lines === 1) return <TextField.Root {...commonProps} />
-  return <TextArea {...commonProps} resize="vertical" rows={lines} />
+  return <TextArea {...commonProps} resize="vertical" rows={lines + LINES_PADDING} />
 }
diff --git a/src/components/questionStructure/Task/marking/variants/FlagTask.tsx b/src/components/questionStructure/Task/readonly/variants/FlagTask.tsx
similarity index 93%
rename from src/components/questionStructure/Task/marking/variants/FlagTask.tsx
rename to src/components/questionStructure/Task/readonly/variants/FlagTask.tsx
index 1128dd2..e152c1d 100644
--- a/src/components/questionStructure/Task/marking/variants/FlagTask.tsx
+++ b/src/components/questionStructure/Task/readonly/variants/FlagTask.tsx
@@ -3,8 +3,8 @@ import classnames from 'classnames'
 import React, { FC } from 'react'
 
 import { TaskType } from '../../constants'
-import '../../flagTask.css'
-import '../../index.css'
+import '../../styles/common.css'
+import '../../styles/flag.css'
 import { TaskBaseProps } from '../../types'
 
 export interface FlagTaskProps extends TaskBaseProps {
diff --git a/src/components/questionStructure/Task/marking/variants/MCQ.tsx b/src/components/questionStructure/Task/readonly/variants/MCQ.tsx
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/MCQ.tsx
rename to src/components/questionStructure/Task/readonly/variants/MCQ.tsx
diff --git a/src/components/questionStructure/Task/marking/variants/NoAnswerBanner.tsx b/src/components/questionStructure/Task/readonly/variants/NoAnswerBanner.tsx
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/NoAnswerBanner.tsx
rename to src/components/questionStructure/Task/readonly/variants/NoAnswerBanner.tsx
diff --git a/src/components/questionStructure/Task/marking/variants/NumberTask.tsx b/src/components/questionStructure/Task/readonly/variants/NumberTask.tsx
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/NumberTask.tsx
rename to src/components/questionStructure/Task/readonly/variants/NumberTask.tsx
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/readonly/variants/handwriting/ProcessedHandwritingTask.tsx
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/handwriting/ProcessedHandwritingTask.tsx
rename to src/components/questionStructure/Task/readonly/variants/handwriting/ProcessedHandwritingTask.tsx
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/readonly/variants/handwriting/RawHandwritingTask.tsx
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/handwriting/RawHandwritingTask.tsx
rename to src/components/questionStructure/Task/readonly/variants/handwriting/RawHandwritingTask.tsx
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.scss b/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.scss
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.scss
rename to src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.scss
diff --git a/src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.tsx b/src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.tsx
similarity index 100%
rename from src/components/questionStructure/Task/marking/variants/handwriting/components/ViewOnlyCanvas/index.tsx
rename to src/components/questionStructure/Task/readonly/variants/handwriting/components/ViewOnlyCanvas/index.tsx
diff --git a/src/components/questionStructure/Task/index.css b/src/components/questionStructure/Task/styles/common.css
similarity index 100%
rename from src/components/questionStructure/Task/index.css
rename to src/components/questionStructure/Task/styles/common.css
diff --git a/src/components/questionStructure/Task/flagTask.css b/src/components/questionStructure/Task/styles/flag.css
similarity index 100%
rename from src/components/questionStructure/Task/flagTask.css
rename to src/components/questionStructure/Task/styles/flag.css
diff --git a/src/components/questionStructure/Task/types.ts b/src/components/questionStructure/Task/types.ts
index 3a98447..f0104ec 100644
--- a/src/components/questionStructure/Task/types.ts
+++ b/src/components/questionStructure/Task/types.ts
@@ -8,5 +8,4 @@ export interface TaskBaseProps {
 
 export interface AssessmentTaskProps extends TaskBaseProps {
   onAnswerUpdate: (answer: Answer) => void
-  disabled?: boolean
 }
diff --git a/src/pages/MarkingPage/MarkableSubmission.tsx b/src/pages/MarkingPage/MarkableSubmission.tsx
index b9239dd..8d82f3b 100644
--- a/src/pages/MarkingPage/MarkableSubmission.tsx
+++ b/src/pages/MarkingPage/MarkableSubmission.tsx
@@ -6,7 +6,7 @@ import React, { FC } from 'react'
 import Part from '../../components/questionStructure/Part'
 import Question from '../../components/questionStructure/Question'
 import Section from '../../components/questionStructure/Section'
-import { TaskFactory, TaskProps } from '../../components/questionStructure/Task/marking'
+import { ReadOnlyTaskFactory, TaskProps } from '../../components/questionStructure/Task/readonly'
 import { Answer, Question as QuestionType } from '../../types/exam'
 import { MarkRoot, Student } from '../../types/marking'
 import MarkInputPanel from './MarkInputPanel'
@@ -61,7 +61,7 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
                               const t = t_ + 1
                               const answer = lookupAnswer(student.username, q, p, s, t)
                               return (
-                                <TaskFactory
+                                <ReadOnlyTaskFactory
                                   key={`${sectionId}-${t}`}
                                   {...({
                                     answer: answer,
diff --git a/src/pages/QuestionPage/index.tsx b/src/pages/QuestionPage/index.tsx
index b986ea9..8baba39 100644
--- a/src/pages/QuestionPage/index.tsx
+++ b/src/pages/QuestionPage/index.tsx
@@ -8,7 +8,7 @@ import Header from '../../components/pageStructure/Header'
 import Part from '../../components/questionStructure/Part'
 import Question from '../../components/questionStructure/Question'
 import Section from '../../components/questionStructure/Section'
-import { TaskFactory, TaskProps } from '../../components/questionStructure/Task/assessment'
+import { EditableTaskFactory, TaskProps } from '../../components/questionStructure/Task/editable'
 import { Answer, Question as QuestionSpec } from '../../types/exam'
 import AnswerStatus from './AnswerStatus'
 
@@ -49,7 +49,7 @@ const QuestionPage: FC<QuestionPageProps> = ({
                         const answer = lookupAnswer(questionNumber, p, s, t)
                         return (
                           <Grid columns="7fr 3fr" key={`${sectionId}-${t}`}>
-                            <TaskFactory
+                            <EditableTaskFactory
                               {...({
                                 ...instanceToPlain(task),
                                 onAnswerUpdate: saveAnswer,
diff --git a/src/tests/components/questionStructure/Task.test.tsx b/src/tests/components/questionStructure/Task.test.tsx
index 5bbfd78..a770423 100644
--- a/src/tests/components/questionStructure/Task.test.tsx
+++ b/src/tests/components/questionStructure/Task.test.tsx
@@ -1,12 +1,12 @@
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen } from '@testing-library/react'
 
-import { TaskFactory } from '../../../components/questionStructure/Task/assessment'
-import { EssayTask } from '../../../components/questionStructure/Task/assessment/variants/EssayTask'
 import { TaskType } from '../../../components/questionStructure/Task/constants'
+import { EditableTaskFactory } from '../../../components/questionStructure/Task/editable'
+import { EssayTask } from '../../../components/questionStructure/Task/editable/variants/EssayTask'
 import { Answer } from '../../../types/exam'
 
-jest.mock('../../../components/questionStructure/Task/assessment/variants/EssayTask', () => ({
+jest.mock('../../../components/questionStructure/Task/editable/variants/EssayTask', () => ({
   EssayTask: jest.fn(),
 }))
 
@@ -18,7 +18,9 @@ describe('Task Component', () => {
   afterEach(jest.clearAllMocks)
   const updateHandler = jest.fn()
   it('should render correctly according to requested task type', () => {
-    render(<TaskFactory type={TaskType.ESSAY} answer={answer} onAnswerUpdate={updateHandler} />)
+    render(
+      <EditableTaskFactory type={TaskType.ESSAY} answer={answer} onAnswerUpdate={updateHandler} />
+    )
     expect(EssayTask).toHaveBeenCalledWith(
       expect.objectContaining({
         type: TaskType.ESSAY,
@@ -31,7 +33,7 @@ describe('Task Component', () => {
 
   it('renders the description if provided', () => {
     render(
-      <TaskFactory
+      <EditableTaskFactory
         instructions="Test description"
         type={TaskType.ESSAY}
         answer={answer}
diff --git a/src/tests/components/questionStructure/TaskVariants.test.tsx b/src/tests/components/questionStructure/TaskVariants.test.tsx
index 61aaa2a..c5d89c3 100644
--- a/src/tests/components/questionStructure/TaskVariants.test.tsx
+++ b/src/tests/components/questionStructure/TaskVariants.test.tsx
@@ -1,15 +1,15 @@
 import '@testing-library/jest-dom/extend-expect'
 import { fireEvent, render, screen } from '@testing-library/react'
 
-import { CodeTask } from '../../../components/questionStructure/Task/assessment/variants/CodeTask'
-import { EssayTask } from '../../../components/questionStructure/Task/assessment/variants/EssayTask'
-import { FlagTask } from '../../../components/questionStructure/Task/assessment/variants/FlagTask'
+import { TaskType } from '../../../components/questionStructure/Task/constants'
+import { CodeTask } from '../../../components/questionStructure/Task/editable/variants/CodeTask'
+import { EssayTask } from '../../../components/questionStructure/Task/editable/variants/EssayTask'
+import { FlagTask } from '../../../components/questionStructure/Task/editable/variants/FlagTask'
 import {
   MCQMultiTask,
   MCQOneTask,
-} from '../../../components/questionStructure/Task/assessment/variants/MCQ'
-import { NumberTask } from '../../../components/questionStructure/Task/assessment/variants/NumberTask'
-import { TaskType } from '../../../components/questionStructure/Task/constants'
+} from '../../../components/questionStructure/Task/editable/variants/MCQ'
+import { NumberTask } from '../../../components/questionStructure/Task/editable/variants/NumberTask'
 import { Answer } from '../../../types/exam'
 
 const options = [
@@ -52,18 +52,6 @@ describe('FlagTask', () => {
     fireEvent.change(input, { target: { value: ' FLAG 123 ' } })
     expect(input).toHaveValue('FLAG123')
   })
-
-  it('renders as disabled', () => {
-    render(
-      <FlagTask
-        type={TaskType.FLAG}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('textbox')).toBeDisabled()
-  })
 })
 
 describe('NumberTask', () => {
@@ -77,18 +65,6 @@ describe('NumberTask', () => {
     )
     expect(screen.getByRole('spinbutton')).toBeInTheDocument()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <NumberTask
-        type={TaskType.INTEGER}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('spinbutton')).toBeDisabled()
-  })
 })
 
 describe('EssayTask', () => {
@@ -102,18 +78,6 @@ describe('EssayTask', () => {
     )
     expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <EssayTask
-        type={TaskType.ESSAY}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('textbox')).toBeDisabled()
-  })
 })
 
 describe('CodeTask', () => {
@@ -123,18 +87,6 @@ describe('CodeTask', () => {
     )
     expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <CodeTask
-        type={TaskType.CODE}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        disabled={true}
-      />
-    )
-    expect(screen.getByRole('textbox')).toBeDisabled()
-  })
 })
 
 describe('MCQOneTask', () => {
@@ -183,20 +135,6 @@ describe('MCQOneTask', () => {
     fireEvent.click(secondOption)
     expect(mockOnAnswerUpdate).not.toHaveBeenCalled()
   })
-
-  it('renders as disabled', () => {
-    render(
-      <MCQOneTask
-        type={TaskType.MULTIPLE_CHOICE_SELECT_ONE}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        choices={options}
-        disabled={true}
-      />
-    )
-    expect(screen.getByLabelText('Option 1')).toBeDisabled()
-    expect(screen.getByLabelText('Option 2')).toBeDisabled()
-  })
 })
 
 describe('MCQMultiTask', () => {
@@ -265,18 +203,4 @@ describe('MCQMultiTask', () => {
     expect(secondCheckbox).toBeChecked()
     expect(mockOnAnswerUpdate).toHaveBeenCalledWith({ answer: '1,2' })
   })
-
-  it('renders as disabled', () => {
-    render(
-      <MCQMultiTask
-        type={TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL}
-        answer={{ answer: '' } as Answer}
-        onAnswerUpdate={() => {}}
-        choices={options}
-        disabled={true}
-      />
-    )
-    expect(screen.getByLabelText('Option 1')).toBeDisabled()
-    expect(screen.getByLabelText('Option 2')).toBeDisabled()
-  })
 })

From 42d46fbba78be47efff51588e2d2453160ce7a2d Mon Sep 17 00:00:00 2001
From: Ivan Procaccini <ivanprocaccini905@gmail.com>
Date: Wed, 2 Oct 2024 14:02:29 +0200
Subject: [PATCH 5/5] feat: rename AssessmentTaskProps to EditableTaskProps

---
 .../questionStructure/Task/editable/variants/CodeTask.tsx   | 4 ++--
 .../questionStructure/Task/editable/variants/EssayTask.tsx  | 4 ++--
 .../questionStructure/Task/editable/variants/FlagTask.tsx   | 4 ++--
 .../questionStructure/Task/editable/variants/MCQ.tsx        | 6 +++---
 .../questionStructure/Task/editable/variants/NumberTask.tsx | 4 ++--
 .../variants/handwriting/ProcessedHandwritingTask.tsx       | 4 ++--
 .../editable/variants/handwriting/RawHandwritingTask.tsx    | 4 ++--
 src/components/questionStructure/Task/types.ts              | 2 +-
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/questionStructure/Task/editable/variants/CodeTask.tsx b/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
index 855bcbd..4ffbe7d 100644
--- a/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/CodeTask.tsx
@@ -5,9 +5,9 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
 import '../../styles/common.css'
-import { AssessmentTaskProps } from '../../types'
+import { EditableTaskProps } from '../../types'
 
-export interface CodeTaskProps extends AssessmentTaskProps {
+export interface CodeTaskProps extends EditableTaskProps {
   type: TaskType.CODE
   lines?: number
 }
diff --git a/src/components/questionStructure/Task/editable/variants/EssayTask.tsx b/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
index 91dba98..7d0f3fb 100644
--- a/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/EssayTask.tsx
@@ -4,9 +4,9 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
-import { AssessmentTaskProps } from '../../types'
+import { EditableTaskProps } from '../../types'
 
-export interface EssayTaskProps extends AssessmentTaskProps {
+export interface EssayTaskProps extends EditableTaskProps {
   type: TaskType.ESSAY
   lines?: number
 }
diff --git a/src/components/questionStructure/Task/editable/variants/FlagTask.tsx b/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
index 2fcc624..a292f37 100644
--- a/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/FlagTask.tsx
@@ -6,9 +6,9 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
 import '../../styles/flag.css'
-import { AssessmentTaskProps } from '../../types'
+import { EditableTaskProps } from '../../types'
 
-export interface FlagTaskProps extends AssessmentTaskProps {
+export interface FlagTaskProps extends EditableTaskProps {
   type: TaskType.FLAG
   showOrnament?: boolean
 }
diff --git a/src/components/questionStructure/Task/editable/variants/MCQ.tsx b/src/components/questionStructure/Task/editable/variants/MCQ.tsx
index beebc91..a308c56 100644
--- a/src/components/questionStructure/Task/editable/variants/MCQ.tsx
+++ b/src/components/questionStructure/Task/editable/variants/MCQ.tsx
@@ -3,19 +3,19 @@ import { isEqual, map } from 'lodash'
 import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import { TaskType } from '../../constants'
-import { AssessmentTaskProps } from '../../types'
+import { EditableTaskProps } from '../../types'
 
 type MCQOption = {
   value: string
   label: string
 }
 
-export interface MCQOneTaskProps extends AssessmentTaskProps {
+export interface MCQOneTaskProps extends EditableTaskProps {
   type: TaskType.MULTIPLE_CHOICE_SELECT_ONE
   choices: MCQOption[]
 }
 
-export interface MCQMultiTaskProps extends AssessmentTaskProps {
+export interface MCQMultiTaskProps extends EditableTaskProps {
   type: TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL
   choices: MCQOption[]
 }
diff --git a/src/components/questionStructure/Task/editable/variants/NumberTask.tsx b/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
index 3cd4564..b9deac7 100644
--- a/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/NumberTask.tsx
@@ -4,9 +4,9 @@ import React, { FC, useEffect, useMemo, useState } from 'react'
 
 import useDebounce from '../../../../../hooks/debouncing'
 import { TaskType } from '../../constants'
-import { AssessmentTaskProps } from '../../types'
+import { EditableTaskProps } from '../../types'
 
-export interface NumberTaskProps extends AssessmentTaskProps {
+export interface NumberTaskProps extends EditableTaskProps {
   type: TaskType.INTEGER
 }
 
diff --git a/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
index d6215a7..0b300bc 100644
--- a/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -5,11 +5,11 @@ import { isEmpty, isEqual } from 'lodash'
 import { FC, useEffect, useMemo, useState } from 'react'
 
 import { TaskType } from '../../../constants'
-import { AssessmentTaskProps } from '../../../types'
+import { EditableTaskProps } from '../../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import { ProcessedHandwritingEditor } from './editors/ProcessedHandwritingEditor'
 
-export interface ProcessedHandwritingProps extends AssessmentTaskProps {
+export interface ProcessedHandwritingProps extends EditableTaskProps {
   type: TaskType.PROCESSED_HANDWRITING
 }
 
diff --git a/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
index 541eb7d..ce5b21a 100644
--- a/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
+++ b/src/components/questionStructure/Task/editable/variants/handwriting/RawHandwritingTask.tsx
@@ -4,11 +4,11 @@ import { isEmpty, isEqual } from 'lodash'
 import { FC, useEffect, useMemo, useState } from 'react'
 
 import { TaskType } from '../../../constants'
-import { AssessmentTaskProps } from '../../../types'
+import { EditableTaskProps } from '../../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import RawHandwritingEditor from './editors/RawHandwritingEditor/rawHandwritingEditor'
 
-export interface RawHandwritingProps extends AssessmentTaskProps {
+export interface RawHandwritingProps extends EditableTaskProps {
   type: TaskType.RAW_HANDWRITING
 }
 
diff --git a/src/components/questionStructure/Task/types.ts b/src/components/questionStructure/Task/types.ts
index f0104ec..634d0a8 100644
--- a/src/components/questionStructure/Task/types.ts
+++ b/src/components/questionStructure/Task/types.ts
@@ -6,6 +6,6 @@ export interface TaskBaseProps {
   answer: Answer
 }
 
-export interface AssessmentTaskProps extends TaskBaseProps {
+export interface EditableTaskProps extends TaskBaseProps {
   onAnswerUpdate: (answer: Answer) => void
 }