Aktuelles Webdesign (»Design 2018«) für Kurse im Online-Übungssystem

Autor: Immo Schulz-Gerlach, ZMI, FeU-Softwaretechnik
Version: 3.0.0 — 22. Mai 2018
[PDF-Version] [ePub-Version]

1. Überblick

Designauswahl für Studentenzugang

Die meisten Online-Übungssystem-Seiten (insb. Kursauswahl/Homepage sowie alle Betreuer- und Korrektorenzugänge) liegen zentral gewartet immer im aktuellen Webdesign vor. Für den Studentenzugang zu einem Kurs dagegen kann der Kursbetreuer zwischen dem aktuellen »Design 2018« sowie älteren Designs wählen.

Diese Design-Wahl für die Studentenseiten Ihres Kurses erfolgt direkt in den Kursparametern – ebenso wie einfache Anpassungen wie z.B., ob im Studenten-Zugang ein »Heft-Schließen«-Knopf für die Möglichkeit zur vorzeitigen endgültigen Abgabe angeboten werden soll:

Kursparameter für Standardausprägungen des aktuellen Designs
Kursparameter für Standardausprägungen des aktuellen Designs

Hinweise zur Übergangsphase

Im Sommersemester 2018, dem Semester der Neueinführung von »Design 2018«, werden laufende Kurse nicht automatisch aufs neue Design umgestellt! Im laufenden Semester ist das neue Design für Sie also ein „Opt-In“: Sie können es auch im laufenden Semester jederzeit aktivieren; wenn Sie nichts tun, bleibt Ihr Kurs für den Rest des Semesters noch unverändert.

Wird ein Kurs später für ein neues Semester dupliziert („geklont“), so wird für die neu erzeugte Kursversion automatisch die Designauswahl in den Kursparametern (s.o.) auf »Design 2018« umgestellt. Sollten Sie damit nicht zufrieden sein, können Sie die Einstellung wieder auf ein älteres Design zurücksetzen („Opt-Out“).

Was ist das Designvorlagen-Paket?

Das Designvorlagen-Paket, das Sie einzeln herunterladen können enthält Kopien und Varianten von verschiedenen zentralen Seiten des Studentenzugangs, die Sie verwenden können, falls Sie an den normalerweise verwendeten, zentral vorgegebenen Seiten weiterreichende Änderungen vornehmen möchten, für die keine Einstellmöglichkeiten im Betreuerzugang existieren. Im Normalfall werden Sie es nicht benötigen.

Von manchen dieser zentralen Seiten finden Sie im Designvorlagen-Paket verschiedene Varianten, von denen Sie eine von der Standardvariante abweichende auswählen und in ihrem Kurs installieren können (über die Funktion »Kursressource hochladen«), um die durch diese Variante vorkonfigurierte Änderung an der entsprechenden Seite im Studentenzugang vorzunehmen.

Darüber hinaus können Sie an diesen Vorlagen auch selbst Modifikationen vornehmen. So können Sie beispielsweise in der Aufgabenübersichts-Seite (StudentenStartSeite) die Texte vor und/oder nach der Aufgabentabelle beliebig bearbeiten oder ganz gegen eigene Texte austauschen, indem Sie aus dem Vorlagenpaket eine Variante der StudentenStartSeite.html auswählen, diese in einem Texteditor bearbeiten und als Kursressource in Ihren Kurs hochladen (oder erst unverändert hochladen und dann Kursressourcen online bearbeiten).

Überblick über dieses Handbuch

Dieses Handbuch beschreibt zunächst im folgenden Kapitel 2, wie Sie die für Studenten zugänglichen Standardseiten (Kursstartseite, Übersichtsseiten für Aufgaben, Korrekturstatus und Musterlösungen) in einem einfachen Schritt auf das neue Webdesign umstellen.

Im Anschluss wird, ebenfalls noch im Kapitel 2, beschrieben, wie Sie optional durch die gezielte Installation von Varianten einzelner Seiten einfache Konfigurationsmaßnahmen vornehmen können.

Nachdem die zentralen Seiten im neuen Design vorliegen, sollten Sie auch die von Ihnen gestalteten Seiten (Aufgabenstellungen, Musterlösungen, Quittungs- und Korrekturseiten) auf das neue Design umstellen. Im Idealfall (falls die Aufgaben bereits das »Design 2010« auf empfohlene Weise nutzten), müssen Sie gar nichts dafür tun, ein Umstellen des Design-Kursparameters genügt dann. Sollte das aber nicht genügen (da die Aufgabenseiten noch nicht den sog. Embedding-Mechanismus nutzen, sondern das bisherige Design direkt innerhalb der Aufgabenressourcen realisiert ist), sind entsprechende Anpassungen nötig. Diese werden im dritten Kapitel beschrieben.

Das letzte Kapitel beschäftigt sich mit der Möglichkeit zu zentralen Änderungen am übergreifenden Design durch Bearbeitung von Seitenlayoutvorlagen. Das sollte aber nur in begründeten Ausnahmefällen geschehen und wird allgemein nicht mehr empfohlen.


2. Design für zentrale Seiten einstellen

»Design 2018« für Studentenzugang aktivieren und konfigurieren

Um das Design „zentraler“ Seiten wie der Startseite des Kurses oder von Übersichtsseiten, Ranking- und Anmeldeseiten umzustellen, genügt in einem ersten Schritt die Auswahl des Webdesigns »Design 2018« in den allgemeinen Kursparametern, wie bereits im Überblick beschrieben. Danach liegen folgende Seiten in neuem Design vor1:

