diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 019bd19aa3caac239887caf70167bb84dada2eb7..8c6fbc5d93e5d8f254c34bd9111c6a5ad96b24b7 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -130,6 +130,8 @@ import { RadioWizardDialogComponent } from 'editor/src/app/components/dialogs/wi
import { TextWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/text.dialog.component';
import { LikertWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/likert.dialog.component';
import { InputWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/input.dialog.component';
+import { RadioImagesWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/radio2.dialog.component';
+import { Text2WizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/text2.dialog.component';
/** Custom options the configure the tooltip's default show/hide delays. */
export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
@@ -194,7 +196,9 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
GetValidAudioVideoIDsPipe,
InputAssistancePropertiesComponent,
RadioWizardDialogComponent,
+ RadioImagesWizardDialogComponent,
TextWizardDialogComponent,
+ Text2WizardDialogComponent,
LikertWizardDialogComponent,
InputWizardDialogComponent
],
diff --git a/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts
index 72eaa7e614049b427579fc21984a458a43e46f99..a0f80e1267dd8abf1dbbfef94afc6de4f1860f53 100644
--- a/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts
@@ -1,18 +1,32 @@
import { Component } from '@angular/core';
+import { TextImageLabel } from 'common/models/elements/label-interfaces';
+import { LikertRowElement } from 'common/models/elements/compound-elements/likert/likert-row';
@Component({
selector: 'aspect-editor-likert-wizard-dialog',
template: `
<div mat-dialog-title>Richtig/Falsch-Assistent</div>
<div mat-dialog-content>
- Text
+ <h3>Text</h3>
<aspect-rich-text-editor [(content)]="text1"></aspect-rich-text-editor>
- Satzanfang
+ <h3>Satzanfang</h3>
<mat-form-field appearance="fill">
<textarea matInput type="text" [(ngModel)]="text2"></textarea>
</mat-form-field>
+ <h3>Optionen</h3>
+ <aspect-option-list-panel class="options" [textFieldLabel]="'Neue Option'"
+ [itemList]="options"
+ [localMode]="true">
+ </aspect-option-list-panel>
+
+ <h3>Zeilen</h3>
+ <aspect-option-list-panel class="options" [textFieldLabel]="'Neue Zeile'"
+ [itemList]="rows"
+ [localMode]="true">
+ </aspect-option-list-panel>
+
</div>
<div mat-dialog-actions>
@@ -22,6 +36,12 @@ import { Component } from '@angular/core';
`
})
export class LikertWizardDialogComponent {
- text1: string = 'Testtext 1';
+ text1: string = 'Hier steht die Frage der fünften Teilaufgabe mit Complex-Multiple-Choice (CMC). ' +
+ '[Optionentabelle] Bei einer Tabelle mit vielen' +
+ 'Zeilen kann ein Häkchen bei „haftende Kopfzeile“ gesetzt werden, damit die Spaltenüberschriften beim ' +
+ 'Scrollen sichtbar bleiben.';
+
text2: string = 'Testtext 2';
+ options: TextImageLabel[] = [];
+ rows: TextImageLabel[] = [];
}
diff --git a/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts
index cd660876c88b14e12ae8d285a9758870e2f41089..481708a61372fa19a5056f3c91305429fe3ea4f5 100644
--- a/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts
@@ -12,7 +12,7 @@ import { Label } from 'common/models/elements/label-interfaces';
<mat-divider></mat-divider>
- <h3>Satzanfang</h3>
+ <h3>Satzanfang (optional)</h3>
<mat-form-field appearance="fill">
<textarea matInput type="text" [(ngModel)]="label2"></textarea>
</mat-form-field>
@@ -38,6 +38,6 @@ import { Label } from 'common/models/elements/label-interfaces';
})
export class RadioWizardDialogComponent {
label1: string = 'Hier steht die Frage der Teilaufgabe mit Multiple Choice (MC).';
- label2: string = 'Hier könnte ein Satzanfang stehen ...';
+ label2: string = '';
options: Label[] = [];
}
diff --git a/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9511625d526b8d48bc179964f564f77d57d01d9f
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { TextImageLabel } from 'common/models/elements/label-interfaces';
+
+@Component({
+ selector: 'aspect-editor-radio-images-wizard-dialog',
+ template: `
+ <div mat-dialog-title>Assistent: MC mit Bild</div>
+ <div mat-dialog-content>
+ <h3>Frage</h3>
+ <aspect-rich-text-editor class="input1" [(content)]="label1" [showReducedControls]="true">
+ </aspect-rich-text-editor>
+
+ <mat-divider></mat-divider>
+
+ <h3>Optionen</h3>
+ <aspect-option-list-panel class="options" [textFieldLabel]="'Neue Option'"
+ [itemList]="options"
+ [showImageButton]="true"
+ [localMode]="true">
+ </aspect-option-list-panel>
+
+ <h3>Bilder je Zeile</h3>
+ <mat-form-field class="align-start">
+ <input matInput type="number" min="1" maxlength="1" [(ngModel)]="itemsPerRow">
+ </mat-form-field>
+ </div>
+ <div mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="{ label1, options, itemsPerRow }">{{'confirm' | translate }}</button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </div>
+ `,
+ styles: `
+ .mat-mdc-dialog-content {display: flex; flex-direction: column;}
+ /*.mat-mdc-dialog-content *:not(h3, mat-divider) {padding-left: 30px;}*/
+ .input1 {min-height: 200px;}
+ `
+})
+export class RadioImagesWizardDialogComponent {
+ label1: string = 'Hier steht die Frage der Teilaufgabe mit Multiple Choice (MC).';
+ options: TextImageLabel[] = [];
+ itemsPerRow: number = 4;
+}
diff --git a/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts
index 6bba087b842b1773baa84efff76a747184062dd5..0c13d553e59cc07dad71fe3a123b6e734b68e2d3 100644
--- a/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts
@@ -48,7 +48,7 @@ import { Component } from '@angular/core';
})
export class TextWizardDialogComponent {
text1: string = 'Lorem ipsum dolor sit amet';
- text2: string = 'Lorem ipsum dolor sit amet';
+ text2: string = 'Platzhalter Quelle';
highlightableOrange: boolean = false;
highlightableTurquoise: boolean = false;
highlightableYellow: boolean = false;
diff --git a/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abf279e1e0f72609937d716b8c140a34f4b7214c
--- /dev/null
+++ b/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'aspect-editor-text2-wizard-dialog',
+ template: `
+ <div mat-dialog-title>Assistent: Markieren</div>
+ <div mat-dialog-content>
+ <h3>Text</h3>
+ <aspect-rich-text-editor class="input1" [(content)]="text1"></aspect-rich-text-editor>
+
+ <h3>Tooltip</h3>
+ <mat-checkbox [(ngModel)]="showHelper" [style]="'margin-bottom: 20px;'">
+ Anzeigen
+ </mat-checkbox>
+ </div>
+ <div mat-dialog-actions>
+ <button mat-button
+ [mat-dialog-close]="{ text1, showHelper }">
+ {{'confirm' | translate }}
+ </button>
+ <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+ </div>
+ `,
+ styles: `
+ .mat-mdc-dialog-content {display: flex; flex-direction: column;}
+ .mat-mdc-dialog-content *:not(h3, mat-divider) {padding-left: 30px;}
+ h3 {text-decoration: underline;}
+ .input1 {min-height: 400px;}
+ `
+})
+export class Text2WizardDialogComponent {
+ text1: string = '[Frage] Markiere eine Stelle im Text, an der du das erkennst.';
+ showHelper: boolean = true;
+}
diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
index 66096a09fe22392260bb68f0ef59dbab78f80d3f..2013fe5198f8ae6ff01d85e2f0578ac092e80461 100644
--- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
+++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
@@ -211,14 +211,20 @@
<button mat-stroked-button (click)="applyTemplate('text')">
Stimulus: Text
</button>
+ <button mat-stroked-button (click)="applyTemplate('text2')">
+ Markieren
+ </button>
<button mat-stroked-button (click)="applyTemplate('input')">
Antwortfeld(er)
</button>
<button mat-stroked-button (click)="applyTemplate('radio')">
MC mit Text
</button>
+ <button mat-stroked-button (click)="applyTemplate('radio_images')">
+ MC mit Bild
+ </button>
<button mat-stroked-button (click)="applyTemplate('likert')">
- Likert
+ Richtig/Falsch-Aufgaben
</button>
</div>
</mat-tab>
diff --git a/projects/editor/src/app/services/template.service.ts b/projects/editor/src/app/services/template.service.ts
index d2a3c22033adf1507dadad471d88ec69a115dc01..0ee8d251945126f9e41e7d385f59ffdeafcc4966 100644
--- a/projects/editor/src/app/services/template.service.ts
+++ b/projects/editor/src/app/services/template.service.ts
@@ -6,11 +6,14 @@ import { PositionProperties, PropertyGroupGenerators } from 'common/models/eleme
import { Section, SectionProperties } from 'common/models/section';
import { UnitService } from 'editor/src/app/services/unit-services/unit.service';
import { IDService } from 'editor/src/app/services/id.service';
-import { TextLabel } from 'common/models/elements/label-interfaces';
+import { TextImageLabel, TextLabel } from 'common/models/elements/label-interfaces';
import { PositionedUIElement, UIElement, UIElementType } from 'common/models/elements/element';
import { TextWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/text.dialog.component';
import { LikertWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/likert.dialog.component';
import { InputWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/input.dialog.component';
+import { RadioImagesWizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/radio2.dialog.component';
+import { Text2WizardDialogComponent } from 'editor/src/app/components/dialogs/wizards/text2.dialog.component';
+import { LikertRowElement, LikertRowProperties } from 'common/models/elements/compound-elements/likert/likert-row';
@Injectable({
providedIn: 'root'
@@ -41,6 +44,12 @@ export class TemplateService {
if (result) resolve(this.createTextSection(result));
});
break;
+ case 'text2':
+ this.dialog.open(Text2WizardDialogComponent, {})
+ .afterClosed().subscribe((result: { text1: string, showHelper: boolean }) => {
+ if (result) resolve(this.createText2Section(result));
+ });
+ break;
case 'input':
this.dialog.open(InputWizardDialogComponent, {})
.afterClosed().subscribe((result: {
@@ -60,10 +69,16 @@ export class TemplateService {
if (result) resolve(this.createRadioSection(result));
});
break;
+ case 'radio_images':
+ this.dialog.open(RadioImagesWizardDialogComponent, {})
+ .afterClosed().subscribe((result: { label1: string, options: TextLabel[], itemsPerRow: number }) => {
+ if (result) resolve(this.createRadioImagesSection(result));
+ });
+ break;
case 'likert':
this.dialog.open(LikertWizardDialogComponent, {})
- .afterClosed().subscribe(() => {
- resolve(this.createLikertSection());
+ .afterClosed().subscribe((result: { text1: string, text2: string, options: TextImageLabel[], rows: TextImageLabel[] }) => {
+ if (result) resolve(this.createLikertSection(result));
});
break;
default:
@@ -94,6 +109,35 @@ export class TemplateService {
} as SectionProperties);
}
+ private createText2Section(config: { text1: string, showHelper: boolean }): Section {
+ const sectionElements: UIElement[] = [
+ this.createElement(
+ 'text',
+ { gridRow: 1, gridColumn: 1, gridRowRange: 2, marginBottom: { value: 40, unit: 'px' } },
+ {
+ text: config.text1
+ })
+ ];
+ if (config.showHelper) {
+ sectionElements.push(
+ this.createElement(
+ 'button',
+ { gridRow: 1, gridColumn: 2 },
+ {
+ imageSrc: 'data:image/png;base64,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',
+ tooltipText: 'Drücke kurz auf den Knopf mit dem Stift. Drücke danach auf den Anfang' +
+ 'eines Wortes. Halte gedrückt und ziehe im Text so weit, wie du markieren möchtest.',
+ tooltipPosition: 'left'
+ })
+ );
+ }
+ return new Section({
+ elements: sectionElements,
+ ...config.showHelper && { autoColumnSize: false },
+ ...config.showHelper && { gridColumnSizes: [{ value: 1, unit: 'fr' }, { value: 45, unit: 'px' }] }
+ } as SectionProperties);
+ }
+
private createInputSection(config: { text: string, answerCount: number, useTextAreas: boolean,
numbering: 'latin' | 'decimal' | 'bullets' | 'none', fieldLength: 'very-small' | 'small' | 'medium' | 'large',
expectedCharsCount: number }): Section {
@@ -118,7 +162,7 @@ export class TemplateService {
sectionElements.push(
this.createElement(
'text',
- { gridRow: i + 2, gridColumn: 1, marginTop: { value: 16, unit: 'px' }},
+ { gridRow: i + 2, gridColumn: 1, marginTop: { value: 16, unit: 'px' } },
{ text: `${numberingChars[i]}` }
)
);
@@ -197,9 +241,45 @@ export class TemplateService {
} as SectionProperties);
}
- private createLikertSection(): Section {
+ private createRadioImagesSection(config: { label1: string, options: TextLabel[], itemsPerRow: number }): Section {
return new Section({
- // elements: []
+ elements: [
+ this.createElement(
+ 'text',
+ { gridRow: 1, gridColumn: 1, marginBottom: { value: 5, unit: 'px' } },
+ { text: config.label1 }),
+ this.createElement(
+ 'radio-group-images',
+ { gridRow: 2, gridColumn: 1 },
+ { options: config.options, itemsPerRow: config.itemsPerRow })
+ ]
+ } as SectionProperties);
+ }
+
+ private createLikertSection(config: { text1: string, text2: string, options: TextImageLabel[], rows: TextImageLabel[] }): Section {
+ return new Section({
+ elements: [
+ this.createElement(
+ 'text',
+ { gridRow: 1, gridColumn: 1, marginBottom: { value: 10, unit: 'px' } },
+ { text: config.text1 }),
+ this.createElement(
+ 'likert',
+ { gridRow: 2, gridColumn: 1 },
+ {
+ options: config.options,
+ rows: config.rows.map(row => new LikertRowElement({
+ id: this.idService.getAndRegisterNewID('likert-row'),
+ rowLabel: {
+ ...row
+ },
+ columnCount: config.options.length
+ } as LikertRowProperties)),
+ label: config.text2,
+ stickyHeader: true,
+ firstColumnSizeRatio: 3
+ })
+ ]
} as SectionProperties);
}