Lernkartenportal

Aus THM-Wiki
Wechseln zu: Navigation, Suche
Projekt
Arbeitstitel Lernkartenportal
Kurs SWTP
Betreuer Herr Sebastian Süß
Start-Semester SS 13
End-Semester SS 13
Teilnehmer Andrej Sajenko, Alexander Heinz, Till Albert, Samuel Hübl, Jan Meyer
Programmiersprache Java EE


Beschreibung

Grobe Übersicht

Das Lernkartenportal war ein Projekt aus dem Software Praktikum vom SS 2013. Der Auftraggeber war Herr Sebastian Süß. Die Entwickler waren Andrej Sajenko, Alexander Heinz, Till Albert, Jan Meyer und Samuel Hübl.

Das Lernkartenportal wurde in zwei Projekte aufgeteilt. Zum einen in das Frontend, welches mit Hilfe der Wicket Frameworks aufgebaut wurde. Zum anderen in das Backend, welches aus einer SQL-Datenbank und RESTfull Schnittstelle besteht. Beide Komponenten wurden so entwickelt, dass sie voneinander unabhängig funktionieren können.

Projektbeschreibung aus Kundensicht

Lernkarten sind ein beliebtes Hilfsmittel um systematisch Informationen wie Vokabeln oder Prüfungsinhalte zu lernen. In dieser Projektarbeit soll eine Webanwendung entwickelt werden, in der Lernkarten verwaltet und nach dem Fächerprinzip von Sebastian Leitner trainiert werden können.

Nach unseren Vorstellungen sind die Eckdaten des Projektes folgende:

  1. Benutzer können sich registrieren und erhalten einen individuellen Lernbereich
  2. Registrierte Benutzer können Lernkarten verwalten
  3. Lerninhalte können importiert werden
  4. Lernkarten besitzen neben Textinhalt auch Bilder und Audio
  5. Lernkarten werden in Lektionen zusammengefasst, die wiederum in Lernmodule organisiert werden
  6. Tägliche Lernbenachrichtigung, wenn Karten zum Lernen zur Verfügung stehen
  7. Das Erscheinungsbild der Anwendung soll sich dem jeweiligen Ausgabemedium optimal anpassen (Responsive Webdesign)
  8. Einzelne Lektionen können für andere Benutzer freigegeben werden


Implementierte Features

  • Registrieren
  • Individueller Lernbereich
  • Lernkarten
    • Textinhalt
  • Verwalten von
    • Lernmodule
    • Lektionen
    • Lernkarten
  • Einzelne Module können für andere Benutzer freigegeben werden
  • Tägliche Lernbenachrichtigung
  • Import / Export von Lerninhalten
  • Lernen
  • Meldefunktion
  • Password vergessen
  • Lernmodul (Favoritenliste)
  • Suchfunktion für Module
  • Responsive Webdesign


Fehlende Feuatures

  • Bilder
  • Audio
  • Audioübersetzung


Lernmethoden

Im Lernkartenportal in der aktuellen Version vom 01.07.2013 sind 3 Lernmethoden definiert.

