@digabi/exam-engine-core 19.1.0-alpha.0 → 19.1.0

package/dist/components/grading/AnnotationPopup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const AnnotationPopup: React.FunctionComponent<{
+    setMessage: (message: string) => void;
+    message: string;
+    popupVisible: boolean;
+    position: {
+        left: number;
+        top: number;
+    };
+}>;
+//# sourceMappingURL=AnnotationPopup.d.ts.map

package/dist/components/grading/AnnotationPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationPopup.d.ts","sourceRoot":"","sources":["../../../src/components/grading/AnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CACxC,CAuCA,CAAA"}

package/dist/components/grading/AnnotationPopup.js

@@ -0,0 +1,20 @@
+import React, { useEffect, useRef, useState } from 'react';
+export const AnnotationPopup = ({ setMessage, message, popupVisible, position }) => {
+    const popupRef = useRef(null);
+    const [field, setField] = useState('');
+    useEffect(() => {
+        setField(message);
+    }, [message]);
+    return popupVisible ? (React.createElement("div", { style: {
+            display: popupVisible ? 'block' : 'none',
+            position: 'absolute',
+            left: position.left,
+            top: position.top,
+        }, className: "popup", ref: popupRef },
+        React.createElement("div", { className: "popup add-annotation-popup" },
+            React.createElement("form", { onSubmit: (e) => e.preventDefault() },
+                React.createElement("input", { onChange: (e) => setField(e.target.value), value: field, className: "add-annotation-text", type: "text", autoFocus: true }),
+                React.createElement("i", { className: "fa fa-comment" }),
+                React.createElement("button", { type: "submit", "data-i18n": "arpa.annotate", onClick: () => setMessage(field) }, "Merkitse"))))) : (React.createElement(React.Fragment, null));
+};
+//# sourceMappingURL=AnnotationPopup.js.map

package/dist/components/grading/AnnotationPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationPopup.js","sourceRoot":"","sources":["../../../src/components/grading/AnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE1D,MAAM,CAAC,MAAM,eAAe,GAKvB,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,CAAC,CAAA;IACnB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,YAAY,CAAC,CAAC,CAAC,CACpB,6BACE,KAAK,EAAE;YACL,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;YACxC,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,GAAG,EAAE,QAAQ,CAAC,GAAG;SAClB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,QAAQ;QAEb,6BAAK,SAAS,EAAC,4BAA4B;YACzC,8BAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;gBACvC,+BACE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAI,GACf;gBACF,2BAAG,SAAS,EAAC,eAAe,GAAK;gBACjC,gCAAQ,IAAI,EAAC,QAAQ,eAAW,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,eAEvE,CACJ,CACH,CACF,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAA;AACH,CAAC,CAAA"}

package/dist/components/grading/AnswerCharacterCounter.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function AnswerCharacterCounter({ characterCount, maxLength, }: {
+    characterCount: number;
+    maxLength: number | undefined;
+}): JSX.Element;
+//# sourceMappingURL=AnswerCharacterCounter.d.ts.map

package/dist/components/grading/AnswerCharacterCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnswerCharacterCounter.d.ts","sourceRoot":"","sources":["../../../src/components/grading/AnswerCharacterCounter.tsx"],"names":[],"mappings":";AAGA,wBAAgB,sBAAsB,CAAC,EACrC,cAAc,EACd,SAAS,GACV,EAAE;IACD,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,eAqBA"}

package/dist/components/grading/AnswerCharacterCounter.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useExamTranslation } from '../../i18n';
+export function AnswerCharacterCounter({ characterCount, maxLength, }) {
+    const { t } = useExamTranslation();
+    const percentage = countSurplusPercentage(characterCount, maxLength);
+    return (React.createElement("div", { className: "e-font-size-xs e-grading-answer-length" },
+        t('answer-length', {
+            count: characterCount,
+        }),
+        percentage > 0 ? (React.createElement("span", { className: "e-grading-answer-max-length-surplus" }, t('max-length-surplus', {
+            maxLength,
+            percentage,
+        }))) : ('')));
+}
+function countSurplusPercentage(characters, maxCharacters) {
+    if (!maxCharacters || characters <= maxCharacters) {
+        return 0;
+    }
+    return Math.floor((100 * characters) / maxCharacters - 100);
+}
+//# sourceMappingURL=AnswerCharacterCounter.js.map

