• de

Strategien zur Überprüfung des Teilnehmercodes

Der Prüfcode für Übungen ist im Prinzip JavaScript-Code.
In diesem Abschnitt wird erklärt, wie du den Code der Teilnehmer mithilfe von JavaScript überprüfen kannst. Wenn du dich mit JavaScript nicht genügend auskennst, empfehlen wir dir die ausgezeichnete JavaScript-Referenz des Mozilla Developer Networks.

JavaScript-Code überprüfen
In diesem Abschnitt wird beschrieben, wie du den JavaScript-Code deiner Teilnehmer auf verschiedene Aspekte hin überprüfen kannst.
Prüfen, ob eine Variable deklariert wurde
Du kannst mit der Funktion typeOf() prüfen, ob eine Variable deklariert wurde.
// Prüfen, ob eine Variable 'score' deklariert wurde
if(typeof(score)=="undefined") {
return "Leider nicht richtig! Hast du eine Variable mit dem Namen 'score' deklariert?";
}

Prüfen, ob der Variablen ‘score’ ein numerischer Wert zugewiesen wurde
Du kannst mit der Funktion typeOf() prüfen, ob einer Variable ein numerischer Wert zugewiesen wurde.
// Prüfen, ob die Variable 'score' einen numerischen Wert enthält
if(typeof(score)!="number") {
return "Leider nicht richtig! Hast du 'score' einen numerischen Wert zugewiesen?";
}

Prüfen, ob eine Variable auf ein Array verweist
Du kannst mit der Funktion Array.isArray() prüfen, ob eine Variable auf ein Array verweist.
// Prüfen, ob die Variable 'arr' auf einen Array-Typ verweist
if(!Array.isArray(arr)) {
return "Leider nicht richtig! Die Variable 'arr' muss vom Typ "Array" sein.";
}

Prüfen, ob die Variable ein Objekt ist
Du kannst mit der Funktion typeOf() prüfen, ob eine Variable vom Typ ‘object’ ist.
// Prüfen, ob die Variable 'obj' vom Typ 'object' ist
if(typeof(obj)!="object") {
return "Leider nicht richtig! Die Variable 'obj' muss ein Objekt sein.";
}

Prüfen, ob eine bestimmte Funktion deklariert wurde
Du kannst mit der Funktion typeOf() prüfen, ob eine Funktion deklariert wurde.
// Prüfen, ob 'orangeCost' eine Funktion ist
if(typeof(orangeCost)!="function") {
return "Leider nicht richtig! Hast du eine Funktion mit dem Namen 'orangeCost' definiert?";
}

Prüfen, wie viele Parameter von einer Funktion angenommen werden
Du kannst mit der Eigenschaft length einer Funktion prüfen, wie viele Parameter die Funktion annimmt.
// Prüfen, ob die Funktion 'timesTwo' genau einen
// Parameter annimmt
if(timesTwo.length!=1) {
return "Leider nicht richtig! Die Funktion 'timesTwo' muss einen Parameter annehmen.";
}

Größe eines Arrays prüfen
Du kannst die Größe eines Arrays mit seiner Eigenschaft length prüfen.
// Prüfen, ob das Array 'arr' die Größe 0 aufweist
if(arr.length!==0) {
return "Leider nicht richtig! Das Array 'arr' muss die Größe 0 aufweisen.";
}

Prüfen, ob ein Objekt eine bestimmte Eigenschaft enthält
Du kannst mit der Funktion typeOf() prüfen, ob ein Objekt eine bestimmte Eigenschaft enthält.
// Prüfen, ob das Objekt 'person' die Eigenschaft 'name' enthält
if(typeof(person.name)=="undefined") {
return "Leider nicht richtig! Das Objekt 'person' enthält keine Eigenschaft 'name'.";
}

An die Konsole ausgegebene Nachrichten prüfen
Du kannst mit der benutzerdefinierten Klasse consoleOutput die Nachrichten überprüfen, die von einem Teilnehmer an die Konsole ausgegeben wurden. Mit „consoleOutput“ können sowohl die Anzahl der Nachrichten als auch der Inhalt einzelner Nachrichten überprüft werden, wie die folgenden Code-Snippets zeigen.
// Prüfen, ob Nachrichten an die Konsole ausgegeben wurden
if(consoleOutput.loggedMessages.length===0) {
return "Leider nicht richtig! Es wurden keine Nachrichten an die Konsole ausgegeben.";
}

Du kannst auch den Inhalt einer bestimmten Nachricht überprüfen. Mit dem folgenden Code kannst du prüfen, ob die erste an die Konsole ausgegebene Nachricht aus dem String „Keine Eile“ besteht.
// Inhalt der ersten Nachricht prüfen
if(consoleOutput.loggedMessages[0]!="Keine Eile" ) {
return "Leider nicht richtig! Die erste Nachricht muss 'Keine Eile' lauten.";
}

