diff --git a/projects/common/ui-elements/cloze/cloze-element.ts b/projects/common/ui-elements/cloze/cloze-element.ts index 426ccdf9c726fcdd175ca49af7555be622545fe8..747c5fe6b6694c3e25cb21a554112b506434d6bd 100644 --- a/projects/common/ui-elements/cloze/cloze-element.ts +++ b/projects/common/ui-elements/cloze/cloze-element.ts @@ -7,7 +7,7 @@ import { UIElement, InputElement, CompoundElement, ClozeDocument, PositionedElement, PositionProperties, - FontElement, FontProperties + FontElement, FontProperties, ClozeDocumentParagraph, ClozeDocumentPart } from '../../models/uI-element'; import { initFontElement, initPositionedElement } from '../../util/unit-interface-initializer'; import { TextFieldSimpleElement } from '../textfield-simple/text-field-simple-element'; @@ -45,6 +45,15 @@ export class ClozeElement extends CompoundElement implements PositionedElement, this.height = serializedElement.height || 200; } + getChildElements(): InputElement[] { + return this.document.content + .filter((paragraph: ClozeDocumentParagraph) => paragraph.content) // filter empty paragraphs + .map((paragraph: ClozeDocumentParagraph) => paragraph.content // get custom paragraph parts + .filter((word: ClozeDocumentPart) => ['TextField', 'DropList', 'ToggleButton'].includes(word.type))) + .reduce((accumulator: any[], currentValue: any) => accumulator // put all collected paragraph parts into one list + .concat(currentValue.map((node: ClozeDocumentPart) => node.attrs?.model)), []); // model is in node.attrs.model + } + private handleBackwardsCompatibility(serializedElement: Partial<UIElement>): void { const childModels = ClozeElement.parseElementList(serializedElement.parts); diff --git a/projects/common/ui-elements/cloze/cloze.component.ts b/projects/common/ui-elements/cloze/cloze.component.ts index b6316aaf51971c9342a266c6fda36c9a2ef64816..19077f7c22aa329ba8702807a619c019b02dfdfd 100644 --- a/projects/common/ui-elements/cloze/cloze.component.ts +++ b/projects/common/ui-elements/cloze/cloze.component.ts @@ -183,12 +183,7 @@ export class ClozeComponent extends CompoundElementComponent { editorMode: boolean = false; getFormElementModelChildren(): InputElement[] { - return this.elementModel.document.content - .filter((paragraph: ClozeDocumentParagraph) => paragraph.content) // filter empty paragraphs - .map((paragraph: ClozeDocumentParagraph) => paragraph.content // get custom paragraph parts - .filter((word: ClozeDocumentPart) => ['TextField', 'DropList', 'ToggleButton'].includes(word.type))) - .reduce((accumulator: any[], currentValue: any) => accumulator // put all collected paragraph parts into one list - .concat(currentValue.map((node: ClozeDocumentPart) => node.attrs?.model)), []); // model is in node.attrs.model + return this.elementModel.getChildElements(); } getFormElementChildrenComponents(): ElementComponent[] { diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts index 531ed0ed91bf9f5bf637acbc708203d8f38430d9..cdd9c032c81f743276eb00027ce8d15b919ebc4a 100644 --- a/projects/editor/src/app/services/unit.service.ts +++ b/projects/editor/src/app/services/unit.service.ts @@ -234,6 +234,11 @@ export class UnitService { rowObject.id = this.idService.getNewID('likert_row'); }); } + if (newElement.type === 'cloze') { + (newElement as ClozeElement).getChildElements().forEach((childElement: InputElement) => { + childElement.id = this.idService.getNewID(childElement.type); + }); + } section.elements.push(newElement as PositionedElement); });