package/dist/components/grading/AnswerCharacterCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnswerCharacterCounter.js","sourceRoot":"","sources":["../../../src/components/grading/AnswerCharacterCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAE/C,MAAM,UAAU,sBAAsB,CAAC,EACrC,cAAc,EACd,SAAS,GAIV;IACC,MAAM,EAAE,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,UAAU,GAAG,sBAAsB,CAAC,cAAc,EAAE,SAAS,CAAC,CAAA;IAEpE,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC;QACpD,CAAC,CAAC,eAAe,EAAE;YAClB,KAAK,EAAE,cAAc;SACtB,CAAC;QACD,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAChB,8BAAM,SAAS,EAAC,qCAAqC,IAClD,CAAC,CAAC,oBAAoB,EAAE;YACvB,SAAS;YACT,UAAU;SACX,CAAC,CACG,CACR,CAAC,CAAC,CAAC,CACF,EAAE,CACH,CACG,CACP,CAAA;AACH,CAAC;AAED,SAAS,sBAAsB,CAAC,UAAkB,EAAE,aAAwC;IAC1F,IAAI,CAAC,aAAa,IAAI,UAAU,IAAI,aAAa,EAAE;QACjD,OAAO,CAAC,CAAA;KACT;IACD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,aAAa,GAAG,GAAG,CAAC,CAAA;AAC7D,CAAC"}

package/dist/components/grading/AnswerWithAnnotations.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Annotation } from '../..';
+export declare const AnswerWithAnnotations: React.FunctionComponent<{
+    type: 'richText' | 'text';
+    value?: string;
+    annotations: {
+        pregrading: Annotation[];
+        censoring: Annotation[];
+    };
+}>;
+//# sourceMappingURL=AnswerWithAnnotations.d.ts.map

package/dist/components/grading/AnswerWithAnnotations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnswerWithAnnotations.d.ts","sourceRoot":"","sources":["../../../src/components/grading/AnswerWithAnnotations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIlC,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC1D,IAAI,EAAE,UAAU,GAAG,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,EAAE;QAAE,UAAU,EAAE,UAAU,EAAE,CAAC;QAAC,SAAS,EAAE,UAAU,EAAE,CAAA;KAAE,CAAA;CACnE,CAmBA,CAAA"}

package/dist/components/grading/AnswerWithAnnotations.js

@@ -0,0 +1,15 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import { renderAnnotations } from '../../renderAnnotations';
+export const AnswerWithAnnotations = ({ type, annotations, value }) => {
+    const answerRef = useRef(null);
+    useLayoutEffect(() => {
+        console.log('LAYOUT', annotations.censoring.length);
+        if (answerRef.current) {
+            answerRef.current.innerHTML = value || '';
+            renderAnnotations(answerRef.current, annotations.pregrading, annotations.censoring);
+        }
+    });
+    return type === 'richText' ? (React.createElement("div", { ref: answerRef })) : (React.createElement("span", { className: "text-answer text-answer--single-line" },
+        React.createElement("span", { className: "e-inline-block", ref: answerRef }, value)));
+};
+//# sourceMappingURL=AnswerWithAnnotations.js.map