HTML-Code überprüfen
In diesem Abschnitt wird beschrieben, wie du den eingereichten HTML-Code deiner Teilnehmer auf verschiedene Aspekte hin überprüfen kannst.
Prüfen, ob ein bestimmtes HTML-Tag erstellt wurde
Du kannst mit der Funktion document.querySelectorAll() oder document.getElementsByTagName() prüfen, ob ein HTML-Element im DOM vorhanden ist. Die folgenden Beispiele zeigen, wie diese Funktionen verwendet werden.
// Prüfen, ob der Teilnehmer ein Tag
in einem Dokument erstellt hat,
// das zuvor kein Tag enthielt
var s=document.querySelectorAll("p");
if(s.length===0) {
return "Leider nicht richtig! Du hast kein Tag
auf der Seite erstellt.";
}


// Prüfen, ob der Teilnehmer ein Tag
in einem Dokument erstellt hat,
// das zuvor kein Tag enthielt
var p=document.getElementsByTagName("p");
if(p.length===0) {
return "Leider nicht richtig! Du hast kein Tag
auf der Seite hinzugefügt.";
}

Text in einem Tag prüfen
Du kannst den Inhalt eines Tags mit der Eigenschaft .text des Elements prüfen.
// Titeltext prüfen
var s=document.querySelector("title");
if(s.text.trim()!="Meine Webseite") {
return "Leider nicht richtig! Der Titel der Seite muss 'Meine Webseite' lauten.";
}

Prüfen, ob ein Element ein bestimmtes untergeordnetes Element enthält
Du kannst mit der Eigenschaft .children des Elements prüfen, ob es ein bestimmtes untergeordnetes Element enthält.
// Prüfen, ob ein anchor-Tag ein Bild enthält
var s=document.querySelector("a");
if(s.children[0].tagName!="IMG") {
return "Leider nicht richtig! Der Link muss ein IMG enthalten.";
}

// Prüfen, ob ein anchor-Tag ein UL-Element enthält
var s=document.querySelector("a");
if(s.childNodes[0].tagName!="UL") {
return "Leider nicht richtig! Der Anchor muss ein UL-Tag enthalten.";
}

Prüfen, ob zwei gleichgeordnete Elemente aneinandergrenzen
Du kannst mit der Eigenschaft .previousElementSibling des Elements prüfen, ob sich ein bestimmtes gleichgeordnetes Element direkt davor befindet.
var s=document.querySelector("ul");
if(s.previousElementSibling==null ||
s.previousElementSibling.nodeName!="P") {
return "Leider nicht richtig! Hast du daran gedacht, ein

-Tag vor das

    -Tag zu setzen?";
    }

    ID eines Elements prüfen
    Du kannst mit dem Attribut .id eines Elements prüfen, ob es über eine ID verfügt und ob dies die erwartete ID ist.
    // Element abrufen
    var s=document.querySelector("p");
    // Prüfen, ob das Element über eine ID verfügt
    if(!s.id) {
    return "Hast du dem neuen Absatz eine ID zugewiesen?";
    }
    else if(s.id!="sachlich"){
    return "Leider nicht richtig! Hast du dem neuen Absatz eine ID mit dem Namen 'sachlich' zugewiesen?";
    }
    return true;

    CSS-Code überprüfen
    In diesem Abschnitt wird beschrieben, wie du den CSS-Code und die Stilzuweisung deiner Teilnehmer auf verschiedene Aspekte hin überprüfen kannst.
    Prüfen, ob ein bestimmter Stil auf ein Element angewendet wurde
    Du kannst mit der Eigenschaft .style des Elements oder mit der Funktion window.getComputedStyle() prüfen, ob ein Stil auf das Element angewendet wurde, wie in den folgenden Beispielen gezeigt wird.

    var s=document.querySelector("h1")
    if(s.style.color!="green") {
    return "Leider nicht richtig! Hast du daran gedacht, den h1-Header grün zu formatieren?";
    }
    if(s.style.fontSize!="16px") {
    return "Die Schriftgröße deines Headers beträgt nicht 16px.";
    }

    var d=document.querySelector("div");
    if(window.getComputedStyle(d,null).getPropertyValue("width")!="100px") {
    return "Leider nicht richtig! Hast du die DIV-Breite in der CSS-Datei auf 100px gesetzt?";
    }

    Prüfen, ob ein bestimmter Stil mindestens einem Element zugewiesen ist
    So kannst du überprüfen, ob die Links auf einer Seite von keinem anchor-Tag unterstrichen werden.
    var links=document.getElementsByTagName("a");
    for(var i=0;i