1. Kurzzeitlernen mit gemischten Karten
Bei dieser Lernmethode werden die Karten einer Lektion gemischt und der Benutzer kann diese anschließend Lernen.
Bei dieser Lernmethode wird kein Fortschritt gespeichert und kann immer ausgeführt werden.
Lernvorgang:
Der Benutzer bekommt eine Frage präsentiert und kann diese beantworten oder überspringen.
Beim Klicken auf Antwort anzeigen, wird Ihm die Antwort präsentiert, nun muss Er entscheiden ob die Antwort richtig oder falsch war. Bei einer falschen Antwort wird die Karte zurück auf den Stapel gelegt und erscheint im späteren Verlauf des Lernens noch einmal.
2. Kurzzeitlernen mit sortierten Karten
Das selbe wie beim Kurzzeitlernen mit gemischten Karten, nur das hier die Karten einer Lektion sortiert sind.
3. Phasenlernen
Das Phasenlernen ist nach dem Fächerprinzip aufgebaut. Wenn der Benutzer eine Karte richtig beantwortet kommt die Karte ein Fach weiter. Wird die Karte falsch beantwortet, kommt sie zurück ins erste Fach. Wenn eine Karte zum Beispiel aus dem ersten Fach ins zweite kommt, wird sie für eine bestimmt Anzahl von Tagen gesperrt und steht erst nach Ablauf der Frist wieder zum Lernen bereit. Dies soll das Langzeitlernen fördern.
Lernvorgang:
Der Benutzer bekommt eine Frage präsentiert und kann diese nun beantworten, überspringen oder komplett aus dem Lernprozess raus nehmen.
Beim Klicken auf Antwort anzeigen, wird Ihm die Antwort präsentiert, nun muss er entscheiden ob die Antwort richtig oder falsch war. Im Gegensatz zum Kurzzeitlernen werden hier die Karten, auch wenn sie falsch beantwortet sind, aus dem Stapel genommen. Das heißt falsch beantwortete Karten stehen erst am nächsten Tag wieder zum Lernen zu Verfügung, richtig beantwortete Karten werden erst wieder nach Ablauf der Frist zum Lernen verfügbar sein.

Installation

Die Installation gliedert sich in zwei Bereiche.

  1. Installation des RESTful Webservice, die für die Datenhaltung und die Basisoperationen verantwortlich ist.
  2. Installation eines vor-implementierten Klienten der als Benutzerschnittstelle dient.


RESTful Webservice

Das bereitgestellte WAR-Archiv benötigt folgende Abhängigkeiten

  1. Anwendungsserver mit einem Web-Container (TomCat Version 7)
  2. Eine MySql Datenbank (Version 5+)
    1. Eine Tabelle mit dem Format utf-8-unicode-ci und einen Benutzer mit vollem administrativen Zugriff auf die Tabelle.

Die persistence.xml muss für die Datenbankverbindung speziell angepasst werden.


Konfiguration

conf.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:noNamespaceSchemaLocation="schema/conf.xsd">

    <url>http://localhost:8080/LernkartenPortal/rest</url>
    <mail>
        <address>lernkartenportal@gmail.com</address>
        <username>lernkartenportal@gmail.com</username>
        <password>password</password>


        <properties>
            <property name="mail.smtp.starttls.enable" value="true"/>
            <property name="mail.smtp.auth" value="true"/>
            <!-- Google Mail Configuration -->
            <property name="mail.smtp.host" value="smtp.gmail.com"/>
            <!-- THM mail Configuration -->
            <!--
               <property name="mail.smtp.host"             value="mailgate.thm.de" />
            -->
            <property name="mail.smtp.port" value="587"/>
        </properties>
    </mail>
    <!-- Upload directories. Have to exist! if upload is using. -->
    <upload>
        <pictures>/files/pictures</pictures>
        <audios>/files/audios</audios>
    </upload>
</configuration>

Vor-implementierte Benutzerschnittstelle

Die auf Wicket basierende Applikation liegt als WAR-Archiv vor und muss auf einem Applikationsserver installiert werden.

Entwicklerdokumentation

Voraussetzung

  1. Oracle Java 7 JDK[1]
  2. Apache Tomcat 7[2]
  3. Eclipse[3] oder IntelliJ IDEA Ultimate Edition[4]
  4. MySQL 5
    1. Die persistence.xml im Projekt beachten. Dort sind die Verbindungsinformationen und Schema-Namen hinterlegt.
    2. Als DB-Kodierung muss utf8_unicode_ci ausgewählt werden.
  5. Maven 3
  6. Git

Je nach der verwendeten Entwicklungsumgebung können Teile der Voraussetzungen als Teil der IDE betrachtet werden.

Runterladen der Quelldateien

Die Quelldateien für das ganze Projekt werden vom THM-Gitorious unter dem Namen lkp verwaltet. Informationen die zum Zugriff auf die Versionsverwaltung benötigt werden können Sie dem Gitorious-Projekt lkp entnehmen. Benutzen Sie zum runterladen der aktuellen Hauptversion den folgenden Link: Download


Einbindung in die Entwicklungsumgebung