package/dist/components/grading/AnswerWithAnnotations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnswerWithAnnotations.js","sourceRoot":"","sources":["../../../src/components/grading/AnswerWithAnnotations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAG3D,MAAM,CAAC,MAAM,qBAAqB,GAI7B,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IACpC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE9C,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QACnD,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,KAAK,IAAI,EAAE,CAAA;YACzC,iBAAiB,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;SACpF;IACH,CAAC,CAAC,CAAA;IACF,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3B,6BAAK,GAAG,EAAE,SAAS,GAAI,CACxB,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAC,sCAAsC;QACpD,8BAAM,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,SAAS,IAC5C,KAAK,CACD,CACF,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/components/grading/ChoiceAnswer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ExamComponentProps } from '../../createRenderChildNodes';
+declare function ChoiceAnswer({ element, renderChildNodes }: ExamComponentProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ChoiceAnswer>;
+export default _default;
+//# sourceMappingURL=ChoiceAnswer.d.ts.map

package/dist/components/grading/ChoiceAnswer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceAnswer.d.ts","sourceRoot":"","sources":["../../../src/components/grading/ChoiceAnswer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAuEjE,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eAyCtE;;AAED,wBAAuC"}

package/dist/components/grading/ChoiceAnswer.js

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { getNumericAttribute, mapChildElements, query } from '../../dom-utils';
+import { useExamTranslation } from '../../i18n';
+import { ScreenReaderOnly } from '../ScreenReaderOnly';
+import { findMultiChoiceFromGradingStructure, ResultsContext } from '../context/ResultsContext';
+import ResultsExamQuestionAutoScore from './internal/QuestionAutoScore';
+function ChoiceAnswerOption({ renderChildNodes, selected, element, questionId, direction, isCorrect, }) {
+    const { t } = useExamTranslation();
+    const className = element.getAttribute('class');
+    const optionId = element.getAttribute('option-id');
+    const content = (React.createElement("div", { className: classNames('e-choice-answer-option e-column', className, {
+            'e-choice-answer-option--selected': selected,
+        }) }, renderChildNodes(element)));
+    const Content = ({ narrow = false }) => (React.createElement(React.Fragment, null,
+        React.createElement("input", { type: "radio", className: classNames('e-radio-button', { 'e-column e-column--narrow': narrow }), name: String(questionId), value: optionId, checked: selected, readOnly: true }),
+        content,
+        isCorrect && React.createElement(ScreenReaderOnly, null, t('screen-reader.correct-answer'))));
+    return direction === 'vertical' ? (React.createElement("div", { className: "e-mrg-b-1" },
+        React.createElement("label", { className: classNames('e-columns', {
+                'e-correct-answer-left': isCorrect,
+                'e-columns--inline': query(element, ['image', 'video']) == null /* Force full width for options containing responsive media */,
+            }) },
+            React.createElement(Content, { narrow: true })))) : (React.createElement("div", { className: "e-column e-mrg-b-1" },
+        React.createElement("label", { className: classNames('e-block e-text-center', { 'e-correct-answer-bottom': isCorrect }) },
+            React.createElement(Content, null))));
+}
+function ChoiceAnswer({ element, renderChildNodes }) {
+    const { answersByQuestionId, gradingStructure } = useContext(ResultsContext);
+    const questionId = getNumericAttribute(element, 'question-id');
+    const answer = answersByQuestionId[questionId];
+    const direction = element.getAttribute('direction') || 'vertical';
+    const className = element.getAttribute('class');
+    const choice = findMultiChoiceFromGradingStructure(gradingStructure, questionId);
+    const scoreValue = answer && choice.options.find((option) => option.id === Number(answer.value)).score;
+    const maxScore = getNumericAttribute(element, 'max-score');
+    return (React.createElement(React.Fragment, null,
+        scoreValue !== undefined && React.createElement(ResultsExamQuestionAutoScore, { score: scoreValue, maxScore: maxScore }),
+        React.createElement("div", { className: classNames('e-choice-answer', className, {
+                'e-columns': direction === 'horizontal',
+            }) }, mapChildElements(element, (childElement) => {
+            const optionId = getNumericAttribute(childElement, 'option-id');
+            const selected = answer != null && Number(answer.value) === optionId;
+            const grading = choice.options.find((option) => option.id === optionId);
+            return (React.createElement(ChoiceAnswerOption, { ...{
+                    element: childElement,
+                    renderChildNodes,
+                    questionId,
+                    key: optionId,
+                    direction,
+                    selected,
+                    isCorrect: grading.correct,
+                } }));
+        }))));
+}
+export default React.memo(ChoiceAnswer);
+//# sourceMappingURL=ChoiceAnswer.js.map

package/dist/components/grading/ChoiceAnswer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceAnswer.js","sourceRoot":"","sources":["../../../src/components/grading/ChoiceAnswer.tsx"],"names":[],"mappings":"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"}

package/dist/components/grading/DropdownAnswer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ExamComponentProps } from '../../createRenderChildNodes';
+declare function DropdownAnswer({ element, renderChildNodes }: ExamComponentProps): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof DropdownAnswer>;
+export default _default;
+//# sourceMappingURL=DropdownAnswer.d.ts.map