Seite Dateiname Standardausprägung Nutzt Embedding2
Kursstartseite KursStartSeite.html — keine Varianten — Nein
Kursstartseite bei Bearbeitungssperre KursStartSeiteGesperrt.html mit »Aktuelles« Nein
Aufgabenübersicht StudentenStartSeite.html ohne Zusatzspalte Ja
Ergebnisse und Musterlösungen StudentenKorrekturSeite.html „Normal“ Ja

Tabelle 1: Im neuen Design gestaltete Seiten

Weiterhin liegen nach der Umstellung die optional nutzbaren Seiten für ein Studenten-Ranking, Anmeldungen zu Studientagen und/oder Leistungsnachweis-Klausuren im neuen Design vor3. Ob diese Seiten den Studenten angeboten werden sollen, können Sie (jederzeit im Semester) durch Ein-/Ausblenden zugehöriger Menüpunkte in den Kursparametern festlegen:

Kursparameter zu Studenten-Menüpunkten
Kursparameter zu Studenten-Menüpunkten

(Da Änderungen an den zugehörigen Seiten (Ranking und Anmeldeseiten) nicht als sinnvoll erachtet werden, enthält das aktuelle Designvorlagen-Paket keine Vorlagen für diese Seiten mehr.)

Falls Sie zuvor bereits das »Design2010« genutzt hatten, sind in der Regel nach der Umstellung des Kursparameters auch Ihre Aufgaben (Aufgaben- und Musterlösungsseiten, Korrekturhinweise, Einsende-Quittungen sowie Korrekturen) schon automatisch aufs neue Design umgestellt. Falls das nicht der Fall ist, finden Sie in Kapitel 3 eine Anleitung zur Umstellung der Aufgaben.

Weitergehende Änderungen mit Hilfe des Designvorlagen-Pakets

In einem zweiten Schritt können Sie durch Installation von Varianten einzelner der oben genannten „zentralen“ Seiten noch Anpassungen und Konfigurationsänderungen vornehmen:

Einige dieser Seiten liegen im Designvorlagen-Paket in verschiedenen Varianten vor. Von diesen Seiten wird normalerweise eine Standardausprägung mit typischen/empfohlenen Grundeinstellungen verwendet (vgl. Tabelle 1), Sie können jedoch bei Bedarf auch eine der Varianten als Kursressource installieren.

Im folgenden Unterabschnitt werden die verschiedenen Varianten zunächst vorgestellt. Anschließend folgen Unterabschnitte zur Installation und Deinstallation von Varianten.

Varianten

Varianten der Kursstartseite

Die Kursstartseite ist die Einstiegsseite, die angezeigt wird, wenn der Kurs im Online-Übungssystem ausgewählt wird. Sie bietet den zentralen Einstiegspunkt sowohl für Studenten als auch für Betreuer, Aufgabenautoren und Korrektoren.

So lange sich Ihr Kurs noch in der Einrichtung befindet, sollte in den Kursparametern eine »Bearbeitungssperre« für Studenten aktiviert sein:

Bearbeitungssperre in den Kursparametern aktiviert
Bearbeitungssperre in den Kursparametern aktiviert

So lange diese Sperre gesetzt ist, wird eine spezielle Kurs-Startseite mit Sperrvermerkt ausgeliefert, die z.B. wie folgt aussehen kann:

Kursstartseite bei aktivierter Sperre
Kursstartseite bei aktivierter Sperre

Im Vorlagenpaket finden Sie zwei Varianten der zugehörigen Vorlage KursStartSeiteGesperrt.html: Mit bzw. ohne »Aktuelles«-Box. Standardvariante (automatisch aktiv, wenn Sie keine Kursressource installieren) ist die Variante mit »Aktuelles«. Dabei wird diese »Aktuelles«-Box jedoch ausschließlich dann angezeigt, wenn Sie im Betreuerzugang unter »Message of the Day (MOTD) bearbeiten« einen Text eingegeben haben, der dann den Inhalt der »Aktuelles«-Box definiert. Legen Sie keinen Inhalt fest, wird auch die Box nicht angezeigt.

Die Variante ohne Aktuelles-Box zeigt bei aktivierter Kurssperre den Message-of-the-Day-Text niemals an, selbst wenn Sie einen festgelegt haben, sondern stellt sicher, dass die Message-of-the-Day erst nach Aufheben der Bearbeitungssperre sichtbar wird.

Sobald Sie die Bearbeitungssperre aufheben, wird die „normale“ Kursstartseite angezeigt:

Kursstartseite bei aufgehobener Sperre
Kursstartseite bei aufgehobener Sperre

Auch hier gilt, dass eine »Aktuelles«-Box eingeblendet wird, sofern Sie unter »Message of the Day« (MOTD) einen Text eingegeben haben (siehe obigen Screenshot).

Hinweis zum Inhalt der Kursstartseite

Sie können auch den Haupt-Inhalt der Kursstartseite im Normalfall jederzeit online ändern (im Betreuerzugang, Menüpunkt »Inhalt Kursstartseite«), d.h. dazu müssen Sie nicht extra das Designvorlagen-Paket herunterladen, dort eine KursStartSeite.html-Datei bearbeiten und diese in Ihren Kurs hochladen – auch wenn das durchaus möglich ist.

Genauer finden Sie in der KursStartSeite.html-Vorlage des Vorlagenpakets einen DIV-Block der folgenden Art:

<div id="KursStartSeiteInhalt">
<p>Willkommen zu den Online-Übungen zu Kurs $Kursname!</p>
<p>Wählen Sie im Menü links die gewünschte Funktion, z.B. „Aufgabenübersicht“, um Aufgaben zu bearbeiten, Ihre Einsendungen zu überarbeiten oder einzusehen. Ergebnisse zu korrigierten Aufgaben können Sie unter „Ergebnisse und Musterlösungen“ abrufen.</p>
</div>

