diff --git a/projects/common/element-components/compound-elements/cloze.component.ts b/projects/common/element-components/compound-elements/cloze.component.ts index 37c105869dd1a05b26cedf68230b3e8c19c53731..6ffda49d406da53ea584aaca8d7f17a23e737a84 100644 --- a/projects/common/element-components/compound-elements/cloze.component.ts +++ b/projects/common/element-components/compound-elements/cloze.component.ts @@ -6,7 +6,14 @@ import { InputElement } from '../../models/uI-element'; @Component({ selector: 'app-cloze', template: ` - <p *ngFor="let paragraph of elementModel.parts; let i = index"> + <p *ngFor="let paragraph of elementModel.parts; let i = index" + [style.line-height.px]="elementModel.fontSize + 15" + [style.color]="elementModel.fontColor" + [style.font-family]="elementModel.font" + [style.font-size.px]="elementModel.fontSize" + [style.font-weight]="elementModel.bold ? 'bold' : ''" + [style.font-style]="elementModel.italic ? 'italic' : ''" + [style.text-decoration]="elementModel.underline ? 'underline' : ''"> <ng-container *ngFor="let part of paragraph; let j = index"> <span *ngIf="part.type === 'text'" @@ -38,7 +45,9 @@ import { InputElement } from '../../models/uI-element'; `, styles: [ ':host ::ng-deep app-text-field .mat-form-field-wrapper {padding-bottom: 0; margin: 0}', - ':host ::ng-deep app-drop-list .cdk-drop-list {height: 100%; width: 100%;}' + ':host ::ng-deep app-drop-list .cdk-drop-list {height: 100%; width: 100%;}', + ':host ::ng-deep app-drop-list .item {padding: 0 10px; height: 30px; line-height: 30px; text-align: center;}', + 'p {margin: 0}' ] }) export class ClozeComponent extends CompoundElementComponent { diff --git a/projects/common/models/compound-elements/cloze-element.ts b/projects/common/models/compound-elements/cloze-element.ts index d12a670d7cbd087be057754d532e351f57a39a50..d4970df733a3d495807b824ca35914fd0f66f590 100644 --- a/projects/common/models/compound-elements/cloze-element.ts +++ b/projects/common/models/compound-elements/cloze-element.ts @@ -1,29 +1,38 @@ import { CompoundElement, InputElement, InputElementValue, UIElement } from '../uI-element'; -import { ClozePart, LikertColumn, LikertRow } from '../../interfaces/UIElementInterfaces'; -import { TextElement } from '../text-element'; -import { ButtonElement } from '../button-element'; +import { + ClozePart, FontElement, LikertColumn, LikertRow +} from '../../interfaces/UIElementInterfaces'; import { TextFieldElement } from '../text-field-element'; import { TextAreaElement } from '../text-area-element'; import { CheckboxElement } from '../checkbox-element'; import { DropdownElement } from '../dropdown-element'; -import { RadioButtonGroupElement } from '../radio-button-group-element'; -import { ImageElement } from '../image-element'; -import { AudioElement } from '../audio-element'; -import { VideoElement } from '../video-element'; -import { LikertElement } from './likert-element'; -import { RadioGroupImagesElement } from './radio-group-images'; import { DropListElement } from './drop-list'; +import { initFontElement } from '../../util/unit-interface-initializer'; + +export class ClozeElement extends CompoundElement implements FontElement { + text: string = '<p>Lorem ipsum dolor \\z sit amet \\i\n' + + '\n' + + 'Lorem ipsum dolor \\z sit amet \\i\n' + + '\n' + + 'Lorem ipsum dolor \\z sit amet \\i</p>'; -export class ClozeElement extends CompoundElement { - text: string = '<p>Lorem ipsum dolor \\z sit amet \\i</p>'; parts: ClozePart[][] = []; childElements: InputElement[] = []; + fontColor: string = 'black'; + font: string = 'Roboto'; + fontSize: number = 20; + lineHeight: number = 120; + bold: boolean = false; + italic: boolean = false; + underline: boolean = false; + constructor(serializedElement: UIElement) { super(serializedElement); Object.assign(this, serializedElement); + Object.assign(this, initFontElement(serializedElement)); this.createParts(this.text as string); this.height = 200;