package/dist/components/grading/DropdownAnswer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownAnswer.d.ts","sourceRoot":"","sources":["../../../src/components/grading/DropdownAnswer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AASjE,iBAAS,cAAc,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,sBA2DxE;;AAED,wBAAyC"}

package/dist/components/grading/DropdownAnswer.js

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { findChildElement, getNumericAttribute } from '../../dom-utils';
+import { useExamTranslation } from '../../i18n';
+import { shortDisplayNumber } from '../../shortDisplayNumber';
+import { QuestionContext } from '../context/QuestionContext';
+import { ScreenReaderOnly } from '../ScreenReaderOnly';
+import { findMultiChoiceFromGradingStructure, ResultsContext } from '../context/ResultsContext';
+import ResultsExamQuestionAutoScore from './internal/QuestionAutoScore';
+function DropdownAnswer({ element, renderChildNodes }) {
+    const { t } = useExamTranslation();
+    const { answersByQuestionId, gradingStructure } = useContext(ResultsContext);
+    const { answers } = useContext(QuestionContext);
+    const questionId = getNumericAttribute(element, 'question-id');
+    const answer = answersByQuestionId[questionId];
+    const selectedOption = findChildElement(element, (childElement) => (answer === null || answer === void 0 ? void 0 : answer.value) === childElement.getAttribute('option-id'));
+    const choice = findMultiChoiceFromGradingStructure(gradingStructure, questionId);
+    if (selectedOption) {
+        const correctIds = choice.options.filter((o) => o.correct).map((o) => o.id);
+        const correctOptions = Array.from(element.children).filter((childElement) => correctIds.includes(getNumericAttribute(childElement, 'option-id')));
+        const isAnswerCorrect = correctIds.includes(getNumericAttribute(selectedOption, 'option-id'));
+        const displayNumber = shortDisplayNumber(element.getAttribute('display-number'));
+        const scoreValue = answer && choice.options.find((option) => option.id === Number(answer.value)).score;
+        const maxScore = getNumericAttribute(element, 'max-score');
+        return (React.createElement(React.Fragment, null,
+            answers.length > 1 && React.createElement("sup", null, displayNumber),
+            React.createElement("span", { className: classNames('e-dropdown-answer__answered', {
+                    'e-dropdown-answer__answered--correct': isAnswerCorrect,
+                    'e-dropdown-answer__answered--wrong': !isAnswerCorrect,
+                }) },
+                React.createElement(ScreenReaderOnly, null, t('screen-reader.answer-begin')),
+                renderChildNodes(selectedOption),
+                React.createElement(ScreenReaderOnly, null, t('screen-reader.answer-end')),
+                isAnswerCorrect && React.createElement(ScreenReaderOnly, null, t('screen-reader.correct-answer'))),
+            !isAnswerCorrect && (React.createElement("span", { className: "e-dropdown-answer__correct", "aria-hidden": true }, correctOptions.map((correctOption, i) => (React.createElement(React.Fragment, { key: i },
+                renderChildNodes(correctOption),
+                i < correctOptions.length - 1 && ', '))))),
+            scoreValue != null && (React.createElement(ResultsExamQuestionAutoScore, { score: scoreValue, maxScore: maxScore, displayNumber: displayNumber }))));
+    }
+    return null;
+}
+export default React.memo(DropdownAnswer);
+//# sourceMappingURL=DropdownAnswer.js.map

package/dist/components/grading/DropdownAnswer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownAnswer.js","sourceRoot":"","sources":["../../../src/components/grading/DropdownAnswer.tsx"],"names":[],"mappings":"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"}

package/dist/components/grading/Grading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<React.ComponentType<any>>;
+export default _default;
+//# sourceMappingURL=Grading.d.ts.map

package/dist/components/grading/Grading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grading.d.ts","sourceRoot":"","sources":["../../../src/components/grading/Grading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAA;;AAmHtE,wBAA6E"}

package/dist/components/grading/Grading.js