Der Text in diesem DIV ist der Default-Text, der immer dann angezeigt wird, wenn nicht über obigen Menüpunkt des Betreuerzugangs ein spezieller Seiteninhalt festgelegt wurde bzw. dieser wieder gelöscht wird.

Die besagte Funktion zum Online-Bearbeiten des Inhalts der Kursstartseite steht immer zur Verfügung, so lange in der installierten KursStartSeite.html ein DIV-Block mit ID KursStartSeiteInhalt existiert. Installieren Sie eine bearbeitete HTML-Datei ohne einen solchen Block, ist der Online-Editor für den Inhalt der Kursstartseite also nicht mehr verfügbar.

Hinweise zum Austausch von KursStartSeite-Ressourcen

Normalerweise werden Sie die Vorlagen für die Kursstartseite aus dem Vorlagenpaket nicht benötigen.

Den Inhalt der „normalen“ Seite bei aufgehobener Sperre ebenso wie den Inhalt der optionalen »Aktuelles«-Box können Sie jederzeit online im Betreuerzugang bearbeiten, ohne dazu irgendwelche Dateien auszutauschen.

Ein Rückgriff auf diese Vorlagen scheint mir nur in folgenden Ausnahmefällen sinnvoll:

Bitte beachten Sie außerdem:

Die Kursstartseiten haben ein spezifisches Layout, enthalten z.B. ein Rollenmenü oben, für das derzeit keine globale Layoutvorlage existiert. Daher nutzen diese Seiten nicht den für alle anderen Vorlagen verwendeten Embedding-Mechanismus (vgl. Tabelle 1), sondern die KursStartSeite*.html-Vorlagen sind direkt im »Design 2018« gehalten. Wenn Sie eine dieser Ressourcen im Kurs installieren, wird die jeweiligen Kursstartseite immer im »Design 2018« dargestellt, unabhängig von der Einstellung in den Kursparametern.

Varianten der Aufgabenübersicht (StudentenStartSeite)

Die Aufgabenübersicht ist die Seite, über welche die Studenten die einzelnen Aufgaben aufrufen und bearbeiten sowie die Bearbeitungstermine/-fristen einsehen können.

Diese Seitenvorlage liegt in zwei Varianten vor, welche sich im Aufbau der Aufgabenübersichts-Tabelle unterscheiden:

Die Variante ohne Zusatz-Spalte müssen Sie niemals installieren, es sei denn, Sie möchten gezielt Änderungen am Inhalt (ober- oder unterhalb der Aufgabenübersichts-Tabelle) vornehmen.

Varianten der Ergebnisübersicht (StudentenKorrekturSeite)

Die Ergebnisübersicht zeigt den Studenten den Korrekturstatus und die Bewertung zu ihren Einsendungen und bietet Zugriff auf die Korrekturen und Musterlösungen.

Auch von dieser Seite gibt es zwei Varianten, die sich im Aufbau der eingefügten Ergebnisübersichts-Tabelle unterscheiden:

Die zweite Variante ist – wenn überhaupt – nur für Kurse empfehlenswert, in denen entweder gar keine Musterlösungen zu den Aufgaben angeboten werden oder nur diejenigen Teilnehmer Zugriff auf die Musterlösungen haben sollen, die auch an mindestens einer Aufgabe des Hefts teilgenommen (etwas eingesendet) haben.

Diese Variante ist vor allem für spezielle Ausnahmefälle gedacht, in denen ein Student von vornherein gar nicht alle Aufgabenhefte bearbeiten soll, sondern in denen sich ein Student vorzugsweise eines (oder zumindest eine Teilmenge) der Aufgabenhefte aussuchen soll, die er bearbeiten will. In dem Fall ergibt es auch Sinn, in der Ergebnisübersicht nur die von ihm gewählten Hefte anzuzeigen. Ansonsten wird von der Nutzung dieser Variante eher abgeraten.

Auch hier gilt: Die Vorlage zur „normalen“ Variante müssen Sie nicht als Kursressource installieren, es sei denn, Sie wollen gezielt Texte darin modifizieren.

Installation einer Variante

Laden Sie das Designvorlagen-Paket herunter4 und entpacken Sie es. Sie finden darin neben dieser Anleitung Verzeichnisse zu allen in Tabelle 1 verzeichneten Seiten, in welchen die einzelnen Varianten abgelegt sind. Wählen Sie die gewünschte Variante aus diesen Verzeichnissen aus und laden Sie die HTML-Datei als Kursressource hoch (Betreuer-Login, »Kursressourcen«, »Hochladen neuer Ressourcen«).

Deinstallation

Um installierte Varianten zu deinstallieren, loggen Sie sich als Betreuer ein, wählen Sie »Kursressourcen«, wählen Sie die zu entfernenden Dateien aus den »löschbaren Nicht-Standard-Kursressourcen« aus und betätigen Sie den Knopf »Selektierte Ressourcen löschen«.

Die zu löschenden Dateien, sofern überhaupt vorhanden, d.h. sofern Sie überhaupt für die jeweilige Seite eine Variante hochgeladen hatten, heißen:

Weiterhin könnten (von früheren Designs, insb. »Design 2010«) noch folgende Kursressourcen existieren, die dann gelöscht werden sollten:


3. Anpassung Ihrer Aufgaben zur Nutzung des Designs

Im Idealfall sind direkt nach der im Überblick beschriebenen Einstellung des »Designs 2018« in den Kursparametern auch Ihre Aufgaben automatisch ins neue Design umgestellt worden.

