Grafische Benutzungsoberfläche (GUI)

Ein Lernraum muss in drei Klicks erstellt sein.

1. Klick: Tab „Angaben zum Lernraum“ anwählen

2. Klick: Neuem Lernraum einen Namen vergeben

3. Klick: Lernraum bestätigen

Ein Lernelement muss in vier Klicks erstellt sein.

1. Klick: Tab „Angaben zu Lernelementen“ anwählen

2. Klick: Neuem Lernelement einen Namen vergeben

3. Klick: Lernelement ein externes Lernmaterial zuweisen

4. Klick: Lernelement bestätigen

Ein Storyelement muss in vier Klicks erstellt sein.

1. Klick: Tab „Angaben zu Storyelementen“ anwählen

2. Klick: Neuem Storyelement einen Namen vergeben

3. Klick: Textblock mit Story-Inhalt befüllen

4. Klick: Storyelement bestätigen

Ein Adaptivitätselement muss in sieben Klicks erstellt sein.

1. Klick: Tab „Angaben zu Adaptivitätselementen“ anwählen

2. Klick: Neuem Adaptivitätselement einen Namen vergeben

3. Klick: Eine Aufgabe hinzufügen

4. Klick: Eine Frage zur Aufgabe erstellen

5. Klick: Adaptivitätselement bestätigen

Ein externes Lernmaterial muss in drei Klicks gelöscht sein.

1. Klick: Tab „Externes Lernmaterial“ anwählen

2. Klick: Lernmaterial in der Auflistung suchen und den Löschen-Button in der erscheinenden Toolbar anwählen

3. Klick: Löschen bestätigen

Die Bedienung des Autorentools muss mit folgenden Eingabegeräten möglich sein.

• Computermaus und Tastatur

• Touchpad

Die Nutzung des Autorentools muss auf folgenden Endgeräten möglich sein.

Endgeräte:

• PCs (Windows, Linux, macOS)

• Laptops (Windows, Linux, macOS)

Die Benutzungsoberfläche des Autorentools muss hinsichtlich der Breite in folgenden Formatbereichen liegen.

Formatbereiche:

• 640px (sm)

• 768px (md)

• 1024px (lg)

• 1280px (xl)

• 1536px (2xl)

• 1700px (3xl)

• 1900px (1080p)

• 2500px (2500p)

• 3000px (3000p)

• 3700px (3700p)

Das Farbkonzept des Autorentools muss folgende Farben aufweisen.

Farben:

• babylonbg: "#33334d"

• blacktrans:

  • 100: "rgba(0,0,0,0.1)"

  • 200: "rgba(0,0,0,0.2)"

  • 300: "rgba(0,0,0,0.3)"

  • 400: "rgba(0,0,0,0.4)"

  • 500: "rgba(0,0,0,0.5)"

  • 600: "rgba(0,0,0,0.6)"

  • 700: "rgba(0,0,0,0.7)"

  • 800: "rgba(0,0,0,0.8)"

  • 900: "rgba(0,0,0,0.9)“

• adlerblue:

  • 100: "rgb(207,220,229)"

  • 200: "rgb(184,210,229)"

  • 300: "rgb(161,200,229)"

  • 400: "rgb(138,190,229)"

  • 500: "rgb(115,180,229)"

  • 600: "rgb(92,170,229)"

  • 700: "rgb(69,160,229)" -> Default

  • 800: "rgb(46,150,229)"

  • 900: "rgb(23,140,229)"

• adlerdarkblue:

  • 100: "rgb(8,35,77)"

  • 200: "rgb(15,40,77)"

  • 300: "rgb(23,45,77)" -> Default

  • 400: "rgb(31,49,77)"

  • 500: "rgb(38,54,77)"

  • 600: "rgb(46,58,77)"

  • 700: "rgb(54,63,77)"

  • 800: "rgb(61,67,77)"

  • 900: "rgb(69,72,77)"