Im runtergeladenen Paket befinden sich zwei Maven-Projekte die keine IDE-Informationen enthalten. Um eines der beiden Projekte innerhalb einer IDE zu nutzen muss es eingebunden werden.

Eclipse

Um das Lernkartenportal für die Entwicklungsumgebung einzurichten, hat man zwei verschiedene Varianten um dies zu erreichen. Bei der ersten Variante geht man per Hand vor und kopiert die Dateien, bei der zweiten arbeitet man mit Maven.

1. Variante

Erstellen Sie für jedes Projekt an dem Sie weiterentwickeln wollen ein Maven Project in Eclipse. Gehen Sie dabei wie folgt vor.

  1. Erstellen Sie ein Maven Project
    1. Create a simple project (skip archetype selection)
    2. Benutzen Sie den Namen des Projektes das Sie importieren wollen für
      1. Group Id
      2. Artifact Id

(Alle anderen Felder können leer gelassen werden. Diese Konfiguration wird im späteren Verlauf sowieso überschrieben.)

Gehen Sie in den Ordner Ihres gerade erstellten Projektes und entfernen Sie

  1. src
  2. target
  3. pom.xml

Kopieren Sie den Inhalt des Projektes an dem Sie weiterentwickeln wollen in das Projekt von Eclipse.

Aktualisieren Sie das Projekt (in Eclipse) mit F5 (Refresh) und stellen Sie die Projekt Facets richtig ein. Projekt -> Properties -> Project Facets -> Convert to faceted form...

Thm lernkartenportal facets.png

Selektieren Sie

  1. Dynamic Web Module
  2. Java


Gehen Sie mit der Maus auf Ihr Projekt Rechtsklick -> Run As -> Maven install

2. Variante

Begeben Sie sich in die jeweiligen Projektordner und führen sie das Kommando mvn eclipse:eclipse -Dwtpversion=2.0 aus. Dieses Kommando sollte Ihrem Projektordner in Eclipseprojekte umwandeln.

Wenn das Kommando ohne Fehler durchgelaufen ist, öffnen Sie Eclipse. Stellen Sie sicher, dass der Apache Tomcat und das Plugin m2e - Maven Integration for Eclipse implementiert sind. Nun können Sie mit einer einfachen Importanweisung beide Projekte in Eclipse importieren.

Sie müssen nur noch beide Projekte mit Maven binden und Run As >> Maven Install ausführen.

Bemerkung: Achten Sie beim Starten des Lernkartenportals darauf, dass beide Projekt, also der RESTfull und das Wicket - Projekt laufen müssen

ItelliJ

IntelliJ IDE Konfiguration
  1. Erstellen Sie ein Projekt aus einer Versionsverwaltung
    1. Wählen Sie Git aus.
  2. Tragen Sie die URL des Git Repositories ein.
  3. Importieren Sie das Projekt als ein Maven Projekt.
  4. Lassen Sie das Repository rekursiv nach Projekten durchsuchen.
  5. Selektieren Sie beide gefundenen Projekte.
  6. Wählen Sie Ihr installiertes SDK aus.
  7. Tragen Sie einen Projektnamen für das IntelliJ Projekt ein.
  8. Beide Projekte werden von der IDE (in einigen Sekunden) erfasst.
  9. Gehen Sie zu den Run/Debug Konfigurationen und wählen Sie den Tomcat Server Local aus. Konfigurieren Sie dort den Application Server
  10. Lassen Sie sich die Projekte als War-Archiv zusammenstellen bevor ein Deployment stattfindet.
  11. Wählen Sie beide Projekte aus. Achten Sie dabei das Sie nur die exploded selektieren.
  12. Konfigurieren Sie eine Maven Aktion. (Wiederholen Sie diesen und den folgenden Schritt für beide Projekte!)
  13. Wählen Sie package aus.
  14. Konfigurieren Sie wicket als Startseite
  15. Fügen Sie beide 'exploded' Projekte zum Deployen hinzu.
  16. Überprüfen Sie ob Sie die Startseite korrekt eingetragen haben.
  17. Tragen Sie den 'Application Context' für das REST-Projekt ein.
  18. Tragen Sie den 'Application Context' für das Wicket-Projekt ein. Dieser muss mit der Startseite übereinstimmen!