Bitte testen Sie die Aufgaben dennoch, und überprüfen Sie, ob alles korrekt dargestellt wird. Insbesondere, falls Sie die Aufgaben-/Lösungsseiten etc. selbst gestaltet und eigenes CSS eingesetzt haben, könnte es mit dem neuen Basis-CSS zu Konflikten kommen, die Nacharbeiten am lokalen Aufgaben-CSS erforderlich machen. Im Zweifel können Sie bei Darstellungsproblemen auch erst einmal wieder das ältere »Design 2010« reaktivieren, bis Sie die Zeit haben, die nötigen Änderungen vorzunehmen.

Voraussetzung dafür, dass die Aufgaben automatisch aufs neue Design wechseln, ist, dass sie bereits den im folgenden Abschnitt beschriebenen Embedding-Mechanismus nutzen. Bei älteren Aufgaben, die seit Jahren nur von Semester zu Semester kopiert wurden, ist das eventuell noch nicht der Fall.

Wenn Ihre Aufgaben also nicht automatisch das neue Design angenommen haben sollten, Sie sie aber dennoch darauf umstellen möchten, müssen die Aufgaben auf Nutzung des Embedding-Mechanismus umgestellt werden. Zu diesem Zweck wird der Mechanismus im folgenden Abschnitt zunächst vorgestellt, bevor der übernächste Abschnitt auf die Aktivierung und damit die Design-Umstellung Ihrer Aufgaben eingeht.

Der Embedding-Mechanismus

Der Embedding-Mechanismus ermöglicht es, Ihre Aufgabenressourcen komplett unabhängig vom Webdesign zu erstellen, so dass letzteres im Zweifel jederzeit austauschbar ist (und nicht redundant in alle möglichen Aufgabenressourcen kopiert wird, was die Wartbarkeit verschlechtert).

Falls Sie die fortgeschrittene Aufgabenerstellung verwenden, erstellen Sie Ihre Aufgabenressourcen als einfache, rudimentäre HTML-Seiten, in denen Sie lediglich spezielle Markierungen zur Auszeichnung des eigentlichen Inhalts anbringen. (Die assistentengestützte Aufgabenerstellung tut das i.d.R. automatisch, s.u.) Das Online-Übungssystem wird dann automatisch den so markierten Inhalt in eine Webseite im jeweils aktiven Design (abhängig von der Webdesign-Wahl in den Kursparametern, siehe nachfolgenden Unterabschnitt!) einbetten. Je nach Kontext wird dabei automatisch eine Seitenlayoutvorlage (Page Layout Template) ausgewählt, die spezielle Überschriften und Zusatzmenüs festlegen kann. (Beim Bearbeiten einer Aufgabe erhält der Studenten z.B. ein Menü mit Links zu den anderen Aufgaben desselben Aufgabenhefts angezeigt, beim Betrachten einer Korrektur mit Links zu den anderen Korrekturen desselben Aufgabenhefts u.s.w.).

Die folgende Abbildung zeigt das Prinzip:

Prinzip des Embedding-Mechanismus
Prinzip des Embedding-Mechanismus

Oben links sehen Sie eine rohe Aufgabenressource, wie Sie sie erstellen können. Unten links ist beispielhaft eine Seitenlayoutvorlage abgebildet. Der rechte Teil der Abbildung zeigt das Resultat: Die Online-Ansicht der Aufgabe, in der der Inhalt der Roh-Ressource in die Seitenlayoutvorlage eingebettet wurde. Dieses Einbetten (Embedding) durch das Online-Übungssystem geschieht automatisch beim Abruf der jeweiligen Seite (hier einer Aufgabenseite).

Das Embedding-Verfahren wird hier zwar im Kontext der Aufgabenanpassung genauer beschrieben, ist jedoch nicht auf Aufgabenressourcen beschränkt. Auch die Seitenvorlagen aus dem Webdesign-Paket nutzen, bis auf diejenigen für die Kursstartseiten, den Embedding-Mechanismus, vgl. Tabelle 1 .

Embedding-Verfahren und »Webdesign«-Kursparameter

In den Kursparametern (siehe auch Screenshot im Überblick) können Sie unter der »Webdesign«-Option derzeit unter drei „Designs“ wählen:

  1. »Design 2018« (das aktuelle Standard-Design)
  2. »Design 2010« (das vorherige Design)
  3. »WebAssign-Design (90er Jahre)«

Nur die Designs von 2018 und 2010 unterstützen jedoch den Embedding-Mechanismus, halten also entsprechende Seitenlayout-Vorlagen vor. Das »WebAssign-Design« dagegen stammt noch aus der Zeit vor der Einführung des Embedding-Mechanismus, Seitenlayoutvorlagen fürs »WebAssign-Design« existieren nicht. Falls Sie in den Kursparametern das »WebAssign-Design« auswählen, so betrifft diese Einstellung daher ausschließlich die zentralen Studenten-Seiten wie Kursstartseite, Aufgabenübersicht, Ergebnisübersicht, Ranking etc., aber nicht die Aufgaben. (Aufgabenressourcen waren seinerzeit stets vollständige HTML-Seiten ohne Menüs oder andere globale Bestandteile.) Für Aufgaben, die bereits das Embedding-Verfahren nutzen (siehe folgenden Abschnitt), werden bei aktiviertem »WebAssign-Design« die »Design 2018«-Vorlagen gewählt.

Embedding aktivieren…

… bei Verwendung eines Aufgabenerstellungsassistenten

Wenn Sie Aufgaben mit einem Aufgabenerstellungsassistenten für automatisch bewertete oder handbewertete Aufgaben erstellen und pflegen, werden diese normalerweise automatisch im jeweils aktiven Webdesign angezeigt. Genauer finden Sie am Ende eines solchen Assistenten-Formulars eine Checkbox zum Ein- oder Ausschalten des Embeddings:

