 Begriffe raten 01
Ein kleines Spielchen in JavaScript. Für ihre Seite könnten sie die zu erratenden Begriffe dem Seitenthema entsprechend wählen: Bäume, Pferderassen, Gewürze, Sportarten, Schule, Hunderassen, Popstars, Filmtitel, Computerbauteile, Automarken, Vogelarten ...
|
|
Begriffe raten - 6 Versuche mit Hilfestellung
 19.04.2009, Scriptanpassung + CSS-Änderungen
Ich könnte mir einen Einsatz auch als Lernspiel in der Grundschule vorstellen: Begriffe zum Projekt 'Wasser', Länder Europas, Kartoffelgerichte, Milchprodukte, Fahrradteile, ...
Funktion
Suchbegriffe sind in einem Register abgelegt und sollen erraten werden.
Das Thema (hier 'Farbnamen') wird in einer Variablen abgelegt und in die Spielbeschreibung automatisch einbezogen. Siehe oben, der Variableninhalt «Farbnamen» taucht im Text über dem Eingabeformular zwei mal auf.
Suchbegriffe
Suchbegriffe sind im Array 'Begriffe' abgelegt, die Anzahl der Begriffe (Länge des Arrays) wird automatisch ermittelt. Die ermittelte Anzahl erscheint im erklärenden Text: Es sind 34 Farbnamen eingetragen
var Thema = "Farbnamen";
// Array der Suchbegriffe
var Begriffe = new Array( "Rot","Blau","Grün", ... ,"Violett","Schwarz",);
var AnzahlBegriffe = Begriffe.length;
zufällige Auswahl
Eine Zufallzahl wird ermittelt (z.B. 12) und das Element an genau dieser (12.) Stelle des Arrays wid als Suchbegriff festgelegt und in der Variable 'temp' abgelegt.
Beispiel für die Zufallswerte beim Öffnen dieser Seite:
In 6 Durchläufen wird die Eingabe im Textfeld mit dem Suchbegriff verglichen.
Anzeige während des Spielverlaufs
Nach den ersten drei Fehlversuchen wird ein Hilfstext angezeigt:
- erster Buchstabe des gesuchten Begriffs
- letzter Buchstabe des gesuchten Begriffs
- Anzahl der Zeichen des gesuchten Begriffs
Während des Spiels werden in den 3 Feldern diese Informationen angezeigt:
- Anzahl der Lösungsversuche für den jeweiligen Suchbegriff
- Anzahl der Spiele insgesamt
- Anzahl der gelösten Spiele insgesamt
Anpassungen
Wenn sie das Spiel anpassen und für en anderes Thema einsetzen möchten, sind Änderungen lediglich an 2 Stellen notwendig.
1) Tragen sie das Thema bei der Variablen 'Thema' ein.
2) Die Suchbegriffe tragen sie im Array jeweils durch ein Komma getrennt ein. Alle Begriffe stehen in Anführungszeichen!
// Thema eintragen
var Thema = "Farbnamen";
// Suchbegriffe eintragen, Groß- Kleinschrift wird bei der Prüfung ignoriert
var Begriffe = new Array( "Rot","Blau","Grün","Gelb", ...
Das wars schon, mehr müssen sie nicht tun!
Anpassungen
Alle Formatierungen sind nun über CSS-Anweisungen festgelegt. Ich habe den CSS-Klassen selbsterklärende Bezeichner gegeben (Haupttabelle,TextInnen,Eingabefeld,Spielstand, ...)
So sollte es einfach sein, die entsprechenden CSS-Anweisungen zu identifizieren.
Beispiel: Hintergrundfarbe (Beispiel 01):
Sie können die Hintergrundfarbe für die alles umfassende Tabelle ändern.
.Haupttabelle {
border: 1px solid #000000;
background-color:#F4FFF4);
font-family: Verdana,Arial,sans-serif;
color:#FFFFFF;
font-size:11px;
font-weight:normal;
}
Stattdessen könnten sie aber auch ein Hintergrundbild einbinden (Beispiel 02):
Ein Hintergrundbild kann im Code für die alles umfassende Tabelle eingebunden werden.
.Haupttabelle {
border: 1px solid #000000;
background-image:url(bg-02.jpg);
font-family: Verdana,Arial,sans-serif;
color:#FFFFFF;
font-size:11px;
font-weight:normal;
}
bezeichnung des Arrays
Wenn sie den Arraynamen ändern (was aber nicht erforderlich ist), muss das im Scriptcode an vier Positionen eingetragen werden.
// Thema eintragen
var Thema = "Farbnamen";
// Suchbegriffe eintragen, Groß- Kleinschrift wird bei der Prüfung ignoriert
var Begriffe = new Array( "Rot","Blau","Grün","Gelb", ...
var AnzahlBegriffe = Begriffe.length;
var Beispiel = Begriffe[0];
// hier muss der Array-Name verwendet werden
temp = Begriffe[Zufall];
Variablen
verwendete Variablen:
| Name |
Beschreibung |
Verwendung |
| Thema |
Wasser |
Thema des Quiz eintragen |
| Begriffe |
Name des Arrays |
(kommt 4 mal vor) |
| AnzahlBegriffe |
Anzahl der Elemente des Arrays |
wird automatisch ermittelt |
| temp |
Variable für den Suchbegriff |
wird in jedem Durchgang zufällig bestimmt |
|
|
Home • Spielkram • Twins V01
Beispiel 01
BEISPIEL 01