Schülerauswahl


Stufe I:
Schreiben Sie ein Programm zur zufälligen Auswahl eines Schülers bzw. einer Schülerin entsprechend Klassenbuch!
Das Programm dient z.B. dazu, dass die Lehrkraft einen Schüler oder eine Schülerin der Klasse auswählen kann, der/die dann etwas zu tun bekommt (z.B. Lösung vorstellen o.ä.).
  1. Legen Sie ein Array mit den Namen der Schüler/innen an.
  2. Schreiben Sie ein Programm, welches einen Namen aus dem Array auswählt und ausgibt!

Die Anwesenheitseinträge im Klassenbuch sehen etwa wie folgt aus:
KlassenbuchAnwesenheit.png

Stufe II:
  1. Starten Sie eine Javascript-Funktion durch Anklicken eines Buttons, damit beliebige Wiederholungen der Auswahl möglich sind.
  2. Geben Sie den ausgewählten Schüler in einem <div>-Tag aus (innerHTML).
  3. Berücksichtigen Sie in Ihrem Programm, dass nicht alle Schüler jeden Tag anwesend sind (siehe Beispiel!). Verwenden Sie z.B. zum Speichern der An-/Abwesenheit ein weiteres Array.
  4. Verwenden Sie zur Eingabe der fehlenden Schüler z.B. ein Formularfeld.
  5. Passen Sie das Programm auf die Schüler/innen Ihrer Klasse an!

Stufe III:
  1. Erweitern Sie Ihr Programm um die Schüler einer weiteren Klasse.
  2. Erweitern Sie Ihr Program um eine Auswahlliste, in der mehrere Klassen zur Auswahl stehen.
    (Eigenrecherche zu HTML-Listen notwendig).
  3. Passen Sie das Layout der Seite an die Gestaltung der Seiten der Schule an (www.oszkim.de).
    Die aktuellen CSS-Formatierungen finden Sie hier:
    http://www.oszkim.de/home/themes/osz3/style.css

Hilfen

Screenshot

z. B.
schuelerauswahl.jpg

Struktogramm

z.B.

schuelerauswahl2.JPG

Teil-Lösungen

Wie gibt man eine Liste aller Schüler in der HTML-Seite aus?
AlleSchueler.html
Wie kann man Checkboxen für alle Schüler dynamisch erstellen entsprechend der Länge des Arrays?
dynamiccheckbox.html
...


Bewertung

Alle Bewertungspunkte unter Formales und Funktion sind gleich gewichtet. Die Anzahl der positiven Bewertungen wird in Prozente umgerechnet und entsprechend MEA-Schlüssel (Welche Prozente ergeben welche Note?) mit einer Note bewertet.

Formales

  1. Das Programm wurde unter einem sinnvollen Namen im eigenen Homeverzeichnis gesichert!
  2. Das Programm kann ausgeführt werden, stürzt nicht ab und hängt sich nicht auf (z. B. Endlosschleife).
  3. Der Anteil sinnvollen Quelltexts ohne Leerzeilen ist länger als 50 Zeilen.
  4. Eine Validierung des HTML-Teils ergibt weniger als 5 Fehler.
  5. Die Formatierungen wurden mit Hilfe von CSS durchgeführt.
  6. Die Programmier-Richtlinien wurden meistens eingehalten (Einrückungen und Kommentierung, sinnvolle Benennung von Variablen).
  7. Arrays wurden eingesetzt und korrekt verwendet.
  8. Dem Nutzer wird durch den Aufbau der Seite klar, welche Eingaben zu erfolgen haben und wie das Programm zu bedienen ist.
  9. Verwendung korrekter Rechtschreibung.

Funktion

  1. Ein Schüler wird zufällig ausgewählt (Nummer oder Name).
  2. Die Auswahl kann beliebig oft wiederholt werden (z.B. Start über Button).
  3. Fehlende Schüler können von der zufälligen Auswahl ohne Änderung des Quellcodes ausgeschlossen werden (Eingabe von Nummer in der Liste oder Namen).
  4. Die Eingaben erfolgen über Formularfelder.
  5. Die Ausgaben erfolgen über ein <div>-Tag mit eindeutiger ID, z.B. "id = ausgabe".

Nice to have