@@ -0,0 +1,81 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { changeLanguage, initI18n } from '../../i18n';
+import { useCached } from '../../useCached';
+import { withCommonExamContext } from '../context/CommonExamContext';
+import { ResultsContext, withResultsContext } from '../context/ResultsContext';
+import { GradingAnswer } from './GradingAnswer';
+function Grading() {
+    const { answersByQuestionId } = useContext(ResultsContext);
+    const i18n = useCached(() => initI18n('FI-fi'));
+    useEffect(changeLanguage(i18n, 'FI-fi'));
+    const answerIds = Object.keys(answersByQuestionId).map(Number);
+    if (answerIds.length === 0) {
+        return React.createElement("div", null, "No answers");
+    }
+    const [answerId, setAnswerId] = useState(answerIds[0]);
+    const annotationsStorage = useRef(Object.fromEntries(answerIds.map((id) => [
+        id,
+        {
+            pregrading: [
+                {
+                    startIndex: 2,
+                    length: 5,
+                    message: '+1',
+                },
+                {
+                    x: 0.07434944237918215,
+                    y: 0.8599562363238512,
+                    type: 'rect',
+                    width: 0.16604708798017348,
+                    height: 0.03063457330415753,
+                    message: '+2',
+                    attachmentIndex: 0,
+                },
+                {
+                    x1: 0.4035532994923858,
+                    x2: 0.5621827411167513,
+                    y1: 0.957983193277311,
+                    y2: 0.957983193277311,
+                    type: 'line',
+                    message: 'trk, +1',
+                    attachmentIndex: 0,
+                },
+            ],
+            censoring: [],
+        },
+    ])));
+    const [annotations, setAnnotations] = useState({
+        pregrading: [],
+        censoring: [],
+    });
+    useEffect(() => {
+        setAnnotations(annotationsStorage.current[answerId]);
+    });
+    const { type: answerType, value } = answersByQuestionId[answerId];
+    if (answerType === 'choice') {
+        return React.createElement("div", null, "choice answer");
+    }
+    function selectQuestion(e, id) {
+        e.preventDefault();
+        setAnswerId(id);
+        setAnnotations(annotationsStorage.current[id]);
+    }
+    function saveAnnotations(annotations) {
+        annotationsStorage.current[answerId] = annotations;
+        setAnnotations({ ...annotationsStorage.current[answerId] });
+    }
+    return (React.createElement(I18nextProvider, { i18n: i18n },
+        React.createElement("main", { className: "e-exam" },
+            React.createElement("div", { className: "grading-navi" }, answerIds.map((id) => id === answerId ? (React.createElement("span", { key: id, className: "grading-navi-item" }, answersByQuestionId[id].displayNumber)) : (React.createElement("a", { className: "grading-navi-item", href: "", onClick: (e) => selectQuestion(e, id), key: id }, answersByQuestionId[id].displayNumber)))),
+            React.createElement(GradingAnswer, { ...{
+                    isReadOnly: false,
+                    answerType,
+                    gradingRole: 'censoring',
+                    value,
+                    annotations,
+                    saveAnnotations,
+                } }))));
+}
+export default React.memo(withResultsContext(withCommonExamContext(Grading)));
+//# sourceMappingURL=Grading.js.map

package/dist/components/grading/Grading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grading.js","sourceRoot":"","sources":["../../../src/components/grading/Grading.tsx"],"names":[],"mappings":"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"}

package/dist/components/grading/GradingAnswer.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Annotation } from '../..';
+type Annotations = {
+    pregrading: Annotation[];
+    censoring: Annotation[];
+};
+type GradingRole = 'pregrading' | 'censoring';
+export declare function GradingAnswer({ answer: { type, characterCount, value }, language, isReadOnly, gradingRole, annotations, saveAnnotations, maxLength, }: {
+    answer: {
+        type: 'richText' | 'text';
+        characterCount: number;
+        value: string;
+    };
+    language: string;
+    isReadOnly: boolean;
+    gradingRole: GradingRole;
+    maxLength?: number;
+    annotations: Annotations;
+    saveAnnotations: (annotations: Annotations) => void;
+}): JSX.Element;
+export {};
+//# sourceMappingURL=GradingAnswer.d.ts.map

