Refactor: Choice Answer by lebalz · Pull Request #286 · GBSL-Informatik/teaching-dev

lebalz · 2026-04-06T11:35:54Z

Plan

ChoiceAnswers always have either an explicite id (uuid) when standalone or a qid when inside Quiz
Create documents for each Quiz-Item:
- having a prop qid when inside a Quiz (to ensure ordering)
- attach to the Quiz' DocumentRoot or to it's own DocumentRoot when standalone
create an interface iAssessable providing all needed methods to assess quiz or answers

netlify · 2026-04-21T15:27:08Z

✅ Deploy Preview for teaching-dev ready!

Name	Link
🔨 Latest commit	`3a09b8c`
🔍 Latest deploy log	https://app.netlify.com/projects/teaching-dev/deploys/6a1ed44f80c9ea000855ef32
😎 Deploy Preview	https://deploy-preview-286--teaching-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…ed components Co-authored-by: Copilot <copilot@github.com>

lebalz

current step: impement iAssessable to ChoiceAnswer and after that implement BooleanAnswer

… components

…faces in ChoiceAnswer

…r layout

lebalz · 2026-06-01T08:09:02Z

Ready for Review @SilasBerger :)

Current target is github.com/GBSL-Informatik/teaching-dev/tree/feature/choice-answer but we might want to directly merge to main? not sure how to proceed and what would be easier for review.

lebalz · 2026-06-02T05:40:14Z

 };

 class PageReadChecker extends iDocument<'page_read_check'> implements iTaskableDocument<'page_read_check'> {
+    readonly hideFromOverview = false;


Adds a default value — implementing models, e.g. ChoiceAnswer can use this flag to hide themselves from the Taskable Overview when inside a quiz.

lebalz · 2026-06-02T05:42:41Z

+interface AssessableData {
    assessed: boolean;
+    qid?: string;


Generic payload for all answer types which can be assessed

lebalz · 2026-06-02T05:44:27Z

+        <QuestionCard doc={doc}>
+            <DocContext.Provider value={doc}>{props.children}</DocContext.Provider>
+        </QuestionCard>
+    );
+}) as React.FC<ChoiceAnswerProps> & ChoiceAnswerSubComponents;


After the refactor, this is all that is needed for the Choice Answer :)

lebalz · 2026-06-02T05:47:32Z

+    // !! must be a stable reference, otherwise the whole list will re-render on every change
+    onChange: (doc: AssessableTypeModelMapping[T], optionIndex: number, checked: boolean) => void;


!Important - either define the function outside the component or wrap it in a React.useCallback

lebalz · 2026-06-02T06:11:25Z

@@ -0,0 +1,60 @@
+.optionsBlock {
+    --tdev-assessable-btn-remove-answer-transition-duration: 0.15s;


prefer using classic, tdev-scoped css variables (--tdev...) instead of scss variables ($tdevAssess...)

lebalz · 2026-06-02T06:13:24Z

+            }}
+            header={
+                <>
+                    <h3 className={clsx(styles.questionTitle)}>{doc.displayTitle}</h3>


when calculating frontend-stuff as @computed inside the model, the component will only rerender, when the value changes. By deault, frontend specific stuff is prefixed with display.

lebalz · 2026-06-02T06:14:23Z

+            )}
+            ref={ref}
+        >
+            <DocumentRootIdContext id={props.id}>


only the id is provided as context, the rest comes from the store...

lebalz · 2026-06-02T06:19:05Z