(keine Extra-Punkte, sondern Bonus, falls woanders welche fehlen)
  1. Die Menge der auszuwählenden Schüler kann angegeben werden (Formularfeld oder prompt).
  2. Die Namen der Schüler können eingegeben werden bzw. auch die Namen von Gästen.
  3. Dem Nutzer wird bei seinen Eingaben geholfen durch weiterführende Hilfstexte.
  4. Besonders schönes Design der Seite, z. B. abgerundete Buttons, siehe hier: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers oder hier: http://www.onextrapixel.com/2009/04/24/5-different-tutorials-of-creating-dynamic-css-round-corners-link-buttons/
  5. Der Javascript-Code wurde in eine eigene Datei ausgelagert und z.B. wie folgt eingelesen:
    <script type="text/javascript" src="myCode.js"></script>
  6. Der CSS-Code wurde in eine eigene Datei ausgelagert und z.B. wie folgt eingelesen:
    <link href="myStyles.css" rel="stylesheet" type="text/css">

Sinnvolle Testfälle

Lösungen mit Checkboxen:
  1. Was passiert in Ihrem Programm, wenn alle Schüler als abwesend markiert werden und der Auswahlbutton gedrückt wird?
    Endlosschleife? Fehlermeldung?
  2. ...

Hinweise zur Abgabe

  1. Der Quelltext ist ohne Tabs abzuspeichern (siehe Editoreinstellungen)
  2. Lassen Sie sich vom Browser den Quelltext anzeigen (Sourceview)
  3. Die Einhaltung der Programmier-Richtlinien wird nach diesem Ausdruck bewertet!









... keine Ahnung ... keine Ideen ... Hilfe benötigt?
... hier folgen ein paar mögliche Lösungen ...









Musterlösungen

1) mit Auswahlknöpfen

...
       // globale Variablen
       var klasse = new Array( "Peter", "Theo", "Berta", "Lukas" );
 
 
       function schueler()
       {
         for(var i=0; i<klasse.length; i++ )
         {
           // document.getElementById("ausgabe").innerHTML += klasse[i] + "<br>";
           // Schüler 1 <input type="checkbox" name="anwesend" checked><br>
           document.getElementById("anwesend").innerHTML
             += (i+1) + " " + klasse[i]
             + " <input type='checkbox' name='anwesend' checked><br>";
         }
 
         /*
           Schüler 1 <input type="checkbox" name="anwesend" checked><br>
           Schüler 2 <input type="checkbox" name="anwesend" checked><br>
           Schüler 3 <input type="checkbox" name="anwesend" checked>
         */
       }
 
       function zufall()
       {
         var zufaellig;
         var maxversuch=100;
 
         do
         {
           zufaellig = Math.floor( Math.random() * klasse.length );
         } while(
               (document.weristda.anwesend[zufaellig].checked)
                     == false && (maxversuch-- > 0)              );
 
         if( maxversuch <= 0 )
         {
           document.getElementById("ausgabe").innerHTML = "Kein Schüler anwesend!";
         }
         else
         {
           document.getElementById("ausgabe").innerHTML = klasse[zufaellig]
         }
       }
 
...
 
<body onload="schueler()">
 
   <h1>Schülerauswahl</h1>
 
   <h2>Anwesend</h2>
   <form name="weristda">
     <input type="button" value="Auswahl" onclick="zufall()">
     <div id="anwesend"></div>
   </form>
 
   <h2>Ausgewählt</h2>
   <div id="ausgabe"></div>
   ...

2) Split Lösung

...
       // globale Variablen
       var klasse = new Array( "Peter", "Theo", "Berta", "Lukas" );
       var fehlend;
 
       function schueler()
       {
         for(var i=0; i<klasse.length; i++ )
         {
           // document.getElementById("ausgabe").innerHTML += klasse[i] + "<br>";
           // Schüler 1 <input type="checkbox" name="anwesend" checked><br>
           document.getElementById("liste").innerHTML
             += (i+1) + " " + klasse[i] + ", ";
         }
       }
 
       function zufall( eingabefehlend )
       {
         var zufaellig;
         var maxversuch=100;
         var fehlend = eingabefehlend.split (',');
         var fehlt=false;
         // alert(fehlend);
 
         do {
           fehlt=false;
           zufaellig = Math.floor( Math.random() * klasse.length );
           document.getElementById("ausgabe").innerHTML = klasse[zufaellig];
           for(var i=0; i<fehlend.length; i++)
           {
             if( (zufaellig+1) == fehlend[i] )
             {
               fehlt=true;
             }
           }
         } while( fehlt==true );
 
       }
 
...
 
<body onload="schueler()">
 
   <h1>Schülerauswahl</h1>
 
   <h2>Anwesend</h2>
   <div id="liste"></div>
   <form name="weristda">
     Fehlende Schüler (Nummern):
     <input type="text"
            name="fehlend"
            size="10"
            maxlength="50"><br>
     <input type="button" value="Auswahl" onclick="zufall(weristda.fehlend.value)"><br>
   </form>
 
   <h2>Ausgewählt</h2>
   <div id="ausgabe"></div>
   ...