Refactor: Choice Answer

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> {

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;
     }

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;

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,20 +176,29 @@ 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;
 }
 // enforce all TaskableTypeMpdels to extend iTaskableDocument:
 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];

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;

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>
+    );
+});

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>
+    );
+});