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 (früher unter »Allgemeine Kursparameter«, ab sofort aber unter Rubrik »Spezial« (nun dort einsortiert, da inzwischen das aktuelle Design die Grundeinstellung für nahezu alle Kursumgebungen ist und normalerweise kaum noch Bedarf zum Umschalten besteht):

Direkt unterhalb der Designauswahl finden Sie dort noch weitere, in den Jahren 2023 und 2024 neu eingeführte Optionen, auf die im Abschnitt Neuere Einstellmöglichkeiten eingegangen wird.

Auch andere inhaltliche Anpassungen, für die früher noch spezielle Varianten zentraler Seiten in den Kursressourcen nötig waren, lassen sich inzwischen einfach in den Kursparametern einstellen, 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.

Hinweis Wird ein Kurs, für den noch ein älteres Design eingestellt ist, 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 vor¹:

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 vor³. 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:

(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.

Neuere Einstellmöglichkeiten

Unterhalb der Webdesign-Auswahl in den Spezial-Kursparametern finden Sie übrigens auch noch ein paar weitere Einstellungen, die die Darstellung Ihrer Kursumgebung für Studierende betreffen:

Studentenzugang-Menüseite

Wenn die Option »Studentenzugang-Menüseite« aktiviert ist, führt der Link »Studentenzugang« im Hauptmenü der Kursstartseite

zu einer speziellen Menüseite für Studierende, die z.B. wie folgt aussehen kann:

Diese Seite ist nicht unbedingt notwendig (und es hat sie früher auch nicht gegeben), denn alle Menüpunkte finden sich auch noch einmal im Menü an der linken Seite, bzw. auf Smartphones oder anderen kleinen Bildschirmen in einem per Menü-Button einblendbaren Menü. Aber gerade im letzteren Fall, also z.B. auf Smartphones, ist der Zugang über eine solche direkt erreichbare Menüseite intuitiver, als erst einen Menübutton drücken zu müssen, um ein solches Menü einzublenden.

Wenn Sie in Ihrer Kursumgebung diese Seite nicht wünschen, können Sie die entsprechende Option abschalten. Der »Studentenzugang«-Link führt dann direkt zur Aufgabenübersicht (StudentenStartSeite.html, siehe Kapitel 2).

Aufgabenheft-Header mit Abgabecountdown

Unter »Aufgabenheft-Header/Countdown« können Sie eine Einblendung eines zusätzlichen Headers zwischen dem Kurs-Header und der eigentlichen Aufgabe in allen Aufgabenseiten Ihrer Kursumgebung aktivieren. Diese enthält Nummer oder Name des Aufgabenhefts und das Bearbeitungsende (Einsendeschluss) mit zusätzlicher Angabe wie z.B. »in 3 Tagen«, »morgen« oder, wenn die Restzeit unter 24 Stunden liegt, nur die Uhrzeit und ein optional einblendbarer Countdowntimer bis zur Abgabefrist. Das kann z.B. wie folgt aussehen:

Voraussetzungen:

Die Standard-Vorlagen des Übungssystems erfüllen die folgenden Voraussetzungen natürlich „von Haus aus“. Dieser Abschnitt ist für Sie nur relevant, falls Sie eigene Versionen dieser Seiten erstellen und als Kursressourcen installieren (siehe nächsten Abschnitt).

• Der AufgabenheftHeader wird nicht vom Online-Übungssystem in Ihre Seiten eingefügt, sondern er sollte im Seitenlayout für Aufgabenseiten bereits vorhanden sein.
• Genauer: Die PageLayoutStudentAufgabe.html sollte ein Element mit id="aufgabenheftheader" enthalten. Der Kursparameter bewirkt dann, dass dieses Element bei den entsprechenden Einstellungen ggf. ausgeblendet wird. Enthält Ihre Seitenvorlage dagegen kein Element mit dieser ID, so ist die Einstellung wirkungslos.
• Innerhalb dieses Headers kann die Bearbeitungsende-Anzeige dann vom Übungssystem eingefügt werden, sofern dort ein entsprechender Platzhalter namens $BearbeitungsendeCountdown vorhanden ist, z.B.:

  <div id="aufgabenheftheader">
    <header class="main-page-block">
      <div class="heftname">$Aufgabenheftname</div>
      <div class="bearbeitungsende">$BearbeitungsendeCountdown</div>
    </header>
  </div>
  

  • Beachten Sie, dass die Variable $BearbeitungsendeCountdown nicht mehrfach in einer Seite vorkommen darf, sondern immer nur einmalig.
  • Außerdem sollte diese nur innerhalb von Aufgabenseiten bzw. der entsprechenden Seitenlayoutvorlage für Aufgabenseiten eingebunden werden, und nicht z.B. in der StudentenHeftStartSeite, denn sie ist nur darauf ausgelegt, nach dem Bearbeitungsbeginn (also innerhalb oder nach dem Bearbeitungszeitraum) angezeigt zu werden und nicht schon vor Beginn.

Hinweistext nach Bearbeitungsende

Über die Option »Hinweistext nach Ende« können Sie einen Text festlegen, der in einer Aufgabenseite eingeblendet werden soll, wenn das Bearbeitungsende verstrichen ist. Dabei können Sie noch wählen, wie lange nach Einsendeschluss (z.B. nur in den ersten 5 Minuten oder 2 Tagen nach Einsendeschluss oder auch dauerhaft) diese Einblendung erfolgen soll. Eine solche Einblendung kann z.B. wie folgt aussehen:

Dieselbe Hinweisbox wird übrigens nicht nur in den Aufgabenseiten eingeblendet, sondern auch in der StudentenHeftStartSeite – sofern Sie diese einsetzen. (Im „regulären“ Studentenzugang wird diese Heft-Startseite nicht verwendet, sondern eine Aufgabenübersicht über alle Aufgabenhefte / Aufgaben der Kursumgebung, und da diese unterschiedliche Bearbeitungsenden haben können, wird ein solcher Hinweis dort nicht eingefügt. Die Heft-Startseite wird z.B. verwendet, wenn Sie ein ganzes Aufgabenheft per LTI in Moodle einbetten. Oder Sie können selbst Links auf die StudentenHeftStartSeite veröffentlichen.)

Voraussetzungen:

Auch hier gilt: Die Standard-Vorlagen des Übungssystems erfüllen die folgenden Voraussetzungen „von Haus aus“. Dieser Abschnitt ist für Sie nur relevant, falls Sie eigene Versionen dieser Seiten als Kursressourcen installiert haben.

Diese Option erfordert, dass die Variable $HinweisNachBearbeitungsende in den Aufgabenseiten (und ggf. auch der StudentenHeftStartseite) vorhanden ist. Diese Variable markiert die Einfügestelle für die Infobox. Fehlt sie, kann der Hinweistext auch nicht eingeblendet werden. D.h. in Kursen mit sehr alten Aufgabenseiten, die als reine HTML-Seiten angezeigt und gar nicht in ein Übungssystem-Seitenlayout eingebettet werden, oder in Kursen mit in den Kursressourcen installierten eigenen Varianten des Seitenlayouts (oder der StudentenHeftStartSeite) kann diese Infobox nicht implizit eingeblendet werden, so lange die alten Seiten bzw. Seitenvorlagen nicht angepasst/ergänzt wurden.

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:

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

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:

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:

• Sie wollen sicherstellen, dass eine MOTD bei aktiver Kurssperre nicht angezeigt wird (s.o.),
• Sie wollen den Standardtext der Startseite bei vorliegender Sperre bearbeiten (z.B. den Text innerhalb der Box mit dem Sanduhr-Icon, siehe Screenshot oben),
• Sie wollen andere Bestandteile der Seite bearbeiten, z.B. die Überschrift.

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. Außerdem behalten Sie dann den gerade zum Zeitpunkt der Erstellung Ihrer Kopie aktuellen Designstand bei, d.h. diese Kursstartseite profitiert dann nicht mehr automatisch von zukünftigen zentralen Designanpassungen im Online-Übungssystem!

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:

• Ohne Zusatz-Spalte: Dies ist die Standardvariante.
• Mit Zusatz-Spalte: Wenn Sie in der Aufgabentabelle, wie sie vom Online-Übungssystem erzeugt wird, gerne noch von Hand Informationen hinzufügen möchten oder zusätzliche Links anbieten möchten, wählen Sie diese Variante: Sie fügt zur Aufgabenübersichts-Tabelle eine weitere Spalte namens »Zusätze« hinzu, die Sie selbst (pro Aufgabenheft) mit Inhalt füllen können. Das wird im Anhang genauer erläutert.

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.

Heft-Aufgabenübersicht (StudentenHeftStartSeite)

Weiterhin finden Sie im Vorlagenpaket im Order Heftnavigation eine spezielle StudentenHeftStartSeite.html (ohne weitere Varianten).

Während die „normale“ StudentenStartSeite eine Übersicht über alle Aufgabenhefte des Kurses mit insb. den Bearbeitungsterminen pro Heft sowie allen Aufgaben des Kurses (gegliedert nach den Heften) anbietet, liefert die StudentenHeftStartSeite praktisch dieselben Informationen, jedoch für genau ein Aufgabenheft.

Neben der Liste aller Aufgaben des Hefts enthält die Seite insbesondere noch die Bearbeitungstermine und Hinweistexte. Diese Hinweistexte sind der Hauptgrund, warum dieses Template mit in das Designvorlagenpaket aufgenommen wurde: So haben Sie die Möglichkeit, die vorgegebenen Erläuterungstexte bei Bedarf anzupassen, indem Sie diese Vorlage bearbeiten und als Kursressource installieren.

Normalerweise wird diese Ansicht im Übungssystem nicht verwendet: Studierende, die sich direkt am Online-Übungssystem anmelden, bekommen diese derzeit nie zu Gesicht, die Seite ist nur durch manuell veröffentlichte Links oder Verknüpfungen erreichbar:

1. Diese Heft-Übersichtsseite kommt insb. dann zum Einsatz wenn Sie ein Aufgabenheft per LTI in eine Lernplattform wie Moodle einbetten: Dann wird beim Start des Aufgabenheftes eben diese Aufgabenübersicht fürs Aufgabenheft eingeblendet.
2. Sie können aber auch einfach einen Link zu dieser StudentenHeftStartSeite für ein bestimmtes Aufgabenheft z.B. in einer Moodle-Umgebung selbst veröffentlichen.
   • Einen Link-Generator für die Erzeugung extern, z.B. in Moodle, zu veröffentlichender Links finden Sie im Betreuerzugang unter »Verknüpfungen« – neben der Verwaltung von LTI-Verknüpfungen.
     Diese Links, wie sie vom Linkgenerator erzeugt werden, haben die folgende Form:
     https://online-uebungssystem.fernuni-hagen.de/SSO/xyz/StudentenHeftStartSeite/12345/WS19/2, wobei xyz durch Ihren Veranstalternamen zu ersetzen ist, 12345 durch die Kursnummer, WS19 durch die korrekte Semesterkennung (oder smart für Smart-Links). Die abschließende 2 stellt hier die Nummer des Aufgabenhefts dar, dessen Übersicht geladen werden soll. Der Zusatz SSO sollte bevorzugt benutzt werden, falls Sie diesen Link auf einer externen Plattform wie z.B. Moodle setzen möchten, die ans Single Sign-On angebunden ist, sie auch die separate Dokumentation zum Single Sign-On.
   • Falls Sie innerhalb Ihrer Kursumgebung (z.B. auf der Kursstartseite oder in einer angepassten StudentenStartSeite.html) einen solchen Link setzen möchten, sollten Sie den SSO-Zusatz weglassen und die konkreten Kursangaben durch Variablen ersetzen, z.B. $WebAssignServer/$Veranstaltername/StudentenHeftStartSeite/$KursNr/$VersionsNr/2 für die Aufgabenübersicht zu Aufgabenheft Nr. 2. Auf diese Weise funktioniert der Link auch in Kopieren (Klonen) dieser Kursumgebung für spätere Semester (auch bei Wechsel der Kursnummer oder des Veranstalters) problemlos weiter und muss nicht jedes Mal von Hand angepasst werden.

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:

• Normal: Dies ist die Standardvariante. Die enthaltene Tabelle enthält stets eine Zeile pro Aufgabenheft, in der Links zu allen Korrekturen und Musterlösungen sowie Gesamtpunktzahl (und ggf. Note) angezeigt werden.
• Nur bearbeitete Hefte: In dieser Variante werden einem Studenten in der Ergebnisübersichtstabelle nur Zeilen zu denjenigen Aufgabenheften angezeigt, zu denen er etwas eingesendet hat.

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.

Heft-Ergebnisübersicht (StudentenHeftKorrekturSeite)

Analog zur Heft-Aufgabenübersicht wird auch von der Ergebnis- und Musterlösungsübersicht eine heftspezifische Version angeboten. Auch diese wird standardmäßig nur bei LTI-Zugriffen oder explizit von Ihnen gesetzten Links verwendet. Der URL dazu ist analog aufgebaut wie oben beschrieben, es ist lediglich StudentenHeftStartSeite durch StudentenHeftKorrekturSeite zu ersetzen.

Installation einer Variante

Laden Sie das Designvorlagen-Paket herunter⁴ 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:

• KursStartSeite.html,
• KursStartSeiteGesperrt.html,
• StudentenStartSeite.html,
• StudentenKorrekturSeite.html,
• sowie ggf. sämtliche PageLayout*.html.

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

• Ranking.html,
• KlausurAnmeldung.html,
• KlausurAnmeldungSonderfall.html und
• StudientagAnmeldung.html

---

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:

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 einen Schalter zum Ein- oder Ausschalten des Embeddings:

Wenn Sie diese Option einschalten, 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önnen⁵.

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:

• Beachten Sie beim Bearbeiten von HTML-Quelltext, dass Sie die beiden EMBED-Marken innerhalb des body-Elements einfügen, dass also die $EMBED-Marke erst nach dem <body>-Tag eingefügt werden darf und die $/EMBED- Marke spätestens vor dem </body>-Tag eingefügt werden muss.
• Jede Seitenlayoutvorlage setzt bereits eine Überschrift erster Ordnung (h1) über den eingebetteten Inhalt, entsprechende Überschriften in Ihrer Seite sollten also nicht innerhalb des markierten Bereiches stehen. Enthält z.B. Ihr Aufgabenformular eine Überschrift wie „Aufgabe 1 (10 Punkte)“, so sollte die $EMBED-Marke erst nach dieser Überschrift eingefügt werden (vgl. Listing oben). Andernfalls erhalten Sie den Effekt, dass die Seite im neuen Design zunächst die von der Vorlage definierte Überschrift und darunter noch einmal Ihre Überschrift enthält. Löschen Sie vorzugsweise solche Überschriften aber auch nicht ganz aus Ihrer Aufgabenseite, sondern belassen Sie diese schlicht vor der $EMBED-Marke:
• Das Übungssystem wird Ihre Seite unmodifiziert anzeigen, falls die Einbettung in die Seitenlayoutvorlagen aus irgendeinem Grund fehlschlagen sollte. Außerdem können Studenten nach Abschluss des Semesters eine Offline-Kursmappe mit allen Aufgaben, Einsendungen und Korrekturen herunterladen, und in dieser Kursmappe werden die Seiten ebenfalls im Originaldesign ohne Einbettung in Designvorlagen dargestellt.
  Deshalb sollten Sie unbedingt stets vollständige HTML-Seiten auch mit eigenen Überschriften (vor der $EMBED-Marke, s.o.) erstellen und nicht etwa nur eine Textdatei, die nur den einzufügenden Inhalt eingerahmt von $EMBED und $/EMBED enthält.
• Die von den Seitenlayoutvorlagen definierten Überschriften sind Hauptüberschriften (<h1>) (vgl. zweiten Punkt oben). Verwenden Sie innerhalb des einzubettenden Bereichs nach Möglichkeit keine weiteren <h1>-Überschriften, sondern nur untergeordnete Überschriften (ab <h2>)!
• Zu beachten bei Aufgabenseiten:
  • Sofern – wie es standardmäßig der Fall ist – Ihre Aufgabenseite nur ein einziges HTML-Formular (also genau ein <form...>-Tag) enthalten sollte, so müssen Sie nichts Besonderes beachten: Die EMBED-Marken dürfen dann auch innerhalb des HTML-Formulars stehen, das Formular wird dennoch korrekt in die Seitenvorlage eingebettet.
  • Falls Sie jedoch eine Aufgabenseite erstellt haben sollten, die mehr als ein HTML-Formular enthält, müssen Sie selbst sicherstellen, dass jedes dieser Formulare vollständig zwischen den Marken $EMBED und $/EMBED steht!
  • Nach Publizieren der Aufgabenseite sollten Sie im Online-Übungssystem eine Probeeinsendung als Teststudent vornehmen, um zu prüfen, ob sowohl die Anzeige im aktuellen Webdesign als auch das Formular korrekt funktionieren.
• Zu beachten bei Korrekturseitenvorlagen für manuelle Korrektur: Korrekturseiten (die entstehen, indem die Einsendungen eines Studenten in eine Korrekturseitenvorlage eingefügt werden) werden einerseits während der Korrekturphase dem Korrektor zur Bearbeitung (Korrektur der Einsendung) angezeigt und andererseits im Anschluss an die Korrektur den Studenten präsentiert. Nur die Ansicht für Studenten wird (sofern EMBED-Marken enthalten sind) in eine Seitenvorlage mit aktuellem Webdesign eingebettet, während der Korrektor (innerhalb eines I-Frames) die Korrekturseite in ihrer Rohform zur Bearbeitung angezeigt bekommt.
  • Ggf. in der Korrekturseitenvorlage sichtbare $EMBED- und $/EMBED-Markierungen sind damit auch für den Korrektor sichtbar. Falls Sie das nicht wünschen, können Sie diese im HTML-Quelltext der Korrektuseitenvorlage in Kommentarklammern setzen (z.B. <!-- $EMBED -->). Dadurch werden diese Markierungen im Browser unsichtbar, das Embedding funktioniert aber weiterhin.
  • Falls Sie die herkömmliche Korrektur verwenden, d.h. der Korrektor die Korrekturseite mit einem externen Editor wie dem Mozilla SeaMonkey Composer bearbeiten kann, ist jedoch zu beachten, dass nur diejenigen vom Korrektor vorgenommenen Änderungen auch für den Studenten sichtbar werden, die zwischen den EMBED-Marken eingefügt wurden. Sollte der Korrektor z.B. einen Kommentar hinter der $/EMBED-Marke einfügen, wird der Student diesen Kommentar nicht sehen. In diesem Korrekturmodus ist es daher empfehlenswert besser, die Marken nicht zu verstecken und Korrektoren auf deren Bedeutung hinzuweisen (d.h. darauf hinzuweisen, dass Änderungen nur zwischen den Marken eingefügt werden dürfen).
  • Falls Sie dagegen die In-Browser-Korrektur verwenden (vgl. separate Dokumentation), kann der Korrektor ohnehin seine Kommentare nur in vom Aufgabenautor vordefinierte Kommentar-Blöcke schreiben. In diesem Modus können die Marken bedenkenlos ausgeblendet werden, wie oben beschrieben. Im Übrigen bekommt der Korrektor nach der Speicherung einer In-Browser-Korrektur eine Vorschau der Seite angezeigt, und diese Vorschau wird in die Korrektor-Seitenvorlage eingebettet, also im neuen Design dargestellt.
• Das Übungssystem stellt einer Quittung selbstständig eine Zeile der Art „Einsendung von Max Mustermann, Matrikelnr. 1234567“ voran, falls es keine $Vorname-Variable im Text zwischen den EMBED-Markierungen findet. Bei Korrekturen (nur in der Ansicht für Studenten) werden außerdem entsprechende Kopfzeilen mit dem Namen des Korrektors und dem Korrekturdatum vorangestellt, falls der einzubettende Text nicht bereits die Variablen $Korrektor bzw. $KorrekturDatum enthält.
• Falls Sie in Ihren Seiten CSS verwenden, beachten Sie folgende Punkte:
  • Sowohl ein style-Element mit seitenspezifischen CSS-Definitionen als auch link-Tags zum Einbinden externer CSS-Dateien werden beim Einbetten in eine Seitenvorlage mit übernommen, sofern sie korrekt im Kopfbereich der Seite (also zwischen <head> und </head>) notiert sind.
  • Sollten Sie mehrere style-Elemente im Kopf verwenden, wird nur das erste davon übernommen. Fassen Sie die style-Elemente dann bei Bedarf zu einem einzigen zusammen. (link-Elemente werden sämtlich übernommen.)
  • Falls Sie (gar) keine Übernahme von Styles wünschen – weder Inline-Styles (style) noch verlinkte CSS-Dateien (link), sondern alle Styles nur für die uneingebettete Darstellung im Fehlerfall oder in der Offline-Kursmappe (siehe oben) gelten sollen, so markieren Sie den Beginn des einzubettenden Bereichs mit $EMBEDNOCSS statt $EMBED.
  • Falls Sie sowohl Styles definieren wollen, die beim Embedding übernommen werden sollen, als auch zusätzliche Styles, die nur für die Fallback-Darstellung gelten sollen, beim Embedding aber nicht übernommen werden sollen, so erstellen Sie zwei separate style-Elemente: Das erste mit zu übernehmenden Inline-Styles, das zweite mit den nicht zu übernehmenden. (Weiterhin können Sie zu übernehmende Styles per link verlinken, während nicht zu übernehmende „Fallback-Styles“ in einem style-Element direkt im Dokument stehen müssen).
• Falls Sie in Ihren Seiten JavaScript verwenden, beachten Sie folgende Punkte:
  • JavaScript-Elemente (script-Tags) im Kopfbereich (head) werden in die generierte Seite übernommen.
  • JavaScript-Elemente innerhalb des Dokumenten-Körpers (body) werden – genau wie andere Inhalte – nur übernommen, falls sie zwischen den EMBED-Markierungen stehen.
• Falls Sie in Ihren Seiten Tabellen verwenden, die nur zum Layout dienen und deren Rahmen daher unsichtbar bleiben sollen, sollten Sie jeder dieser Tabellen die CSS-Klasse layout zuordnen (<table class="layout">…</table>), was sicherstellt, dass die Rahmen in jedem Fall unsichtbar bleiben. Für Tabellen mit dem Attribut border="0" ist das jedoch nicht nötig.
  Wenn möglich, sollten Sie allerdings Layout-Tabellen vermeiden und vielmehr modernere CSS-Layouts bevorzugen! Layout-Tabellen schränken insbesondere die Barrierefreiheit ein: Das CSS versteckt zwar vor sehenden Nutzern, dass Ihre Inhalte in einer Tabelle stehen, aber nicht vor Screenreader-Nutzern.
• Im Normalfall wird zwar der gesamte Inhalt, der zwischen den Markierungen $EMBED und $/EMBED steht, übernommen. Im Sinne der Fehlertoleranz gibt es davon jedoch folgende Ausnahmen: Leerzeichen, auch  -Entities für geschützte Leerzeichen, Tabulatoren und Zeilenumbrüche (auch <br>-Tags) direkt nach $EMBED oder vor $/EMBED sowie schließende Tags (beginnend mit </) nach $EMBED und bestimmte öffnende Tags vor $/EMBED werden ignoriert, also nicht mit in die Seitenvorlage übernommen.
  • Falls also z.B. die Marke $EMBED mit einem WYSIWYG-Editor (wie dem SeaMonkey Composer) versehentlich in einer Art wie

    <p>$EMBED &nbsp;<br></p><p>Inhalt…</p>…
    

    oder ähnlich eingefügt wird, so ist das unschädlich: Der einzufügende Inhalt beginnt in diesem Beispiel erst ab <p>Inhalt….

Dark-Mode-Support

Das 2018er Webdesign wurde Ende 2019 um Support für den sog. Dark Mode (Dunkelmodus) ergänzt.

Wenn Sie, wie bisher beschrieben, den einzubettenden Inhalt „nur“ mit $EMBED einleiten, wird im Dark Mode der abwärtskompatible Standardmodus aktiviert (der sich derzeit i.W. dadurch auszeichnet, dass alle Bilder im Dunkelmodus hellgrau hinterlegt werden, für den Fall dass sie dunkle Inhalte auf transparentem Grund enthalten sollten). Von diesem Standardmodus kann durch zwei Suffixe abgewichen werden:

• Falls Sie den Beginn mit $EMBEDDisableDarkMode einleiten, wird der Dunkelmodus für diese Webseite unterdrückt, d.h. die Seite wird auch dann im hellen Modus dargestellt, wenn der Benutzer eigentlich den Dark Mode in seinem Betriebssystem oder Browser aktiviert hat.
• Markieren Sie den Beginn mit $EMBEDSupportsDarkMode, wenn Sie sichergestellt haben, dass die Inhalte auch ohne das Grau-Hinterlegen der Grafiken im Dunkelmodus lesbar sind.
• Die schließende Markierung lautet in jedem Fall nur $/EMBED ohne Suffix.
• Falls Sie – wie oben beschrieben – $EMBEDNOCSS verwenden, um die CSS-Einbindung zu unterdrücken, und dies mit einer der beiden DarkMode-Direktiven kombinieren möchten, geht das auch: per $EMBEDNOCSSDisableDarkMode bzw. $EMBEDNOCSSSupportsDarkMode.

Das separate Dunkelmodus-Handbuch geht ausführlicher auf den Dunkelmodus und Ihre Anpassungsmöglichkeiten ein.

Encoding/Charset

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

• ISO-8859-1 (ISO Latin 1)
• ISO-8859-15 (ISO Latin 9)
• CP1252 (Windows Latin 1)
• Mac Roman
• UTF-8
• UTF-16

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:

Tabelle 2: Seitenlayoutvorlagen

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:

Tabelle 3: Seitenlayoutvorlagen – Lehrgebietsmitarbeiterzugang

Hinweise:

• In Zeilen der Art $INCLUDE(resources/design2018/name.ssi) werden vordefinierte HTML- Codestücke, die allen Seiten gemeinsam sind, zentral eingebunden. Vom ZMI ggf. vorgenommene kleinere Designänderungen z.B. am Seitenkopf werden so automatisch auch in Ihrem Kurs wirksam, selbst wenn Sie eine modifizierte Seitenlayout-Vorlage installiert haben. Möchten Sie solche SSI-Teile (SSI: »Server Side Include«) gegen eigene austauschen, können Sie eigene SSI-Fragmente als Kursressource hochladen und per $INCLUDE(name.ssi) (ohne vorangestellten Pfad) einbinden.
• Entsprechend finden Sie in den Vorlagen Elemente zur Einbindung zentral im Übungssystem abgelegter CSS-Dateien oder Grafiken. Auch hier können Sie eigene CSS-Dateien oder eigene Grafiken als Kursressourcen hochladen und die Referenzen in den HTML-Dateien anpassen.

Fokus-Modus

Im Unterverzeichnis SF/KLAUSUR des entpackten Layoutvorlagen-Pakets finden Sie für bestimmte der obigen Vorlagen (Studentensicht) eine sogenannte Fokus-Variante. Diese sind die Default-Seitenvorlagen für Online-Klausuren und unterscheiden sich von den Standardvorlagen im Paket vornehmlich dadurch, dass weniger Links und Menüpunkte vorhanden sind, die von der gerade laufenden Klausur „wegführen“ würden.

• So verlinkt z.B. das FernUni-Logo im Kopf nicht mehr zur FernUni-Homepage,
• der Brotkrümelpfad beginnt erst ab Kursstartseite (hat also eine Einträge mehr zum Wechsel zu anderen Kursen),
• der Menüpunkt für die Übungssystem-Startseite ist aus dem Hauptmenü (farbiger Balken oben) entfernt,
• im Seitenmenü fehlen Menüpunkt zum direkten Anspringen von Aufgabenübersicht, Ergebnisübersicht, Kursmappe etc..

Dieses Layout soll also den Fokus auf die Klausuraufgaben und die wesentlichen Navigationsmöglichkeiten innerhalb der Klausur (insb. Wechseln zwischen den Aufgaben) legen und möglichst wenige Menüpunkte oder Links umfassen, die während der Klausurbearbeitung gar nicht von Interesse sind. (So wird ein/-e Student/-in zwar vielleicht bei bzw. nach der Bearbeitung von Einsende- oder Hausarbeiten auch mal zwischen Kursumgebungen wechseln wollen, aber während des kurzen Bearbeitungszeitraums einer Klausur ist das eher unwahrscheinlich. Das versehentliche Anklicken von Links, die von der Klausur weg führen könnten Zeit kosten, und das „Ausdünnen“ des Menüs lenkt den Fokus mehr auf die verbliebenen, für die Klausur interessanteren Menüpunkte.)

Die Kursstartseite ist aber immer noch jederzeit erreichbar, und für diese wurde auch keine „abgespeckte“ Fokus-Version erstellt. D.h. diese hat die vollen Navigationsmöglichkeiten, so dass man bei Bedarf zumindest indirekt doch noch andere Seiten des Übungssystems (wie die Kursauswahl / Übungssystemstartseite) erreichen kann – man muss dazu nur erst von einer „Fokus-Seite“ zur Kursstartseite zurückkehren.

Verwendung:
Wenn Sie also eine eigene Seitenvorlage für eine Klausur oder eine andere Umgebung, bei der Sie ebenfalls einen solchen „Fokus-Modus“ wünschen, erstellen wollen, so können Sie statt der Datei aus dem Stammverzeichnis der ZIP-Datei einfach die Version aus diesem SF/KLAUSUR-Verzeichnis verwenden.

Die angepasste Datei laden Sie dann wie gehabt als Kursressource in ihrer Kursumgebung hoch. (Eine gleichzeitige Installation einer „Fokus-Version“ und einer „Vollversion“ zur selben Ressource ist innerhalb einer Kursumgebung nicht möglich.)

Anpassung der Menüs z.B. für Umgebungen ohne Aufgaben

Zunächst gibt es optionale Menüpunkte (Ranking, Anmeldung zu Studientage und Klausuranmeldung), die in den Kursparametern (Rubrik »Optionale Menüpunkte für Studentenseiten«) jederzeit aktiviert oder deaktiviert werden können. Wenn Sie also nur einen dieser Menüpunkte ausblenden möchten, können Sie das jederzeit einfach über die Kursparameter tun.

Im Ausnahmefall kann es aber auch vorkommen, dass eine Übungssystem-Kursumgebung gar nicht zur Abwicklung von Aufgaben genutzt wird, sondern z.B. nur die Funktionalität zur Anmeldung zu Studientagen verwendet werden soll.

In so einem Fall ist es vermutlich sinnvoll, nicht nur einfach keine Aufgaben anzulegen (entsprechende Warnungen der Checkliste-Funktion sind dann zu ignorieren), sondern auch die Menüs des Studentenzugangs „auszudünnen“ oder ganz zu entfernen. Da die Menüpunkte für Aufgaben und Ergebnisse/Korrekturen/Musterlösungen nicht regulär ausblendbar sind, muss dies dann über Anpassung von HTML-Ressourcen erfolgen:

1. Da die Kursstartseite kein Embedding nutzt (siehe Tabelle 1 im zweiten Kapitel), laden Sie das Designvorlagenpaket herunter und bearbeiten Sie darin die Datei KursStartSeite.html.
2. Für die weiteren Seiten, die Embedding nutzen, genügt es, die entsprechende Seitenlayoutvorlage anzupassen. Laden Sie dazu das Layoutvorlagenpaket herunter und bearbeiten Sie darin die Datei PageLayoutStudent.html. (Die weiteren PageLayoutStudent*.html werden Sie in der Regel nicht benötigen, sofern Sie keine Aufgaben anbieten.)
3. Laden Sie diese bearbeiteten HTML-Dateien als Kursressourcen in Ihre Umgebung hoch.
4. Nicht bearbeiten, aber komplett abschalten können Sie die Menüseite, die Studierende ansonsten über den »Studentenzugang«-Link auf der Kursstartseite sowie von tiefer liegenden Seiten aus über den „Brotkrümelpfad“ oder den Zurückging erreichen können. Die Funktion zum Abschalten dieser Menüseite finden Sie in den Kursparametern in der Rubrik »Spezial«, siehe Neuere Einstellmöglichkeiten.
5. Aber nachdem Sie diese Menüseite deaktiviert haben, verweist der »Studentenzugang«-Link auf der Kursstartseite auf die Aufgabenübersichtsseite. Wenn Sie diese in diesem Beispiel nicht nutzen möchten, haben Sie zwei Möglichkeiten: Sie laden eine eigene StudentenStartSeite.html als für Ihre eigenen Zweige angepasste Startseite in die Kursressourcen hoch, oder Sie bearbeiten direkt den »Studentenzugang«-Link in der KursStartSeite.html.

Details zur Bearbeitung des Menüs in den Schritten 1 und 2:
Der Menücode in den HTML-Dateien hat zum Stand der Erstellung dieses Handbuch-Kapitels in etwa folgenden Aufbau:

<nav aria-labelledby="N196614">
	<header aria-hidden="true">
		<h2 id="N196614">Studentenzugang</h2>
	</header>
	<ul>
		<li>
			<a href="$WebAssignServer/$Veranstaltername/StudentenStartSeite/$KursNr/$VersionsNr/">Aufgaben&uuml;bersicht</a>
		</li>
		$MenuStudentenKorrekturSeite
		<li>
			<a href="$WebAssignServer/$Veranstaltername/Kursmappe/$KursNr/$VersionsNr/">Kursmappe</a>
		</li>
		$MenuStudentRanking
		$MenuStudientagAnmeldung
		$MenuKlausurAnmeldung
	</ul>
</nav>

Der wesentliche Teil ist die Liste (ul) von Menüpunkten, die Sie beliebig bearbeiten können, z.B. indem Sie Menüpunkte daraus komplett löschen. Wie Sie oben sehen, gibt es dabei im Wesentlichen zwei „Arten“ von Menüpunkt-Einträgen:

• Listenelemente mit Links (<li><a href="URL">label</a></li>) und
• Variablen wie $MenuStudentenKorrekturSeite.

Letztere werden vom Online-Übungssystem dynamisch beim Laden der Seite durch Listenelemente (li) mit darin liegenden Links (a) ersetzt:

Die drei letzten Variablen können Sie in den Seiten belassen, selbst wenn Sie die Menüpunkte nicht benötigen, weil Sie die Sichtbarkeit dieser drei Menüpunkte jederzeit über die Kursparameter steuern können. Die ersten drei Menüpunkte (li-Elemente bzw. $MenuStudentenKorrekturSeite) sind dagegen immer sichtbar und müssen aus diesen HTML-Dateien entfernt werden, wenn Sie die Menüpunkte nicht anzeigen möchten.

---

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:

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):

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:

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.