• adlergold:

  • 100: "rgb(229,221,207)"

  • 200: "rgb(229,213,184)"

  • 300: "rgb(229,205,161)"

  • 400: "rgb(229,197,138)"

  • 500: "rgb(229,189,115)" -> Default

  • 600: "rgb(229,181,92)“

  • 700: "rgb(229,173,69)"

  • 800: "rgb(229,165,46)"

  • 900: "rgb(229,157,23)"

• adlerbrown:

  • 100: "rgb(77,32,8)"

  • 200: "rgb(77,37,15)"

  • 300: "rgb(77,42,23)" -> Default

  • 400: "rgb(77,47,31)"

  • 500: "rgb(77,52,38)"

  • 600: "rgb(77,57,46)"

  • 700: "rgb(77,62,54)"

  • 800: "rgb(77,67,61)"

  • 900: "rgb(77,72,69)"

• adlergreen: "#009900"

• adlergrey:

  • 100: "rgb(230,230,230)"

  • 200: "rgb(204,204,204)"

  • 300: "rgb(179,179,179)"

  • 400: "rgb(153,153,153)"

  • 500: "rgb(128,128,128)" -> Default

  • 600: "rgb(102,102,102)"

  • 700: "rgb(77,77,77)"

  • 800: "rgb(51,51,51)"

  • 900: "rgb(26,26,26)"

• Weitere Farben:

  • adlerdeactivated: "#e9e9e9"

  • buttonbgblue: "#e9f2fa"

  • buttonpressedblue: "#ace8fc"

  • adlertextgrey: "#111111"

  • adlerbuttonlocked: "#b9bfc6"

  • adlerdeactivatedtext: "#e9e9e9"

  • adlerbggradientfrom: "#a1c8e5"

  • adlerbggradientto: "#e2eaf2"

  • nodehandlecolor: "#e9d6b3"

  • adlerbronze: "#bf8970"

  • adlerbgbright: "#f6f6f6"

  • formerror: "rgb(244,67,54)"

  • adlergreybright: "#fafafa"

Die Schrift im Autorentool muss folgende Größe aufweisen.

Schriftgrößen:

• 12px (text-xs)

• 14px (text-sm) -> Default bei Bildschirmbreite < 1536px

• 16px (text-base) -> Default bei Bildschirmbreite > 1536px

• 18px (text-lg)

• 20px (text-xl)

• 24px (text-2xl)

Der Standard-Button des Autorentools muss die folgenden Eigenschaften aufweisen.

Standard-Button:

• Höhe: 32px

• Schriftfarbe: adlerdarkblue-300

• Hintergrundfarbe: adlerblue-200

• Hover-Schriftfarbe: buttonbgblue

• Hover-Hintergrundfarbe: adlerdarkblue-300

• Text: mittig gelayoutet

Folgende Button basieren auf dem Standard-Button und weisen abweichende Eigenschaften auf:

Bestätigungs-Button:

• Icon: Haken

• Icon-Farbe: rgb (11,186,131)

• Text: OK

Neu-Button:

• Icon: Plus

• Icon-Farbe: adlerdarkblue-300

• Text: NEU

Reset-Button:

• Schriftfarbe: adlergrey-500

• Hintergrundfarbe: adlerdeactivated

Der Standard-Button im Header des Autorentools muss die folgenden Eigenschaften aufweisen.

Standard-Button im Header:

• Höhe: 32px

• Breite: 32px

• Rahmenradius: 8px

• Schriftschnitt: 700 (bold)

• Schriftfarbe: adlerdarkblue-300

• Disabled-Hintergrundfarbe: buttonbgblue

Folgender Button basiert auf dem Standard-Button im Header und weist abweichende Eigenschaften auf.

Veröffentlichen-Button:

• Hintergrundfarbe: adlergold-400

• Hover-Schriftfarbe: adlerdarkblue-300

• Hover-Hintergrundfarbe: adlergold-600

Die Breite der Tabs des Autorentools (linke und rechte Sidebar) muss - orientierend an der Breite des Autorentools - folgende Eigenschaften aufweisen.

Tab:

Breite der Tabs bei Breite X des Autorentools:

• 350px bei 640px (sm)

