Designvorlagen helfen bei der schnellen und einheitlichen Gestaltung von Lerninhalten. Durch die vorgegebenen Strukturen entfallen zeitaufwendige Formatierungen, da einzelne Elemente hinsichtlich Textgröße, Farbe und Abstand festgelegt sind. Mit Hilfe von Variablen können z.B. Stammdaten integriert werden, die dann automatisch mit Inhalt befüllt werden.
Innerhalb der Massenbearbeitungsfunktionen stehen Ihnen die Funktionen Kopieren,Verschieben, Löschen, Besitzer wechseln und Exportieren zur Verfügung. Mehr Informationen zu den Massenbearbeitungsfunktionen in den Designvorlagen finden Sie unter Designvorlagen: Massenbearbeitungsfunktionen.
Stammdaten
Titel
Geben Sie einen Titel für die neue Designvorlage an. Dieser Titel dient der Verwaltung der Designvorlage und ist nur für den Autor ersichtlich.
Teaser
Der Teaser ist ein Kurztext, der zur Verwaltung der Designvorlagen dient. Dieser Text ist ebenfalls nur für den Autor sichtbar.
Sprache
Gibt die Sprache für die Designvorlage an.
Designvorlagentyp
Wählen Sie den Fragetyp aus, für den Sie eine Designvorlage erstellen möchten.
Designvorlage
Sie können Ihre eigenen Designvorlagen sowohl im HTML-Layout als auch mittels CSS erstellen.
Rechts sehen Sie jeweils in einer Schnell-Vorschau das Ergebnis Ihrer Programmierung.
1.Textabschnitte für Fragestellung vorgeben (vorhanden/nicht vorhanden) und Reihenfolge festlegen.
Mögliche Abschnitte
- layoutHeadlineText = Bereich für die Fragenüberschrift
- layoutIntroductionText = Einleitungstext für Hintergrundinformationen zur Fragestellung
- layoutQuestionText = Eigentliche Fragenstellung bzw. Anweisung („W“ am Anfang und „?“ am Ende)
- layoutInstructionText = Hinweistext für Tipps oder zur Bedienung der Frage (z. B. „Es sind mehrere Antworten richtig.“)
- layoutMediaText = Medienbereich für die einheitlichen Positionierung von Medien/Bildern
- commentRight = Abschnitt für den Kommentar bei richtiger Antwort
- commentWrong = Abschnitt für den Kommentar bei falscher Antwort
- layoutAnswerarea = Antwortbereich (muss vorhanden sein)
2. showIfEmpty beeinflussen
- Dieses Attribut kann zwei Werte haben “true” und “false”
- Bei „true“ wird auch bei leerem Text/Inhalt eines Abschnitts der Bereich angezeigt und Platz reserviert -> einheitliches Layout
- Bei „false“ wird der Bereich nicht angezeigt, wenn der Text/Inhalt des Bereichs leer ist. -> kompaktes dynamisches Layout
3. Feste Elemente
- Über eine Designvorgabe können auch feste Elemente vorgegeben werden, die in jeder Frage erscheinen z.B. fester Text in Überschriften oder zu Beginn eines Kommentars
Übersicht über Variablen die innerhalb von Designvorlagen verwendet werden können
- $Author$ = Name des Autors (Vorname Nachname)
- $AuthorLastnameFirst$ = Name des Autors aber Nachname wird zuerst angezeigt (Nachname, Vorname)
- $QuestionPoints$ = Max. Punktzahl der Frage
- $Serial$ = Seriennummer die von Avendoo® generieret wird. Man kann über den Arbeitsplatz nach dieser Seriennummer suchen.
- $ExternalReference$ = Ausgabe der Daten des Feldes „Externe Referenz“ aus den Stammdaten einer Frage.
- $ExternalVersion$ = Ausgabe der Daten des Feldes „Externe Version“ aus den Stammdaten einer Frage.
- $CreationDate$ = Erstellungsdatum der Frage.
- $ChangeDate$ = Änderungsdatum der Frage.
- $ObjectTitle$ = Fragentitel der Stammdaten
Hier geben Sie eine CSS Struktur für ihre Designvorlage an. Für die Erstellung von Designvorlagen sind Kenntnisse im Aufbau von HTML und CSS Quellcode notwendig.
Beispiel-Quellcode für eine CSS Struktur
#questionWrapperCol1{ float:left; } #questionWrapper{ padding:20px; overflow:auto;
} .questionHeadline, .questionHeadline p { font-size:20px;
padding-bottom:20px; color: #334466; font-family: Arial,“Times New Roman“,Times,serif; font-weight: normal; }
.IntroductionText,
.IntroductionText p { font-weight: 14px; line-height: 15px; color:#535761; }
.instructionText, .instructionText p { font-weight:bold;
color:#000033; font-size:14px; line-height: 15px; }
.questionText, .questionText p { font-weight:bold; font-size:16px; line-height: 17px; color:#003366; padding-bottom:16px; }
.commentRight, .commentRight p { font-weight:bold; color:#006600; font-size:16px; line-height: 17px; }
.commentWrong, .commentWrong p{ color:#CC0000; font-weight:bold; font-size:16px; line-height: 17px;
}
#media{ }
Vorschau
Die Vorschau zeigt Ihnen das Ergebnis und die grundlegende Struktur der erstellen Designvorlage. Klicken Sie auf Weiter, um die Vorlage zu speichern.
Schlichte Designvorlagen verwenden
Neben dem Standard-Designvorlagen Paket haben Sie auch die Möglichkeit eigene Designvorlagen zu erstellen. In der Übersicht (Ressourcen → Designvorlagen) sehen Sie alle bereits erstellten Designvorlagen, aufgelistet nach Titel, Besitzer, Erstellungs- und Änderungsdatum, sowie den Designvorlagentyp. Links können Sie wie gewohnt mit dem Filter die Übersicht einschränken.
Standardmäßig erhalten Sie mit Avendoo® das Designvorlagenpaket „Schlichte Designvorlagen“:
In diesem Video Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie mit Avendoo® eine Wissenstestfrage mit Designvorlage erstellen.
Magh und Boppert GmbH