HTML-Datei, Layout
Die eEx-Aufgaben sollten Geräte- und Betriebssystemunabhängig programmiert werden. Deshalb ist auf ein Layout zu achten, das diesen Anforderungen entspricht. Alternativ können Sie auch Browser- oder Geräte-Weichen verwenden, die das Layout individuell anpassen.
Mit den eEx-Programmen und Aufgaben liefern wir auch eine CSS-Datei aus, die wir in unseren Aufgaben verwenden. Diese Datei können Sie von dieser Seite herunterladen und in den eigenen Aufgaben verwenden oder als Vorlage für ein eigenes Layout verwenden.
<!doctype html> <html><head> ... <link rel="stylesheet" type="text/css" href="eex-1.0.0.css" /> ...
Wenn Ihre Aufgaben jedoch ein einheitliches und individuelles Aussehen erhalten sollen, dann können Sie das Layout vollständig nach Ihrem Geschmack entwerfen. Wir empfehlen jedoch einige grundsätzliche Usability-Regeln zu beachten. Das hilft unseren Kindern bei der Orientierung in der Aufgabe.
- Im Kopf-Bereich der Aufgabe sollte ein Link zur Inhalts-Seite und
ein Link zum Neuladen der Seite enthalten sein.
<body><p> • <a id="ex_idx" href="../index.php">Inhalt</a> • <a href="javascript:location.reload()">Seite neu laden</a> </p>
- Die <h1> Überschrift sollte den gleichen Text enthalten wie das <title> Attribut der Seite.
- In der <h2> Überschrift sollten sich die Angaben aus den Meta-Tags audience und page-topic wieder finden. Trennen Sie diese beiden Angaben durch ein Semikolon (;).
- Die Überschrift <h3> kann die gleichen Angaben enthalten wie die im Meta-Tag description.
- Die Schaltfläche zum Senden der Lösung sollte sich am Ende der Seite befinden. Das stellt sicher, dass keine Aufgabenteile übersehen werden, falls diese sich in unsichtbaren Dokument-Bereichen befinden.
- Nach dem Senden der Lösung sollte die Seite die richtige Lösung anzeigen oder zumindest richtige und falsche Antworten hervorheben. Die Richtig-Kennzeichnung sollte immer grün sein, rot hingegen die Falsch-Kennzeichnungen.