Embedding-Option in Aufgabenerstellungsassistenten
Embedding-Option in Aufgabenerstellungsassistenten

Wenn Sie diese Option aktivieren, wird das Embedding-Verfahren für Ihre Aufgaben aktiviert. Diese erscheinen forthin automatisch im »Design 2018« (bzw. im »Design 2010«, falls Sie das in den Kursparametern eingestellt haben, s.o.).

… bei fortgeschrittener Aufgabenerstellung

Dieser Abschnitt bezieht sich auf die Aufgaben, die manuell über die fortgeschrittene Aufgabenerstellung erzeugt werden, oder die bereits früher erstellt wurden, nicht mit den Assistenten nachbearbeitet werden können und nun aufs neue Design umgestellt werden sollen.

In diesem Fall bearbeiten Sie in der Aufgabenerstellung direkt HTML-Dateien wie aufgabe1.2.html für ein Aufgabenformular, muster2.4.html für eine Musterlösung etc.

Um Embedding zu nutzen, gestalten Sie dazu nur einfache, rudimentäre HTML-Dateien, die sich vornehmlich auf den eigentlichen Inhalt beschränken, der Vollständigkeit halber (als Fallback, falls das Embedding aufgrund irgendeines Fehlers fehlschlagen sollte) aber vollständige HTML-Dokumente mit Kopfbereich, Titel und Überschrift sein sollten.

Die Markierung des in die jeweilige Seitenvorlage einzubettenden Inhalts erfolgt durch Einfügen von zwei Marken in Ihre Seite: Mit $EMBED markieren Sie den Beginn des einzubettenden Inhalts, mit $/EMBED das Ende. Das Einfügen dieser Marken können Sie prinzipiell sowohl in einem HTML-Sourcecode-Editor direkt als auch mit einem WYSIWYG-Editor wie dem SeaMonkey Composer vornehmen.

Für einige Seiten (wie Aufgabenstellung und Musterlösung) finden Sie im Online-Übungssystem direkt eine Vorschau-Funktion, mit der Sie das Einbetten in eine Seitenvorlage testen können5.

Das folgende Listing zeigt beispielhaft den HTML-Quelltext der Demo-Seite aus der Abbildung im Abschnitt zum Embedding-Mechanismus:

<!DOCTYPE html>
<html>
<head>
	<title>Übungen zu "$Kursname", Aufgabe $AufgabenheftNr.$AufgabenNr</title>
	<meta charset="utf-8">
	<link type="text/css" rel="StyleSheet" media="all" href="$WebAssignServer/stylesheets/aufgabenseite.css">
	<!-- WYSIWYG  kompakt class="Kp fullwidth" -->
