题目编辑器

React editor component library for question-related editing workflows.

Development

This package is managed independently from consuming applications.

pnpm install
pnpm ladle

Build

pnpm build
pnpm build-ladle

The package publishes ESM, CommonJS, and TypeScript declarations from dist. React, React DOM, and Slate runtime packages are peer dependencies and are not bundled.

Release

See 题目编辑器 npm 发布流程 for the versioning, verification, Chrome login, publishing, and registry verification procedure.

Use In A Parent Project

During local integration:

{
  "dependencies": {
    "@yungu-fed/question-editor": "file:./packages/question-editor"
  }
}

After publishing:

{
  "dependencies": {
    "@yungu-fed/question-editor": "^0.1.0"
  }
}

Then import editor APIs from the package root:

import {
  QuestionContentEditor,
  QuestionI18nProvider,
  QuestionStructureEditor,
} from '@yungu-fed/question-editor'

Question Data Flow

QuestionStructureEditor edits the controlled question structure draft through value and onChange(value). The structure draft contains version, globalConfig, and ordered elements, matching the consuming question-builder data shape. Question type structures do not persist runtime keys. Content structures generated in the browser receive one-time elementKey and extraKey values for editor stability. Element config values use English enum strings such as always, sharedPool, upperAlpha, standard, single, and correctWrong.

QuestionContentEditor edits content drafts produced from a question structure. Public model helpers normalize QuestionType, QuestionData, and QuestionResponse at the package boundary so consumers do not need to duplicate element-specific defaulting logic.

Rich-text hydration

Content entry points hydrate every element's rich-text fields and every extra, including nested questions resolved through their own templates. They read a non-empty JSON document first, otherwise HTML, otherwise plain text. An empty JSON array is treated as a missing document; an explicit empty paragraph remains an intentional empty document. Input objects are not mutated. Inline blank IDs and text-marker IDs are preserved by their codecs.

Element-specific code owns field locations and answer references; HTML/JSON reading uses the shared document reader. New element types must be accounted for in the exhaustive rich-text mapping. Regression tests cover all element and extra types, media, text-only input, empty JSON arrays, nested questions, and the real Slate answer field. This hydration does not infer blank counts or split answers.

Compatibility

• Runtime peer range: React >=16.14 <20
• Local development baseline: React 16.14.0
• Do not use React 18+ only APIs in exported components.
• Slate baseline: [email protected], [email protected], [email protected], and [email protected].
• Slate packages are peer dependencies because this package is a component library and should share the consuming application's editor runtime.

作答判题状态 / Grading feedback

QuestionPlayer accepts an optional gradingResult: QuestionGradingResult. 判题由调用方完成；组件只在原作答位置展示状态，不计算分数，也不比较标准答案。 Passing a result locks the response. Clear the result before allowing another attempt. showAnswer continues to control the existing standard-answer display independently.

<QuestionPlayer
  value={question}
  questionTypeTemplates={templates}
  response={response}
  gradingResult={gradingResult}
  onResponseChange={setResponse}
/>

const gradingResult: QuestionGradingResult = {
  id: question.id,
  questionTypeKey: question.questionTypeKey,
  version: question.version,
  elementResults: [
    {
      type: "choice",
      optionResults: [{ optionId: selectedOptionId, status: "incorrect" }],
    },
    {
      type: "fill",
      blankResults: [{ blankId, status: "correct" }],
    },
  ],
  children: [],
};

elementResults 与 response.elementAnswers 一一同序；不展示结果的元素传 null， 包括本版不支持判题展示的 textResponse。children 与子题同序并递归使用相同结构。 Each target list is sparse: omitted targets remain neutral. Omission does not mean correct, incorrect, unanswered, or pending. Result identity and version must match the question; the caller must pair results with the exact submitted response, not a later edited attempt.

| Element type | Result field | Target identity | | --- | --- | --- | | choice, ordering | optionResults | optionId | | fill, inlineFill, wordBuilder | blankResults | blankId | | judgement | optionResults | value: boolean | | classification | itemResults | itemId | | textMarker | markerResults | markerId | | lineConnect, matching | connectionResults and itemResults | fromItemId + toItemId; itemId |

Every target entry contains status: correct（正确）, incorrect（错误）, partial（半对）, or unanswered（未作答）. Connection directions follow the existing response contract, from an earlier column to a later column. For connection elements, provide both lists, using [] when a list has no results. Ordering results describe the item's placement in the submitted response. Invalid identities, types, references, duplicate targets, and statuses fail at the component boundary with a field path.

分类元素原先通过 showAnswer 自动比较答案；现在统一由 gradingResult 提供对错， 仅传 showAnswer 不再触发分类判题。文本标记显示标准答案时仍保留学生原标记。 Classification verdicts now come exclusively from gradingResult; showAnswer alone no longer infers them. Text markers retain the student's selection when answers are shown.

Open the Grading demo to view fixed cases for all ten supported elements. Each case provides a standard answer, a student response, and an explicit result; no state switch is needed. These samples demonstrate presentation only and do not implement a grading engine.

选择题的 optionResults 表达选项判定：所有正确答案（包括漏选）传 correct，已选错误项传 incorrect。response 独立表达选择状态；仅已选项显示判定符号，漏选正确项只显示绿色。已选项字母使用与判定颜色一致的实心样式，未选项保持空心。

For choices, pass correct for every correct option (including missed answers), and incorrect for selected wrong options. Selection comes from response: only selected options show verdict icons; missed correct options are green without icons. Selected option markers are filled with the verdict color; unselected markers remain outlined.

判断题同样由 response 表达选择，optionResults 表达判定。未选中的正确答案传 correct，显示绿色但不附符号；仅已选项显示判定符号。

For judgement questions, selection also comes from response and verdicts from optionResults. Pass correct for an unselected correct answer to show it in green without an icon. Only selected answers show verdict icons.

多选题未选中的正确选项使用橙色警告样式表示漏选，不附符号；这是展示层派生状态，传入的判定仍为 correct。单选题和判断题未选中的正确答案仍显示绿色。

For multiple-choice questions, unselected correct options use an orange warning style without icons to indicate missed answers. This is a derived presentation state; the supplied verdict remains correct. Unselected correct answers in single-choice and judgement questions remain green.

连线题仅展示学生实际连接：正确连接为绿色实线，错误连接为红色实线，不展示漏连状态。选项不附判定颜色、文字明细或符号；展示不修改 response。

Line-connection questions show only the student’s actual connections: solid green for correct connections and solid red for incorrect connections. Missing connections are not displayed. Options have no verdict colors, detail text, or icons, and presentation does not change response.