RESTful Webservice

Technologien und Frameworks

  1. RestEasy als JAX-RS Implementierung um eine RESTful Webservice Schnittstelle anzubieten.
  2. Hibernate als JPA Implementierung um eine Objekt-rationale Abbildung auf eine Datenbank bereitzustellen.
    1. Jackson als XML Parser

Schnittstellen

Modell

Dezeitiges Modell im IntelliJ Format

Das derzeitige Model wird im IntelliJ Format angegeben.

Paket-Struktur

de.thm.mni.lcp

|-- config          (Zugriff auf Konfigurationsdateien)
|-- jpa             (Utils für die JPA nutzung)
|-- model           (Das Grundlegende Modell der Applikation (JPA Entitätsklassen))
|    |-- db         (Verbundschlüssel Objekte)
|    |-- technical  (Technische Modell-Erweiterung für Funktionalitäten)
|    |-- valid      (Validator Schnittstelle um Objekte validierbar zu gestallten)
|-- service         (RESTful-Implementierung und Logik (JAX-RS WS Schnittstellen))
|    |-- exception  (ExceptionMapper für eine Kapselung der Fehlernachricht an den Client)
|    |-- model      (Webservice spezifische Erweiterungen des Modells)
|    |-- wait       (Strategie-Implementierung der Wartezeiten/Sperrzeiten der Karten)
|-- timer           (Cronjobs mit den einzelnen Aufgaben)
|    |-- task       (Aufgaben-Implementierung (Benachrichtigung und Aufräum-aufgaben))
|-- util            (Verschiedene Hilfsklassen)

Übersicht über Implementierungsteile

JPA Kapselung
Übersicht über die Kapselung


Um sicherzustellen das jede geöffnete Verbindung und Transaktion geschlossen wird, wurde das Strategie-Pattern verwendet. Das Objekt was die Befehle kapselt wird in einem Kontext ausgeführt der sicherstellt das jede Transaktion und jede geöffnete JPA Verbindung auch im Fehlerfall geschlossen wird.

    /**
     * Execute a update commands in a transaction state. This method manage all connections and transaction. And Close them.
     *
     * @param ts The Update commands
     *
     * Usage: <br />
     * <code>
     * Dao.execute(new JpaUpdate() {public void execute(final EntityManager em) {
     * ... your code to update entities ...
     * YourClass yc = em.find(YourClass.class, YourClass.getId());
     * ... modify entities ...
     * em.merge(yc);
     * }
     * })
     * </code>
     */
    public static void execute(final JpaUpdate ts) {
        EntityManager em = JpaUtils.createEntityManager();
        try {
            EntityTransaction t = em.getTransaction();
            try {
                t.begin();
                ts.execute(em);
                t.commit();
            } finally {
                if (t.isActive()) {
                    t.rollback();
                }
            }
        } finally {
            em.close();
        }
    }

    /**
     * Execute commands to get a object and return then.
     *
     * @param <T> The result object type
     * @param ts  the get commands.
     * @return The object
     *
     * Usage: <br />
     * <code>
     * ResultClass result = Dao.execute(new JpaGet<ResultClass>() { public ResultClass execute(final EntityManager em) {
     * ... your code to get your ResultClass ...
     * return ... object of your ResultClass ...
     * }
     * });
     * </code>
     */
    public static <T> T execute(final JpaGet<T> ts) {
        EntityManager em = JpaUtils.createEntityManager();
        try {
            EntityTransaction t = em.getTransaction();
            try {
                t.begin();
                T result = ts.execute(em);
                if (result instanceof Collection<?>) {
                    /*
                    Collections are lazy loaded, so i have to call every item once to
                    trigger the initialization during a active transaction.
                     */
                    Iterator<?> iterator = ((Collection<?>) result).iterator();
                    while (iterator.hasNext()) {
                        iterator.next();
                    }
                }
                t.commit();
                return result;
            } finally {
                if (t.isActive()) {
                    t.rollback();
                }
            }
        } finally {
            em.close();
        }
    }