• 350px bei 768px (md)

• 350px bei 1024px (lg)

• 350px bei 1280px (xl)

• 400px bei 1536px (2xl)

• 400px bei 1700px (3xl)

• 450px bei 1900px (1080p)

• 600px bei 2500px (2500p)

• 600px bei 3000px (3000p)

• 600px bei 3700px (3700p)

Die Element-Karte/Slots im Autorentool muss orientierend an der Breite des Autorentools folgende Eigenschaften aufweisen.

Element-Karte/Slots:

Breite der Element-Karte/Slots bei Breite X des Autorentools:

• 72px bei 640px (sm)

• 72px bei 768px (md)

• 72px bei 1024px (lg)

• 72px bei 1280px (xl)

• 85px bei 1536px (2xl)

• 88px bei 1700px (3xl)

• 100px bei 1900px (1080p)

• 145px bei 2500px (2500p)

• 145px bei 3000px (3000p)

• 145px bei 3700px (3700p)

Höhe der Element-Karte/Slots bei Breite X des Autorentools:

• 40px bei 640px (sm)

• 40px bei 768px (md)

• 40px bei 1024px (lg)

• 40px bei 1280px (xl)

• 50px bei 1536px (2xl)

• 50px bei 1700px (3xl)

• 50px bei 1900px (1080p)

• 55px bei 2500px (2500p)

• 55px bei 3000px (3000p)

• 55px bei 3700px (3700p)

Die Benutzungsoberfläche des Autorentools enthält die folgenden Meldungen:

Eigenschaften der Standard-Meldung (im Autorentool = Aktualisierungsmeldung):

• Schriftfarbe: weiß

• Platzierung: rechter oberer Bildschirmrand

• Schließen-Icon: X

• Position des Schließen-Icons: rechts vom Text positioniert

• Zusatz-Icon: Textblock

• Position des Zusatz-Icons: links vom Text positioniert

Weitere Meldungen, die auf der Standard-Meldung basieren und abweichende Eigenschaften besitzen:

Fehlermeldungen:

• Farbgebung: rgb(244,67,54) -> rot

• Zusatz-Icon: Kreis mit Ausrufezeichen

Warnmeldungen:

• Farbgebung: rgb(225,152,0) -> gelb

• Zusatz-Icon: Dreieck mit Ausrufezeichen

Bestätigungsmeldungen:

• Farbgebung: rgb(0,200,83) -> grün

• Zusatz-Icon: Kreis mit Haken

Die Sortierung der Elemente innerhalb der hierarchischen Darstellung des Autorentools muss standardmäßig wie folgt sein:

Sortierung der Elemente innerhalb der hierarchischen Darstellung:

• Oberste Position: Eingangs-Storyelement (wenn vorhanden)

• Dazwischen: Lernelemente und Adaptivitätselemente

• Unterste Position: Ausgangs-Storyelement (wenn vorhanden)

Die Sortierung des externen Lernmaterials in der Auflistung muss alphanumerisch sein.

Sortierung des externen Lernmaterials:

Die Sortierung der erstellten Lernwelten in der Übersicht muss standardmäßig nach Änderungsdatum sein.

Sortierung der erstellten Lernwelten:

Die Sortierung der unplatzierten Elemente muss standardmäßig nach Änderungsdatum sein.

Sortierung der unplatzierten Elemente:

Die Gestaltung der erstellten und importierten Lernwelt (Lernwelt-Karte) auf der Startseite muss wie folgt sein:

Lernwelt-Karte:

• Höhe: 160px

• Breite: 240px

• Schließen-Icon: X

• Position des Schließen-Icons: rechts oben positioniert

• Position des Namens der Lernwelt: linksbündig, mittig

• Schriftschnitt: 700 (bold)

• Schriftgröße des Namens bis 1535px Bildschirmbreite: 16px

• Schriftgröße des Namens ab 1535px Bildschirmbreite: 18px

• Position des Änderungsdatums: linksbündig unterhalb des Namens

• Schriftgröße des Änderungsdatums bis 1535px Bildschirmbreite: 12px

