diff --git a/packages/tdev/page-index/remark-plugin/index.ts b/packages/tdev/page-index/remark-plugin/index.ts
index ff737316e..744a09701 100644
--- a/packages/tdev/page-index/remark-plugin/index.ts
+++ b/packages/tdev/page-index/remark-plugin/index.ts
@@ -61,10 +61,6 @@ const scheduleExportDb = debounce(
     { edges: ['trailing'] }
 );
 
-/**
- * This plugin transforms inline code and code blocks in MDX files to use
- * custom MDX components by converting the code content into attributes.
- */
 const remarkPlugin: Plugin<PluginOptions[], Root> = function plugin(
     options = { components: [], persistedCodeType: () => 'code' }
 ): Transformer<Root> {
diff --git a/packages/tdev/page-read-check/PageReadCheck/index.tsx b/packages/tdev/page-read-check/PageReadCheck/index.tsx
index 0316a20a8..925faa514 100644
--- a/packages/tdev/page-read-check/PageReadCheck/index.tsx
+++ b/packages/tdev/page-read-check/PageReadCheck/index.tsx
@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import { mdiFlashTriangle } from '@mdi/js';
 import Icon from '@mdi/react';
 import PageReadChecker from '../model';
+import { useScrollTo } from '@tdev-hooks/useScrollTo';
 
 interface Props extends MetaInit {
     id: string;
@@ -28,11 +29,10 @@ const defaultDisabledReason = (doc: PageReadChecker) =>
 const PageReadCheck = observer((props: Props) => {
     const { text = defaultText, disabledReason = defaultDisabledReason } = props;
     const [meta] = React.useState(new ModelMeta(props));
-    const ref = React.useRef<HTMLDivElement>(null);
 
     const viewStore = useStore('viewStore');
     const doc = useFirstMainDocument(props.id, meta);
-    const [animate, setAnimate] = React.useState(false);
+    const [ref, animate] = useScrollTo(doc);
 
     React.useEffect(() => {
         if (!viewStore.isPageVisible || !doc) {
@@ -49,25 +49,6 @@ const PageReadCheck = observer((props: Props) => {
         };
     }, [doc, doc?.read, viewStore.isPageVisible, props.continueAfterUnlock]);
 
-    React.useEffect(() => {
-        if (ref.current && doc?.scrollTo) {
-            ref.current.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-            doc.setScrollTo(false);
-            setAnimate(true);
-        }
-    }, [ref, doc?.scrollTo]);
-
-    React.useEffect(() => {
-        if (animate) {
-            const timeout = setTimeout(() => {
-                setAnimate(false);
-            }, 2000);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-    }, [animate]);
-
     if (!doc) {
         return null;
     }
diff --git a/packages/tdev/page-read-check/model/index.ts b/packages/tdev/page-read-check/model/index.ts
index 28cfe61fa..cae1fb48e 100644
--- a/packages/tdev/page-read-check/model/index.ts
+++ b/packages/tdev/page-read-check/model/index.ts
@@ -12,6 +12,7 @@ export const createModel: Factory = (data, store) => {
 };
 
 class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableDocument<'page_read_check'> {
+    readonly hideFromOverview = false;
     @observable accessor readTime: number = 0;
     @observable accessor read: boolean = false;
     @observable accessor scrollTo: boolean = false;
diff --git a/src/api/document.ts b/src/api/document.ts
index baf6b84cb..eb55dc6fc 100644
--- a/src/api/document.ts
+++ b/src/api/document.ts
@@ -19,11 +19,10 @@ import iDocumentContainer from '@tdev-models/iDocumentContainer';
 import iViewStore from '@tdev-stores/ViewStores/iViewStore';
 import Code from '@tdev-models/documents/Code';
 import { iTaskableDocument } from '@tdev-models/iTaskableDocument';
-import ChoiceAnswer, {
-    ChoiceAnswerChoices,
-    ChoiceAnswerOptionOrders,
-    ChoiceAnswerQuestionOrder
-} from '@tdev-models/documents/ChoiceAnswer';
+import type ChoiceAnswer from '@tdev-models/documents/Assessable/ChoiceAnswer';
+import type TrueFalseAnswer from '@tdev-models/documents/Assessable/TrueFalseAnswer';
+import type Quiz from '@tdev-models/documents/Assessable/Quiz';
+import iAssessable from '@tdev-models/documents/Assessable/iAssessable';
 
 export enum Access {
     RO_DocumentRoot = 'RO_DocumentRoot',
@@ -46,11 +45,22 @@ export interface StringData {
     text: string;
 }
 
-export interface ChoiceAnswerData {
-    choices: ChoiceAnswerChoices;
-    optionOrders: ChoiceAnswerOptionOrders;
-    questionOrder: ChoiceAnswerQuestionOrder | null;
+interface AssessableData {
     assessed: boolean;
+    qid?: string;
+}
+
+export interface TrueFalseAnswerData extends AssessableData {
+    value: boolean | null;
+}
+
+export interface ChoiceAnswerData extends AssessableData {
+    choices: number[];
+    optionsOrder: number[];
+}
+
+export interface QuizData extends AssessableData {
+    questionOrder: number[];
 }
 
 export interface QuillV2Data {
@@ -122,11 +132,17 @@ export interface ViewStoreTypeMapping {
 export type ViewStoreType = keyof ViewStoreTypeMapping;
 export type ViewStore = ViewStoreTypeMapping[ViewStoreType];
 
+export interface AssessableDataMapping {
+    ['true_false_answer']: TrueFalseAnswerData;
+    ['choice_answer']: ChoiceAnswerData;
+    ['quiz']: QuizData;
+}
+
 export interface ContainerTypeDataMapping {
     ['_container_placeholder_']: { name: string }; // placeholder to avoid empty interface error
 }
 
-export interface TaskableDocumentMapping {
+export interface TaskableDocumentMapping extends AssessableDataMapping {
     ['task_state']: TaskStateData;
     ['progress_state']: ProgressStateData;
 }
@@ -136,7 +152,6 @@ export interface TypeDataMapping extends TaskableDocumentMapping, ContainerTypeD
     // TODO: rename to `code_version`?
     ['script_version']: ScriptVersionData;
     ['string']: StringData;
-    ['choice_answer']: ChoiceAnswerData;
     ['quill_v2']: QuillV2Data;
     ['solution']: SolutionData;
     ['dir']: DirData;
@@ -149,6 +164,7 @@ export interface TypeDataMapping extends TaskableDocumentMapping, ContainerTypeD
 }
 export type ContainerType = keyof ContainerTypeDataMapping;
 export type TaskableType = keyof TaskableDocumentMapping;
+export type AssessableType = keyof AssessableDataMapping;
 
 type KeysWithCode<T> = {
     [K in keyof T]: 'code' extends keyof T[K] ? K : never;
@@ -160,7 +176,16 @@ export interface ContainerTypeModelMapping {
     ['_container_placeholder_']: iDocumentContainer<ContainerType>; // placeholder to avoid empty interface error
 }
 
-export interface TaskableTypeModelMapping {
+export interface AssessableTypeModelMapping {
+    ['true_false_answer']: TrueFalseAnswer;
+    ['choice_answer']: ChoiceAnswer;
+    ['quiz']: Quiz;
+}
+// enforce all AssessableTypeModels to extend iAssessable:
+type EnsureAllAssessable<T extends { [K in keyof T]: iAssessable<any> }> = T;
+null as unknown as EnsureAllAssessable<AssessableTypeModelMapping>;
+
+export interface TaskableTypeModelMapping extends AssessableTypeModelMapping {
     ['task_state']: TaskState;
     ['progress_state']: ProgressState;
 }
@@ -168,12 +193,12 @@ export interface TaskableTypeModelMapping {
 type EnsureAllTaskable<T extends { [K in keyof T]: iTaskableDocument<any> }> = T;
 null as unknown as EnsureAllTaskable<TaskableTypeModelMapping>;
 
-export interface TypeModelMapping extends TaskableTypeModelMapping, ContainerTypeModelMapping {
+export interface TypeModelMapping
+    extends TaskableTypeModelMapping, ContainerTypeModelMapping, AssessableTypeModelMapping {
     ['code']: Code;
     // TODO: rename to `code_version`?
     ['script_version']: ScriptVersion;
     ['string']: String;
-    ['choice_answer']: ChoiceAnswer;
     ['quill_v2']: QuillV2;
     ['solution']: Solution;
     ['dir']: Directory;
@@ -192,6 +217,7 @@ export interface TypeModelMapping extends TaskableTypeModelMapping, ContainerTyp
 
 export type ContainerModelType = ContainerTypeModelMapping[ContainerType];
 export type TaskableModelType = TaskableTypeModelMapping[TaskableType];
+export type AssessableModelType = AssessableTypeModelMapping[AssessableType];
 
 export type DocumentType = keyof TypeModelMapping;
 export type DocumentModelType = TypeModelMapping[DocumentType];
diff --git a/src/components/documents/Assessable/ChoiceAnswer/index.tsx b/src/components/documents/Assessable/ChoiceAnswer/index.tsx
new file mode 100644
index 000000000..029f07a45
--- /dev/null
+++ b/src/components/documents/Assessable/ChoiceAnswer/index.tsx
@@ -0,0 +1,83 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import UnknownDocumentType from '@tdev-components/shared/Alert/UnknownDocumentType';
+import Loader from '@tdev-components/Loader';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { useDocumentRootId } from '@tdev-hooks/useContextDocumentRootId';
+import { useFirstDocumentBy } from '@tdev-hooks/useFirstDocumentBy';
+import { DocContext } from '@tdev-components/documents/DocumentContext';
+import { AssessableComponentProps } from '@tdev-models/documents/Assessable/AssessableMeta';
+import { type default as ChoiceAnswerModel, ModelMeta } from '@tdev-models/documents/Assessable/ChoiceAnswer';
+import Options from '../Inputs/Options';
+import Option, { Props as OptionProps } from '../Inputs/Option';
+import QuestionCard from '../QuestionCard';
+import { action } from 'mobx';
+import { useDocument } from '@tdev-hooks/useContextDocument';
+
+interface SharedProps extends AssessableComponentProps<'choice_answer'> {
+    multiple?: boolean;
+    randomizeOptions?: boolean;
+    optionsCount: number;
+}
+
+export interface StandaloneProps extends SharedProps {
+    id: string;
+    qid: never;
+}
+
+export interface InQuizProps extends SharedProps {
+    qid: string;
+}
+
+export type ChoiceAnswerProps = StandaloneProps | InQuizProps;
+
+interface ThinWrapperProps {
+    children: React.ReactNode;
+}
+
+type ChoiceAnswerSubComponents = {
+    Options: React.FC<ThinWrapperProps>;
+    Option: React.FC<OptionProps<'choice_answer'>>;
+};
+
+const ChoiceAnswer = observer((props: ChoiceAnswerProps) => {
+    const [meta] = React.useState(new ModelMeta(props));
+    const docRootId = useDocumentRootId(props.id);
+
+    const doc = useFirstDocumentBy(docRootId, meta, props.qid);
+    const isBrowser = useIsBrowser();
+
+    if (!doc) {
+        return <UnknownDocumentType type={meta.type} />;
+    }
+
+    if (!isBrowser) {
+        return <Loader />;
+    }
+
+    return (
+        <QuestionCard doc={doc}>
+            <DocContext.Provider value={doc}>{props.children}</DocContext.Provider>
+        </QuestionCard>
+    );
+}) as React.FC<ChoiceAnswerProps> & ChoiceAnswerSubComponents;
+
+ChoiceAnswer.Options = Options;
+
+const onUpdateSelection = action((doc: ChoiceAnswerModel, optionIndex: number, checked: boolean) => {
+    doc.updateSelection(optionIndex, checked, doc.multiple);
+});
+ChoiceAnswer.Option = observer((props: Omit<OptionProps<'choice_answer'>, 'onChange'>) => {
+    const doc = useDocument<'choice_answer'>();
+    return (
+        <Option
+            {...props}
+            onChange={onUpdateSelection}
+            optionOrder={doc.optionsDisplayOrder(props.optionIndex)}
+            isChecked={doc.choices.has(props.optionIndex)}
+            multiple={doc.multiple}
+        />
+    );
+});
+
+export default ChoiceAnswer;
diff --git a/src/components/documents/Assessable/Feedback/QuestionScore.tsx b/src/components/documents/Assessable/Feedback/QuestionScore.tsx
new file mode 100644
index 000000000..03d8a9a20
--- /dev/null
+++ b/src/components/documents/Assessable/Feedback/QuestionScore.tsx
@@ -0,0 +1,61 @@
+import Icon from '@mdi/react';
+import { observer } from 'mobx-react-lite';
+import styles from './styles.module.scss';
+import React from 'react';
+import { QuestionScoringHint } from '../Hints';
+import useIsMobileView from '@tdev-hooks/useIsMobileView';
+import { Correctness, CorrectnessColors } from '@tdev-models/documents/Assessable/iAssessable';
+import { mdiCheckCircleOutline, mdiCloseCircleOutline, mdiProgressCheck, mdiProgressQuestion } from '@mdi/js';
+import type { AssessableType, AssessableTypeModelMapping } from '@tdev-api/document';
+import Badge from '@tdev-components/shared/Badge';
+import { useScrollTo } from '@tdev-hooks/useScrollTo';
+import clsx from 'clsx';
+
+interface FeedbackBadgeProps<T extends AssessableType> {
+    doc: AssessableTypeModelMapping[T];
+}
+
+const ICONS_BY_CORRECTNESS: Record<Correctness, string> = {
+    [Correctness.Correct]: mdiCheckCircleOutline,
+    [Correctness.Incorrect]: mdiCloseCircleOutline,
+    [Correctness.PartiallyCorrect]: mdiProgressCheck,
+    [Correctness.NA]: mdiProgressQuestion
+};
+
+export const QuestionScore = observer(<T extends AssessableType>(props: FeedbackBadgeProps<T>) => {
+    const { doc } = props;
+    const isMobileView = useIsMobileView();
+    const [ref, animate] = useScrollTo(doc);
+
+    if (!doc) {
+        return null;
+    }
+    const maxPoints = doc.assessment?.scoring?.maxPoints ?? doc.maxHits;
+    const maxPointsText = isMobileView ? `${maxPoints}p` : `${maxPoints} Punkt${maxPoints !== 1 ? 'e' : ''}`;
+
+    return (
+        <div className={clsx(styles.feedbackBadge, animate && styles.animate)} ref={ref}>
+            {doc.assessment?.scoring && (
+                <QuestionScoringHint
+                    doc={doc}
+                    trigger={
+                        <span>
+                            <Badge type="secondary" className={styles.pointsBadge}>
+                                {doc.isAssessed && `${doc.assessment.scoring.pointsAchieved}/`}
+                                {maxPointsText}
+                            </Badge>
+                        </span>
+                    }
+                />
+            )}
+            {!doc.assessment?.scoring && <QuestionScoringHint doc={doc} />}
+            {doc.isAssessed && (
+                <Icon
+                    path={ICONS_BY_CORRECTNESS[doc.correctness]}
+                    color={CorrectnessColors[doc.correctness]}
+                    size={1}
+                />
+            )}
+        </div>
+    );
+});
diff --git a/src/components/documents/Assessable/Feedback/QuizScore.tsx b/src/components/documents/Assessable/Feedback/QuizScore.tsx
new file mode 100644
index 000000000..4c1fd9f75
--- /dev/null
+++ b/src/components/documents/Assessable/Feedback/QuizScore.tsx
@@ -0,0 +1,37 @@
+import { observer } from 'mobx-react-lite';
+import styles from './styles.module.scss';
+import React from 'react';
+import useIsMobileView from '@tdev-hooks/useIsMobileView';
+import Quiz from '@tdev-models/documents/Assessable/Quiz';
+import Badge from '@tdev-components/shared/Badge';
+
+interface QuizScoreProps {
+    doc: Quiz;
+}
+
+export const QuizScore = observer(({ doc }: QuizScoreProps) => {
+    const isMobileView = useIsMobileView();
+
+    if (!doc || doc.maxHits === 0) {
+        // No scoring, so we don't show anything.
+        return null;
+    }
+    const maxPoints = doc.assessment?.scoring?.maxPoints ?? doc.maxHits;
+    const maxPointsText = isMobileView ? `${maxPoints}p` : `${maxPoints} Punkt${maxPoints !== 1 ? 'e' : ''}`;
+
+    if (!doc.isAssessed) {
+        return (
+            <Badge type="primary" className={styles.pointsBadge}>
+                {isMobileView ? `Max.: ${maxPointsText}` : `Zu erreichen: ${maxPointsText}`}
+            </Badge>
+        );
+    }
+    const totalPointsAchieved = doc.assessment?.scoring?.pointsAchieved ?? 'N/A';
+    return (
+        <Badge type="primary" className={styles.pointsBadge}>
+            {isMobileView
+                ? `${totalPointsAchieved}/${maxPointsText}`
+                : `Ergebnis: ${totalPointsAchieved}/${maxPointsText}`}
+        </Badge>
+    );
+});
diff --git a/src/components/documents/Assessable/Feedback/styles.module.scss b/src/components/documents/Assessable/Feedback/styles.module.scss
new file mode 100644
index 000000000..e6ec7910c
--- /dev/null
+++ b/src/components/documents/Assessable/Feedback/styles.module.scss
@@ -0,0 +1,48 @@
+.feedbackBadge {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    @keyframes flash {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.8;
+        }
+    }
+
+    @keyframes shake {
+        0%,
+        100% {
+            transform: translateX(0) rotate(0deg);
+        }
+        10%,
+        30%,
+        50%,
+        70%,
+        90% {
+            transform: translateX(-2px) rotate(-5deg);
+        }
+        20%,
+        40%,
+        60%,
+        80% {
+            transform: translateX(2px) rotate(5deg);
+        }
+    }
+}
+
+.pointsBadge {
+    flex-direction: row;
+    align-items: center;
+}
+
+.animate {
+    animation:
+        flash 1s normal,
+        shake 1.5s normal;
+    transform-origin: center;
+}
diff --git a/src/components/documents/Assessable/Hints/index.tsx b/src/components/documents/Assessable/Hints/index.tsx
new file mode 100644
index 000000000..c25202594
--- /dev/null
+++ b/src/components/documents/Assessable/Hints/index.tsx
@@ -0,0 +1,77 @@
+import { mdiCloseCircleOutline, mdiInformationOutline } from '@mdi/js';
+import Icon from '@mdi/react';
+import Button from '@tdev-components/shared/Button';
+import Card from '@tdev-components/shared/Card';
+import ChoiceAnswerDocument from '@tdev-models/documents/Assessable/ChoiceAnswer';
+import clsx from 'clsx';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import Popup from 'reactjs-popup';
+import { PopupActions } from 'reactjs-popup/dist/types';
+import styles from './styles.module.scss';
+import type { AssessableType, AssessableTypeModelMapping } from '@tdev-api/document';
+
+interface QuestionScoringHintProps<T extends AssessableType> {
+    doc?: AssessableTypeModelMapping[T];
+    trigger?: React.ReactNode;
+}
+
+export const QuestionScoringHint = observer(
+    <T extends AssessableType>(props: QuestionScoringHintProps<T>) => {
+        const { doc, trigger } = props;
+        const ref = React.useRef<PopupActions>(null);
+
+        if (!doc) {
+            return null;
+        }
+
+        const assessment = doc.assessment;
+
+        let scoringHint;
+        if (!assessment?.scoring) {
+            scoringHint = 'Für diese Aufgabe gibt es keine Punktebewertung.';
+        } else if (!!assessment.scoring && !assessment?.scoring?.scoringHint) {
+            scoringHint = 'Für diese Aufgabe ist kein Bewertungshinweis verfügbar.';
+        } else {
+            scoringHint =
+                typeof assessment.scoring.scoringHint === 'function'
+                    ? assessment.scoring.scoringHint()
+                    : assessment.scoring.scoringHint;
+        }
+
+        return (
+            <Popup
+                trigger={
+                    trigger || (
+                        <span className={clsx(styles.scoringHintTrigger)}>
+                            <Icon path={mdiInformationOutline} size={0.7} />
+                        </span>
+                    )
+                }
+                lockScroll
+                closeOnEscape={true}
+                closeOnDocumentClick={true}
+                ref={ref}
+                modal
+                on="click"
+                overlayStyle={{ background: 'rgba(0,0,0,0.5)' }}
+            >
+                <Card
+                    header={
+                        <div className={clsx(styles.scoringHintPopupHeader)}>
+                            <h3>Bewertung</h3>
+                            <Button
+                                icon={mdiCloseCircleOutline}
+                                onClick={() => {
+                                    ref.current?.close();
+                                }}
+                            />
+                        </div>
+                    }
+                >
+                    <div>{scoringHint}</div>
+                </Card>
+            </Popup>
+        );
+    }
+);
diff --git a/src/components/documents/ChoiceAnswer/Hints/styles.module.scss b/src/components/documents/Assessable/Hints/styles.module.scss
similarity index 100%
rename from src/components/documents/ChoiceAnswer/Hints/styles.module.scss
rename to src/components/documents/Assessable/Hints/styles.module.scss
diff --git a/src/components/documents/Assessable/Inputs/Option/index.tsx b/src/components/documents/Assessable/Inputs/Option/index.tsx
new file mode 100644
index 000000000..22a5883ce
--- /dev/null
+++ b/src/components/documents/Assessable/Inputs/Option/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '../styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useDocument } from '@tdev-hooks/useContextDocument';
+import Button from '@tdev-components/shared/Button';
+import { mdiTrashCanOutline } from '@mdi/js';
+import { AssessableType, AssessableTypeModelMapping } from '@tdev-api/document';
+
+export interface Props<T extends AssessableType> {
+    type?: T;
+    children: React.ReactNode;
+    optionIndex: number;
+    isChecked: boolean;
+    // !! must be a stable reference, otherwise the whole list will re-render on every change
+    onChange: (doc: AssessableTypeModelMapping[T], optionIndex: number, checked: boolean) => void;
+    optionOrder?: number;
+    multiple?: boolean;
+}
+
+const Option = observer(<T extends AssessableType>(props: Props<T>) => {
+    const doc = useDocument<T>();
+    const optionId = React.useId();
+    const { children, optionIndex, optionOrder, onChange, isChecked } = props;
+
+    return (
+        <div
+            key={optionId}
+            className={clsx(styles.choiceAnswerOptionContainer)}
+            style={{
+                order: optionOrder
+            }}
+        >
+            <div className={styles.checkboxContainer}>
+                <input
+                    type={props.multiple ? 'checkbox' : 'radio'}
+                    id={optionId}
+                    name={doc.id}
+                    onChange={(e) => onChange(doc, optionIndex, e.target.checked)}
+                    checked={isChecked}
+                    className={styles.checkbox}
+                    disabled={!doc?.canUpdateAnswer}
+                    tabIndex={optionOrder}
+                />
+            </div>
+            <label htmlFor={optionId}>{children}</label>
+            {!props.multiple && (
+                <div className={styles.btnDeleteAnswerContainer}>
+                    <Button
+                        color="danger"
+                        icon={mdiTrashCanOutline}
+                        iconSide="left"
+                        size={0.7}
+                        onClick={() => onChange(doc, optionIndex, false)}
+                        className={clsx(
+                            styles.btnDeleteAnswer,
+                            doc?.canUpdateAnswer && isChecked && styles.visible
+                        )}
+                    />
+                </div>
+            )}
+        </div>
+    );
+});
+
+export default Option;
diff --git a/src/components/documents/Assessable/Inputs/Options/index.tsx b/src/components/documents/Assessable/Inputs/Options/index.tsx
new file mode 100644
index 000000000..f63d557df
--- /dev/null
+++ b/src/components/documents/Assessable/Inputs/Options/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '../styles.module.scss';
+
+const Options = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div className={clsx(styles.optionsBlock)}>
+            <div className={styles.optionsContainer}>{children}</div>
+        </div>
+    );
+};
+
+export default Options;
diff --git a/src/components/documents/Assessable/Inputs/styles.module.scss b/src/components/documents/Assessable/Inputs/styles.module.scss
new file mode 100644
index 000000000..34eeb73e1
--- /dev/null
+++ b/src/components/documents/Assessable/Inputs/styles.module.scss
@@ -0,0 +1,60 @@
+.optionsBlock {
+    --tdev-assessable-btn-remove-answer-transition-duration: 0.15s;
+
+    &:not(:last-child) {
+        margin-bottom: 1em;
+    }
+
+    .optionsContainer {
+        display: flex;
+        flex-direction: column;
+
+        .choiceAnswerOptionContainer {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+
+            p {
+                margin: 0;
+            }
+
+            .checkboxContainer {
+                display: flex;
+                align-items: center;
+                margin-top: 0.23em;
+            }
+
+            label {
+                margin-left: 0.2em;
+            }
+
+            &:hover .btnDeleteAnswer {
+                opacity: 1;
+                transition: opacity var(--tdev-assessable-btn-remove-answer-transition-duration);
+            }
+        }
+
+        .btnDeleteAnswerContainer {
+            display: flex;
+            align-items: center;
+            margin-left: 0.5em;
+            margin-top: 0.15em;
+
+            .btnDeleteAnswer {
+                font-size: 0.8em;
+                opacity: 0;
+                transition: opacity var(--tdev-assessable-btn-remove-answer-transition-duration);
+                visibility: hidden;
+
+                &.visible {
+                    visibility: visible;
+                }
+            }
+        }
+
+        &:hover .btnDeleteAnswer {
+            opacity: 0.6;
+            transition: opacity var(--tdev-assessable-btn-remove-answer-transition-duration);
+        }
+    }
+}
diff --git a/src/components/documents/Assessable/QuestionCard/Controls/index.tsx b/src/components/documents/Assessable/QuestionCard/Controls/index.tsx
new file mode 100644
index 000000000..b734b4b0b
--- /dev/null
+++ b/src/components/documents/Assessable/QuestionCard/Controls/index.tsx
@@ -0,0 +1,63 @@
+import styles from './styles.module.scss';
+import { Confirm } from '@tdev-components/shared/Button/Confirm';
+import Button from '@tdev-components/shared/Button';
+import SyncStatus from '@tdev-components/SyncStatus';
+import { observer } from 'mobx-react-lite';
+import { mdiCheckboxMarkedCircleAutoOutline, mdiRestore } from '@mdi/js';
+import clsx from 'clsx';
+import useIsMobileView from '@tdev-hooks/useIsMobileView';
+import type { AssessableType, AssessableTypeModelMapping } from '@tdev-api/document';
+
+interface ControlsProps<T extends AssessableType> {
+    doc: AssessableTypeModelMapping[T];
+}
+
+const QuestionControls = observer(<T extends AssessableType>(props: ControlsProps<T>) => {
+    const { doc } = props;
+    const isMobileView = useIsMobileView();
+
+    if (!doc) {
+        return null;
+    }
+
+    if (doc.inQuiz) {
+        return (
+            <div className={clsx(styles.questionControlsContainer)}>
+                <SyncStatus model={doc} size={0.7} />
+            </div>
+        );
+    }
+    return (
+        <div className={clsx(styles.questionControlsContainer)}>
+            <SyncStatus model={doc} size={0.7} />
+            {doc.isAssessed ? (
+                <Confirm
+                    text={isMobileView ? '' : 'Zurücksetzen'}
+                    title="Antwort zurücksetzen."
+                    color="secondary"
+                    icon={mdiRestore}
+                    iconSide="left"
+                    size={0.7}
+                    className={styles.checkButton}
+                    confirmText={isMobileView ? 'Sicher?' : 'Wirklich zurücksetzen?'}
+                    onConfirm={() => {
+                        doc.reset();
+                    }}
+                />
+            ) : (
+                <Button
+                    text={isMobileView ? '' : 'Prüfen'}
+                    title="Antwort prüfen und Frage als bewertet markieren. Danach ist keine Bearbeitung der Antworten mehr möglich."
+                    color="success"
+                    icon={mdiCheckboxMarkedCircleAutoOutline}
+                    iconSide="left"
+                    size={0.7}
+                    className={styles.checkButton}
+                    onClick={() => doc.setAssessed(true)}
+                />
+            )}
+        </div>
+    );
+});
+
+export default QuestionControls;
diff --git a/src/components/documents/ChoiceAnswer/Controls/styles.module.scss b/src/components/documents/Assessable/QuestionCard/Controls/styles.module.scss
similarity index 50%
rename from src/components/documents/ChoiceAnswer/Controls/styles.module.scss
rename to src/components/documents/Assessable/QuestionCard/Controls/styles.module.scss
index 06a63c49a..d2489b5bb 100644
--- a/src/components/documents/ChoiceAnswer/Controls/styles.module.scss
+++ b/src/components/documents/Assessable/QuestionCard/Controls/styles.module.scss
@@ -5,13 +5,3 @@
     align-items: center;
     gap: 0.5em;
 }
-
-.quizControlsContainer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-}
-
-.checkButton {
-    z-index: 100;
-}
diff --git a/src/components/documents/Assessable/QuestionCard/index.tsx b/src/components/documents/Assessable/QuestionCard/index.tsx
new file mode 100644
index 000000000..6dd204dc3
--- /dev/null
+++ b/src/components/documents/Assessable/QuestionCard/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import Card from '@tdev-components/shared/Card';
+import { AssessableType, TypeModelMapping } from '@tdev-api/document';
+import DocumentContext from '@tdev-components/documents/DocumentContext';
+import { QuestionScore } from '../Feedback/QuestionScore';
+import QuestionControls from './Controls';
+
+interface Props<T extends AssessableType> {
+    doc: TypeModelMapping[T];
+    children: React.ReactNode;
+}
+
+const QuestionCard = observer(<T extends AssessableType>(props: Props<T>) => {
+    const { doc } = props;
+    const correctAnswer = doc.linkedMeta?.correct ?? [];
+    return (
+        <Card
+            classNames={{
+                card: clsx(styles.questionCard, styles[doc.correctness]),
+                header: clsx(styles.header, styles[doc.correctness])
+            }}
+            style={{
+                order: doc.questionIndex
+            }}
+            header={
+                <>
+                    <h3 className={clsx(styles.questionTitle)}>{doc.displayTitle}</h3>
+                    <div className={clsx(styles.controlsAndFeedback)}>
+                        {correctAnswer && <QuestionControls doc={doc} />}
+                        <QuestionScore doc={doc} />
+                    </div>
+                </>
+            }
+        >
+            <DocumentContext document={doc}>{props.children}</DocumentContext>
+        </Card>
+    );
+});
+export default QuestionCard;
diff --git a/src/components/documents/Assessable/QuestionCard/styles.module.scss b/src/components/documents/Assessable/QuestionCard/styles.module.scss
new file mode 100644
index 000000000..4e4a542d4
--- /dev/null
+++ b/src/components/documents/Assessable/QuestionCard/styles.module.scss
@@ -0,0 +1,71 @@
+.questionCard {
+    position: relative;
+    margin-bottom: 1em;
+    --tdev-box-shadow-defaults: 0 0 8px;
+
+    p {
+        margin: 0 0 0.5em 0;
+    }
+
+    &.correct {
+        box-shadow: var(--tdev-box-shadow-defaults) var(--ifm-color-success);
+
+        .header {
+            background-color: var(--ifm-color-success-contrast-background);
+        }
+    }
+
+    &.partially_correct {
+        box-shadow: var(--tdev-box-shadow-defaults) var(--ifm-color-warning);
+
+        .header {
+            background-color: var(--ifm-color-warning-contrast-background);
+        }
+    }
+
+    &.incorrect {
+        box-shadow: var(--tdev-box-shadow-defaults) var(--ifm-color-danger-lighter);
+
+        .header {
+            background-color: var(--ifm-color-danger-contrast-background);
+        }
+    }
+
+    .header {
+        background-color: var(--ifm-color-secondary-lightest);
+        padding: 0.7em 1em;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .questionTitle {
+            margin-bottom: 0;
+            font-size: 1.1em;
+            margin-right: 1em;
+            min-width: 2em;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-wrap: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .syncStatus {
+            position: static;
+        }
+
+        .controlsAndFeedback {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 0.5em;
+        }
+    }
+}
+[data-theme='dark'] {
+    .questionCard {
+        .header {
+            background-color: var(--ifm-color-secondary-contrast-background);
+        }
+    }
+}
diff --git a/src/components/documents/Assessable/Quiz/QuizControls/index.tsx b/src/components/documents/Assessable/Quiz/QuizControls/index.tsx
new file mode 100644
index 000000000..8047a1933
--- /dev/null
+++ b/src/components/documents/Assessable/Quiz/QuizControls/index.tsx
@@ -0,0 +1,52 @@
+import styles from './styles.module.scss';
+import { Confirm } from '@tdev-components/shared/Button/Confirm';
+import { observer } from 'mobx-react-lite';
+import { mdiCheckboxMarkedCircleAutoOutline, mdiCheckboxMarkedCircleMinusOutline, mdiRestore } from '@mdi/js';
+import QuizDocument from '@tdev-models/documents/Assessable/Quiz';
+import clsx from 'clsx';
+import useIsMobileView from '@tdev-hooks/useIsMobileView';
+
+interface QuizControlsProps {
+    doc: QuizDocument;
+}
+
+export const QuizControls = observer(({ doc }: QuizControlsProps) => {
+    const isMobileView = useIsMobileView();
+    const missingCount = doc.hasNA ? `trotz ${doc.naCount} fehlender Frage${doc.naCount > 1 ? 'n' : ''}` : '';
+
+    return (
+        <div className={clsx(styles.quizControlsContainer)}>
+            {doc.isAssessed ? (
+                <Confirm
+                    text="Quiz zurücksetzen"
+                    title="Alle Antworten zurücksetzen und Quiz neu beginnen"
+                    color="secondary"
+                    icon={mdiRestore}
+                    iconSide="left"
+                    size={0.7}
+                    className={clsx(styles.checkButton)}
+                    confirmText={isMobileView ? 'Sicher?' : 'Wirklich zurücksetzen?'}
+                    onConfirm={() => {
+                        doc.reset();
+                    }}
+                />
+            ) : (
+                <Confirm
+                    text="Quiz beenden"
+                    title={`Quiz ${missingCount}beenden und Antworten prüfen. Danach ist keine Bearbeitung der Antworten mehr möglich.`}
+                    color={doc.hasNA ? 'warning' : 'success'}
+                    icon={
+                        doc.hasNA ? mdiCheckboxMarkedCircleMinusOutline : mdiCheckboxMarkedCircleAutoOutline
+                    }
+                    iconSide="left"
+                    size={0.7}
+                    className={clsx(styles.checkButton)}
+                    confirmText={isMobileView ? 'Wirklich beenden?' : 'Quiz beenden und Antworten prüfen?'}
+                    onConfirm={() => doc.setAssessed(true)}
+                />
+            )}
+        </div>
+    );
+});
+
+export default QuizControls;
diff --git a/src/components/documents/Assessable/Quiz/QuizControls/styles.module.scss b/src/components/documents/Assessable/Quiz/QuizControls/styles.module.scss
new file mode 100644
index 000000000..39da897ea
--- /dev/null
+++ b/src/components/documents/Assessable/Quiz/QuizControls/styles.module.scss
@@ -0,0 +1,9 @@
+.quizControlsContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.checkButton {
+    z-index: 100;
+}
diff --git a/src/components/documents/Assessable/Quiz/index.tsx b/src/components/documents/Assessable/Quiz/index.tsx
new file mode 100644
index 000000000..90319c5cb
--- /dev/null
+++ b/src/components/documents/Assessable/Quiz/index.tsx
@@ -0,0 +1,59 @@
+import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import UnknownDocumentType from '@tdev-components/shared/Alert/UnknownDocumentType';
+import Loader from '@tdev-components/Loader';
+import styles from './styles.module.scss';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { DocumentRootIdContext } from '@tdev-hooks/useContextDocumentRootId';
+import { AssessableComponentProps } from '@tdev-models/documents/Assessable/AssessableMeta';
+import { ModelMeta } from '@tdev-models/documents/Assessable/Quiz';
+import useLinkedMetaModel from '@tdev-hooks/useLinkedMetaModel';
+import { AssessableType } from '@tdev-api/document';
+import QuizControls from './QuizControls';
+import { useFirstRealMainDocument } from '@tdev-hooks/useFirstRealMainDocument';
+import { QuizScore } from '../Feedback/QuizScore';
+import clsx from 'clsx';
+import { useScrollTo } from '@tdev-hooks/useScrollTo';
+
+export interface Props extends AssessableComponentProps<AssessableType> {
+    id: string;
+    qid: never;
+    questionIds: string[];
+    hideQuestionNumbers?: boolean;
+    randomizeOptions?: boolean;
+    randomizeQuestions?: boolean;
+    minPoints?: number;
+}
+
+const Quiz = observer((props: Props) => {
+    const [meta] = React.useState(new ModelMeta(props));
+    const doc = useFirstRealMainDocument(props.id, meta);
+    const [ref, animate] = useScrollTo(doc, 'end');
+    useLinkedMetaModel(doc, meta);
+
+    if (!doc) {
+        return <UnknownDocumentType type={meta.type} />;
+    }
+
+    return (
+        <div
+            className={clsx(
+                styles.quiz,
+                animate && styles.animate,
+                doc.isAssessed && doc.assessment && styles[doc.assessment?.correctness]
+            )}
+            ref={ref}
+        >
+            <DocumentRootIdContext id={props.id}>
+                <div className={styles.content}>{props.children}</div>
+                <div className={styles.footer}>
+                    <QuizScore doc={doc} />
+                    <QuizControls doc={doc} />
+                </div>
+            </DocumentRootIdContext>
+        </div>
+    );
+});
+
+export default Quiz;
diff --git a/src/components/documents/Assessable/Quiz/styles.module.scss b/src/components/documents/Assessable/Quiz/styles.module.scss
new file mode 100644
index 000000000..2ee41d8ce
--- /dev/null
+++ b/src/components/documents/Assessable/Quiz/styles.module.scss
@@ -0,0 +1,59 @@
+.content {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 0.5em;
+    gap: 0.5em;
+}
+
+.quiz {
+    --tdev-quiz-flash-color: var(--ifm-color-warning);
+    &.correct {
+        --tdev-quiz-flash-color: var(--ifm-color-success);
+    }
+    &.incorrect {
+        --tdev-quiz-flash-color: var(--ifm-color-danger);
+    }
+    &.animate {
+        animation:
+            flash 1s normal,
+            shake 1.5s normal;
+        transform-origin: center;
+    }
+
+    @keyframes flash {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.8;
+        }
+    }
+
+    @keyframes shake {
+        0%,
+        100% {
+            transform: translateX(0) rotate(0deg);
+        }
+        10%,
+        30%,
+        50%,
+        70%,
+        90% {
+            transform: translateX(-2px) rotate(-0.2deg);
+        }
+        20%,
+        40%,
+        60%,
+        80% {
+            transform: translateX(2px) rotate(0.2deg);
+        }
+    }
+}
diff --git a/src/components/documents/Assessable/TrueFalseAnswer/index.tsx b/src/components/documents/Assessable/TrueFalseAnswer/index.tsx
new file mode 100644
index 000000000..8a5fec40a
--- /dev/null
+++ b/src/components/documents/Assessable/TrueFalseAnswer/index.tsx
@@ -0,0 +1,74 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { AssessableComponentProps } from '@tdev-models/documents/Assessable/AssessableMeta';
+import {
+    type default as TrueFalseAnswerModel,
+    ModelMeta
+} from '@tdev-models/documents/Assessable/TrueFalseAnswer';
+import { useDocumentRootId } from '@tdev-hooks/useContextDocumentRootId';
+import { useFirstDocumentBy } from '@tdev-hooks/useFirstDocumentBy';
+import UnknownDocumentType from '@tdev-components/shared/Alert/UnknownDocumentType';
+import QuestionCard from '../QuestionCard';
+import { DocContext } from '@tdev-components/documents/DocumentContext';
+import Options from '../Inputs/Options';
+import Option from '../Inputs/Option';
+import { action } from 'mobx';
+
+interface BaseProps extends AssessableComponentProps<'true_false_answer'> {}
+
+interface FalseyProps {
+    isFalse?: boolean;
+    incorrect?: boolean;
+}
+
+interface TruthyProps {
+    isTrue?: boolean;
+    correct?: boolean;
+}
+
+export type Props = BaseProps & FalseyProps & TruthyProps;
+
+const onUpdateSelection = action((doc: TrueFalseAnswerModel, optionIndex: number, checked: boolean) => {
+    if (!checked) {
+        return doc.setValue(null);
+    }
+    doc.setValue(optionIndex === 0);
+});
+const TrueFalseAnswer = observer((props: Props) => {
+    const [meta] = React.useState(new ModelMeta({ ...props }));
+    const docRootId = useDocumentRootId(props.id);
+    const doc = useFirstDocumentBy(docRootId, meta, props.qid);
+
+    if (!doc) {
+        return <UnknownDocumentType type={meta.type} />;
+    }
+    return (
+        <QuestionCard doc={doc}>
+            <DocContext.Provider value={doc}>
+                <>
+                    {props.children}
+                    <Options>
+                        <Option
+                            type="true_false_answer"
+                            optionIndex={0}
+                            onChange={onUpdateSelection}
+                            isChecked={doc.value === true}
+                        >
+                            Richtig
+                        </Option>
+                        <Option
+                            type="true_false_answer"
+                            optionIndex={1}
+                            onChange={onUpdateSelection}
+                            isChecked={doc.value === false}
+                        >
+                            Falsch
+                        </Option>
+                    </Options>
+                </>
+            </DocContext.Provider>
+        </QuestionCard>
+    );
+});
+
+export default TrueFalseAnswer;
diff --git a/src/components/documents/Assessable/helpers/scoring.tsx b/src/components/documents/Assessable/helpers/scoring.tsx
new file mode 100644
index 000000000..c5b91987d
--- /dev/null
+++ b/src/components/documents/Assessable/helpers/scoring.tsx
@@ -0,0 +1,119 @@
+import { AssessableType } from '@tdev-api/document';
+import { ScoringFunction } from '@tdev-models/documents/Assessable/AssessableMeta';
+import { Correctness, Scoring } from '@tdev-models/documents/Assessable/iAssessable';
+import clsx from 'clsx';
+
+export const points: (
+    forCorrect?: number,
+    forIncorrect?: number,
+    forUnanswered?: number
+) => ScoringFunction<AssessableType> = (forCorrect = 1, forIncorrect = 0, forUnanswered = 0) => {
+    const scoringHint = () => (
+        <ul>
+            <li>
+                <span className={clsx('badge badge--success')}>{forCorrect}</span>{' '}
+                {forCorrect === 1 ? 'Punkt' : 'Punkte'} wenn richtig
+            </li>
+            <li>
+                <span className={clsx('badge badge--danger')}>{forIncorrect}</span>{' '}
+                {forIncorrect === 1 ? 'Punkt' : 'Punkte'} wenn falsch{' '}
+            </li>
+            <li>
+                <span className={clsx('badge badge--secondary')}>{forUnanswered}</span>{' '}
+                {forUnanswered === 1 ? 'Punkt' : 'Punkte'} wenn nicht beantwortet
+            </li>
+        </ul>
+    );
+    const template: Scoring = {
+        maxPoints: forCorrect,
+        pointsAchieved: 0,
+        scoringHint
+    };
+    return (ca) => {
+        if (!ca.isAssessed) {
+            return {
+                correctness: Correctness.NA,
+                scoring: template
+            };
+        }
+        const { hits: achievements, misses: mistakes, maxHits: maxPoints } = ca;
+        if (achievements + mistakes > 1) {
+            throw new Error(
+                `The points() scoring function is not suitable for questions with multiple answers. Please use multipleChoicePoints() instead! ${ca.id}`
+            );
+        }
+        const points = achievements === 1 ? forCorrect : mistakes === 1 ? forIncorrect : forUnanswered;
+        const correctness =
+            points === forCorrect
+                ? Correctness.Correct
+                : points <= 0
+                  ? Correctness.Incorrect
+                  : Correctness.PartiallyCorrect;
+        return {
+            correctness: correctness,
+            scoring: { ...template, pointsAchieved: points }
+        };
+    };
+};
+
+export const multipleChoicePoints: (
+    maxPoints: number,
+    deductionPerWrongChoice: number,
+    allowNegativeTotal: boolean
+) => ScoringFunction<AssessableType> = (maxPoints, deductionPerWrongChoice, allowNegativeTotal = false) => {
+    const scoringHint = () => (
+        <ul>
+            <li>
+                <span className={clsx('badge badge--success')}>{maxPoints}</span>{' '}
+                {maxPoints === 1 ? 'Punkt' : 'Punkte'} wenn alle Antworten richtig sind
+            </li>
+            <li>
+                <span className={clsx('badge badge--danger')}>{deductionPerWrongChoice}</span>{' '}
+                {deductionPerWrongChoice === 1 ? 'Punkt' : 'Punkte'} Abzug pro falscher Auswahl /
+                Nicht-Auswahl
+            </li>
+            {allowNegativeTotal ? (
+                <li>
+                    Die Gesamtpunktzahl <b>kann negativ sein</b>.
+                </li>
+            ) : (
+                <li>
+                    Die Gesamtpunktzahl kann <b>nicht</b> negativ sein.
+                </li>
+            )}
+        </ul>
+    );
+
+    return (model) => {
+        if (!model.isAssessed) {
+            return {
+                correctness: Correctness.NA,
+                scoring: { maxPoints, pointsAchieved: 0, scoringHint }
+            };
+        }
+        if (model.hits === 0 && model.misses === 0) {
+            // No answers selected
+            return {
+                correctness: Correctness.NA,
+                scoring: { maxPoints, pointsAchieved: 0, scoringHint }
+            };
+        }
+
+        const points = maxPoints - model.misses * deductionPerWrongChoice;
+        const finalPoints = allowNegativeTotal ? points : Math.max(points, 0);
+        const correctness =
+            points === maxPoints
+                ? Correctness.Correct
+                : points === 0
+                  ? Correctness.Incorrect
+                  : Correctness.PartiallyCorrect;
+        return {
+            correctness: correctness,
+            scoring: { maxPoints, pointsAchieved: finalPoints, scoringHint }
+        };
+    };
+};
+
+export const noPoints = () => {
+    return () => undefined;
+};
diff --git a/src/components/documents/ChoiceAnswer/helpers/shared.ts b/src/components/documents/Assessable/helpers/shared.ts
similarity index 100%
rename from src/components/documents/ChoiceAnswer/helpers/shared.ts
rename to src/components/documents/Assessable/helpers/shared.ts
diff --git a/src/components/documents/ChoiceAnswer/Component/index.tsx b/src/components/documents/ChoiceAnswer/Component/index.tsx
deleted file mode 100644
index 47929854c..000000000
--- a/src/components/documents/ChoiceAnswer/Component/index.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
-import ChoiceAnswerDocument, {
-    ChoiceAnswerCorrectness,
-    ModelMeta
-} from '@tdev-models/documents/ChoiceAnswer';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.scss';
-import UnknownDocumentType from '@tdev-components/shared/Alert/UnknownDocumentType';
-import Loader from '@tdev-components/Loader';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import { QuizContext } from '../Quiz';
-import Button from '@tdev-components/shared/Button';
-import { mdiTrashCanOutline } from '@mdi/js';
-import { createRandomOrderMap } from '../helpers/shared';
-import QuestionControls from '../Controls';
-import { FeedbackBadge } from '../Feedback';
-import { ScoringFunction } from '../helpers/scoring';
-import { assess } from '../helpers/assessment';
-
-export interface ChoiceAnswerProps {
-    id: string;
-    title?: string;
-    correct?: number[];
-    scoring?: ScoringFunction;
-    questionIndex?: number;
-    inQuiz?: boolean;
-    multiple?: boolean;
-    randomizeOptions?: boolean;
-    numOptions: number;
-    readonly?: boolean;
-    children: React.ReactNode;
-}
-
-interface ThinWrapperProps {
-    children: React.ReactNode;
-}
-
-interface OptionProps {
-    children: React.ReactNode;
-    optionIndex: number;
-}
-
-type ChoiceAnswerSubComponents = {
-    Before: React.FC<ThinWrapperProps>;
-    Options: React.FC<ThinWrapperProps>;
-    Option: React.FC<OptionProps>;
-    After: React.FC<ThinWrapperProps>;
-};
-
-const ChoiceAnswerContext = React.createContext({
-    doc: undefined,
-    questionIndex: 0,
-    multiple: false,
-    randomizeOptions: false,
-    onChange: () => {}
-} as {
-    doc?: ChoiceAnswerDocument;
-    questionIndex: number;
-    multiple?: boolean;
-    randomizeOptions?: boolean;
-    onChange: (optionIndex: number, checked: boolean) => void;
-});
-
-const ChoiceAnswer = observer((props: ChoiceAnswerProps) => {
-    const parentProps = React.useContext(QuizContext);
-    const [meta] = React.useState(new ModelMeta(props));
-    const ownDoc = useFirstMainDocument(props.inQuiz ? undefined : props.id, meta);
-    const doc = props.inQuiz ? parentProps.doc : ownDoc;
-    const questionIndex = props.questionIndex ?? 0;
-    const randomizeOptions =
-        props.randomizeOptions !== undefined ? props.randomizeOptions : parentProps.randomizeOptions;
-    const isBrowser = useIsBrowser();
-
-    React.useEffect(() => {
-        if (randomizeOptions && !doc?.data.optionOrders?.[questionIndex]) {
-            doc?.updateOptionOrders({
-                ...doc.data.optionOrders,
-                [questionIndex]: createRandomOrderMap(props.numOptions)
-            });
-        }
-    }, [randomizeOptions, doc, questionIndex, props.numOptions]);
-
-    React.useEffect(() => {
-        if (!doc) {
-            return;
-        }
-
-        if (props.correct === undefined) {
-            // If no correct options are given, we assume that this question doesn't support assessment.
-            return;
-        }
-        const correctOptions = new Set(props.correct);
-
-        const scoringFunction = props.scoring ?? parentProps.scoring;
-        const assessment = assess(
-            doc,
-            props.multiple ?? false,
-            questionIndex,
-            correctOptions,
-            props.numOptions,
-            scoringFunction
-        );
-        doc.updateAssessment(questionIndex, assessment);
-    }, [doc, doc?.choices, doc?.assessed]);
-
-    if (!doc) {
-        return <UnknownDocumentType type={meta.type} />;
-    }
-
-    if (!isBrowser) {
-        return <Loader />;
-    }
-
-    const assessment = doc.getAssessment(questionIndex);
-    const feedbackStyle = {
-        [styles.correct]: doc.assessed && assessment?.correctness === ChoiceAnswerCorrectness.Correct,
-        [styles.partiallyCorrect]:
-            doc.assessed && assessment?.correctness === ChoiceAnswerCorrectness.PartiallyCorrect,
-        [styles.incorrect]: doc.assessed && assessment?.correctness === ChoiceAnswerCorrectness.Incorrect
-    };
-
-    const childrenArray = React.Children.toArray(props.children);
-    const beforeBlock = childrenArray.find(
-        (child) => React.isValidElement(child) && child.type === ChoiceAnswer.Before
-    );
-    const optionsBlock = childrenArray.find(
-        (child) => React.isValidElement(child) && child.type === ChoiceAnswer.Options
-    );
-    const afterBlock = childrenArray.find(
-        (child) => React.isValidElement(child) && child.type === ChoiceAnswer.After
-    );
-
-    const onOptionChange = (optionIndex: number, checked: boolean) => {
-        parentProps.setFocussedQuestion?.(questionIndex);
-        if (props.multiple) {
-            doc?.updateMultipleChoiceSelection(questionIndex, optionIndex, checked);
-        } else {
-            checked
-                ? doc?.updateSingleChoiceSelection(questionIndex, optionIndex)
-                : doc?.resetAnswer(questionIndex);
-        }
-    };
-
-    const questionOrder =
-        parentProps.randomizeQuestions && parentProps.questionOrder
-            ? parentProps.questionOrder[questionIndex]
-            : questionIndex;
-
-    const questionNumberToDisplay =
-        (parentProps.randomizeQuestions
-            ? (parentProps.questionOrder?.[questionIndex] ?? questionIndex)
-            : questionIndex) + 1;
-    const canonicalTitle =
-        props.inQuiz && !parentProps.hideQuestionNumbers
-            ? props.title
-                ? `Frage ${questionNumberToDisplay} – ${props.title}`
-                : `Frage ${questionNumberToDisplay}`
-            : props.title;
-    const displayTitle = canonicalTitle || 'Frage';
-
-    return (
-        <div
-            className={clsx('card', styles.choiceAnswerContainer, feedbackStyle)}
-            style={{ order: questionOrder }}
-            tabIndex={questionOrder}
-        >
-            <div className={clsx('card__header', styles.header, feedbackStyle)}>
-                <span className={clsx(styles.title)}>{displayTitle}</span>
-                <div className={clsx(styles.controlsAndFeedback)}>
-                    {!!props.correct && (
-                        <QuestionControls
-                            doc={doc}
-                            questionIndex={questionIndex}
-                            focussedQuestion={parentProps.focussedQuestion === questionIndex}
-                            inQuiz={props.inQuiz}
-                        />
-                    )}
-                    <FeedbackBadge doc={doc} questionIndex={questionIndex} />
-                </div>
-            </div>
-
-            <div className={clsx('card__body')}>
-                {beforeBlock}
-                <ChoiceAnswerContext.Provider
-                    value={{
-                        doc: doc,
-                        questionIndex: questionIndex,
-                        multiple: props.multiple,
-                        randomizeOptions: randomizeOptions,
-                        onChange: onOptionChange
-                    }}
-                >
-                    <div className={styles.optionsBlock}>{optionsBlock}</div>
-                </ChoiceAnswerContext.Provider>
-                {afterBlock}
-            </div>
-        </div>
-    );
-}) as React.FC<ChoiceAnswerProps> & ChoiceAnswerSubComponents;
-
-ChoiceAnswer.Option = observer(({ optionIndex, children }: OptionProps) => {
-    const { doc, questionIndex, multiple, randomizeOptions, onChange } =
-        React.useContext(ChoiceAnswerContext);
-
-    const optionId = React.useId();
-
-    const isChecked = !!doc?.choices[questionIndex]?.includes(optionIndex);
-
-    const optionOrder =
-        randomizeOptions && doc?.optionOrders[questionIndex] !== undefined
-            ? doc.optionOrders[questionIndex][optionIndex]
-            : optionIndex;
-
-    return (
-        <div
-            key={optionId}
-            className={clsx(styles.choiceAnswerOptionContainer)}
-            style={{
-                order: optionOrder
-            }}
-        >
-            <div className={styles.checkboxContainer}>
-                <input
-                    type={multiple ? 'checkbox' : 'radio'}
-                    id={optionId}
-                    name={multiple ? optionId : `${doc?.id}-q${questionIndex}`}
-                    value={optionId}
-                    onChange={(e) => onChange(optionIndex, e.target.checked)}
-                    checked={isChecked}
-                    className={styles.checkbox}
-                    disabled={!doc?.canUpdateAnswer}
-                    tabIndex={optionOrder}
-                />
-            </div>
-            <label htmlFor={optionId}>{children}</label>
-            {!multiple && (
-                <div className={styles.btnDeleteAnswerContainer}>
-                    <Button
-                        color="danger"
-                        icon={mdiTrashCanOutline}
-                        iconSide="left"
-                        size={0.7}
-                        onClick={() => onChange(optionIndex, false)}
-                        className={clsx(styles.btnDeleteAnswer, {
-                            [styles.visible]: doc?.canUpdateAnswer && isChecked
-                        })}
-                    />
-                </div>
-            )}
-        </div>
-    );
-});
-
-ChoiceAnswer.Before = ({ children }: { children: React.ReactNode }) => {
-    return <>{children}</>;
-};
-ChoiceAnswer.Options = ({ children }: { children: React.ReactNode }) => {
-    return <div className={clsx(styles.optionsContainer)}>{children}</div>;
-};
-ChoiceAnswer.After = ({ children }: { children: React.ReactNode }) => {
-    return <>{children}</>;
-};
-
-export default ChoiceAnswer;
diff --git a/src/components/documents/ChoiceAnswer/Component/styles.module.scss b/src/components/documents/ChoiceAnswer/Component/styles.module.scss
deleted file mode 100644
index c8ca511cf..000000000
--- a/src/components/documents/ChoiceAnswer/Component/styles.module.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-@use '../_vars' as *;
-
-.choiceAnswerContainer {
-    position: relative;
-    margin-bottom: 1em;
-
-    p {
-        margin: 0 0 0.5em 0;
-    }
-
-    $boxShadowDefaults: 0 0 8px;
-
-    &.correct {
-        box-shadow: $boxShadowDefaults var(--ifm-color-success);
-
-        .header {
-            background-color: var(--ifm-color-success-contrast-background);
-        }
-    }
-
-    &.partiallyCorrect {
-        box-shadow: $boxShadowDefaults var(--ifm-color-warning);
-
-        .header {
-            background-color: var(--ifm-color-warning-contrast-background);
-        }
-    }
-
-    &.incorrect {
-        box-shadow: $boxShadowDefaults var(--ifm-color-danger-lighter);
-
-        .header {
-            background-color: var(--ifm-color-danger-contrast-background);
-        }
-    }
-
-    .header {
-        background-color: var(--ifm-color-secondary-lightest);
-        padding: $container-padding-top-bottom $container-padding-left-right;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        h3 {
-            margin: 0;
-        }
-
-        .title {
-            font-weight: bold;
-            font-size: 1.1em;
-            margin-right: 1em;
-            min-width: 2em;
-            flex-shrink: 1;
-            overflow: hidden;
-            text-wrap: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        .syncStatus {
-            position: static;
-        }
-
-        .controlsAndFeedback {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            gap: 0.5em;
-        }
-    }
-}
-
-.optionsBlock {
-    $btnRemoveAnswerTransitionDuration: 0.15s;
-
-    &:not(:last-child) {
-        margin-bottom: 1em;
-    }
-
-    .optionsContainer {
-        display: flex;
-        flex-direction: column;
-
-        .choiceAnswerOptionContainer {
-            display: flex;
-            flex-direction: row;
-            align-items: flex-start;
-
-            p {
-                margin: 0;
-            }
-
-            .checkboxContainer {
-                display: flex;
-                align-items: center;
-                margin-top: 0.23em;
-            }
-
-            label {
-                margin-left: 0.2em;
-            }
-
-            &:hover .btnDeleteAnswer {
-                opacity: 1;
-                transition: opacity $btnRemoveAnswerTransitionDuration;
-            }
-        }
-
-        .btnDeleteAnswerContainer {
-            display: flex;
-            align-items: center;
-            margin-left: 0.5em;
-            margin-top: 0.15em;
-
-            .btnDeleteAnswer {
-                font-size: 0.8em;
-                opacity: 0;
-                transition: opacity $btnRemoveAnswerTransitionDuration;
-                visibility: hidden;
-
-                &.visible {
-                    visibility: visible;
-                }
-            }
-        }
-
-        &:hover .btnDeleteAnswer {
-            opacity: 0.6;
-            transition: opacity $btnRemoveAnswerTransitionDuration;
-        }
-    }
-}
diff --git a/src/components/documents/ChoiceAnswer/Controls/index.tsx b/src/components/documents/ChoiceAnswer/Controls/index.tsx
deleted file mode 100644
index b9257c038..000000000
--- a/src/components/documents/ChoiceAnswer/Controls/index.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import styles from './styles.module.scss';
-import { Confirm } from '@tdev-components/shared/Button/Confirm';
-import Button from '@tdev-components/shared/Button';
-import SyncStatus from '@tdev-components/SyncStatus';
-import { observer } from 'mobx-react-lite';
-import { mdiCheckboxMarkedCircleAutoOutline, mdiRestore } from '@mdi/js';
-import ChoiceAnswerDocument from '@tdev-models/documents/ChoiceAnswer';
-import clsx from 'clsx';
-import useIsMobileView from '@tdev-hooks/useIsMobileView';
-
-interface ControlsProps {
-    doc: ChoiceAnswerDocument;
-    questionIndex: number;
-    focussedQuestion?: boolean;
-    inQuiz?: boolean;
-}
-
-const QuestionControls = observer(({ doc, focussedQuestion: isFocussedQuestion, inQuiz }: ControlsProps) => {
-    const isMobileView = useIsMobileView();
-
-    if (!doc) {
-        return;
-    }
-
-    const syncStatus = isFocussedQuestion && <SyncStatus model={doc} size={0.7} />;
-
-    const checkOrResetButton = !inQuiz && (
-        <>
-            {!doc.assessed && (
-                <Button
-                    text={isMobileView ? '' : 'Prüfen'}
-                    title="Antwort prüfen und Frage als bewertet markieren. Danach ist keine Bearbeitung der Antworten mehr möglich."
-                    color="success"
-                    icon={mdiCheckboxMarkedCircleAutoOutline}
-                    iconSide="left"
-                    size={0.7}
-                    className={styles.checkButton}
-                    onClick={() => (doc.assessed = true)}
-                />
-            )}
-            {doc.assessed && (
-                <Confirm
-                    text={isMobileView ? '' : 'Zurücksetzen'}
-                    title="Antwort zurücksetzen."
-                    color="secondary"
-                    icon={mdiRestore}
-                    iconSide="left"
-                    size={0.7}
-                    className={styles.checkButton}
-                    confirmText={isMobileView ? 'Sicher?' : 'Wirklich zurücksetzen?'}
-                    onConfirm={() => {
-                        doc.assessed = false;
-                        doc.resetAllAnswers();
-                    }}
-                />
-            )}
-        </>
-    );
-
-    return (
-        <div className={clsx(styles.questionControlsContainer)}>
-            {syncStatus}
-            {checkOrResetButton}
-        </div>
-    );
-});
-
-interface QuizControlsProps {
-    doc: ChoiceAnswerDocument;
-}
-
-export const QuizControls = observer(({ doc }: QuizControlsProps) => {
-    const isMobileView = useIsMobileView();
-
-    return (
-        <div className={styles.quizControlsContainer}>
-            {!doc.assessed && doc.assessments.size > 0 && (
-                <Confirm
-                    text="Quiz beenden"
-                    title="Quiz beenden und Antworten prüfen. Danach ist keine Bearbeitung der Antworten mehr möglich."
-                    color="success"
-                    icon={mdiCheckboxMarkedCircleAutoOutline}
-                    iconSide="left"
-                    size={0.7}
-                    className={styles.checkButton}
-                    confirmText={isMobileView ? 'Wirklich beenden?' : 'Quiz beenden und Antworten prüfen?'}
-                    onConfirm={() => (doc.assessed = true)}
-                />
-            )}
-            {doc.assessed && (
-                <Confirm
-                    text="Quiz zurücksetzen"
-                    title="Alle Antworten zurücksetzen und Quiz neu beginnen"
-                    color="secondary"
-                    icon={mdiRestore}
-                    iconSide="left"
-                    size={0.7}
-                    className={styles.checkButton}
-                    confirmText={isMobileView ? 'Sicher?' : 'Wirklich zurücksetzen?'}
-                    onConfirm={() => {
-                        doc.assessed = false;
-                        doc.resetAllAnswers();
-                    }}
-                />
-            )}
-        </div>
-    );
-});
-
-export default QuestionControls;
diff --git a/src/components/documents/ChoiceAnswer/Feedback/index.tsx b/src/components/documents/ChoiceAnswer/Feedback/index.tsx
deleted file mode 100644
index 7d88c5f86..000000000
--- a/src/components/documents/ChoiceAnswer/Feedback/index.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { mdiCheckCircleOutline, mdiCloseCircleOutline, mdiProgressCheck, mdiProgressQuestion } from '@mdi/js';
-import Icon from '@mdi/react';
-import ChoiceAnswerDocument, { ChoiceAnswerCorrectness } from '@tdev-models/documents/ChoiceAnswer';
-import { observer } from 'mobx-react-lite';
-import styles from './styles.module.scss';
-import React from 'react';
-import clsx from 'clsx';
-import { QuestionScoringHint } from '../Hints';
-import useIsMobileView from '@tdev-hooks/useIsMobileView';
-
-interface FeedbackBadgeProps {
-    doc: ChoiceAnswerDocument;
-    questionIndex: number;
-}
-
-export const FeedbackBadge = observer(({ doc, questionIndex }: FeedbackBadgeProps) => {
-    const isMobileView = useIsMobileView();
-
-    if (!doc) {
-        return;
-    }
-
-    const assessment = doc.assessments.get(questionIndex);
-    if (!assessment) {
-        return;
-    }
-
-    let icon;
-    let color;
-    switch (assessment.correctness) {
-        case ChoiceAnswerCorrectness.Correct:
-            icon = mdiCheckCircleOutline;
-            color = '--ifm-color-success';
-            break;
-        case ChoiceAnswerCorrectness.PartiallyCorrect:
-            icon = mdiProgressCheck;
-            color = '--ifm-color-warning';
-            break;
-        case ChoiceAnswerCorrectness.Incorrect:
-            icon = mdiCloseCircleOutline;
-            color = '--ifm-color-danger';
-            break;
-        case ChoiceAnswerCorrectness.NA:
-            icon = mdiProgressQuestion;
-            color = '--ifm-color-info';
-            break;
-    }
-
-    return (
-        <div className={styles.feedbackBadge}>
-            {assessment.scoring && (
-                <QuestionScoringHint
-                    doc={doc}
-                    questionIndex={questionIndex}
-                    trigger={
-                        <span className={clsx('badge badge--secondary', styles.pointsBadge)}>
-                            {doc.assessed && <span>{assessment.scoring.pointsAchieved}/</span>}
-                            {assessment.scoring.maxPoints}
-                            {isMobileView ? 'p' : assessment.scoring.maxPoints === 1 ? ' Punkt' : ' Punkte'}
-                        </span>
-                    }
-                />
-            )}
-            {!assessment.scoring && doc.hasQuestionsWithScoring && (
-                <QuestionScoringHint doc={doc} questionIndex={questionIndex} />
-            )}
-            {icon && doc.assessed && <Icon path={icon} color={`var(${color})`} size={1} />}
-        </div>
-    );
-});
-
-interface QuizScoreProps {
-    doc: ChoiceAnswerDocument;
-    minPoints?: number;
-}
-
-export const QuizScore = observer(({ doc, minPoints }: QuizScoreProps) => {
-    const isMobileView = useIsMobileView();
-
-    if (!doc || doc.assessments.size === 0) {
-        return;
-    }
-
-    let totalPointsAchieved = 0;
-    let totalMaxPoints = 0;
-    doc.assessments.forEach((assessment) => {
-        if (assessment.scoring) {
-            totalPointsAchieved += assessment.scoring.pointsAchieved;
-            totalMaxPoints += assessment.scoring.maxPoints;
-        }
-    });
-
-    if (totalMaxPoints === 0) {
-        // No scoring, so we don't show anything.
-        return;
-    }
-
-    if (minPoints !== undefined) {
-        totalPointsAchieved = Math.max(totalPointsAchieved, minPoints);
-    }
-
-    const wideScreenBadge = (
-        <>
-            {!doc.assessed && <span>Zu erreichen: </span>}
-            {doc.assessed && <span>Ergebnis: {totalPointsAchieved} /</span>} {totalMaxPoints}{' '}
-            {totalMaxPoints === 1 ? 'Punkt' : 'Punkte'}
-        </>
-    );
-
-    const mobileViewBadge = (
-        <>
-            {!doc.assessed && <span>Max.: {totalMaxPoints}p</span>}
-            {doc.assessed && (
-                <span>
-                    {totalPointsAchieved}/{totalMaxPoints}p
-                </span>
-            )}
-        </>
-    );
-
-    return (
-        <span className={clsx('badge badge--primary', styles.pointsBadge)}>
-            {isMobileView ? mobileViewBadge : wideScreenBadge}
-        </span>
-    );
-});
diff --git a/src/components/documents/ChoiceAnswer/Feedback/styles.module.scss b/src/components/documents/ChoiceAnswer/Feedback/styles.module.scss
deleted file mode 100644
index d39432ccc..000000000
--- a/src/components/documents/ChoiceAnswer/Feedback/styles.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.feedbackBadge {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5em;
-
-    .pointsBadge {
-        cursor: pointer;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-}
diff --git a/src/components/documents/ChoiceAnswer/Hints/index.tsx b/src/components/documents/ChoiceAnswer/Hints/index.tsx
deleted file mode 100644
index e044aba88..000000000
--- a/src/components/documents/ChoiceAnswer/Hints/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { mdiCloseCircleOutline, mdiInformationOutline } from '@mdi/js';
-import Icon from '@mdi/react';
-import Button from '@tdev-components/shared/Button';
-import Card from '@tdev-components/shared/Card';
-import ChoiceAnswerDocument from '@tdev-models/documents/ChoiceAnswer';
-import clsx from 'clsx';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import Popup from 'reactjs-popup';
-import { PopupActions } from 'reactjs-popup/dist/types';
-import styles from './styles.module.scss';
-
-interface QuestionScoringHintProps {
-    doc?: ChoiceAnswerDocument;
-    trigger?: React.ReactNode;
-    questionIndex?: number;
-}
-
-export const QuestionScoringHint = observer(({ doc, trigger, questionIndex }: QuestionScoringHintProps) => {
-    const ref = React.useRef<PopupActions>(null);
-
-    if (!doc || questionIndex === undefined) {
-        return;
-    }
-
-    const assessment = doc?.assessments.get(questionIndex);
-
-    let scoringHint;
-    if (!assessment?.scoring) {
-        scoringHint = 'Für diese Aufgabe gibt es keine Punktebewertung.';
-    } else if (!!assessment.scoring && !assessment?.scoring?.scoringHint) {
-        scoringHint = 'Für diese Aufgabe ist kein Bewertungshinweis verfügbar.';
-    } else {
-        scoringHint =
-            typeof assessment.scoring?.scoringHint === 'function'
-                ? assessment.scoring.scoringHint()
-                : assessment.scoring?.scoringHint;
-    }
-
-    return (
-        <Popup
-            trigger={
-                trigger || (
-                    <span className={clsx(styles.scoringHintTrigger)}>
-                        <Icon path={mdiInformationOutline} size={0.7} />
-                    </span>
-                )
-            }
-            lockScroll
-            closeOnEscape={true}
-            closeOnDocumentClick={true}
-            ref={ref}
-            modal
-            on="click"
-            overlayStyle={{ background: 'rgba(0,0,0,0.5)' }}
-        >
-            <Card
-                header={
-                    <div className={clsx(styles.scoringHintPopupHeader)}>
-                        <h3>Bewertung</h3>
-                        <Button
-                            icon={mdiCloseCircleOutline}
-                            onClick={() => {
-                                ref.current?.close();
-                            }}
-                        />
-                    </div>
-                }
-            >
-                <div>{scoringHint}</div>
-            </Card>
-        </Popup>
-    );
-});
diff --git a/src/components/documents/ChoiceAnswer/Quiz/index.tsx b/src/components/documents/ChoiceAnswer/Quiz/index.tsx
deleted file mode 100644
index f0af7df3f..000000000
--- a/src/components/documents/ChoiceAnswer/Quiz/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useFirstMainDocument } from '@tdev-hooks/useFirstMainDocument';
-import { ModelMeta } from '@tdev-models/documents/ChoiceAnswer';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import ChoiceAnswerDocument from '@tdev-models/documents/ChoiceAnswer';
-import UnknownDocumentType from '@tdev-components/shared/Alert/UnknownDocumentType';
-import Loader from '@tdev-components/Loader';
-import { createRandomOrderMap } from '../helpers/shared';
-import styles from './styles.module.scss';
-import { QuizControls } from '../Controls';
-import { ScoringFunction } from '../helpers/scoring';
-import { QuizScore } from '../Feedback';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-
-interface Props {
-    id: string;
-    readonly?: boolean;
-    hideQuestionNumbers?: boolean;
-    randomizeOptions?: boolean;
-    randomizeQuestions?: boolean;
-    scoring?: ScoringFunction;
-    minPoints?: number;
-    numQuestions: number;
-    children?: React.ReactNode[];
-}
-
-export const QuizContext = React.createContext({
-    id: '',
-    readonly: false,
-    hideQuestionNumbers: false,
-    randomizeQuestions: false,
-    questionOrder: null,
-    randomizeOptions: false,
-    focussedQuestion: 0,
-    doc: null
-} as {
-    id: string;
-    readonly?: boolean;
-    hideQuestionNumbers?: boolean;
-    randomizeQuestions?: boolean;
-    scoring?: ScoringFunction;
-    questionOrder: { [originalQuestionIndex: number]: number } | null;
-    randomizeOptions?: boolean;
-    focussedQuestion: number;
-    setFocussedQuestion?: (index: number) => void;
-    doc: ChoiceAnswerDocument | null;
-});
-
-const Quiz = observer((props: Props) => {
-    const [meta] = React.useState(new ModelMeta(props));
-    const doc = useFirstMainDocument(props.id, meta);
-    const isBrowser = useIsBrowser();
-
-    const [focussedQuestion, setFocussedQuestion] = React.useState(0);
-
-    React.useEffect(() => {
-        if (props.randomizeQuestions && !doc?.data.questionOrder) {
-            doc?.updateQuestionOrder(createRandomOrderMap(props.numQuestions));
-        }
-    }, [props.randomizeQuestions, doc, props.numQuestions]);
-
-    if (!doc) {
-        return <UnknownDocumentType type={meta.type} />;
-    }
-
-    if (!isBrowser) {
-        return <Loader />;
-    }
-
-    return (
-        <QuizContext.Provider
-            value={{
-                doc,
-                id: props.id,
-                readonly: props.readonly,
-                hideQuestionNumbers: props.hideQuestionNumbers,
-                randomizeQuestions: props.randomizeQuestions,
-                questionOrder: doc.data.questionOrder,
-                randomizeOptions: props.randomizeOptions,
-                scoring: props.scoring,
-                focussedQuestion: focussedQuestion,
-                setFocussedQuestion: setFocussedQuestion
-            }}
-        >
-            <div className={styles.content}>{props.children}</div>
-            <div className={styles.footer}>
-                <QuizScore doc={doc} minPoints={props.minPoints} />
-                <QuizControls doc={doc} />
-            </div>
-        </QuizContext.Provider>
-    );
-});
-
-export default Quiz;
diff --git a/src/components/documents/ChoiceAnswer/Quiz/styles.module.scss b/src/components/documents/ChoiceAnswer/Quiz/styles.module.scss
deleted file mode 100644
index 7957aef9b..000000000
--- a/src/components/documents/ChoiceAnswer/Quiz/styles.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.content {
-    display: flex;
-    flex-direction: column;
-}
-
-.footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    margin-top: 0.5em;
-    gap: 0.5em;
-}
diff --git a/src/components/documents/ChoiceAnswer/TrueFalseAnswer/index.tsx b/src/components/documents/ChoiceAnswer/TrueFalseAnswer/index.tsx
deleted file mode 100644
index 28f8b943f..000000000
--- a/src/components/documents/ChoiceAnswer/TrueFalseAnswer/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import ChoiceAnswer, { ChoiceAnswerProps } from '../Component';
-import React from 'react';
-
-const TrueFalseAnswer = observer((props: ChoiceAnswerProps & { correct: boolean }) => {
-    return (
-        <ChoiceAnswer {...props} randomizeOptions={false} correct={props.correct ? [1] : [2]}>
-            <ChoiceAnswer.Before>{props.children}</ChoiceAnswer.Before>
-            <ChoiceAnswer.Options>
-                <ChoiceAnswer.Option optionIndex={0}>Richtig</ChoiceAnswer.Option>
-                <ChoiceAnswer.Option optionIndex={1}>Falsch</ChoiceAnswer.Option>
-            </ChoiceAnswer.Options>
-        </ChoiceAnswer>
-    );
-});
-
-export default TrueFalseAnswer;
diff --git a/src/components/documents/ChoiceAnswer/_vars.scss b/src/components/documents/ChoiceAnswer/_vars.scss
deleted file mode 100644
index a682d5a03..000000000
--- a/src/components/documents/ChoiceAnswer/_vars.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$container-padding-top-bottom: 0.7em;
-$container-padding-left-right: 1em; //
diff --git a/src/components/documents/ChoiceAnswer/helpers/assessment.ts b/src/components/documents/ChoiceAnswer/helpers/assessment.ts
deleted file mode 100644
index 01ad5b4e5..000000000
--- a/src/components/documents/ChoiceAnswer/helpers/assessment.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import ChoiceAnswerDocument, {
-    ChoiceAnswerAssessment,
-    ChoiceAnswerCorrectness
-} from '@tdev-models/documents/ChoiceAnswer';
-import { ScoringFunction } from './scoring';
-import _ from 'es-toolkit/compat';
-
-export const assess = (
-    doc: ChoiceAnswerDocument,
-    multiple: boolean,
-    questionIndex: number,
-    correctOptions: Set<number>,
-    numOptions: number,
-    scoringFunction?: ScoringFunction
-) => {
-    let numMistakes = 0;
-    const assessment: ChoiceAnswerAssessment = {
-        correctness: ChoiceAnswerCorrectness.NA
-    };
-    if (multiple) {
-        const selectedOptions = new Set(doc.choices[questionIndex] || []);
-        const numCorrectDecisions = _.range(0, numOptions).filter((optionIndex) => {
-            const isCorrect = correctOptions.has(optionIndex + 1); // +1 since optionIndex is 0-based, but correct[] is 1-based for better readability.
-            const isSelected = selectedOptions.has(optionIndex);
-            return (isCorrect && isSelected) || (!isCorrect && !isSelected);
-        }).length;
-        numMistakes = numOptions - numCorrectDecisions;
-
-        assessment.correctness =
-            numCorrectDecisions === numOptions
-                ? ChoiceAnswerCorrectness.Correct
-                : numCorrectDecisions > 0
-                  ? ChoiceAnswerCorrectness.PartiallyCorrect
-                  : ChoiceAnswerCorrectness.Incorrect;
-    } else {
-        if (correctOptions.size === 0) {
-            console.warn(
-                `Question ${questionIndex} has an empty list of correct options. This is not allowed for single-choice questions and may lead to unexpected assessment results (no options selected = question not answered).`
-            );
-        }
-        const selectedOption = doc?.choices[questionIndex]?.[0];
-        if (selectedOption === undefined) {
-            assessment.correctness = ChoiceAnswerCorrectness.NA;
-        } else {
-            assessment.correctness = correctOptions.has(selectedOption + 1) // +1 since optionIndex is 0-based, but correct[] is 1-based for better readability.
-                ? ChoiceAnswerCorrectness.Correct
-                : ChoiceAnswerCorrectness.Incorrect;
-        }
-    }
-
-    if (scoringFunction) {
-        assessment.scoring = scoringFunction(assessment.correctness, numMistakes) ?? undefined;
-    }
-
-    return assessment;
-};
diff --git a/src/components/documents/ChoiceAnswer/helpers/scoring.tsx b/src/components/documents/ChoiceAnswer/helpers/scoring.tsx
deleted file mode 100644
index 77081cc1f..000000000
--- a/src/components/documents/ChoiceAnswer/helpers/scoring.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ChoiceAnswerScoring, ChoiceAnswerCorrectness } from '@tdev-models/documents/ChoiceAnswer';
-import clsx from 'clsx';
-
-export type ScoringFunction = (
-    result: ChoiceAnswerCorrectness,
-    numMistakes: number
-) => ChoiceAnswerScoring | undefined;
-
-export const points: (
-    forCorrect?: number,
-    forIncorrect?: number,
-    forUnanswered?: number
-) => ScoringFunction = (forCorrect = 1, forIncorrect = 0, forUnanswered = 0) => {
-    const scoringHint = () => (
-        <ul>
-            <li>
-                <span className={clsx('badge badge--success')}>{forCorrect}</span>{' '}
-                {forCorrect === 1 ? 'Punkt' : 'Punkte'} wenn richtig
-            </li>
-            <li>
-                <span className={clsx('badge badge--danger')}>{forIncorrect}</span>{' '}
-                {forIncorrect === 1 ? 'Punkt' : 'Punkte'} wenn falsch{' '}
-            </li>
-            <li>
-                <span className={clsx('badge badge--secondary')}>{forUnanswered}</span>{' '}
-                {forUnanswered === 1 ? 'Punkt' : 'Punkte'} wenn nicht beantwortet
-            </li>
-        </ul>
-    );
-    const template: ChoiceAnswerScoring = {
-        maxPoints: forCorrect,
-        pointsAchieved: 0,
-        scoringHint
-    };
-
-    return (result) => {
-        switch (result) {
-            case ChoiceAnswerCorrectness.Correct:
-                return { ...template, pointsAchieved: forCorrect };
-            case ChoiceAnswerCorrectness.PartiallyCorrect:
-            case ChoiceAnswerCorrectness.Incorrect:
-                return { ...template, pointsAchieved: forIncorrect };
-            case ChoiceAnswerCorrectness.NA:
-                return { ...template, pointsAchieved: forUnanswered };
-            default:
-                console.warn(
-                    `Unhandled correctness type '${result}' in points() scoring function. This should not happen.`
-                );
-                return { ...template };
-        }
-    };
-};
-
-export const multipleChoicePoints = (
-    maxPoints: number,
-    deductionPerWrongChoice: number,
-    allowNegativeTotal: boolean = false
-) => {
-    const scoringHint = () => (
-        <ul>
-            <li>
-                <span className={clsx('badge badge--success')}>{maxPoints}</span>{' '}
-                {maxPoints === 1 ? 'Punkt' : 'Punkte'} wenn alle Antworten richtig sind
-            </li>
-            <li>
-                <span className={clsx('badge badge--danger')}>{deductionPerWrongChoice}</span>{' '}
-                {deductionPerWrongChoice === 1 ? 'Punkt' : 'Punkte'} Abzug pro falscher Auswahl /
-                Nicht-Auswahl
-            </li>
-            {allowNegativeTotal && (
-                <li>
-                    Die Gesamtpunktzahl <b>kann negativ sein</b>.
-                </li>
-            )}
-            {!allowNegativeTotal && (
-                <li>
-                    Die Gesamtpunktzahl kann <b>nicht</b> negativ sein.
-                </li>
-            )}
-        </ul>
-    );
-
-    return (_: ChoiceAnswerCorrectness, numMistakes: number) => {
-        const points = maxPoints - numMistakes * deductionPerWrongChoice;
-        const finalPoints = allowNegativeTotal ? points : Math.max(points, 0);
-        return {
-            maxPoints,
-            pointsAchieved: finalPoints,
-            scoringHint
-        };
-    };
-};
-
-export const noPoints = () => {
-    return () => undefined;
-};
diff --git a/src/components/documents/TaskState/index.tsx b/src/components/documents/TaskState/index.tsx
index 1f53dcb3f..d261b5736 100644
--- a/src/components/documents/TaskState/index.tsx
+++ b/src/components/documents/TaskState/index.tsx
@@ -24,6 +24,7 @@ import {
 } from '@tdev-models/documents/TaskState';
 import Loader from '@tdev-components/Loader';
 import { useStore } from '@tdev-hooks/useStore';
+import { useScrollTo } from '@tdev-hooks/useScrollTo';
 
 export const mdiIcon: { [key in StateType]: string } = {
     checked: mdiCheckboxMarkedOutline,
@@ -84,11 +85,10 @@ interface ComponentProps extends Props {
 }
 
 export const TaskStateComponent = observer((props: ComponentProps) => {
-    const ref = React.useRef<HTMLDivElement>(null);
     const [taskStates] = React.useState(props.states || DEFAULT_TASK_STATES);
     const pageStore = useStore('pageStore');
-    const [animate, setAnimate] = React.useState(false);
     const doc = props.taskState;
+    const [ref, animate] = useScrollTo(doc);
 
     const readonly = props.readonly || !doc.canEdit;
 
@@ -98,25 +98,6 @@ export const TaskStateComponent = observer((props: ComponentProps) => {
         }
     }, [doc, pageStore.current]);
 
-    React.useEffect(() => {
-        if (ref.current && doc.scrollTo) {
-            ref.current.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'start' });
-            doc.setScrollTo(false);
-            setAnimate(true);
-        }
-    }, [ref, doc.scrollTo]);
-
-    React.useEffect(() => {
-        if (animate) {
-            const timeout = setTimeout(() => {
-                setAnimate(false);
-            }, 2000);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-    }, [animate]);
-
     return (
         <div
             ref={ref}
diff --git a/src/hooks/useContextDocumentRootId.tsx b/src/hooks/useContextDocumentRootId.tsx
new file mode 100644
index 000000000..d592faa07
--- /dev/null
+++ b/src/hooks/useContextDocumentRootId.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ReactContextError } from '@docusaurus/theme-common';
+import { observer } from 'mobx-react-lite';
+
+export const DocRootIdContext = React.createContext<string | null>(null);
+interface Props {
+    id: string;
+    children: React.ReactNode;
+}
+
+export const DocumentRootIdContext = observer((props: Props) => {
+    return <DocRootIdContext.Provider value={props.id}>{props.children}</DocRootIdContext.Provider>;
+});
+
+export const useDocumentRootId = (defaultId?: string): string => {
+    const context = React.useContext(DocRootIdContext);
+    if (context === null) {
+        if (defaultId) {
+            return defaultId;
+        }
+        throw new ReactContextError(
+            'DocumentContextProvider',
+            'The Component must be a child of the DocumentContextProvider component'
+        );
+    }
+    return context;
+};
diff --git a/src/hooks/useDocumentRoot.ts b/src/hooks/useDocumentRoot.ts
index 904e3cc03..c75e4b6a7 100644
--- a/src/hooks/useDocumentRoot.ts
+++ b/src/hooks/useDocumentRoot.ts
@@ -115,6 +115,9 @@ export const useDocumentRoot = <Type extends DocumentType>(
         if (!rootDoc || !rootDoc.isLoaded) {
             return;
         }
+        if (meta.type !== rootDoc.type) {
+            return;
+        }
         const hash = MetaHasher.toHashSync(meta);
         if (hash === rootDoc._metaHash) {
             return;
diff --git a/src/hooks/useFirstDocumentBy.ts b/src/hooks/useFirstDocumentBy.ts
new file mode 100644
index 000000000..f9dbb7839
--- /dev/null
+++ b/src/hooks/useFirstDocumentBy.ts
@@ -0,0 +1,83 @@
+import React from 'react';
+import type { AssessableType, AssessableTypeModelMapping, DocumentModelType } from '@tdev-api/document';
+import { useDocumentRoot } from '@tdev-hooks/useDocumentRoot';
+import { useStore } from '@tdev-hooks/useStore';
+import { Config } from '@tdev-api/documentRoot';
+import { useDummyId } from './useDummyId';
+import { reaction } from 'mobx';
+import { DUMMY_DOCUMENT_ID } from './useFirstMainDocument';
+import { AssessableMeta } from '@tdev-models/documents/Assessable/AssessableMeta';
+import useLinkedMetaModel from './useLinkedMetaModel';
+
+const access = {} as Config;
+
+/**
+ * This hook provides access to the first main document of the rootDocument.
+ * This is especially useful, when the DocumentType is expected to have only
+ * one main document - like a TaskState.
+ *
+ * For bridging the time until the first main document is loaded,
+ * a dummy document is provided in the meantime.
+ */
+export const useFirstDocumentBy = <Type extends AssessableType>(
+    documentRootId: string | undefined,
+    /** ensure to put meta in a React.useState */
+    meta: AssessableMeta<Type>,
+    /** ensure to put the selector in a React.useCallback */
+    qid: string | undefined
+) => {
+    // // when inside a quizz, this will share the document root with the quiz
+    const selector = React.useCallback(
+        (doc: DocumentModelType) => {
+            if (qid) {
+                return doc.type === meta.type && doc.data.qid === qid;
+            }
+            return doc.type === meta.type;
+        },
+        [meta.type, qid]
+    );
+    const defaultDocId = useDummyId(documentRootId);
+    // if qid is provided, we are in e.g. a quiz and don't want to create a new document, since the quiz should already have created it.
+    const skipCreate = !!qid;
+    const documentRoot = useDocumentRoot(documentRootId, meta, true, access, skipCreate);
+    const userStore = useStore('userStore');
+    const documentStore = useStore('documentStore');
+    const [dummyDocument] = React.useState(
+        documentStore.createDocument({
+            id: defaultDocId,
+            type: meta.type,
+            data: meta.defaultData,
+            authorId: DUMMY_DOCUMENT_ID,
+            documentRootId: documentRoot.id,
+            parentId: null,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+        }) as AssessableTypeModelMapping[Type]
+    );
+    React.useEffect(() => {
+        if (!documentRoot) {
+            return;
+        }
+        return reaction(
+            () => documentRoot?._canInitializeDocuments && !documentRoot.documents.some(selector),
+            (needsCreation) => {
+                if (!needsCreation) {
+                    return;
+                }
+                documentStore.create({
+                    documentRootId: documentRoot.id,
+                    authorId: userStore.current!.id,
+                    type: meta.type,
+                    data: meta.defaultData
+                });
+            },
+            { fireImmediately: true }
+        );
+    }, [userStore, documentRoot]);
+
+    const firstDoc = documentRoot?.documents.find(selector) as AssessableTypeModelMapping[Type] | undefined;
+    const doc = firstDoc || dummyDocument;
+
+    useLinkedMetaModel(doc, meta);
+    return doc;
+};
diff --git a/src/hooks/useLinkedMetaModel.ts b/src/hooks/useLinkedMetaModel.ts
new file mode 100644
index 000000000..78950eb06
--- /dev/null
+++ b/src/hooks/useLinkedMetaModel.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+import { AssessableTypeModelMapping } from '@tdev-api/document';
+import { AssessableType } from '@tdev-api/document';
+import { AssessableMeta } from '@tdev-models/documents/Assessable/AssessableMeta';
+import iAssessable from '@tdev-models/documents/Assessable/iAssessable';
+
+const useLinkedMetaModel = <Type extends AssessableType>(
+    doc: AssessableTypeModelMapping[Type] | undefined | null,
+    meta: AssessableMeta<Type>
+) => {
+    React.useEffect(() => {
+        (doc as iAssessable<Type> | undefined)?.setLinkedMeta(meta);
+    }, [doc, meta]);
+};
+
+export default useLinkedMetaModel;
diff --git a/src/hooks/useScrollTo.ts b/src/hooks/useScrollTo.ts
new file mode 100644
index 000000000..62f912bb5
--- /dev/null
+++ b/src/hooks/useScrollTo.ts
@@ -0,0 +1,33 @@
+import { DocumentModelType } from '@tdev-api/document';
+import React from 'react';
+
+type ScrollDoc = DocumentModelType & {
+    scrollTo?: boolean;
+    setScrollTo: (scrollTo: boolean) => void;
+};
+export const useScrollTo = <T extends HTMLElement = HTMLDivElement>(
+    doc?: ScrollDoc | null,
+    scrollTo?: ScrollLogicalPosition
+) => {
+    const ref = React.useRef<T>(null);
+    const [animate, setAnimate] = React.useState(false);
+    React.useEffect(() => {
+        if (ref.current && doc?.scrollTo) {
+            ref.current.scrollIntoView({ behavior: 'auto', block: scrollTo ?? 'center', inline: 'start' });
+            doc.setScrollTo(false);
+            setAnimate(true);
+        }
+    }, [doc, doc?.scrollTo]);
+
+    React.useEffect(() => {
+        if (animate) {
+            const timeout = setTimeout(() => {
+                setAnimate(false);
+            }, 2000);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [animate]);
+    return [ref, animate] as const;
+};
diff --git a/src/models/DocumentRoot.ts b/src/models/DocumentRoot.ts
index 72d052832..24ed668b1 100644
--- a/src/models/DocumentRoot.ts
+++ b/src/models/DocumentRoot.ts
@@ -236,12 +236,20 @@ class DocumentRoot<T extends DocumentType> {
         return this.hasRWAccess || !!this.store.root.userStore.current?.hasElevatedAccess;
     }
 
+    /**
+     * returns true if the document root is loaded and the current user has admin or RW access.
+     */
     @computed
-    get _needsInitialDocumentCreation() {
+    get _canInitializeDocuments() {
         if (!this.store.root.userStore.current || this.store.root.userStore.isUserSwitched) {
             return false;
         }
-        return this.isLoaded && !this.isDummy && !this.firstMainDocument && this.hasAdminOrRWAccess;
+        return this.isLoaded && !this.isDummy && this.hasAdminOrRWAccess;
+    }
+
+    @computed
+    get _needsInitialDocumentCreation() {
+        return this._canInitializeDocuments && !this.firstMainDocument;
     }
 
     @computed
diff --git a/src/models/Page.ts b/src/models/Page.ts
index f4e6f8365..897f798f3 100644
--- a/src/models/Page.ts
+++ b/src/models/Page.ts
@@ -204,13 +204,15 @@ export default class Page {
         if (!uid) {
             return [];
         }
-        return this.taskableDocumentRootIds.flatMap((rid) => {
-            return this.store.root.documentStore
-                .findByDocumentRoot(rid)
-                .filter(
-                    (doc) => doc.authorId === uid && this.TaskableDocuments.has(doc.type)
-                ) as iTaskableDocument[];
-        });
+        return this.taskableDocumentRootIds
+            .flatMap((rid) => {
+                return this.store.root.documentStore
+                    .findByDocumentRoot(rid)
+                    .filter(
+                        (doc) => doc.authorId === uid && this.TaskableDocuments.has(doc.type)
+                    ) as iTaskableDocument[];
+            })
+            .filter((doc) => !doc.hideFromOverview);
     }
 
     @computed
diff --git a/src/models/documents/Assessable/AssessableMeta.ts b/src/models/documents/Assessable/AssessableMeta.ts
new file mode 100644
index 000000000..60165a71d
--- /dev/null
+++ b/src/models/documents/Assessable/AssessableMeta.ts
@@ -0,0 +1,31 @@
+import { Access, type TypeDataMapping, type AssessableType } from '@tdev-api/document';
+import type { default as iAssessable, Assessement } from './iAssessable';
+import { TypeMeta } from '@tdev-models/DocumentRoot';
+import { observable } from 'mobx';
+
+export interface AssessableComponentProps<T extends AssessableType> {
+    id?: string;
+    qid?: string;
+    title?: string;
+    correct?: number[];
+    scoring?: ScoringFunction<T>;
+    readonly?: boolean;
+    children: React.ReactNode;
+}
+
+export type ScoringFunction<T extends AssessableType> = (model: iAssessable<T>) => Assessement;
+
+export abstract class AssessableMeta<T extends AssessableType> extends TypeMeta<T> {
+    readonly qid?: string;
+    readonly correct?: number[];
+    readonly scoring?: ScoringFunction<T>;
+    @observable accessor title: string | undefined;
+    constructor(type: T, props: Partial<AssessableComponentProps<T>>) {
+        super(type, props.readonly ? Access.RO_User : undefined);
+        this.qid = props.qid;
+        this.correct = props.correct?.map((index) => index - 1); // convert to 0-based index
+        this.scoring = props.scoring;
+        this.title = props.title;
+    }
+    abstract get defaultData(): TypeDataMapping[T];
+}
diff --git a/src/models/documents/Assessable/ChoiceAnswer.ts b/src/models/documents/Assessable/ChoiceAnswer.ts
new file mode 100644
index 000000000..57855418b
--- /dev/null
+++ b/src/models/documents/Assessable/ChoiceAnswer.ts
@@ -0,0 +1,176 @@
+import { TypeDataMapping, Document as DocumentProps } from '@tdev-api/document';
+import { Source } from '@tdev-models/iDocument';
+import DocumentStore from '@tdev-stores/DocumentStore';
+import { action, computed, observable } from 'mobx';
+import iAssessable from './iAssessable';
+import { range } from 'es-toolkit/math';
+import { shuffle } from 'es-toolkit/array';
+import type { ChoiceAnswerProps } from '@tdev-components/documents/Assessable/ChoiceAnswer';
+import { AssessableMeta } from './AssessableMeta';
+
+export class ModelMeta extends AssessableMeta<'choice_answer'> implements AssessableMeta<'choice_answer'> {
+    readonly type = 'choice_answer';
+    readonly readonly?: boolean;
+    readonly optionsCount: number;
+    readonly multiple?: boolean;
+    readonly randomizeOptions?: boolean;
+
+    constructor(props: Partial<ChoiceAnswerProps> & { optionsCount: number }) {
+        super('choice_answer', props);
+        this.multiple = props.multiple;
+        this.randomizeOptions = props.randomizeOptions;
+        this.optionsCount = props.optionsCount;
+    }
+
+    get defaultData(): TypeDataMapping['choice_answer'] {
+        const data: TypeDataMapping['choice_answer'] = {
+            choices: [],
+            optionsOrder: [],
+            assessed: false
+        };
+        if (this.qid) {
+            data.qid = this.qid;
+        }
+        return data;
+    }
+}
+
+const DEFAULT_META = new ModelMeta({ optionsCount: 0 });
+
+class ChoiceAnswer extends iAssessable<'choice_answer'> implements iAssessable<'choice_answer'> {
+    choices = observable.set<number>();
+    @observable.ref accessor optionOrders: number[];
+
+    constructor(props: DocumentProps<'choice_answer'>, store: DocumentStore) {
+        super(props, store);
+        this.choices.replace(props.data.choices ?? []);
+        this.optionOrders = props.data?.optionsOrder || [];
+    }
+
+    @action
+    setData(data: Partial<TypeDataMapping['choice_answer']>, from: Source, updatedAt?: Date): void {
+        if (data.choices) {
+            this.choices.replace(data.choices);
+        }
+        if (data.optionsOrder) {
+            this.optionOrders = data.optionsOrder;
+        }
+        if (data.assessed !== undefined) {
+            this._assessed = data.assessed;
+        }
+
+        if (from === Source.LOCAL) {
+            this.save();
+        }
+        if (updatedAt) {
+            this.updatedAt = new Date(updatedAt);
+        }
+    }
+
+    @action
+    updateSelection(optionIndex: number, selected: boolean = true, multiple: boolean = false): void {
+        if (!this.canUpdateAnswer) {
+            return;
+        }
+        if (multiple) {
+            if (selected) {
+                this.choices.add(optionIndex);
+            } else {
+                this.choices.delete(optionIndex);
+            }
+        } else {
+            if (selected) {
+                this.choices.replace([optionIndex]);
+            } else {
+                this.choices.clear();
+            }
+        }
+        this.save();
+    }
+
+    @action
+    reset(): void {
+        this.choices.clear();
+        this.setAssessed(false);
+        this.saveNow();
+    }
+
+    @action
+    onLinkedMetaChange() {
+        const randomize = this.meta.randomizeOptions || this.quiz?.meta.randomizeOptions;
+        if (randomize && this.optionOrders.length !== this.meta.optionsCount) {
+            this.shuffle();
+            this.saveNow();
+        }
+    }
+
+    @action
+    shuffle(): void {
+        if (!this.meta.optionsCount || this.meta.optionsCount < 2) {
+            return;
+        }
+        const originalIndices = range(this.meta.optionsCount);
+        this.optionOrders = shuffle(originalIndices);
+    }
+
+    get maxHits(): number {
+        if (this.multiple) {
+            return this.linkedMeta?.correct?.length || 0;
+        }
+        return !!this.linkedMeta?.correct ? 1 : 0;
+    }
+
+    optionsDisplayOrder(optionIndex: number): number {
+        const orderIndex = this.optionOrders.findIndex((i) => i === optionIndex);
+        return orderIndex !== -1 ? orderIndex : optionIndex;
+    }
+
+    @computed
+    get hits(): number {
+        const correct = new Set(this.meta.correct);
+        return this.choices.intersection(correct).size;
+    }
+
+    @computed
+    get misses(): number {
+        if (this.choices.size === 0) {
+            return 0;
+        }
+        if (this.multiple) {
+            const missedCorrect = (this.meta.correct ?? []).length - this.hits;
+            const incorrectSelections = this.choices.size - this.hits;
+            return missedCorrect + incorrectSelections;
+        }
+        return 1 - this.hits;
+    }
+
+    @computed
+    get multiple(): boolean {
+        return this.meta?.multiple ?? false;
+    }
+
+    get data(): TypeDataMapping['choice_answer'] {
+        const raw: TypeDataMapping['choice_answer'] = {
+            choices: [...this.choices],
+            optionsOrder: this.optionOrders,
+            assessed: this._assessed
+        };
+        if (this.qid) {
+            raw.qid = this.qid;
+        }
+        return raw;
+    }
+
+    @computed
+    get meta(): ModelMeta {
+        if (this.linkedMeta) {
+            return this.linkedMeta as ModelMeta;
+        }
+        if (this.root?.type === 'choice_answer') {
+            return this.root.meta as ModelMeta;
+        }
+        return DEFAULT_META;
+    }
+}
+
+export default ChoiceAnswer;
diff --git a/src/models/documents/Assessable/Quiz.ts b/src/models/documents/Assessable/Quiz.ts
new file mode 100644
index 000000000..5fbb57bd4
--- /dev/null
+++ b/src/models/documents/Assessable/Quiz.ts
@@ -0,0 +1,220 @@
+import { TypeDataMapping, Document as DocumentProps, AssessableType } from '@tdev-api/document';
+import { Source } from '@tdev-models/iDocument';
+import DocumentStore from '@tdev-stores/DocumentStore';
+import { action, computed, observable } from 'mobx';
+import iAssessable, { Assessement, Correctness, CorrectnessColors } from './iAssessable';
+import { range } from 'es-toolkit/math';
+import { shuffle } from 'es-toolkit/array';
+import type { Props as QuizProps } from '@tdev-components/documents/Assessable/Quiz';
+import { AssessableMeta } from './AssessableMeta';
+import { mdiTimelineQuestionOutline } from '@mdi/js';
+import { IfmColors } from '@tdev-components/shared/Colors';
+
+export class ModelMeta extends AssessableMeta<AssessableType> implements AssessableMeta<AssessableType> {
+    readonly type = 'quiz';
+    readonly randomizeOptions?: boolean;
+    readonly randomizeQuestions?: boolean;
+    readonly minPoints?: number;
+    readonly questionIds: string[];
+    readonly hideQuestionNumbers?: boolean;
+
+    constructor(props: Partial<QuizProps>) {
+        super('quiz', props);
+        this.randomizeOptions = props.randomizeOptions;
+        this.randomizeQuestions = props.randomizeQuestions;
+        this.questionIds = props.questionIds ?? [];
+        this.minPoints = props.minPoints;
+        this.hideQuestionNumbers = props.hideQuestionNumbers;
+    }
+
+    get defaultData(): TypeDataMapping['quiz'] {
+        const data: TypeDataMapping['quiz'] = {
+            questionOrder: [],
+            assessed: false
+        };
+        return data;
+    }
+}
+
+const DEFAULT_META = new ModelMeta({});
+
+class Quiz extends iAssessable<AssessableType> implements iAssessable<AssessableType> {
+    @observable.ref accessor questionOrder: number[];
+
+    constructor(props: DocumentProps<'quiz'>, store: DocumentStore) {
+        super(props, store);
+        this.questionOrder = props.data.questionOrder || [];
+    }
+
+    @action
+    setData(data: Partial<TypeDataMapping['quiz']>, from: Source, updatedAt?: Date): void {
+        if (data.questionOrder) {
+            this.questionOrder = data.questionOrder;
+        }
+        if (data.assessed !== undefined) {
+            this._assessed = data.assessed;
+        }
+
+        if (from === Source.LOCAL) {
+            this.save();
+        }
+        if (updatedAt) {
+            this.updatedAt = new Date(updatedAt);
+        }
+    }
+
+    @action
+    reset(): void {
+        this.setAssessed(false);
+        this.questions.forEach((q) => q.reset());
+        this.saveNow();
+    }
+
+    @computed
+    get questionCount(): number {
+        return this.meta.questionIds.length;
+    }
+
+    @computed
+    get scoringFunction(): ((self: iAssessable<AssessableType>) => Assessement) | null {
+        return this.meta.scoring ?? null;
+    }
+
+    @action
+    onLinkedMetaChange() {
+        if (this.meta.randomizeQuestions && this.questionOrder.length !== this.questionCount) {
+            this.shuffle();
+            this.saveNow();
+        }
+    }
+
+    @action
+    shuffle(): void {
+        if (this.questionCount === 0) {
+            return;
+        }
+        const originalIndices = range(this.questionCount);
+        this.questionOrder = shuffle(originalIndices);
+    }
+
+    questionDisplayOrder(qid?: string): number {
+        if (!qid) {
+            return 0;
+        }
+        const idx = this.meta.questionIds.findIndex((id) => id === qid);
+        if (idx === -1) {
+            return 0;
+        }
+        const orderIndex = this.questionOrder.findIndex((i) => i === idx);
+        return orderIndex !== -1 ? orderIndex : idx;
+    }
+
+    @computed
+    get questions(): iAssessable<AssessableType>[] {
+        const docs = this.root?.documents ?? [];
+        const qids = new Set(this.meta.questionIds);
+        return docs.filter(
+            (doc) =>
+                (doc as iAssessable<AssessableType>).qid &&
+                qids.has((doc as iAssessable<AssessableType>).qid!)
+        ) as iAssessable<AssessableType>[];
+    }
+    @computed
+    get assessment(): Assessement | undefined {
+        const correctness: Correctness[] = [];
+        const assessment = this.questions.reduce(
+            (summary, q) => {
+                if (!q.assessment) {
+                    return summary;
+                }
+                correctness.push(q.correctness);
+                if (q.assessment?.scoring) {
+                    summary.scoring!.pointsAchieved += q.assessment.scoring.pointsAchieved;
+                    summary.scoring!.maxPoints += q.assessment.scoring.maxPoints;
+                }
+
+                return summary;
+            },
+            { correctness: Correctness.NA, scoring: { pointsAchieved: 0, maxPoints: 0 } } as Assessement
+        );
+        const isAllNA = correctness.every((c) => c === Correctness.NA);
+        const isAllCorrect = !isAllNA && correctness.every((c) => c === Correctness.Correct);
+        const isAllIncorrect =
+            !isAllNA &&
+            !isAllCorrect &&
+            (assessment.scoring?.pointsAchieved! <= 0 ||
+                correctness.every((c) => c === Correctness.Incorrect));
+        const totalCorrectness = isAllNA
+            ? Correctness.NA
+            : isAllCorrect
+              ? Correctness.Correct
+              : isAllIncorrect
+                ? Correctness.Incorrect
+                : Correctness.PartiallyCorrect;
+        if (assessment.scoring?.maxPoints === 0) {
+            return { correctness: totalCorrectness };
+        }
+        if (this.meta.minPoints && assessment.scoring) {
+            if (assessment.scoring.pointsAchieved < this.meta.minPoints) {
+                assessment.scoring.pointsAchieved = this.meta.minPoints;
+            }
+            if (assessment.scoring.pointsAchieved > assessment.scoring.maxPoints) {
+                assessment.scoring.pointsAchieved = assessment.scoring.maxPoints;
+            }
+        }
+        return { ...assessment, correctness: totalCorrectness };
+    }
+
+    @computed
+    get naCount(): number {
+        return this.questions.reduce((sum, q) => sum + (q.isNA ? 1 : 0), 0);
+    }
+
+    @computed
+    get hasNA(): boolean {
+        return this.naCount > 0;
+    }
+
+    @computed
+    get maxHits(): number {
+        return this.questions.reduce((sum, q) => sum + q.maxHits, 0);
+    }
+
+    @computed
+    get hits(): number {
+        return this.questions.reduce((sum, q) => sum + (q.hits ?? 0), 0);
+    }
+
+    @computed
+    get misses(): number {
+        return this.questions.reduce((sum, q) => sum + (q.misses ?? 0), 0);
+    }
+
+    get data(): TypeDataMapping['quiz'] {
+        const raw: TypeDataMapping['quiz'] = {
+            questionOrder: this.questionOrder,
+            assessed: this._assessed
+        };
+        return raw;
+    }
+
+    get editingIconState() {
+        return {
+            path: mdiTimelineQuestionOutline,
+            color: this.isAssessed ? CorrectnessColors[this.correctness] : IfmColors.gray
+        };
+    }
+
+    @computed
+    get meta(): ModelMeta {
+        if (this.linkedMeta) {
+            return this.linkedMeta as ModelMeta;
+        }
+        if (this.root?.type === 'quiz') {
+            return this.root.meta as ModelMeta;
+        }
+        return DEFAULT_META;
+    }
+}
+
+export default Quiz;
diff --git a/src/models/documents/Assessable/TrueFalseAnswer.ts b/src/models/documents/Assessable/TrueFalseAnswer.ts
new file mode 100644
index 000000000..2a0c3ae07
--- /dev/null
+++ b/src/models/documents/Assessable/TrueFalseAnswer.ts
@@ -0,0 +1,119 @@
+import { TypeDataMapping, Document as DocumentProps } from '@tdev-api/document';
+import { Source } from '@tdev-models/iDocument';
+import DocumentStore from '@tdev-stores/DocumentStore';
+import { action, computed, observable } from 'mobx';
+import iAssessable from './iAssessable';
+import type { Props as TrueFalseProps } from '@tdev-components/documents/Assessable/TrueFalseAnswer';
+import { AssessableMeta } from './AssessableMeta';
+
+export class ModelMeta
+    extends AssessableMeta<'true_false_answer'>
+    implements AssessableMeta<'true_false_answer'>
+{
+    readonly type = 'true_false_answer';
+    readonly readonly?: boolean;
+
+    constructor(props: Partial<TrueFalseProps>) {
+        const isTruthy = (props.isTrue ?? props.correct) === true;
+        const isFalsey = (props.isFalse ?? props.incorrect) === true;
+        const correct = isTruthy ? [1] : isFalsey ? [2] : [2];
+        super('true_false_answer', { ...props, correct });
+        if (isTruthy && isFalsey) {
+            console.warn('TrueFalseAnswer cannot be both truthy and falsey. Defaulting to truthy.');
+        }
+    }
+
+    get defaultData(): TypeDataMapping['true_false_answer'] {
+        const data: TypeDataMapping['true_false_answer'] = {
+            value: null,
+            assessed: false
+        };
+        if (this.qid) {
+            data.qid = this.qid;
+        }
+        return data;
+    }
+}
+
+const DEFAULT_META = new ModelMeta({});
+
+class TrueFalseAnswer extends iAssessable<'true_false_answer'> implements iAssessable<'true_false_answer'> {
+    @observable accessor value: boolean | null = null;
+    constructor(props: DocumentProps<'true_false_answer'>, store: DocumentStore) {
+        super(props, store);
+        this.value = props.data.value ?? null;
+    }
+
+    @action
+    setData(data: Partial<TypeDataMapping['true_false_answer']>, from: Source, updatedAt?: Date): void {
+        if (data.value !== undefined) {
+            this.value = data.value;
+        }
+        if (from === Source.LOCAL) {
+            this.save();
+        }
+        if (updatedAt) {
+            this.updatedAt = new Date(updatedAt);
+        }
+    }
+
+    @action
+    setValue(value: boolean | null): void {
+        if (!this.canUpdateAnswer) {
+            return;
+        }
+        this.value = value;
+        this.saveNow();
+    }
+
+    @action
+    reset(): void {
+        this.value = null;
+        this.setAssessed(false);
+        this.saveNow();
+    }
+
+    @computed
+    get hits(): number {
+        if (this.value === null) {
+            return 0;
+        }
+        const correct = new Set(this.meta.correct);
+        if (this.value) {
+            return correct.has(0) ? 1 : 0;
+        }
+        return correct.has(1) ? 1 : 0;
+    }
+
+    @computed
+    get misses(): number {
+        if (this.value === null) {
+            return 0;
+        }
+        return 1 - this.hits;
+    }
+
+    get data(): TypeDataMapping['true_false_answer'] {
+        const raw: TypeDataMapping['true_false_answer'] = {
+            value: this.value,
+            assessed: this._assessed
+        };
+        if (this.qid) {
+            raw.qid = this.qid;
+        }
+        return raw;
+    }
+
+    @computed
+    get meta(): ModelMeta {
+        if (this.linkedMeta) {
+            return this.linkedMeta as ModelMeta;
+        }
+        if (this.root?.type === 'true_false_answer') {
+            return this.root.meta as ModelMeta;
+        }
+        return DEFAULT_META;
+    }
+}
+
+export default TrueFalseAnswer;
diff --git a/src/models/documents/Assessable/iAssessable.ts b/src/models/documents/Assessable/iAssessable.ts
new file mode 100644
index 000000000..728813478
--- /dev/null
+++ b/src/models/documents/Assessable/iAssessable.ts
@@ -0,0 +1,236 @@
+import { AssessableType, Document as DocumentProps } from '@tdev-api/document';
+import iDocument from '@tdev-models/iDocument';
+import DocumentStore from '@tdev-stores/DocumentStore';
+import { action, computed, observable } from 'mobx';
+import React from 'react';
+import { AssessableMeta } from './AssessableMeta';
+import Quiz from './Quiz';
+import { iTaskableDocument } from '@tdev-models/iTaskableDocument';
+import { mdiTooltipQuestionOutline } from '@mdi/js';
+import { IfmColors } from '@tdev-components/shared/Colors';
+
+export enum Correctness {
+    Correct = 'correct',
+    Incorrect = 'incorrect',
+    PartiallyCorrect = 'partially_correct',
+    NA = 'not_answered'
+}
+
+export const CorrectnessColors: Record<Correctness, string> = {
+    [Correctness.Correct]: IfmColors.green,
+    [Correctness.Incorrect]: IfmColors.red,
+    [Correctness.PartiallyCorrect]: IfmColors.orange,
+    [Correctness.NA]: IfmColors.lightBlue
+};
+
+export interface Scoring {
+    maxPoints: number;
+    pointsAchieved: number;
+    scoringHint?: string | (() => React.ReactElement);
+}
+
+export interface Assessement {
+    correctness: Correctness;
+    scoring?: Scoring;
+}
+
+export interface MetaInit {
+    readonly?: boolean;
+}
+
+abstract class iAssessable<T extends AssessableType> extends iDocument<T> implements iTaskableDocument<T> {
+    readonly qid?: string;
+    @observable accessor scrollTo: boolean = false;
+    @observable accessor _assessed: boolean;
+    // @observable.ref accessor scoringFunction: ((self: this) => Assessement) | null = null;
+    @observable.ref accessor linkedMeta: AssessableMeta<T> | null = null;
+
+    constructor(props: DocumentProps<T>, store: DocumentStore) {
+        super(props, store, 50);
+        this._assessed = props.data?.assessed || false;
+        this.qid = props.data.qid;
+    }
+
+    @action
+    setLinkedMeta(metadata: AssessableMeta<T>) {
+        this.linkedMeta = metadata;
+        this.onLinkedMetaChange();
+    }
+
+    onLinkedMetaChange() {
+        // By default, do nothing. Only applicable for certain assessable document types (e.g. ChoiceAnswer).
+    }
+
+    @computed
+    get isDone(): boolean {
+        return this.isAssessed;
+    }
+
+    @computed
+    get hideFromOverview() {
+        return this.inQuiz;
+    }
+
+    @computed
+    get editingIconState() {
+        return {
+            path: mdiTooltipQuestionOutline,
+            color: this.isAssessed ? CorrectnessColors[this.correctness] : IfmColors.gray
+        };
+    }
+
+    @computed
+    get progress(): number {
+        if (!this.isAssessed) {
+            return 0;
+        }
+        return this.assessment?.scoring?.pointsAchieved || 0;
+    }
+
+    get totalSteps(): number {
+        return 1;
+    }
+
+    @action
+    setScrollTo(scroll: boolean) {
+        this.scrollTo = scroll;
+    }
+
+    @computed
+    get quiz(): Quiz | undefined {
+        if (!this.inQuiz || this.root?.firstMainDocument?.type !== 'quiz') {
+            return undefined;
+        }
+        if (this.root.firstMainDocument.id === this.id) {
+            return undefined;
+        }
+        return this.root.firstMainDocument;
+    }
+
+    @computed
+    get scoringFunction(): ((self: iAssessable<T>) => Assessement) | null {
+        if (this.linkedMeta?.scoring) {
+            return this.linkedMeta.scoring;
+        }
+        if (!this.inQuiz || this.type === 'quiz') {
+            return null;
+        }
+        const quiz = this.root?.firstMainDocument;
+        if (quiz?.type !== 'quiz') {
+            return null;
+        }
+        return quiz.scoringFunction as ((self: iAssessable<T>) => Assessement) | null;
+    }
+
+    @computed
+    get isAssessed(): boolean {
+        if (this.type === 'quiz') {
+            return this._assessed;
+        }
+        return this._assessed || !!this.quiz?.isAssessed;
+    }
+
+    @computed
+    get isNA(): boolean {
+        return this.hits === 0 && this.misses === 0;
+    }
+
+    @computed
+    get assessment(): Assessement | undefined {
+        return this.scoringFunction?.(this);
+    }
+
+    @action
+    setAssessed(value: boolean) {
+        this._assessed = value;
+        this.saveNow();
+    }
+
+    @computed
+    get scoring() {
+        if (!this.isAssessed) {
+            return;
+        }
+        return this.assessment?.scoring;
+    }
+
+    @computed
+    get correctness(): Correctness {
+        if (!this.isAssessed || this.isNA) {
+            return Correctness.NA;
+        }
+        if (this.assessment) {
+            return this.assessment.correctness;
+        }
+        return this.hits === this.maxHits && this.misses === 0
+            ? Correctness.Correct
+            : this.hits === 0
+              ? Correctness.Incorrect
+              : Correctness.PartiallyCorrect;
+    }
+
+    /**
+     * Returns the maximum achievable "hits" for this assessable item.
+     */
+    @computed
+    get maxHits(): number {
+        return this.linkedMeta?.correct?.length || 0;
+    }
+
+    /**
+     * Returns the number of correctly responded items.
+     * This can be "correct choices" for MC questions, "correct matched words" for texts or simply "1/0" for single-choice questions.
+     */
+    get hits(): number {
+        return 0;
+    }
+
+    /**
+     * Returns the number of incorrectly responded items.
+     * This can be "incorrect choices" for MC questions, "wrong matched words" in a text or simply "0/1" for single-choice questions.
+     */
+    get misses(): number {
+        return 0;
+    }
+
+    @computed
+    get canUpdateAnswer() {
+        return this.canEdit && !this.isAssessed;
+    }
+
+    @computed
+    get inQuiz() {
+        return !!this.qid;
+    }
+
+    @computed
+    get displayTitle() {
+        if (!this.linkedMeta) {
+            return 'Frage';
+        }
+        if (!this.inQuiz || !this.quiz) {
+            return this.linkedMeta.title ?? 'Frage';
+        }
+        if (this.quiz.meta.hideQuestionNumbers && this.linkedMeta.title) {
+            return this.linkedMeta.title;
+        }
+        const nr = this.quiz.questionDisplayOrder(this.linkedMeta.qid) + 1;
+        return this.linkedMeta.title ? `Frage ${nr} – ${this.linkedMeta.title}` : `Frage ${nr}`;
+    }
+
+    abstract reset(): void;
+
+    shuffle(): void {
+        // By default, do nothing. Only applicable for certain assessable document types (e.g. ChoiceAnswer).
+    }
+
+    @computed
+    get questionIndex(): number | undefined {
+        if (!this.inQuiz || !this.quiz) {
+            return undefined;
+        }
+        return this.quiz.questionDisplayOrder(this.linkedMeta?.qid);
+    }
+}
+
+export default iAssessable;
diff --git a/src/models/documents/ChoiceAnswer.ts b/src/models/documents/ChoiceAnswer.ts
deleted file mode 100644
index cd9dbac79..000000000
--- a/src/models/documents/ChoiceAnswer.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { TypeDataMapping, Document as DocumentProps, Access } from '@tdev-api/document';
-import { TypeMeta } from '@tdev-models/DocumentRoot';
-import iDocument, { Source } from '@tdev-models/iDocument';
-import DocumentStore from '@tdev-stores/DocumentStore';
-import { action, computed, observable } from 'mobx';
-import type { ReactElement } from 'react';
-
-export interface ChoiceAnswerChoices {
-    [questionIndex: number]: number[];
-}
-
-export interface ChoiceAnswerOptionOrders {
-    [questionIndex: number]: {
-        [originalOptionIndex: number]: number;
-    };
-}
-
-export type ChoiceAnswerQuestionOrder = { [originalQuestionIndex: number]: number };
-
-export interface MetaInit {
-    readonly?: boolean;
-}
-
-export enum ChoiceAnswerCorrectness {
-    Correct = 'correct',
-    Incorrect = 'incorrect',
-    PartiallyCorrect = 'partially_correct',
-    NA = 'not_answered'
-}
-
-export interface ChoiceAnswerScoring {
-    maxPoints: number;
-    pointsAchieved: number;
-    scoringHint?: string | (() => ReactElement);
-}
-
-export interface ChoiceAnswerAssessment {
-    correctness: ChoiceAnswerCorrectness;
-    scoring?: ChoiceAnswerScoring;
-}
-
-export class ModelMeta extends TypeMeta<'choice_answer'> {
-    readonly type = 'choice_answer';
-    readonly readonly?: boolean;
-
-    constructor(props: Partial<MetaInit>) {
-        super('choice_answer', props.readonly ? Access.RO_User : undefined);
-        this.readonly = props.readonly;
-    }
-
-    get defaultData(): TypeDataMapping['choice_answer'] {
-        return {
-            choices: {},
-            optionOrders: {},
-            questionOrder: null,
-            assessed: false
-        };
-    }
-}
-
-class ChoiceAnswer extends iDocument<'choice_answer'> {
-    @observable.ref accessor choices: ChoiceAnswerChoices;
-    @observable.ref accessor optionOrders: ChoiceAnswerOptionOrders;
-    @observable.ref accessor questionOrder: ChoiceAnswerQuestionOrder | null;
-    assessments = observable.map<number, ChoiceAnswerAssessment>();
-    @observable accessor _assessed: boolean;
-
-    constructor(props: DocumentProps<'choice_answer'>, store: DocumentStore) {
-        super(props, store);
-        this.choices = props.data?.choices || {};
-        this.optionOrders = props.data?.optionOrders || {};
-        this.questionOrder = props.data?.questionOrder || null;
-        this._assessed = props.data?.assessed || false;
-        this.assessments = observable.map<number, ChoiceAnswerAssessment>();
-    }
-
-    @action
-    setData(data: TypeDataMapping['choice_answer'], from: Source, updatedAt?: Date): void {
-        this.choices = data.choices;
-        this.optionOrders = data.optionOrders;
-        this.questionOrder = data.questionOrder;
-        this._assessed = data.assessed;
-
-        if (from === Source.LOCAL) {
-            this.save();
-        }
-        if (updatedAt) {
-            this.updatedAt = new Date(updatedAt);
-        }
-    }
-
-    @computed
-    get canUpdateAnswer() {
-        return this.canEdit && !this._assessed;
-    }
-
-    @action
-    updateSingleChoiceSelection(questionIndex: number, optionIndex: number): void {
-        if (!this.canUpdateAnswer) {
-            return;
-        }
-
-        this.updatedAt = new Date();
-        this.choices = {
-            ...this.choices,
-            [questionIndex]: [optionIndex]
-        };
-        this.save();
-    }
-
-    @action
-    updateMultipleChoiceSelection(questionIndex: number, optionIndex: number, selected: boolean): void {
-        if (!this.canUpdateAnswer) {
-            return;
-        }
-
-        this.updatedAt = new Date();
-        const currentSelections = new Set<number>(this.choices[questionIndex] as number[] | []);
-        if (selected) {
-            currentSelections.add(optionIndex);
-        } else {
-            currentSelections.delete(optionIndex);
-        }
-        this.choices = {
-            ...this.choices,
-            [questionIndex]: Array.from(currentSelections)
-        };
-        this.save();
-    }
-
-    @action
-    resetAllAnswers(): void {
-        if (!this.canUpdateAnswer) {
-            return;
-        }
-
-        this.updatedAt = new Date();
-        this.choices = {};
-        this.save();
-    }
-
-    @action
-    resetAnswer(questionIndex: number): void {
-        if (!this.canUpdateAnswer) {
-            return;
-        }
-
-        this.updatedAt = new Date();
-        this.choices = {
-            ...this.choices,
-            [questionIndex]: []
-        };
-        this.save();
-    }
-
-    @action
-    updateOptionOrders(optionOrders: ChoiceAnswerOptionOrders): void {
-        this.updatedAt = new Date();
-        this.optionOrders = optionOrders;
-        this.saveNow();
-    }
-
-    @action
-    updateQuestionOrder(questionOrder: ChoiceAnswerQuestionOrder): void {
-        this.updatedAt = new Date();
-        this.questionOrder = questionOrder;
-        this.saveNow();
-    }
-
-    get assessed() {
-        return this._assessed;
-    }
-
-    @action
-    set assessed(value: boolean) {
-        this.updatedAt = new Date();
-        this._assessed = value;
-        this.saveNow();
-    }
-
-    @action
-    updateAssessment(questionIndex: number, assessment: ChoiceAnswerAssessment): void {
-        this.assessments.set(questionIndex, assessment);
-    }
-
-    getAssessment(questionIndex: number): ChoiceAnswerAssessment | undefined {
-        return this.assessments.get(questionIndex);
-    }
-
-    @computed
-    get hasQuestionsWithScoring(): boolean {
-        return Array.from(this.assessments.values()).some((assessment) => !!assessment.scoring);
-    }
-
-    get data(): TypeDataMapping['choice_answer'] {
-        return {
-            choices: this.choices,
-            optionOrders: this.optionOrders,
-            questionOrder: this.questionOrder,
-            assessed: this._assessed
-        };
-    }
-
-    @computed
-    get meta(): ModelMeta {
-        if (this.root?.type === 'choice_answer') {
-            return this.root.meta as ModelMeta;
-        }
-        return new ModelMeta({});
-    }
-}
-
-export default ChoiceAnswer;
diff --git a/src/models/documents/ProgressState/index.ts b/src/models/documents/ProgressState/index.ts
index 294713c9b..666ba38ad 100644
--- a/src/models/documents/ProgressState/index.ts
+++ b/src/models/documents/ProgressState/index.ts
@@ -60,6 +60,7 @@ export class ModelMeta extends TypeMeta<'progress_state'> {
 }
 
 class ProgressState extends iDocument<'progress_state'> implements iTaskableDocument<'progress_state'> {
+    readonly hideFromOverview = false;
     @observable accessor _progress: number = 0;
     @observable accessor _totalSteps: number = 0;
     @observable accessor _viewedIndex: number | undefined = undefined;
diff --git a/src/models/documents/TaskState.ts b/src/models/documents/TaskState.ts
index ed3530112..28c276d45 100644
--- a/src/models/documents/TaskState.ts
+++ b/src/models/documents/TaskState.ts
@@ -41,6 +41,7 @@ export class TaskMeta extends TypeMeta<'task_state'> {
 }
 
 class TaskState extends iDocument<'task_state'> implements iTaskableDocument<'task_state'> {
+    readonly hideFromOverview = false;
     @observable accessor _taskState: StateType;
     @observable accessor scrollTo: boolean = false;
     constructor(props: DocumentProps<'task_state'>, store: DocumentStore) {
diff --git a/src/models/iTaskableDocument.ts b/src/models/iTaskableDocument.ts
index 189e56a77..5661e0f74 100644
--- a/src/models/iTaskableDocument.ts
+++ b/src/models/iTaskableDocument.ts
@@ -6,5 +6,7 @@ export interface iTaskableDocument<T extends TaskableType = TaskableType> extend
     editingIconState: { path: string; color: string };
     progress: number;
     totalSteps: number;
+    scrollTo: boolean;
     setScrollTo(scroll: boolean): void;
+    hideFromOverview: boolean;
 }
diff --git a/src/plugins/remark-code-as-attribute/plugin.ts b/src/plugins/remark-code-as-attribute/plugin.ts
index 8c44fb507..f72448a4c 100644
--- a/src/plugins/remark-code-as-attribute/plugin.ts
+++ b/src/plugins/remark-code-as-attribute/plugin.ts
@@ -1,7 +1,7 @@
 import type { Plugin, Transformer } from 'unified';
 import type { Code, InlineCode, Root } from 'mdast';
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
-import { toJsxAttribute, toMdxJsxExpressionAttribute } from '../helpers';
+import { toJsxAttribute } from '../helpers';
 
 export interface CodeAttributes {
     meta?: string;
diff --git a/src/plugins/remark-transform-assessable-components/plugin.ts b/src/plugins/remark-transform-assessable-components/plugin.ts
new file mode 100644
index 000000000..fab136ae2
--- /dev/null
+++ b/src/plugins/remark-transform-assessable-components/plugin.ts
@@ -0,0 +1,233 @@
+import { visit } from 'unist-util-visit';
+import type { Plugin, Transformer } from 'unified';
+import type { Root, BlockContent, DefinitionContent } from 'mdast';
+import type { MdxJsxAttribute, MdxJsxExpressionAttribute, MdxJsxFlowElement } from 'mdast-util-mdx';
+import { toJsxAttribute, toMdxJsxExpressionAttribute } from '../helpers';
+
+type FlowChildren = (BlockContent | DefinitionContent)[];
+interface CompnentOptions {
+    component: string;
+    itemComponent: string;
+}
+
+interface Options {
+    QuizComponentName: string;
+    AnswerComponents: {
+        [key: string]: {
+            options?: CompnentOptions;
+        };
+    };
+}
+
+function createWrapper(
+    name: string,
+    children: FlowChildren,
+    attributes: MdxJsxAttribute[] = []
+): MdxJsxFlowElement {
+    return {
+        type: 'mdxJsxFlowElement',
+        name,
+        attributes,
+        children
+    };
+}
+
+const createWrappedOption = (
+    listChildren: { type: string; children: FlowChildren }[],
+    config: CompnentOptions
+): { wrappedOptions: MdxJsxFlowElement; optionsCount: number } => {
+    const options = listChildren
+        .filter((child) => child.type === 'listItem')
+        .map((child, index) => {
+            return createWrapper(config.itemComponent, child.children, [
+                toMdxJsxExpressionAttribute('optionIndex', index, {
+                    type: 'Literal',
+                    value: index,
+                    raw: `${index}`
+                })
+            ]);
+        });
+
+    return { wrappedOptions: createWrapper(config.component, options), optionsCount: options.length };
+};
+
+const transformQuestion = (questionNode: MdxJsxFlowElement, config: Options['AnswerComponents']) => {
+    const conf = config[questionNode.name ?? '-1'];
+    if (!questionNode.name || !conf) {
+        console.warn(
+            `Encountered question node with name "${questionNode.name}", which is not defined in the plugin configuration. Skipping transformation for this node.`
+        );
+        return;
+    }
+    const listIndex = questionNode.children.findIndex((child) => child.type === 'list');
+
+    if (listIndex === -1) {
+        if (conf.options) {
+            console.warn(`No list found in <${questionNode.name}>. Expected exactly one list child.`);
+        }
+        return;
+    }
+    if (!conf.options) {
+        return;
+    }
+
+    if (questionNode.children.filter((child) => child.type === 'list').length > 1) {
+        console.warn(`Multiple lists found in <${questionNode.name}>. Only the first one is used.`);
+    }
+
+    const beforeChildren = questionNode.children.slice(0, listIndex) as FlowChildren;
+    const listChild = questionNode.children[listIndex] as { children: FlowChildren };
+
+    const afterChildren = questionNode.children.slice(listIndex + 1) as FlowChildren;
+
+    const wrappedChildren: FlowChildren = [];
+
+    if (beforeChildren.length > 0) {
+        wrappedChildren.push(...beforeChildren);
+    }
+
+    const { wrappedOptions, optionsCount } = createWrappedOption(
+        listChild.children as { type: string; children: FlowChildren }[],
+        conf.options
+    );
+    wrappedChildren.push(wrappedOptions);
+    questionNode.attributes.push(toJsxAttribute('optionsCount', optionsCount));
+
+    if (afterChildren.length > 0) {
+        wrappedChildren.push(...afterChildren);
+    }
+
+    questionNode.children = wrappedChildren;
+};
+
+const isLiteralExpression = (
+    attr?: MdxJsxAttribute
+): attr is MdxJsxAttribute & {
+    value: { type: 'mdxJsxAttributeValueExpression'; value: string; data: { estree: any } };
+} => {
+    if (!attr) {
+        return false;
+    }
+    return (
+        attr.value !== null &&
+        typeof attr.value === 'object' &&
+        attr.value.type === 'mdxJsxAttributeValueExpression' &&
+        attr.value.data?.estree?.body.length === 1 &&
+        attr.value.data.estree.body[0].type === 'ExpressionStatement' &&
+        attr.value.data.estree.body[0].expression.type === 'Literal'
+    );
+};
+
+const qidGenerator = () => {
+    const qidMap = new Map<string, MdxJsxAttribute>();
+    let counter = 1;
+    const generator = (qid?: MdxJsxAttribute | MdxJsxExpressionAttribute) => {
+        if (qid && qid.type === 'mdxJsxExpressionAttribute') {
+            throw new Error('Expression attributes are not supported for qid generation');
+        }
+        const literalExpression = isLiteralExpression(qid) ? qid : null;
+        if (qid && qid.value && typeof qid.value !== 'string' && !literalExpression) {
+            qidMap.set(qid.value.value, qid);
+            return qid;
+        }
+
+        let id = qid
+            ? literalExpression
+                ? `${literalExpression.value.data.estree.body[0].expression.value}`
+                : (qid.value as string)
+            : `q${counter++}`;
+
+        let localCounter = 1;
+        while (qidMap.has(id)) {
+            if (qid) {
+                id = `${id}.${localCounter++}`;
+            } else {
+                id = `q${counter++}`;
+            }
+        }
+        const jsxAttr = toJsxAttribute('qid', id);
+        qidMap.set(id, jsxAttr);
+        return jsxAttr;
+    };
+    return { generator, qidSet: qidMap };
+};
+
+const transformQuiz = (
+    quizNode: MdxJsxFlowElement,
+    answerComponents: Set<string>,
+    config: Options['AnswerComponents']
+) => {
+    const { generator: getQid, qidSet } = qidGenerator();
+
+    visit(quizNode, 'mdxJsxFlowElement', (childNode) => {
+        if (childNode.name && answerComponents.has(childNode.name)) {
+            transformQuestion(childNode, config);
+            const qidIdx = childNode.attributes.findIndex((attr) => (attr as any).name === 'qid');
+            const qidAttr = getQid(childNode.attributes[qidIdx]);
+            if (qidIdx === -1) {
+                childNode.attributes.push(qidAttr);
+            } else if (qidAttr !== childNode.attributes[qidIdx]) {
+                childNode.attributes[qidIdx] = qidAttr;
+            }
+        }
+    });
+    const qids = toMdxJsxExpressionAttribute('questionIds', [...qidSet.keys()], {
+        type: 'ArrayExpression',
+        elements: [...qidSet.values()].map((val) => {
+            if (typeof val.value === 'string') {
+                return {
+                    type: 'Literal',
+                    value: val.value,
+                    raw: `'${val.value}'`
+                };
+            }
+            if (!val.value) {
+                throw new Error('Unexpected non-string qid value');
+            }
+            return (val.value.data?.estree?.body[0] as { expression: any })?.expression;
+        })
+    });
+    quizNode.attributes.push(qids);
+};
+
+const DEFAULT_OPTIONS: Options = {
+    QuizComponentName: 'Quiz',
+    AnswerComponents: {
+        ['ChoiceAnswer']: {
+            options: {
+                component: 'ChoiceAnswer.Options',
+                itemComponent: 'ChoiceAnswer.Option'
+            }
+        },
+        ['TrueFalseAnswer']: {}
+    }
+};
+
+const plugin: Plugin<Options[], Root> = function choiceAnswerWrapPlugin(
+    this,
+    options = DEFAULT_OPTIONS
+): Transformer<Root> {
+    const AnswerComponentNames = Object.keys(options.AnswerComponents);
+    const AnswerComponents = new Set(AnswerComponentNames);
+    const Config = options.AnswerComponents;
+    return async (tree, vfile) => {
+        visit(tree, 'mdxJsxFlowElement', (node) => {
+            if (node.name === options.QuizComponentName) {
+                // Enumerate and transform questions inside the quiz.
+                transformQuiz(node, AnswerComponents, Config);
+            } else if (
+                node.name &&
+                AnswerComponents.has(node.name) &&
+                !((node as any).parent?.name === options.QuizComponentName) &&
+                !node.attributes.some((attr) => (attr as any).name === 'qid')
+            ) {
+                // Transform standalone question.
+                transformQuestion(node, options.AnswerComponents);
+            } else {
+                return;
+            }
+        });
+    };
+};
+
+export default plugin;
diff --git a/src/plugins/remark-transform-assessable-components/tests/artifacts/.gitkeep b/src/plugins/remark-transform-assessable-components/tests/artifacts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/plugins/remark-transform-assessable-components/tests/plugin.test.ts b/src/plugins/remark-transform-assessable-components/tests/plugin.test.ts
new file mode 100644
index 000000000..01f96088f
--- /dev/null
+++ b/src/plugins/remark-transform-assessable-components/tests/plugin.test.ts
@@ -0,0 +1,417 @@
+import { remark } from 'remark';
+import remarkMdx from 'remark-mdx';
+import { VFile } from 'vfile';
+import { fileURLToPath } from 'url';
+import { afterEach, describe, expect, it } from 'vitest';
+import path from 'path';
+import { promises as fs } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+
+const alignLeft = (content: string) => {
+    return content
+        .split('\n')
+        .map((line) => line.trimStart())
+        .join('\n');
+};
+
+const process = async (content: string) => {
+    const { default: plugin } = await import('../plugin');
+    const tmpFile = path.resolve(path.dirname(__filename), 'artifacts', `test-${Date.now()}.mdx`);
+    await fs.writeFile(tmpFile, alignLeft(content));
+    const file = new VFile({ value: alignLeft(content), history: [tmpFile] });
+    const result = await remark().use(remarkMdx).use(plugin).process(file);
+
+    return result.value;
+};
+
+afterEach(() => {
+    // clear ./artifacts folder content
+    const artifactsDir = path.resolve(path.dirname(__filename), 'artifacts');
+    fs.readdir(artifactsDir)
+        .then((files) => {
+            const unlinkPromises = files.map((file) =>
+                file !== '.gitkeep' ? fs.unlink(path.join(artifactsDir, file)) : Promise.resolve()
+            );
+            return Promise.all(unlinkPromises);
+        })
+        .catch((err) => {
+            console.warn('Could not clear artifacts directory', err);
+        });
+});
+
+// TODO: add test for nested quizzes - `transformQuiz` will likely fail since no depth is respected.
+
+describe('#quiz', () => {
+    it("does nothing if there's no quiz", async () => {
+        const input = `# Heading
+
+            Some content
+        `;
+        const result = await process(input);
+        expect(result).toBe(alignLeft(input));
+    });
+    it('handles empty quiz', async () => {
+        const input = `# Heading
+
+            <Quiz>
+            </Quiz>
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "# Heading
+
+          <Quiz questionIds={[]} />
+          "
+        `);
+    });
+    it('handles quiz with questions', async () => {
+        const input = `# Heading
+
+            <Quiz id="8ec64fe7-d9f7-4b91-a9b1-b46a6d4246a7">
+                <ChoiceAnswer correct={[5]}>
+                    > In welchem Jahr war 2024?
+                    
+                    1. 1965
+                    2. 1983
+                    3. 1991
+                    4. 2000
+                    5. 2024
+                </ChoiceAnswer>
+            </Quiz>
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "# Heading
+
+          <Quiz id="8ec64fe7-d9f7-4b91-a9b1-b46a6d4246a7" questionIds={["q1"]}>
+            <ChoiceAnswer correct={[5]} optionsCount={5} qid="q1">
+              > In welchem Jahr war 2024?
+
+              <ChoiceAnswer.Options>
+                <ChoiceAnswer.Option optionIndex={0}>
+                  1965
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={1}>
+                  1983
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={2}>
+                  1991
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={3}>
+                  2000
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={4}>
+                  2024
+                </ChoiceAnswer.Option>
+              </ChoiceAnswer.Options>
+            </ChoiceAnswer>
+          </Quiz>
+          "
+        `);
+    });
+    it('handles quiz with multiple questions', async () => {
+        const input = `# Heading
+
+            <Quiz id="8ec64fe7-d9f7-4b91-a9b1-b46a6d4246a7">
+                <ChoiceAnswer correct={[5]}>
+                    > In welchem Jahr war 2024?
+                    
+                    1. 1965
+                    2. 1983
+                    3. 1991
+                    4. 2000
+                    5. 2024
+                </ChoiceAnswer>
+                
+
+                <ChoiceAnswer correct={[2, 3]} scoring={points(2)}>
+                    > Wählen Sie eine korrekte Aussage aus.
+
+                    1. Wenn Daten in der Cloud (z.B. OneDrive) gespeichert werden, ist kein Backup mehr nötig.
+                    2. Cloud-Dienste wie OneDrive erlauben es uns, Dateien mit anderen Personen zu teilen.
+                    3. Cloud-Dienste machen es einfacher, Dateien zwischen verschiedenen Geräten zu synchronisieren.
+                    4. Das Abspeichern sensibler Daten auf Cloud-Diensten ist immer unproblematisch, da diese ja sicher sind.
+                    5. Alle der oben genannten Aussagen sind korrekt.
+                </ChoiceAnswer>
+
+                <TrueFalseAnswer correct={false} scoring={points(0.5, -0.25, 0)} title="Kann man das so sagen?">
+                    > HTML ist eine Programmiersprache.
+                </TrueFalseAnswer>
+                
+                <ChoiceAnswer correct={[1, 3]} scoring={multipleChoicePoints(2, 1)} multiple>
+                    > Welche der folgenden Protokolle werden für die Übertragung von E-Mails verwendet?
+                    
+                    1. SMTP
+                    2. FTP
+                    3. IMAP
+                    4. HTTP
+                </ChoiceAnswer>
+
+                <ChoiceAnswer correct={[1, 2, 3, 4, 5]} scoring={noPoints()}>
+                    > Wann ist der Sinn des Lebens?
+                    
+                    1. Immer im März
+                    2. 42
+                    3. Das Bundeshaus
+                    4. Nein
+                    5. Ja, aber nur manchmal
+                </ChoiceAnswer>
+            </Quiz>
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "# Heading
+
+          <Quiz id="8ec64fe7-d9f7-4b91-a9b1-b46a6d4246a7" questionIds={["q1","q2","q3","q4","q5"]}>
+            <ChoiceAnswer correct={[5]} optionsCount={5} qid="q1">
+              > In welchem Jahr war 2024?
+
+              <ChoiceAnswer.Options>
+                <ChoiceAnswer.Option optionIndex={0}>
+                  1965
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={1}>
+                  1983
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={2}>
+                  1991
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={3}>
+                  2000
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={4}>
+                  2024
+                </ChoiceAnswer.Option>
+              </ChoiceAnswer.Options>
+            </ChoiceAnswer>
+
+            <ChoiceAnswer correct={[2, 3]} scoring={points(2)} optionsCount={5} qid="q2">
+              > Wählen Sie eine korrekte Aussage aus.
+
+              <ChoiceAnswer.Options>
+                <ChoiceAnswer.Option optionIndex={0}>
+                  Wenn Daten in der Cloud (z.B. OneDrive) gespeichert werden, ist kein Backup mehr nötig.
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={1}>
+                  Cloud-Dienste wie OneDrive erlauben es uns, Dateien mit anderen Personen zu teilen.
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={2}>
+                  Cloud-Dienste machen es einfacher, Dateien zwischen verschiedenen Geräten zu synchronisieren.
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={3}>
+                  Das Abspeichern sensibler Daten auf Cloud-Diensten ist immer unproblematisch, da diese ja sicher sind.
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={4}>
+                  Alle der oben genannten Aussagen sind korrekt.
+                </ChoiceAnswer.Option>
+              </ChoiceAnswer.Options>
+            </ChoiceAnswer>
+
+            <TrueFalseAnswer correct={false} scoring={points(0.5, -0.25, 0)} title="Kann man das so sagen?" qid="q3">
+              > HTML ist eine Programmiersprache.
+            </TrueFalseAnswer>
+
+            <ChoiceAnswer correct={[1, 3]} scoring={multipleChoicePoints(2, 1)} multiple optionsCount={4} qid="q4">
+              > Welche der folgenden Protokolle werden für die Übertragung von E-Mails verwendet?
+
+              <ChoiceAnswer.Options>
+                <ChoiceAnswer.Option optionIndex={0}>
+                  SMTP
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={1}>
+                  FTP
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={2}>
+                  IMAP
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={3}>
+                  HTTP
+                </ChoiceAnswer.Option>
+              </ChoiceAnswer.Options>
+            </ChoiceAnswer>
+
+            <ChoiceAnswer correct={[1, 2, 3, 4, 5]} scoring={noPoints()} optionsCount={5} qid="q5">
+              > Wann ist der Sinn des Lebens?
+
+              <ChoiceAnswer.Options>
+                <ChoiceAnswer.Option optionIndex={0}>
+                  Immer im März
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={1}>
+                  42
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={2}>
+                  Das Bundeshaus
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={3}>
+                  Nein
+                </ChoiceAnswer.Option>
+
+                <ChoiceAnswer.Option optionIndex={4}>
+                  Ja, aber nur manchmal
+                </ChoiceAnswer.Option>
+              </ChoiceAnswer.Options>
+            </ChoiceAnswer>
+          </Quiz>
+          "
+        `);
+    });
+
+    it('handles quiz with explicit set question ids and enumerates the remaining questions', async () => {
+        const input = `# Heading
+
+            <Quiz id="8ec64fe7-d9f7-4b91-a9b1-b46a6d4246a7">
+                <ChoiceAnswer />
+                <ChoiceAnswer qid="custom-id" />
+                <ChoiceAnswer qid="q4" />
+                <ChoiceAnswer />
+                <ChoiceAnswer qid={'expression-sq'} />
+                <ChoiceAnswer qid={"expression-dq"} />
+                <ChoiceAnswer />
+                <ChoiceAnswer />
+            </Quiz>
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "# Heading
+
+          <Quiz id="8ec64fe7-d9f7-4b91-a9b1-b46a6d4246a7" questionIds={["q1","custom-id","q4","q2","expression-sq","expression-dq","q3","q5"]}>
+            <ChoiceAnswer qid="q1" />
+
+            <ChoiceAnswer qid="custom-id" />
+
+            <ChoiceAnswer qid="q4" />
+
+            <ChoiceAnswer qid="q2" />
+
+            <ChoiceAnswer qid="expression-sq" />
+
+            <ChoiceAnswer qid="expression-dq" />
+
+            <ChoiceAnswer qid="q3" />
+
+            <ChoiceAnswer qid="q5" />
+          </Quiz>
+          "
+        `);
+    });
+});
+
+describe('#standalone question', () => {
+    it('transforms standalone question', async () => {
+        const input = `# Heading
+          <ChoiceAnswer id="96df6c5b-2750-4269-bc97-cd49c2f0911d" correct={[5]}>
+              > In welchem Jahr war 2024?
+              
+              1. 1965
+              2. 1983
+              3. 1991
+              4. 2000
+              5. 2024
+          </ChoiceAnswer>
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "# Heading
+
+          <ChoiceAnswer id="96df6c5b-2750-4269-bc97-cd49c2f0911d" correct={[5]} optionsCount={5}>
+            
+              > In welchem Jahr war 2024?
+            
+
+            <ChoiceAnswer.Options>
+              <ChoiceAnswer.Option optionIndex={0}>
+                1965
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={1}>
+                1983
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={2}>
+                1991
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={3}>
+                2000
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={4}>
+                2024
+              </ChoiceAnswer.Option>
+            </ChoiceAnswer.Options>
+          </ChoiceAnswer>
+          "
+        `);
+    });
+
+    it('transforms standalone question with post content', async () => {
+        const input = `# Heading
+          <ChoiceAnswer id="96df6c5b-2750-4269-bc97-cd49c2f0911d" correct={[5]}>
+              > In welchem Jahr war 2024?
+              
+              1. 1965
+              2. 1983
+              3. 1991
+              4. 2000
+              5. 2024
+
+              Überlege es dir gut, bevor du antwortest!
+          </ChoiceAnswer>
+        `;
+        const result = await process(input);
+        expect(result).toMatchInlineSnapshot(`
+          "# Heading
+
+          <ChoiceAnswer id="96df6c5b-2750-4269-bc97-cd49c2f0911d" correct={[5]} optionsCount={5}>
+            
+              > In welchem Jahr war 2024?
+            
+
+            <ChoiceAnswer.Options>
+              <ChoiceAnswer.Option optionIndex={0}>
+                1965
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={1}>
+                1983
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={2}>
+                1991
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={3}>
+                2000
+              </ChoiceAnswer.Option>
+
+              <ChoiceAnswer.Option optionIndex={4}>
+                2024
+              </ChoiceAnswer.Option>
+            </ChoiceAnswer.Options>
+
+              Überlege es dir gut, bevor du antwortest!
+          </ChoiceAnswer>
+          "
+        `);
+    });
+});
diff --git a/src/plugins/remark-transform-choice-answer/plugin.ts b/src/plugins/remark-transform-choice-answer/plugin.ts
deleted file mode 100644
index cff572ec2..000000000
--- a/src/plugins/remark-transform-choice-answer/plugin.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { visit } from 'unist-util-visit';
-import type { Plugin } from 'unified';
-import type { Root, BlockContent, DefinitionContent } from 'mdast';
-import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx';
-import { toMdxJsxExpressionAttribute } from '../helpers';
-
-enum ChoiceComponentTypes {
-    ChoiceAnswer = 'ChoiceAnswer',
-    TrueFalseAnswer = 'TrueFalseAnswer'
-}
-
-const QUIZ_NODE_NAME = 'Quiz';
-const BEFORE_WRAPPER_NAME = 'ChoiceAnswer.Before';
-const OPTIONS_WRAPPER_NAME = 'ChoiceAnswer.Options';
-const OPTION_WRAPPER_NAME = 'ChoiceAnswer.Option';
-const AFTER_WRAPPER_NAME = 'ChoiceAnswer.After';
-
-type FlowChildren = (BlockContent | DefinitionContent)[];
-
-function createWrapper(
-    name: string,
-    children: FlowChildren,
-    attributes: MdxJsxAttribute[] = []
-): MdxJsxFlowElement {
-    return {
-        type: 'mdxJsxFlowElement',
-        name,
-        attributes,
-        children
-    };
-}
-
-const createWrappedOption = (
-    listChildren: { type: string; children: FlowChildren }[]
-): { wrappedOptions: MdxJsxFlowElement; numOptions: number } => {
-    const options = listChildren
-        .filter((child) => child.type === 'listItem')
-        .map((child, index) => {
-            return createWrapper(OPTION_WRAPPER_NAME, child.children, [
-                toMdxJsxExpressionAttribute('optionIndex', index, {
-                    type: 'Literal',
-                    value: index,
-                    raw: `${index}`
-                })
-            ]);
-        });
-
-    return { wrappedOptions: createWrapper(OPTIONS_WRAPPER_NAME, options), numOptions: options.length };
-};
-
-const transformQuestion = (questionNode: MdxJsxFlowElement) => {
-    const listIndex = questionNode.children.findIndex((child) => child.type === 'list');
-
-    if (listIndex === -1) {
-        if (questionNode.name !== ChoiceComponentTypes.TrueFalseAnswer) {
-            console.warn(`No list found in <${questionNode.name}>. Expected exactly one list child.`);
-        }
-
-        questionNode.children = [createWrapper(BEFORE_WRAPPER_NAME, questionNode.children)];
-
-        if (questionNode.name === ChoiceComponentTypes.TrueFalseAnswer) {
-            questionNode.attributes.push(
-                toMdxJsxExpressionAttribute('numOptions', true, {
-                    type: 'Literal',
-                    value: 2,
-                    raw: '2'
-                })
-            );
-        }
-
-        return;
-    }
-
-    if (questionNode.children.filter((child) => child.type === 'list').length > 1) {
-        console.warn(`Multiple lists found in <${questionNode.name}>. Only the first one is used.`);
-    }
-
-    const beforeChildren = questionNode.children.slice(0, listIndex) as FlowChildren;
-    const listChild = questionNode.children[listIndex] as { children: FlowChildren };
-
-    const afterChildren = questionNode.children.slice(listIndex + 1) as FlowChildren;
-
-    const wrappedChildren: FlowChildren = [];
-
-    if (beforeChildren.length > 0) {
-        wrappedChildren.push(createWrapper(BEFORE_WRAPPER_NAME, beforeChildren));
-    }
-
-    const { wrappedOptions, numOptions } = createWrappedOption(
-        listChild.children as { type: string; children: FlowChildren }[]
-    );
-    wrappedChildren.push(wrappedOptions);
-    questionNode.attributes.push(
-        toMdxJsxExpressionAttribute('numOptions', true, {
-            type: 'Literal',
-            value: numOptions,
-            raw: `${numOptions}`
-        })
-    );
-
-    if (afterChildren.length > 0) {
-        wrappedChildren.push(createWrapper(AFTER_WRAPPER_NAME, afterChildren));
-    }
-
-    questionNode.children = wrappedChildren;
-};
-
-const transformQuestions = (questionNodes: MdxJsxFlowElement[]) => {
-    questionNodes.forEach((questionNode, index: number) => {
-        transformQuestion(questionNode);
-        questionNode.attributes.push(
-            toMdxJsxExpressionAttribute('questionIndex', true, {
-                type: 'Literal',
-                value: index,
-                raw: `${index}`
-            })
-        );
-        questionNode.attributes.push(
-            toMdxJsxExpressionAttribute('inQuiz', true, {
-                type: 'Literal',
-                value: true,
-                raw: 'true'
-            })
-        );
-    });
-};
-
-const transformQuiz = (quizNode: MdxJsxFlowElement) => {
-    const questions = [] as MdxJsxFlowElement[];
-    visit(quizNode, 'mdxJsxFlowElement', (childNode) => {
-        if (Object.values(ChoiceComponentTypes).includes(childNode.name as ChoiceComponentTypes)) {
-            questions.push(childNode);
-        }
-    });
-
-    transformQuestions(questions);
-    quizNode.attributes.push(
-        toMdxJsxExpressionAttribute('numQuestions', true, {
-            type: 'Literal',
-            value: questions.length,
-            raw: `${questions.length}`
-        })
-    );
-};
-
-const plugin: Plugin<[], Root> = function choiceAnswerWrapPlugin() {
-    return (tree) => {
-        visit(tree, 'mdxJsxFlowElement', (node) => {
-            if (node.name === QUIZ_NODE_NAME) {
-                // Enumerate and transform questions inside the quiz.
-                transformQuiz(node);
-            } else if (
-                Object.values(ChoiceComponentTypes).includes(node.name as ChoiceComponentTypes) &&
-                !((node as any).parent?.name === QUIZ_NODE_NAME) &&
-                !node.attributes.some((attr) => (attr as any).name === 'inQuiz')
-            ) {
-                // Transform standalone question.
-                transformQuestion(node);
-            } else {
-                return;
-            }
-        });
-    };
-};
-
-export default plugin;
diff --git a/src/siteConfig/markdownPluginConfigs.ts b/src/siteConfig/markdownPluginConfigs.ts
index e85c64b32..7fd3a53ff 100644
--- a/src/siteConfig/markdownPluginConfigs.ts
+++ b/src/siteConfig/markdownPluginConfigs.ts
@@ -21,7 +21,7 @@ import pdfPlugin from '@tdev/remark-pdf/remark-plugin';
 import codeAsAttributePlugin from '../plugins/remark-code-as-attribute/plugin';
 import commentPlugin from '../plugins/remark-comments/plugin';
 import enumerateAnswersPlugin from '../plugins/remark-enumerate-components/plugin';
-import transformChoiceAnswerPlugin from '../plugins/remark-transform-choice-answer/plugin';
+import transformAssessableComponentsPlugin from '../plugins/remark-transform-assessable-components/plugin';
 import { getAnswerDocumentType } from '../components/Answer/helper.answer';
 import fs from 'fs';
 import path from 'path';
@@ -223,6 +223,18 @@ export const PageIndexPluginDefaultOptions: PageIndexPluginOptions = {
         {
             name: 'DynamicDocumentRoots',
             docTypeExtractor: () => 'dynamic_document_roots'
+        },
+        {
+            name: 'Quiz',
+            docTypeExtractor: () => 'quiz'
+        },
+        {
+            name: 'ChoiceAnswer',
+            docTypeExtractor: () => 'choice_answer'
+        },
+        {
+            name: 'TrueFalseAnswer',
+            docTypeExtractor: () => 'true_false_answer'
         }
     ],
     persistedCodeType: (node: Code) => {
@@ -252,7 +264,7 @@ export const commentPluginConfig = [
     commentPlugin,
     {
         commentableJsxFlowElements: ['DefHeading', 'figcaption', 'String'],
-        ignoreJsxFlowElements: ['summary', 'dt'],
+        ignoreJsxFlowElements: ['summary', 'dt', 'ChoiceAnswer.Options'],
         ignoreCodeBlocksWithMeta: /live_py/
     }
 ];
@@ -265,7 +277,21 @@ export const linkAnnotationPluginConfig = [
     }
 ];
 
-export const transformChoiceAnswerPluginConfig = transformChoiceAnswerPlugin;
+export const transformAssessablePluginConfig = [
+    transformAssessableComponentsPlugin,
+    {
+        QuizComponentName: 'Quiz',
+        AnswerComponents: {
+            ['ChoiceAnswer']: {
+                options: {
+                    component: 'ChoiceAnswer.Options',
+                    itemComponent: 'ChoiceAnswer.Option'
+                }
+            },
+            ['TrueFalseAnswer']: {}
+        }
+    }
+];
 
 export const rehypeKatexPluginConfig = rehypeKatex;
 
@@ -287,11 +313,11 @@ export const recommendedRemarkPlugins = [
     enumerateAnswersPluginConfig,
     pdfPluginConfig,
     pagePluginConfig,
+    transformAssessablePluginConfig,
     pageIndexPluginConfig,
     commentPluginConfig,
     linkAnnotationPluginConfig,
-    codeAsAttributePluginConfig,
-    transformChoiceAnswerPluginConfig
+    codeAsAttributePluginConfig
 ];
 
 export const recommendedRehypePlugins = [rehypeKatexPluginConfig];
diff --git a/src/stores/ComponentStore.ts b/src/stores/ComponentStore.ts
index f84b4b071..0e440abab 100644
--- a/src/stores/ComponentStore.ts
+++ b/src/stores/ComponentStore.ts
@@ -15,6 +15,9 @@ import React from 'react';
 import { TypeMeta } from '@tdev-models/DocumentRoot';
 import { ModelMeta as ProgressStateMeta } from '@tdev-models/documents/ProgressState';
 import { TaskMeta as TaskStateMeta } from '@tdev-models/documents/TaskState';
+import { ModelMeta as QuizMeta } from '@tdev-models/documents/Assessable/Quiz';
+import { ModelMeta as ChoiceMeta } from '@tdev-models/documents/Assessable/ChoiceAnswer';
+import { ModelMeta as TrueFalseMeta } from '@tdev-models/documents/Assessable/TrueFalseAnswer';
 
 export type LiveCode = `live_${string}`;
 
@@ -56,7 +59,10 @@ class ComponentStore {
     editorComponents = new Map<CodeType, EditorComponent>();
     taskableDocumentsMeta = new Map<DocumentType, TypeMeta<TaskableType>>([
         ['task_state', new TaskStateMeta({})],
-        ['progress_state', new ProgressStateMeta({})]
+        ['progress_state', new ProgressStateMeta({})],
+        ['quiz', new QuizMeta({})],
+        ['choice_answer', new ChoiceMeta({ optionsCount: 0 })],
+        ['true_false_answer', new TrueFalseMeta({})]
     ]);
 
     constructor(root: RootStore) {
@@ -89,6 +95,23 @@ class ComponentStore {
         ];
     }
 
+    extractDefaultDocumentType(types: DocumentType[]): DocumentType | undefined {
+        if (types.length <= 1) {
+            return types[0];
+        }
+        const typesSet = new Set(types);
+        if (typesSet.size === 1) {
+            return types[0];
+        }
+        if (typesSet.has('quiz')) {
+            return 'quiz';
+        }
+        if (typesSet.has('script')) {
+            return 'script';
+        }
+        return types[0];
+    }
+
     @computed
     get registeredContainerTypes(): ContainerType[] {
         return [...this.components.keys()];
diff --git a/src/stores/DocumentRootStore.ts b/src/stores/DocumentRootStore.ts
index 0dd342649..802813653 100644
--- a/src/stores/DocumentRootStore.ts
+++ b/src/stores/DocumentRootStore.ts
@@ -298,7 +298,9 @@ export class DocumentRootStore extends iStore {
         if (config.load.documentRoot === 'replace' && !config.meta) {
             return;
         }
-        const defaultType = data.documents[0]?.type;
+        const defaultType = this.root.componentStore.extractDefaultDocumentType(
+            data.documents.map((d) => d.type)
+        );
         const meta =
             config.meta ||
             (this.find(data.id)?.meta as TypeMeta<any>) ||
@@ -310,7 +312,8 @@ export class DocumentRootStore extends iStore {
         }
         if (config.load.documentRoot) {
             if (config.load.documentRoot === 'addIfMissing') {
-                if (!this.find(data.id)) {
+                const current = this.find(data.id);
+                if (!current) {
                     this.addDocumentRoot(documentRoot);
                 }
             } else {
diff --git a/src/stores/DocumentStore.ts b/src/stores/DocumentStore.ts
index 942adb85f..45d6cc8c2 100644
--- a/src/stores/DocumentStore.ts
+++ b/src/stores/DocumentStore.ts
@@ -32,10 +32,11 @@ import Restricted from '@tdev-models/documents/Restricted';
 import CmsText from '@tdev-models/documents/CmsText';
 import DynamicDocumentRoots from '@tdev-models/documents/DynamicDocumentRoots';
 import ProgressState from '@tdev-models/documents/ProgressState';
-import Script from '@tdev-models/documents/Code';
 import TaskState from '@tdev-models/documents/TaskState';
 import Code from '@tdev-models/documents/Code';
-import ChoiceAnswer from '@tdev-models/documents/ChoiceAnswer';
+import ChoiceAnswer from '@tdev-models/documents/Assessable/ChoiceAnswer';
+import TrueFalseAnswer from '@tdev-models/documents/Assessable/TrueFalseAnswer';
+import Quiz from '@tdev-models/documents/Assessable/Quiz';
 
 const IsNotUniqueError = (error: any) => {
     try {
@@ -63,6 +64,10 @@ export function CreateDocumentModel(data: DocumentProps<DocumentType>, store: Do
             return new String(data as DocumentProps<'string'>, store);
         case 'choice_answer':
             return new ChoiceAnswer(data as DocumentProps<'choice_answer'>, store);
+        case 'true_false_answer':
+            return new TrueFalseAnswer(data as DocumentProps<'true_false_answer'>, store);
+        case 'quiz':
+            return new Quiz(data as DocumentProps<'quiz'>, store);
         case 'quill_v2':
             return new QuillV2(data as DocumentProps<'quill_v2'>, store);
         case 'solution':
@@ -91,6 +96,8 @@ const FactoryDefault: [DocumentType, Factory][] = [
     ['script_version', CreateDocumentModel],
     ['string', CreateDocumentModel],
     ['choice_answer', CreateDocumentModel],
+    ['quiz', CreateDocumentModel],
+    ['true_false_answer', CreateDocumentModel],
     ['quill_v2', CreateDocumentModel],
     ['solution', CreateDocumentModel],
     ['dir', CreateDocumentModel],
diff --git a/tdev-website/docs/gallery/persistable-documents/answer/choice-answer/index.mdx b/tdev-website/docs/gallery/persistable-documents/answer/choice-answer/index.mdx
index fd40a3ed7..f702d729d 100644
--- a/tdev-website/docs/gallery/persistable-documents/answer/choice-answer/index.mdx
+++ b/tdev-website/docs/gallery/persistable-documents/answer/choice-answer/index.mdx
@@ -1,15 +1,15 @@
 ---
-page_id: 08ac6803-b890-4608-9d4e-28f334addfb0
+page_id: e9db277c-0e99-4b56-90b8-0d2130b36e26
 tags:
   - persistable
 ---
 
 import PermissionsPanel from "@tdev-components/PermissionsPanel"
 import BrowserWindow from '@tdev-components/BrowserWindow';
-import ChoiceAnswer from '@tdev-components/documents/ChoiceAnswer/Component';
-import TrueFalseAnswer from '@tdev-components/documents/ChoiceAnswer/TrueFalseAnswer';
-import Quiz from '@tdev-components/documents/ChoiceAnswer/Quiz';
-import { points, multipleChoicePoints, noPoints } from '@tdev-components/documents/ChoiceAnswer/helpers/scoring';
+import ChoiceAnswer from '@tdev-components/documents/Assessable/ChoiceAnswer';
+import TrueFalseAnswer from '@tdev-components/documents/Assessable/TrueFalseAnswer';
+import Quiz from '@tdev-components/documents/Assessable/Quiz';
+import { points, multipleChoicePoints, noPoints } from '@tdev-components/documents/Assessable/helpers/scoring';
 
 # Choice Answer
 Choice-Antwort für Multiple-Choice, Single-Choice und Wahr/Falsch-Fragen. Geeignet für Aufgaben, Quizzes und Prüfungen.
@@ -26,7 +26,7 @@ Eine einfache Single-Choice-Frage kann wie folgt erstellt werden:
 import ChoiceAnswer from '@tdev-components/documents/ChoiceAnswer/Component';
 
 <ChoiceAnswer correct={[2]} id="9c86f782-39bc-4a2d-bdb5-53a6dad884aa">
-    > Wir gilt als Erfinder des World Wide Web (WWW)?
+    > Wer gilt als Erfinder des World Wide Web (WWW)?
 
     1. Steve **Jobs**
     2. Tim Berners-Lee
@@ -37,8 +37,8 @@ import ChoiceAnswer from '@tdev-components/documents/ChoiceAnswer/Component';
 ```
 
 <BrowserWindow>
-    <ChoiceAnswer correct={[2]} id="9c86f782-39bc-4a2d-bdb5-53a6dad884aa">
-        > Wir gilt als Erfinder des World Wide Web (WWW)?
+    <ChoiceAnswer correct={[2]} id="1ac8b1b2-a14a-44b3-986c-273754d3d9f6">
+        > Wer gilt als Erfinder des World Wide Web (WWW)?
 
         1. Steve **Jobs**
         2. Tim Berners-Lee
@@ -67,8 +67,8 @@ import ChoiceAnswer from '@tdev-components/documents/ChoiceAnswer/Component';
 ```
 
 <BrowserWindow>
-    <ChoiceAnswer correct={[2]} randomizeOptions id="7d252766-d96e-495d-9e61-52fe0cc6c083">
-        > Wir gilt als Erfinder des World Wide Web (WWW)?
+    <ChoiceAnswer correct={[2]} randomizeOptions id="8cedd0b5-a44a-4359-a017-e5a3a7e8891c">
+        > Wir gilt als Erfinder des World Wide Web (WWW)?!
 
         1. Steve **Jobs**
         2. Tim Berners-Lee
@@ -114,7 +114,7 @@ Für eine Multiple-Choice-Frage muss lediglich das `multiple`-Flag gesetzt werde
 ```
 
 <BrowserWindow>
-    <ChoiceAnswer correct={[1, 4, 5]} multiple  title="Eine Frage zu den Primzahlen" id="7b97dd5d-d304-46db-823f-68237814fee5">
+    <ChoiceAnswer correct={[1, 4, 5]} multiple  title="Eine Frage zu den Primzahlen" id="5e2ed74e-df3c-4e67-a7f0-4d27236294dc">
         > Welche der folgenden Aussagen zu Primzahlen sind korrekt? Es sind **mehrere** Antworten möglich.
         
         1. 2 ist die einzige gerade Primzahl.
@@ -145,7 +145,7 @@ import TrueFalseAnswer from '@tdev-components/documents/ChoiceAnswer/TrueFalseAn
 ```
 
 <BrowserWindow>
-    <TrueFalseAnswer correct={false} title="Das sollte man wissen…" id="89c97b84-0d7a-4d58-8dc7-c8a72569a7e4">
+    <TrueFalseAnswer correct={false} title="Das sollte man wissen…" id="5ec01175-fc94-42fd-90ad-a2bbc54eb7d2">
         Die Erde ist flach.
     </TrueFalseAnswer>
 </BrowserWindow>
@@ -191,7 +191,7 @@ import { points, multipleChoicePoints } from '@tdev-components/documents/ChoiceA
 ```
 
 <BrowserWindow>
-    <ChoiceAnswer title="Geo-Wissen" correct={[2]} scoring={points(1)} id="4ba1d040-2065-4d1b-aff9-c2df66dd1ea3">
+    <ChoiceAnswer title="Geo-Wissen" correct={[2]} scoring={points(1)} id="f8ebc37e-b9cb-46bc-9e96-f34ccbd7f83e">
         > Was ist die Hauptstadt von Frankreich?
         
         1. Berlin
@@ -200,7 +200,7 @@ import { points, multipleChoicePoints } from '@tdev-components/documents/ChoiceA
         4. Madrid
     </ChoiceAnswer>
 
-    <ChoiceAnswer title="Primzahlen" multiple correct={[2, 3, 5]} scoring={multipleChoicePoints(2, 1)} id="c1f5b5e5-13b9-4d09-831d-215d4c04ada5">
+    <ChoiceAnswer title="Primzahlen" multiple correct={[2, 3, 5]} scoring={multipleChoicePoints(2, 1)} id="edb14664-62f5-43d8-9cc9-f15b1ff57938">
         > Wählen Sie alle Primzahlen aus.
 
         1. 1
@@ -210,8 +210,9 @@ import { points, multipleChoicePoints } from '@tdev-components/documents/ChoiceA
         5. 5
     </ChoiceAnswer>
 
-    <TrueFalseAnswer correct={true} scoring={points(0.5, -0.25, 0)} id="75fac390-8846-47b5-8028-52c4258919fc">
+    <TrueFalseAnswer correct={true} scoring={points(0.5, -0.25, 0)} id="9e6185c3-2e12-42f0-958f-586b0f422e40">
         > Das Protokoll `HTTP` gehört zur Anwendungsschicht des TCP/IP-Stacks.
+
     </TrueFalseAnswer>
 </BrowserWindow>
 
@@ -225,7 +226,7 @@ import TrueFalseAnswer from '@tdev-components/documents/ChoiceAnswer/TrueFalseAn
 import Quiz from '@tdev-components/documents/ChoiceAnswer/Quiz';
 import { points, multipleChoicePoints, noPoints } from '@tdev-components/documents/ChoiceAnswer/helpers/scoring';
 
-<Quiz scoring={points(1)} id="05ff4108-a75d-4978-9b0f-d06be05fc1bf" randomizeQuestions randomizeOptions>
+<Quiz scoring={points(1)} id="04d2153f-1ed3-41bd-835b-a8bebe2ca6e8" randomizeQuestions randomizeOptions>
   <ChoiceAnswer correct={[5]}>
       > In welchem Jahr war 2024?
       
@@ -272,7 +273,7 @@ import { points, multipleChoicePoints, noPoints } from '@tdev-components/documen
 ```
 
 <BrowserWindow>
-    <Quiz scoring={points(1)} randomizeQuestions randomizeOptions id="05ff4108-a75d-4978-9b0f-d06be05fc1bf" >
+    <Quiz scoring={points(1)} randomizeQuestions randomizeOptions id="fe81de29-3fad-4da9-82a5-a4af0050fdbe" >
         <ChoiceAnswer correct={[5]}>
             > In welchem Jahr war 2024?
             
@@ -295,6 +296,7 @@ import { points, multipleChoicePoints, noPoints } from '@tdev-components/documen
 
         <TrueFalseAnswer correct={false} scoring={points(0.5, -0.25, 0)} title="Kann man das so sagen?">
             > HTML ist eine Programmiersprache.
+
         </TrueFalseAnswer>
         
         <ChoiceAnswer correct={[1, 3]} scoring={multipleChoicePoints(2, 1)} multiple>