Beispiel der Verwendung:

        Dao.execute(new JpaUpdate() {
            @Override
            public void execute(final EntityManager em) {
                final Card cardToUpdate = get(id, token);
                cardToUpdate.setFrontPage(card.getFrontPage());
                cardToUpdate.setBackPage(card.getBackPage());
                cardToUpdate.setPosition(card.getPosition());

                em.merge(cardToUpdate);
            }
        });
        LearningBox lb = Dao.execute(new JpaGet<LearningBox>() {
            @Override
            public LearningBox execute(final EntityManager em) {
                LearningBox lb = createIfNotExist(em, user, lessonId); // Inv: a learningBox exists!
                mergeNewCards(em, lb);
                return lb;
            }
        });
Cronjob
Chron Job Model

Der Cronjob kann einfach um einen Task erweitert werden. Ebenso können eine Verzögerung und Periode eingestellt werden, welche die Abstände zwischen den Tasks festlegt.

public class MyTask extends TimerTask {
    @Override
    public void run() {
        // Task TODO
    }
}
public class CronJob implements ServletContextListener {

    private static final int SECOND = 1000;
    private static final int MINUTE = 60 * SECOND;
    private static final int HOUR = 60 * MINUTE;

    private static final int FIRST_START_DELAY = 5 * MINUTE;

    private static final int CARD_PERIOD = HOUR;            /* Card Notification*/
    private static final int CLEAN_PERIOD = 12 * HOUR;      /* CleanUps */

    private Timer timer;

    @Override
    public void contextDestroyed(final ServletContextEvent context) {
        timer.cancel();
    }

    @Override
    public void contextInitialized(final ServletContextEvent context) {
        timer = new Timer();
        timer.schedule(new CardNotificationTask(), FIRST_START_DELAY, CARD_PERIOD);
        timer.schedule(new CleanTagsTask(), FIRST_START_DELAY, CLEAN_PERIOD);
        timer.schedule(new CleanUnregisteredUserTask(), FIRST_START_DELAY, CLEAN_PERIOD);
    }
}
Sperrzeitenberechnung für Lernkarten
Modell für Sperrzeiten


Die Berechnung für die Sperrzeiten wurde ebenfalls über das Strategie-Pattern gelöst. Das System geht immer vom derzeitigen Zeitpunkt aus, benutzt die Ablagebox der Karte (1, 2, 3 ...) und verdoppelt die Wartezeit (Anzahl der Tage).

Übersicht der Wartezeiten:

Box Wartezeit [Tage]
0 1
1 2
2 4
3 8
4 16
5 32
... ...
public interface WaitingCalculator {

    /**
     * Get the Date until a card is unavailable. Date is calculated with be card
     * box number.
     *
     * @param boxNumber identify waiting days
     * @return Date until wait.
     */
    Date getWaitUntilDateForBox(int boxNumber);
}
public class BinaryWaiting implements WaitingCalculator {

    @Override
    public Date getWaitUntilDateForBox(final int boxNumber) {
        int daysToWait = binaryPow(boxNumber);

        Calendar c = new GregorianCalendar();
        c.setTime(new Date());
        c.add(Calendar.DAY_OF_WEEK, daysToWait);
        return c.getTime();
    }

    /**
     * Get the binary exponent numbers.
     *
     * @param exponent exponent
     * @return 1^exponent
     * @pre exponent >= 0
     */
    private static int binaryPow(final int exponent) {
        return 1 << exponent;
    }
}

Frontend Wicket

Einführung

Ziel des Frontends ist es eine benutzerfreundliche und strukturierte Benutzeroberfläche zu schaffen. Die gesamte Logik des Lernkartenportals ist auf dem RESTfull Service ausgelagert worden. Somit ist das Frontend nur zum Anzeigen und Weiterleiten von Daten entwickelt worden.

Das Frontend ist mit dem Framework Wicket realisiert. Wicket ist ein komponentenbasiertes Framework, welches auf Basis des MVC Patterns und einer starken Integration mit den Java-Konzepten entwickelt wurde.

Funktionalitäten