+const TrueFalseAnswer = observer((props: Props) => {
+    const [meta] = React.useState(new ModelMeta({ ...props }));
+    const docRootId = useDocumentRootId(props.id);
+    const doc = useFirstDocumentBy(docRootId, meta, props.qid);


questions inside a quiz have a qid and are attached to the same documentRoot as the quiz. In case a qid is present, we are in a quiz and return the document based of the qid. Otherwise the mainDocument of the documentRoot is returned.

lebalz · 2026-06-02T06:22:52Z

+const useLinkedMetaModel = <Type extends AssessableType>(
+    doc: AssessableTypeModelMapping[Type] | undefined | null,
+    meta: AssessableMeta<Type>
+) => {
+    React.useEffect(() => {
+        (doc as iAssessable<Type> | undefined)?.setLinkedMeta(meta);
+    }, [doc, meta]);
+};


The meta is normally attached to the documentRoot and is shared by all attached documents. Since not all documents share the same type, the concept of linkedMeta is introduced, which attaches the model meta to the document when it gets rendered. Like that, specific props (as the scoring function) are accessable from inside the model and are not shared between the instances.

lebalz · 2026-06-02T06:54:40Z

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


simple heuristic without a scoring function. Might not be correct for all question types, e.g. SingleChoiceAnswer with multiple correct Options would have too much maxHits.

lebalz · 2026-06-02T07:11:36Z

+    quizNode.attributes.push(qids);
+};
+
+const DEFAULT_OPTIONS: Options = {


make the answer components configurable to enable hassle-free extension

lebalz · 2026-06-02T07:12:02Z

+        },
+        {
+            name: 'Quiz',
+            docTypeExtractor: () => 'quiz'
+        },
+        {
+            name: 'ChoiceAnswer',
+            docTypeExtractor: () => 'choice_answer'
+        },
+        {
+            name: 'TrueFalseAnswer',
+            docTypeExtractor: () => 'true_false_answer'


needed for the task overview

lebalz · 2026-06-02T07:13:46Z

+        if (typesSet.size === 1) {
+            return types[0];
+        }
+        if (typesSet.has('quiz')) {


whenever we find a quiz-document along other doc types (e.g. choiceAnswer/TrueFalseAnswer), we return quiz, since all are attached to the same doc root, but only the quiz is relevant for the root document

lebalz added 3 commits April 6, 2026 13:35

move ChoiceAnswer model to folder

1e84109

add some basic tests

519535a

Merge branch 'main' into refactor-attempt/choice-answer

455f6b3

lebalz changed the title ~~move ChoiceAnswer model to folder~~ WIP: refactor(attempt): Choice Answer Apr 21, 2026

lebalz added 2 commits April 21, 2026 17:12

rewrite remark-transformer

7ee0664

Add new interface Props to Quiz component

cae081d

Refactor ChoiceAnswer to Quiz/ChoiceAnswer structure and update relat…

221e97d

…ed components Co-authored-by: Copilot <copilot@github.com>

lebalz commented Apr 28, 2026

View reviewed changes

fix typo

f5ed8fe

This comment was marked as duplicate.

Sign in to view

lebalz added 4 commits May 25, 2026 14:57

some progress

db52758

remove redundant inQuiz prop

f0507f1

setup shuffling

2b8924a

finalize single ChoiceAnswers

2ae412a

lebalz force-pushed the refactor-attempt/choice-answer branch from 7e375fa to 2ae412a Compare May 27, 2026 16:54

lebalz added 14 commits May 27, 2026 20:24

refactor: simplify correctness handling in FeedbackBadge and iAssessable

f52e23a

refactor: update imports to use Assessable namespace for ChoiceAnswer…

46b4bc0

… components

refactor: remove unused assessment logic and streamline scoring inter…

a9e52cb

…faces in ChoiceAnswer

rename ChoiceAnswer to Assessable

bf666d1

first draft of TrueFalseAnswer

a728ea3

refactor: integrate QuestionCard component and streamline ChoiceAnswe…

ebfe072

…r layout

ensure TrueFalseAnswer has its own model type

286c467

setup quiz model

151f02c

finalize quiz

7a311cf

cleanup visual glitches

b21b350

refactor feedback

2899593

make remark plugin configurable

b9fc366

rename to assessable components

ffa5ccc

debounce only by 50 ms

7aa1c56

lebalz changed the title ~~WIP: refactor(attempt): Choice Answer~~ Refactor: Choice Answer May 31, 2026

lebalz added 10 commits May 31, 2026 13:40

add sync state

3ee8e90

indicate unanswered questions

1f48674

make questions taskable

dee3c42

add scroll to animations in taskable overview

86d8af7

remove browser check

7b2edc3

fix loading document roots issues

ec47faa

streamline color hints

9eb5570

ignore comments for ChoiceAnswer.Options

976fddf

use standard css variables

a618a9d

Merge branch 'feature/choice-answer' into refactor-attempt/choice-answer

b25a80c

lebalz requested a review from SilasBerger June 1, 2026 08:09

lebalz commented Jun 2, 2026

View reviewed changes

lebalz added 2 commits June 2, 2026 09:37

cleanup comments

94475f5

fix

3a09b8c

		// !! must be a stable reference, otherwise the whole list will re-render on every change
		onChange: (doc: AssessableTypeModelMapping[T], optionIndex: number, checked: boolean) => void;

		@@ -0,0 +1,60 @@
		.optionsBlock {
		--tdev-assessable-btn-remove-answer-transition-duration: 0.15s;

Conversation

lebalz commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for teaching-dev ready!

Uh oh!

lebalz left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as duplicate.

Uh oh!

lebalz commented Jun 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

lebalz commented Apr 6, 2026 •

edited

Loading

netlify Bot commented Apr 21, 2026 •

edited

Loading