</head>
<body>
	<div style="background-color:#ccc; padding: 0.2em">
		Kurs $KursNr, „$Kursname“, $Versionsname<br>
		Aufgabenheft $AufgabenheftNr, Aufgabe $AufgabenNr 
	</div>
	<h1>$Aufgabenname $MaximalPunkteUeberschrift</h1>
	$EMBED 
	<form method="POST" action="$WebAssignServer/$Veranstaltername/Einsendung/$KursNr/$VersionsNr/$AufgabenheftNr/$AufgabenNr">
		<h2>Demo-Aufgabe mit TeX-Formelsatz</h2>
		<p>Hier steht ein Aufgabentext. Der kann auch z.B. eine Formel (TeX-Syntax) enthalten:</p>
		<p>
			$$G(r) = \left\{\begin{array}{ll}
			\frac{r}{100} P &amp; , falls \quad 0 \le r \le 1 \\
			\left( \prod\limits^N_{i=r+1}{\frac{i-2}{i}} \right) P &amp; , falls \quad 1 &lt; r \le N
			\end{array}
			\right.$$
		</p>
		<p>Es folgt eine Eingabebox für die Eingabe einer studentischen Lösung:</p>
		<textarea name="FeldA1" class="Kp fullwidth" rows="10" cols="80"></textarea>
		<p><button type="submit" class="large" name="einsendenA">Eingaben einsenden</button></p>
	</form>
	$/EMBED 
</body>
</html>

Sie sehen die beiden $EMBED- und $/EMBED-Marken zur Auszeichnung des eigentlichen, zu übernehmenden Inhalts. Der Content oberhalb von $EMBED dient zur Fallback-Darstellung, falls kein Embedding stattfindet. (Der WYSIWYG…-Kommentar im head aktiviert den WYSIWYG-Editor für die Textarea, wie in einem separaten Handbuch beschrieben.)

Zu beachten

So einfach das Prinzip auch ist, so sind dennoch ein paar Punkte zu beachten:

Encoding/Charset

Das Online-Übungssystem unterstützt HTML-Ressourcen verschiedener Zeichensatzkodierungen, insb.:

Sie sollten im Kopf (<head>…</head>) der HTML-Seiten das verwendete Encoding deklarieren! Ab HTML 5 wird dazu die Syntax <meta charset="utf-8"> unterstützt, bei älterem HTML: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">. Fehlt eine solche Deklaration, wird das Übungssystem versuchen, das verwendete Encoding zu erraten – was zwar in der Regel recht zuverlässig funktioniert, aber ein korrektes Raten kann nicht garantiert werden.

Es ist nicht erforderlich, dass die Seitenlayoutvorlagen und die mit EMBED-Marken ausgestatteten Aufgabenressourcen dasselbe Encoding verwenden, das Übungssystem-Embedding-Verfahren kann Dateien verschiedenen Encodings miteinander kombinieren. Dazu wird dann für die Ausgabe ein geeigneter Zeichensatz gewählt, der beide Quellen abbilden kann (im Zweifel UTF-8).

Siehe auch: Separates Dokument zum Unicode-Support


4. Weitergehende Anpassungen

Mit Ausnahme der Kursstartseiten-Ressourcen nutzen alle Seiten des Vorlagenpakets den Embedding-Mechanismus, wie er im 3. Kapitel vorgestellt wurde. Dasselbe gilt für alle Aufgaben, die assistentengestützt erzeugt wurden, sofern die Option »Aufgaben in aktuelles Webdesign einbetten« (siehe Embedding aktivieren bei Verwendung eines Aufgabenerstellungsassistenten) nicht abgeschaltet wurde, sowie alle in der fortgeschrittenen Aufgabenerstellung wie oben beschrieben mit Embedding-Marken ausgestatteten Seiten.

Das bedeutet, dass diese Dateien jeweils nur die eigentlichen Seiteninhalte festlegen und diese Inhalte vor Auslieferung in eine Seitenlayoutvorlage (Page Layout Template) eingebettet werden.

Anpassung der Seitenvorlagen für Aufgabenressourcen, Korrektor- und Betreuerseiten

Diese Seitenlayoutvorlagen können Sie in Ausnahmefällen überstimmen, indem Sie eigene Fassungen davon als Kursressource hochladen. Zu diesem Zweck können Sie im Online-Übungssystem neben dem normalen Designpaket auch noch ein separates Seitenlayoutvorlagen-Paket herunterladen. Dieses enthält Kopien der vom Übungssystem verwendeten Vorlagen, die Sie bei Bedarf anpassen und dann als Kursressourcen hochladen können, um das Design zentral zu modifizieren.

Beachten Sie, dass Sie mit veränderten lokalen Vorlagen nicht mehr automatisch von allen Updates (Weiterentwicklungen) der zentralen Layouts profitieren!

Für Aufgaben, Musterlösungen, Korrekturen etc. finden Sie Vorlagen, deren Dateinamen mit Student beginnen. Durch Austauschen der Korrektor- und Betreuervorlagen können Sie außerdem das Design der Korrektor- und Betreuerinterfaces des Online-Übungssystems für Ihren Kurs anpassen. Die folgenden Tabellen 2 bis 4 beschreiben kurz die einzelnen PageLayout-Vorlagen:

Dateiname Kontext
PageLayoutBetreuer.html Standard-Vorlage für fast alle Seiten des Betreuerinterfaces zum Kurs
PageLayoutBetreuerAufgabe.html Wird verwendet, wenn ein Betreuer / Aufgabenautor die Vorschau einer Aufgabenseite anfordert, die $EMBED-Markierungen enthält. Ist fast identisch zu PageLayoutBetreuer.html, legt aber dieselbe Überschrift fest, wie sie auch in PageLayoutStudentAufgabe.html verwendet wird.
PageLayoutKorrektor.html Vorlage für Seiten eines Korrektors. Enthält ein Zusatzmenü zum Wechseln zwischen allen Aufgabenheften, in denen noch Korrekturen zu erledigen sind.
PageLayoutKorrektorAufgabe.html Vorlage für die Ansicht eines Aufgabentextes durch den Korrektor. Enthält gesonderte Menüpunkte z.B. zum Wechseln zwischen den Aufgaben desselben Hefts und zum Umschalten zwischen Aufgabentext und Musterlösung.
PageLayoutKorrektorLoesung.html Vorlage für die Ansicht einer Musterlösung durch den Korrektor. Enthält gesonderte Menüpunkte z.B. zum Wechseln zwischen den Lösungen zu den Aufgaben desselben Hefts und zum Umschalten zwischen Aufgabentext und Musterlösung.
PageLayoutStudent.html Vorlage für Seiten eines Studenten, in denen $EMBED-Marken vorkommen, sofern keine der nachfolgenden Vorlagen gewählt wird.
PageLayoutStudentAufgabe.html Vorlage für vom Studenten abgerufene Aufgabenseiten, die $EMBED-Marken enthalten. Enthält ein Zusatzmenü zum Wechseln zwischen allen Aufgaben desselben Aufgabenhefts sowie ggf. eines zum Wechseln zwischen Aufgabentext, Musterlösung und Korrektur zur selben Aufgabe.
PageLayoutStudentKorrektur.html Vorlage für einem Studenten angezeigte Korrekturen, sofern die jeweilige Korrekturseitenvorlage $EMBED-Marken enthält. Enthält ein Zusatzmenü zum Wechseln zwischen allen Korrekturen desselben Aufgabenhefts sowie eines zum Wechseln zwischen Aufgabentext, Musterlösung und Korrektur zur selben Aufgabe.
PageLayoutStudentLoesung.html Vorlage für vom Studenten abgerufene Musterlösungen, die $EMBED-Marken enthalten. Enthält ein Zusatzmenü zum Wechseln zwischen den Musterlösungen zu allen Aufgaben desselben Aufgabenhefts sowie eines zum Wechseln zwischen Aufgabentext, Musterlösung und Korrektur zur selben Aufgabe.
PageLayoutStudentQuittung.html Vorlage zur Anzeige von Quittungsseiten (Bestätigungen einer Aufgabeneinsendung), sofern die jeweilige Quittungsseitenvorlage $EMBED-Marken enthält. Enthält ein Zusatzmenü zum direkten Wechseln zu allen Aufgaben desselben Aufgabenhefts.

Tabelle 2: Seitenlayoutvorlagen – Ganzseiten-Layout

Bei bestimmten Kursen, in denen die eigentliche Abwicklung (über den Betreuerzugang) nicht von Kursbetreuern im Lehrgebiet, sondern in einer zentralen Einrichtung vorgenommen wird, kann noch eine zusätzliche Benutzerrolle „Lehrgebietsmitarbeiter“ (mit eingeschränktem Zugriff) angeboten werden. Auch für diese Nutzer gibt es entsprechende Vorlagen:

Dateiname Kontext
PageLayoutLgMitarbeiter.html Standard-Vorlage für die Lehrgebiets-Mitarbeiterrolle, sofern keine der folgenden gewählt wird.
PageLayoutLgMitarbeiterAufgabe.html Vorlage für von Mitarbeitern eingesehene Aufgabenseiten. Ähnlich wie die entsprechende Studentenseite mit Navigationsmöglichkeiten zu weiteren Aufgaben desselben Hefts sowie zur Lösung zur Aufgabe.
PageLayoutLgMitarbeiterLoesung.html Vorlage für von Mitarbeitern eingesehene Musterlösungsseiten, ebenfalls mit solchen Navigationsmöglichkeiten.

Tabelle 3: Seitenlayoutvorlagen – Lehrgebietsmitarbeiterzugang

Zusätzlich gibt es weitere Vorlagen für Darstellungen von Aufgabenseiten innerhalb eines Frames. Diese kommen z.B. in der »Kursmappe« zum Einsatz, oder, falls Sie Ihre Aufgaben per LTI in eine andere Lernplattform wie z.B. Moodle einbinden und dort als Frame innerhalb eines Moodle-Layouts anzeigen lassen (vgl. separates Handbuch):

Dateiname Kontext
PageLayoutIFrame.html Standardvorlage für Frames, falls keine der nachfolgenden gewählt wird.
PageLayoutStudentIFrame.html Seitenvorlage für Studentenseiten im Frames, falls keine der folgenden gewählt wird.
PageLayoutStudentAufgabeIFrame.html Variante für den Abruf einer Aufgabenseite (mit Embedding) durch einen Studenten innerhalb eines Frames. Enthält ein-/ausblendbar auch die Bearbeitungstermine des Aufgabenhefts, zu dem die Aufgabe gehört, sowie einen Schließen-Link, der insbesondere bei LTI-Aufrufen auch ein Zurückkehren zum Toolconsumer ermöglicht. Enthält weiterhin eine Navigationsmöglichkeit, um innerhalb des Frames zwischen der Aufgabe, Korrektur und Lösung zu wechseln (sofern bereits verfügbar).
PageLayoutStudentKorrekturIFrame.html Entsprechende Vorlage für den Korrekturabruf.
PageLayoutStudentLoesungIFrame.html Entsprechende Vorlage für den Musterlösungs-Abruf.
PageLayoutStudentQuittungIFrame.html Vorlage zur Anzeige der Einsendebestätigung (Quitting), falls die Einsendung in einem Frame erfolgte. Enthält insb. einen Zurück-Link, der wieder zur Aufgabenseite zurückkehrt.

Tabelle 4: Seitenlayoutvorlagen – Frame-Layout

Eine Veränderung der IFrame-Layoutvorlagen wird nicht empfohlen.

Hinweise:


Anhang: Die Zusatz-Spalte der Aufgabenübersicht

Wie in Abschnitt Varianten der Aufgabenübersicht (StudentenStartSeite) beschrieben, können Sie in der Aufgabenübersicht eine Zusatz-Spalte einblenden lassen.

Das kann dann z.B. wie folgt aussehen:

Beispiel für Aufgabenübersichtstabelle mit Zusatz-Spalte
Beispiel für Aufgabenübersichtstabelle mit Zusatz-Spalte

Bevorzugte Anwendungen waren früher Benennung von Aufgabenheften oder Anzeige von Links zu PDF-Versionen der Aufgabenhefte und Musterlösungen, aber diese Features stehen Ihnen heute auch schon auf anderem Wege zur Verfügung, dafür wird die Zusatzspalte nicht mehr benötigt: Aufgabenhefte können nun direkt optional benannt werden, ihr Name wird in der Aufgabenübersicht dann in der linken Spalte angezeigt. Und Links zu PDF-Aufgaben- und Lösungsheften können nun (wenn diese nach einem bestimmten Schema benannt in den Kursressourcen abgelegt wurden) direkt über eine Checkbox in den Kursparametern aktiviert werden (siehe Abbildung im Überblick).

Beispielanwendungen für eine Zusatz-Spalte:

  1. Die Nummern Ihrer Aufgabenhefte entsprechen nicht den Nummern der Kurseinheiten, da Sie z.B. zu manchen Kurseinheiten keine Aufgaben haben oder da Sie Doppelkurseinheiten haben und pro Doppelkurseinheit nur ein Aufgabenheft anbieten. Sie möchten nun z.B. zu Aufgabenheft 2 den Hinweis „Aufgaben zu Kurseinheiten 2 und 3“ anbringen. Dazu können Sie die Zusatzspalte verwenden. (Alternativ dazu können Sie aber auch die inzwischen mögliche optionale Benennung von Aufgabenheften nutzen.)
  2. Sie könnten auch in der Zusatzspalte Hyperlinks, z.B. zu im LVU gehosteten Materialien zur Kurseinheit, unterbringen.
  3. Auch andere Dinge wie das Anzeigen einer Grafik aus den Kursressourcen (z.B. ein Aufgabenheft-spezifisches Logo) wären denkbar.

Den Inhalt der Zusatzspalte bestimmen Sie durch Hochladen von Textdateien als Kursressource, die Namen wie z.B. Zusatz1 (bestimmt den Inhalt der Zusatz-Spalte zu Aufgabenheft Nr. 1) ohne Dateiendung wie .txt tragen. Diese Textdateien können reinen Text, aber auch HTML-Elemente (z.B. Download-Links) enthalten. Das Übungssystem versucht, den verwendeten Zeichensatz der Zusatzdateien automatisch zu erkennen (zu erraten). Falls das nicht korrekt funktioniert, kodieren Sie Sonderzeichen ggf. als HTML-Entities und beschränken Sie sich auf ASCII-Text.

Folgende Dateinamen sind möglich (wobei im Dateinamen das # durch die Nummer des jeweiligen Aufgabenhefts zu ersetzen ist):

Dateiname Bedeutung
ZusatzAbEnde# Wird in Zusatzspalte zu Aufgabenheft Nr. # angezeigt, sofern das Bearbeitungsende (Eindendeschluss) des Aufgabenhefts erreicht wurde.
ZusatzAbBeginn# Wird in Zusatzspalte zu Aufgabenheft Nr. # angezeigt, sofern der Bearbeitungsbeginn des Aufgabenhefts erreicht wurde. Falls keine Ressource ZusatzAbEnde# existiert, wird ZusatzAbBeginn# auch nach Bearbeitungsende weiterhin angezeigt.
Zusatz# Wird in Zusatzspalte zu Aufgabenheft Nr. # angezeigt, sofern keine der beiden zuvor genannten Ressourcen angezeigt wird.

Tabelle 5: Namensschema für Zusatz-Ressourcen

Der Inhalt der Zusatzspalte bestimmt sich demnach abhängig vom Zugriffszeitpunkt. Tabelle 6 gibt praktisch dieselbe Information wie Tabelle 5 wieder, aber im Hinblick auf den Zeitpunkt organisiert:

Zeitpunkt Inhalt der Zusatzspalte zu Aufgabenheft Nr. #
Vor Bearbeitungsbeginn Inhalt der Datei Zusatz#, sofern diese existiert.
Andernfalls »kein Inhalt«.
Ab Bearbeitungsbeginn,
vor Bearbeitungsende
Inhalt der Datei ZusatzAbBeginn#, sofern diese existiert.
Andernfalls Inhalt von Zusatz#, sofern diese existiert.
Andernfalls »kein Inhalt«.
Nach Bearbeitungsende Inhalt der Datei ZusatzAbEnde#, sofern diese existiert.
Andernfalls Inhalt von ZusatzAbBeginn#, sofern diese existiert.
Andernfalls Inhalt von Zusatz#, sofern diese existiert.
Andernfalls »kein Inhalt«.

Tabelle 6: „Taktung“ der Zusatz-Spalte

Hinweis: Um die Zusatzspalte anzuzeigen, laden Sie – wie oben beschrieben – eine Variante von StudentenStartSeite.html als Kursressource hoch, welche die Zusatzspalte aktiviert.


  1. Falls Sie für bestimmte Seiten (z.B. die Kurs-Einstiegsseite) bereits eine Kursressource (z.B. KursStartSeite.html) hochgeladen haben, um die jeweilige Standardseite durch eine eigene, bearbeitete Seite zu ersetzen, dann werden diese Seiten nicht automatisch aufs neue Design umgestellt. In diesem Fall löschen Sie jeweils entweder die Ressource ersatzlos, um zur Standardausprägung der Seite im aktuellen Design zu wechseln, oder wählen Sie, wie im Folgenden noch genauer beschrieben, eine Vorlage aus dem Designpaket, passen diese ggf. nach Ihren Wünschen an und laden sie dann als Kursressource hoch.  ↩

  2. Die Spalte „Nutzt Embedding“ in obiger Tabelle hat folgende Bedeutung: Die mit „Ja“ markierten Vorlagen nutzen ab »Design 2018« nun – genau wie Aufgabenseiten auch – den in Kapitel 3 vorgestellten Embedding-Mechanismus, d.h. die Dateien im Vorlagenpaket enthalten keine Details des neuen 2018er Designs, sondern (fast) nur die eigentlichen Inhalte. Diese Inhalte werden vor der Auslieferung dynamisch in eine zentrale Seitenvorlage eingebettet, welche anhand der »Webdesign«-Einstellung in den Kursparametern ausgewählt wird. D.h. wenn Sie von diesen Ressourcen eine Variante installieren und später in den Kursparametern ein anderes Webdesign auswählen, sollte diese Seite auch automatisch das Design wechseln und nicht ausgetauscht werden müssen. Das gilt voraussichtlich auch für in Zukunft neu eingeführte Designs. Die mit „Nein“ markierten KursStartSeite-Ressourcen dagegen sind vollständige Seiten im 2018er Design, siehe gesonderte Hinweise.  ↩

  3. Ausnahme: Falls Sie früher in Ihrem Kurs explizit eigene Versionen dieser Dateien in den Kursressourcen installiert hatten. Bitte löschen Sie in diesem Fall aus den Kursressourcen – falls vorhanden – folgende Dateien: Ranking.html, KlausurAnmeldung.html, KlausurAnmeldungSonderfall.html und StudientagAnmeldung.html.  ↩

  4. Loggen Sie sich zum Download des Designvorlagen-Pakets als Kursbetreuer ein und folgen Sie dem Link »Umstellung auf aktuelles Webdesign, Webdesign-Ressourcen« auf der Betreuerstartseite unter Rubrik »Sonstiges«.  ↩

  5. Die Vorschau bettet jedoch den Inhalt in die Seitenvorlage für Betreuerseiten ein, nicht in dieselbe Vorlage, die später zur Anzeige für Studenten benutzt wird!  ↩