Das Wicket-Frontend verfügt in der Version vom 01.07.2013 folgende Funktionalitäten um mit dem Benutzer bzw. mit dem RESTfull Service zu interagieren:

  • Registrieren
    • von neuen Benutzern
  • Benutzererkennung
    • durch Email und Passwort
  • Verwalten von Modulen
    • Erstellen neuer Module
    • Bearbeiten von eigenen oder freigeschalteten Modulen
    • Löschen von eigenen oder freigeschalteten Modulen
  • Verwalten von Lektionen
    • Erstellen neuer Lektionen
    • Bearbeiten von eigenen oder freigeschalteten Lektionen
    • Löschen von eigenen oder freigeschalteten Lektionen
  • Verwalten von Karten
    • Erstellen neuer Karten, per Hand oder per Upload einer CSV Datei
    • Bearbeiten von eigenen oder freigeschalteten Karten
    • Löschen von eigenen oder freigeschalteten Karten
    • Download von Karten in einer CSV Datei
  • 3 verschiedene Lernverfahren
    • Kurzzeitlernen mit gemischten Karten
    • Kurzzeitlernen mit sortierten Karten
    • Phasenlernen
      • Der aktuelle Stand des Phasenlernens wird für jeden Benutzer individuell gespeichert
      • Wenn neue Karten zum Phasenlernen bereit sind, wird der Benutzer per Email drüber benachrichtigt
  • Freigeschaltete Module von anderen Benutzern können durch eine Abo-Funktion zur eigenen Liste hinzugefügt werden

Für Administratoren gibt es noch die folgenden Funktionalitäten:

  • Verwaltung der registrierten Benutzer
    • Sperren von Benutzern
    • Löschen von Benutzern
    • Zugriff und Verwaltung aller Module, Lektionen und Karten

Komponenten

Das Frontend wurde mit folgenden Komponenten entwickelt:

  • Apache Tomcat Version 7.0.34
  • Apache Maven 3.0.5
  • Apache Wicket 6.0
  • Eclipse Java EE IDE for Web Developers

Paketstruktur

Im Wicket-Projekt finden Sie folgende Paketstruktur:

src/main/java

|-- abonnement
|-- card
|     |-- csvcards
|-- denied
|-- forgotten
|-- impressum
|-- learning
|     |-- fast
|     |    |-- service
|     |-- phase
|          |-- service
|-- lection
|-- library
|-- login
|-- master
|-- models
|-- panels
|-- register
|-- settings
|-- user


Sitemap

Sitemap

Mit dieser Sitemap wird die hierarchisch Struktur des Lernkartenportals dargestellt.

Der Startpunkt ist die „Login“-Seite. Von hier aus kommt man zur „Registration“-Seite und zur „Password forget“-Seite.

Nach dem Login, wird die „Modul“-Seite angezeigt. Auf dieser befindet sich eine Übersicht, über die eigenen oder über abonnierte Module. Hier hat man die Möglichkeit neue Module zu erstellen, zu bearbeiten oder zu löschen. Durch einen Klick auf die „Subscribe Modul“-Seite werden einen alle öffentlichen Module angezeigt. Auf dieser Seite kann man nach Modulen von anderen Benutzern suche, sie abonnieren oder wieder aus der Abonniertenliste entfernen.

Nach der Auswahl eines Moduls, wird man auf die „Lection“-Seite verlinkt. Hier werden alle Lektionen des ausgewählten Moduls angezeigt. Diese lassen sich, wenn das Modul zum Bearbeiten freigegeben ist, bzw. das Modul dem Benutzer gehört nun bearbeiten, löschen und neu erstellen.