• Schriftgröße des Änderungsdatums ab 1535px Bildschirmbreite: 14px

• Hintergrund-Icon: Lernwelt, Transparenz: 0.1

• Größe des Hintergrund-Icons: 96px

• Position des Hintergrund-Icons: rechts unten positioniert

Die Gestaltung der linken und rechten Sidebar muss wie folgt sein:

Linke und Rechte Sidebar:

• Rahmendicke: 8px

• Hintergrundfarbe: adlergrey-300

Der Erstellungsdialog zu Lernwelt/Lernraum/Storyelement/Lernelement/Adaptivitätselement in der linken Sidebar muss standardmäßig wie folgt sein:

Standard

Überschrift:

• Schriftgröße bis 1535px Bildschirmbreite: 16px

• Schriftgröße ab 1535px Bildschirmbreite: 20px

• Schriftfarbe: adlerdarkblue-300

• Hintergrund: adlerbgbright

• Position des Rahmens: unten

• Rahmendicke: 2px

• Rahmenfarbe: adlergrey-100

Infotext:

• Text: "* Erforderliche Angabe" (bei deutscher Spracheinstellung)

• Textfarbe: adlergrey-200

• Textgröße: 12px

• Position des Textes: links oben

Abschnitt:

• Schriftfarbe: adlergrey-800

• Schriftdicke: 700 (bold)

• Schriftgröße bis 1535px Bildschirmbreite: 16px

• Schriftgröße ab 1535px Bildschirmbreite: 18px

Bestätigungs-Button:

-> Beim Bearbeitungsdialog wird zusätzlich oberhalb der Abschnitte und unterhalb des Infotexts ein Neu-Button angezeigt.

Die Gestaltung des Grundrisses im mittleren Fenster muss wie folgt sein:

Grundriss:

• Rahmendicke: 0.2 (4px)

• Rahmenfarbe: adlergrey-200

• Hintergrundfarbe: buttonbgblue

Die Farbe der Icons muss wie folgt sein:

Erlaubte Farben:

• adlergold-500

• adlerdarkblue-300

• adlerdarkblue-600

• buttonbgblue

Die Gestaltung der Elementkarten muss wie folgt sein:

Elementkarten:

• Hintergrundfarbe: adlerdeactivatedtext

• Rahmenfarbe: adlergrey-200

• Rahmendicke: 2px

• Rahmenradius: 8px

• Element-Icon: Storyelement, Adaptivitätselement, Video, Text, H5P oder Bild

• Position des Element-Icons: oben mittig

• Größe des Element-Icons bis 1535px Bildschirmbreite: 24px

• Größe des Element-Icons ab 1535px Bildschirmbreite: 28px

• Schriftgröße vom Namen des Elements bis 1535px Bildschirmbreite: 8px

• Schriftgröße vom Namen des Elements ab 1535px Bildschirmbreite: 12px

• Schriftdicke: 700 (bold)

• Schriftfarbe vom Namen des Elements: adlertextgrey

• Position vom Namen des Elements: linksbündig, mittig

• Hintergrundfarbe des Zusatzkästchens: #b9c0ca

• Rahmenfarbe des Zusatzkästchens: #8b96a7

• Rahmendicke: 2px

• Rahmenradius: 6px

• Position vom Zusatzkästchen: unten mittig

• Schriftfarbe der Punkte: adlertextgrey

• Schriftdicke der Punkte: 700 (bold)

• Schriftgröße von den Punkten des Elements bis 1535px Bildschirmbreite: 8px

• Schriftgröße von den Punkten des Elements ab 1535px Bildschirmbreite: 12px

• Position der Punkte: rechts innerhalb des Zusatzkästchens

Zusatzinformationen beim Lernelement:

• Icongröße des Schwierigkeitsgrads bis 1535px Bildschirmbreite: 12px

• Icongröße des Schwierigkeitsgrads ab 1535px Bildschirmbreite: 16px

• Position des Schwierigkeitsgrads: links innerhalb des Zusatzkästchens