package/dist/components/grading/GradingAnswer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradingAnswer.d.ts","sourceRoot":"","sources":["../../../src/components/grading/GradingAnswer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAyBlC,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,EAAE,CAAC;IAAC,SAAS,EAAE,UAAU,EAAE,CAAA;CAAE,CAAA;AAExE,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAA;AAC7C,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,EACvC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,EACf,SAAS,GACV,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,UAAU,GAAG,MAAM,CAAC;QAAC,cAAc,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,WAAW,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,WAAW,CAAA;IACxB,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;CACpD,eAkSA"}

package/dist/components/grading/GradingAnswer.js

@@ -0,0 +1,242 @@
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import { annotationFromMousePosition, getOverlappingMessages, hasTextSelectedInAnswerText, imageAnnotationMouseDownInfo, mergeAnnotation, selectionHasNothingToUnderline, showAndPositionElement, textAnnotationFromRange, } from './editAnnotations';
+import { renderAnnotations, renderImageAnnotationByImage, updateImageAnnotationMarkSize, wrapAllImages, } from '../../renderAnnotations';
+import GradingAnswerAnnotationList from './GradingAnswerAnnotationList';
+import { changeLanguage, initI18n } from '../../i18n';
+import { updateLargeImageWarnings } from './largeImageDetector';
+import { I18nextProvider } from 'react-i18next';
+import { useCached } from '../../useCached';
+import { AnswerCharacterCounter } from './AnswerCharacterCounter';
+export function GradingAnswer({ answer: { type, characterCount, value }, language, isReadOnly, gradingRole, annotations, saveAnnotations, maxLength, }) {
+    const answerRef = useRef(null);
+    const popupRef = useRef(null);
+    const messageRef = useRef(null);
+    const tooltipRef = useRef(null);
+    let newAnnotationObject;
+    let savedAnnotations;
+    const imgAnnotationState = { start: undefined, element: undefined, img: undefined };
+    let isEditAnnotationPopupVisible = false;
+    let annotationDataForTooltip;
+    let annotationPositionForPopup;
+    let hideTooltipTimeout;
+    let windowResizeTimeout;
+    function onAnnotationOrListClick(e) {
+        var _a;
+        const element = e.target;
+        if (element instanceof HTMLElement) {
+            if (element.tagName === 'MARK') {
+                showTooltip(element);
+            }
+            else if (element.tagName === 'LI') {
+                const index = (_a = element.dataset.listNumber) === null || _a === void 0 ? void 0 : _a.replace(')', '');
+                const mark = document.querySelector(`.e-annotation[data-index="${index}"]`);
+                showTooltip(mark);
+                mark.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+            else if (annotationDataForTooltip) {
+                hideTooltip();
+            }
+        }
+    }
+    function editExistingAnnotation(e) {
+        if (e.target.closest('.editable')) {
+            toggle(tooltipRef.current, false);
+            showExistingAnnotationPopup(annotationPositionForPopup);
+        }
+    }
+    useLayoutEffect(() => {
+        if (answerRef.current) {
+            savedAnnotations = annotations;
+            toggle(tooltipRef.current, false);
+            toggle(popupRef.current, false);
+            renderAnswerWithAnnotations(savedAnnotations);
+        }
+        window.onresize = () => {
+            clearTimeout(windowResizeTimeout);
+            windowResizeTimeout = setTimeout(() => updateLargeImageWarnings(answerRef.current), 1000);
+        };
+    });
+    const i18n = useCached(() => initI18n(language));
+    useEffect(changeLanguage(i18n, language));
+    return (React.createElement(I18nextProvider, { i18n: i18n },
+        React.createElement("div", { onClick: (e) => onAnnotationOrListClick(e), className: "e-grading-answer-wrapper" },
+            React.createElement("div", { className: "e-grading-answer e-line-height-l e-mrg-b-1", ref: answerRef, onMouseDown: (e) => onAnswerMouseDown(e), onMouseOver: (e) => onMouseOverAnnotation(e.target) }),
+            React.createElement(AnswerCharacterCounter, { characterCount: characterCount, maxLength: maxLength }),
+            React.createElement(GradingAnswerAnnotationList, { censoring: annotations.censoring, pregrading: annotations.pregrading, singleGrading: false }),
+            React.createElement("form", { style: { display: 'none' }, ref: popupRef, className: "e-grading-answer-popup e-grading-answer-add-annotation", onSubmit: (e) => onSubmitAnnotation(e) },
+                React.createElement("input", { name: "message", className: "e-grading-answer-add-annotation-text", type: "text", ref: messageRef }),
+                React.createElement("button", { className: "e-grading-answer-add-annotation-button", type: "submit", "data-i18n": "arpa.annotate" }, "Merkitse"),
+                React.createElement("button", { className: "e-grading-answer-close-popup", onClick: (e) => {
+                        e.preventDefault();
+                        hideAnnotationPopupAndRefresh();
+                    } }, "\u00D7")),
+            React.createElement("div", { style: { display: 'none' }, ref: tooltipRef, className: "e-grading-answer-tooltip e-grading-answer-popup", onMouseOver: onMouseOverTooltip, onMouseOut: hideTooltip },
+                React.createElement("span", { onClick: (e) => editExistingAnnotation(e), className: "e-grading-answer-tooltip-label" }, "tooltip text"),
+                React.createElement("button", { onClick: (e) => removeAnnotation(e), className: "e-grading-answer-tooltip-remove" }, "\u00D7")))));
+    function removeAnnotation(e) {
+        e.preventDefault();
+        hideTooltip();
+        savedAnnotations[annotationDataForTooltip.role].splice(annotationDataForTooltip.index, 1);
+        annotationDataForTooltip = undefined;
+        saveAnnotations(savedAnnotations);
+    }
+    function hideTooltip() {
+        hideTooltipTimeout = setTimeout(() => {
+            toggle(tooltipRef.current, false);
+        }, 400);
+    }
+    function onMouseOverTooltip() {
+        clearTimeout(hideTooltipTimeout);
+    }
+    function onMouseOutFromTooltip(e) {
+        const target = e.target;
+        if (target.tagName === 'MARK') {
+            clearTimeout(hideTooltipTimeout);
+            hideTooltip();
+        }
+        answerRef.current.removeEventListener('mouseout', onMouseOutFromTooltip);
+    }
+    function showTooltip(target) {
+        clearTimeout(hideTooltipTimeout);
+        const tooltip = tooltipRef.current;
+        const { type, listIndex, message } = target.dataset;
+        tooltip.classList.toggle('editable', !isReadOnly && type === gradingRole);
+        annotationPositionForPopup = target.getBoundingClientRect();
+        showAndPositionElement(annotationPositionForPopup, answerRef.current, tooltip);
+        tooltip.querySelector('.e-grading-answer-tooltip-label').textContent = message || '–';
+        annotationDataForTooltip = { index: Number(listIndex), role: type, message: message || '' };
+        answerRef.current.addEventListener('mouseout', onMouseOutFromTooltip);
+    }
+    function onMouseOverAnnotation(target) {
+        if (target.tagName === 'MARK' &&
+            !isEditAnnotationPopupVisible &&
+            (!hasTextSelectedInAnswerText() || isReadOnly) &&
+            !imgAnnotationState.element) {
+            showTooltip(target);
+        }
+    }
+    function showAnnotationPopup(rect, message) {
+        annotationDataForTooltip = undefined;
+        setupAnnotationPopup(rect, message);
+    }
+    function showExistingAnnotationPopup(rect) {
+        setupAnnotationPopup(rect, annotationDataForTooltip.message);
+    }
+    function setupAnnotationPopup(rect, message) {
+        // Could be active from previous popup
+        window.removeEventListener('keydown', onKeyUpInAnnotationPopup);
+        showAndPositionElement(rect, answerRef.current, popupRef.current);
+        const inputElement = messageRef.current;
+        inputElement.value = message;
+        inputElement.focus();
+        isEditAnnotationPopupVisible = true;
+        window.addEventListener('keydown', onKeyUpInAnnotationPopup);
+    }
+    function hideAnnotationPopupAndRefresh() {
+        newAnnotationObject = undefined;
+        imgAnnotationState.element = undefined;
+        imgAnnotationState.img = undefined;
+        isEditAnnotationPopupVisible = false;
+        window.removeEventListener('keydown', onKeyUpInAnnotationPopup);
+        toggle(popupRef.current, false);
+        renderAnswerWithAnnotations(savedAnnotations);
+    }
+    function onAnswerMouseDown(e) {
+        var _a;
+        if (isReadOnly) {
+            return;
+        }
+        window.addEventListener('mouseup', onWindowMouseUpAfterAnswerMouseDown);
+        // Do annotations only with left mouse buttons
+        if (e.button !== 0) {
+            return;
+        }
+        const target = e.target;
+        const img = ((_a = target.closest('.e-annotation-wrapper')) === null || _a === void 0 ? void 0 : _a.querySelector('img')) || undefined;
+        if (!img) {
+            return;
+        }
+        img.addEventListener('dragstart', preventDefaults); // Prevent dragging images when marking image annotations
+        imgAnnotationState.start = imageAnnotationMouseDownInfo(e, img);
+        imgAnnotationState.img = img;
+        window.addEventListener('mousemove', onMouseMoveForImageAnnotation);
+    }
+    function onWindowMouseUpAfterAnswerMouseDown() {
+        var _a, _b;
+        (_a = imgAnnotationState.img) === null || _a === void 0 ? void 0 : _a.removeEventListener('dragstart', preventDefaults);
+        window.removeEventListener('mousemove', onMouseMoveForImageAnnotation);
+        window.removeEventListener('mouseup', onWindowMouseUpAfterAnswerMouseDown);
+        // Image annotation is being created since shape exists
+        if (imgAnnotationState.element) {
+            showAnnotationPopup((_b = imgAnnotationState.element) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(), '');
+            return;
+        }
+        // Text annotation
+        const selection = window.getSelection();
+        if (selection && answerRef.current !== null && hasTextSelectedInAnswerText()) {
+            const range = selection.getRangeAt(0);
+            if (selectionHasNothingToUnderline(range)) {
+                return;
+            }
+            const position = textAnnotationFromRange(answerRef.current, range);
+            const message = getOverlappingMessages(savedAnnotations[gradingRole], position.startIndex, position.length);
+            newAnnotationObject = { ...position, type: 'text', message };
+            showAnnotationPopup(range.getBoundingClientRect(), message);
+            const newAnnotations = { ...savedAnnotations };
+            newAnnotations[gradingRole] = mergeAnnotation(answerRef.current, newAnnotationObject, savedAnnotations[gradingRole]);
+            renderAnswerWithAnnotations(newAnnotations);
+        }
+    }
+    function onMouseMoveForImageAnnotation(e) {
+        preventDefaults(e);
+        newAnnotationObject = annotationFromMousePosition(e, imgAnnotationState.start);
+        // Create shape on first mouse move and resize after that
+        if (imgAnnotationState.element) {
+            updateImageAnnotationMarkSize(imgAnnotationState.element, newAnnotationObject);
+        }
+        else {
+            imgAnnotationState.element = renderImageAnnotationByImage(imgAnnotationState.img, '', newAnnotationObject, gradingRole, 999);
+        }
+    }
+    function renderAnswerWithAnnotations(annotations) {
+        const container = answerRef.current;
+        if (type === 'richText') {
+            container.innerHTML = value;
+            wrapAllImages(container);
+            updateLargeImageWarnings(container);
+        }
+        else {
+            container.textContent = value;
+        }
+        renderAnnotations(container, annotations.pregrading, annotations.censoring, false);
+    }
+    function onSubmitAnnotation(e) {
+        e.preventDefault();
+        const message = messageRef.current.value;
+        if (annotationDataForTooltip) {
+            // Editing existing annotation message by clicking tooltip
+            savedAnnotations[annotationDataForTooltip.role][annotationDataForTooltip.index].message = message;
+        }
+        else {
+            // Saving new annotation
+            savedAnnotations[gradingRole] = mergeAnnotation(answerRef.current, { ...newAnnotationObject, message }, savedAnnotations[gradingRole] || []);
+        }
+        toggle(popupRef.current, false);
+        saveAnnotations(savedAnnotations);
+    }
+    function onKeyUpInAnnotationPopup(e) {
+        if (e.key === 'Escape' && isEditAnnotationPopupVisible) {
+            hideAnnotationPopupAndRefresh();
+        }
+    }
+}
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+function toggle(element, isVisible) {
+    if (element instanceof HTMLElement) {
+        element.style.display = isVisible ? 'initial' : 'none';
+    }
+}
+//# sourceMappingURL=GradingAnswer.js.map