Die unterste Ebene der Hierarchie ist die „Card“-Seite. Hierher gelangt man nach der Auswahl einer Lektion. Auf der „Card“-Seite werden alle Karten einer Lektion angezeigt. Diese können nun genauso wie die Module und Lektionen neu erstellt, bearbeitet oder gelöscht werden, wenn der Benutzer die nötigen Rechte dazu hat. Auf der „Card“-Seite hat der Benutzer zudem die Möglichkeit Karten per CSV (http://de.wikipedia.org/wiki/CSV_(Dateiformat)) zu erstellen oder sie herunterzuladen.

Von der „Card“-Seite aus können nun die Lernverfahren gestartet werden. Also das Kurzzeitlernen (Fast Learning) mit sortierten und unsortierten Karten, sowie das Phasenlernen (Phase Learning) mit Hilfe des Lernboxensystems.

Für Administratoren gibt es auf der „Modul“-Seite noch einen extra Link zur Benutzerverwaltung. Auf der „User“-Seite werden alle Benutzer des Lernkartenportals angezeigt. Von hier aus können Benutzer gesperrt, gelöscht oder bearbeitet werden.


Design

Beschreibung

Das Design wurde überwiegend in blau entworfen. Dabei teilt sich das Design in drei Bereiche auf. Kopf-, Inhalts- und Fußbereich. Der Kopfbereich fungiert dabei als Titelträger und zentraler Navigationspunkt. Er beinhaltet die Hauptüberschrift, Navigation, Statusinformationen und einen Navigationspfad. Für den Kopfbereich wurde eine blaue Hintergrundfarbe gewählt. Der Inhaltsbereich stellt das Hauptmerkmal des Designs dar. Der Hintergrund wird für eine verbesserte Lesbarkeit mit einem leichten grauen Schleier überzogen. Die Textfarbe wird mit einem tiefen Grau dargestellt. Der Fußbereich wurde farblich an den Kopfbereich angepasst.

Aufteilung

Es wurde kein Framework für das Layout verwendet, stattdessen teilt sich das Layout in verschiedene Bereiche und Dateien auf. Typografische Eigenschaften, Formen, Buttons, Tabellen, Schriften und Eigenschaften für Mobilgeräte wurden auf jeweils eigene Dateien aufgeteilt.

Icons

Für das Darstellen von Icons wurden eigene Fonts statt Bilder verwendet. Um diese Fonts zu erweitern bietet sich die Seite (http://www.fontello.com) an. Für die richtige Darstellung der Fonts wurde ein eigener Bereich erstellt.

Buttons

Buttons werden farblich unterschieden. Bestätigungen werden in blau dargestellt. Abbrechende Buttons werden in Grau dargestellt. Während der Lernphase werden zusätzlich grüne und rote Buttons verwendet, um leichter und zügiger auf korrekte bzw. fehlerhafte Antworten eingehen zu können.


Responsive Design

Für die Darstellung auf verschiedenen Plattformen wurde Responsive Design verwendet. Derzeit werden Smartphones, Tablets, Laptops und Desktops unterstützt. Hochauflösende Displayauflösungen wie zum Beispiel das Retina Display von Apple werden nicht unterstützt. Hier muss der Nutzer eine manuelle Skalierung in seinem Browser vornehmen. Das Design stellt sich auf bestimme Displaybreiten ein. Dabei werden Portrait und Landschaftsformate unterschieden. Für Smartphones ab 320px bis 480px, Tablets 600px bis 1040px und Desktops 960 – 1040px. Stilistische Eigenschaften, die nur für das Mobiltelefon vorgesehen sind, finden sich im Mobile Bereich. Tabellen werden für eine korrekte Darstellung ohne Verlust von Informationen auf kleinen Displays umgebrochen. Auf kleinen Displays wird die Darstellung vertikal zentriert um einen besseren Lesefluss ermöglichen.

CSV-Datein

Lernkarten können als CSV-Datei auf der Lernkartenplattform hoch- und runtergeladen werden.

Diese Option findet sich in der Kartenansicht einer Lektion. Hier können unter Karten erstellen, mit Hilfe von CSV-Dateien. Karten auf die Lernkartenplattform hochgeladen werden. Oder direkt in der Kartenansicht runtergeladen werden.

Um Karten also hochzuladen muss vorher ein Modul und eine Lektion dafür angelegt werden. Das Modul und die Lektion werden dazu auch nicht mit abgespeichert. Die Karten werden mit den folgenden Attributen gespeichert: Position, Fragetext und Antworttext.

Format

Um ein erfolgreiches hochladen auf die Webseite zu gewährleisten, muss das folgende Format eingehalten werden.

Header:

POSITION, FRAGE, ANTWORT

Lernkarten:

Zahl, Fragetext, Antworttext
...