Benutzer:BirgitLachner/Script-Sammlung
Hier ein paar Scripts, die für ein interaktives Arbeitsblatt ganz praktisch sind.
Popup Tooltip
Dieses Tooltip-JavaScript von Walter Zorn erzeugt Tooltips, kleine Informations-Fensterchen, die über bestimmten HTML-Elementen (die ein onclick-Event bieten) am Mauszeiger erscheinen. Solch ein von wz_tooltip.js erzeugtes Tooltip kann auf vielfältige Weise konfiguriert werden, wenn Sie möchten (Farbe, Schrift, Rand, Schatten, verzögertes Erscheinen, u.v.m.). Die JavaScript Tooltips können einfachen Text, aber auch HTML enthalten wie beispielsweise Zeilenumbrüche, Tabellen oder Bilder. Das Tooltip JavaScript lässt sich unkompliziert in die Seite einbinden; zwei einfache Anpassungen in der HTML-Datei genügen, bis das erste Tooltip funktioniert (siehe Dokumentation.
Aufgaben ein- und ausblenden
Wenn zur Präsentation von mehreren Aufgaben, etwa zu einem GeoGebra-Fenster, nicht so viel Platz verbraucht werden soll, ist es praktisch, wenn man Aufgaben ein- und ausblenden kann. Dazu ist dieses Script von mir selber gedacht.
Folgendes muss man machen:
- Kopieren des JavaScript-Codes in den <head>-Tag
<script language="javascript" type="text/javascript">
var anzahl_aufgabe = 3
function ShowAufgabe(nr)
{
for (var i=0; i < anzahl_aufgabe; i++)
{
i = i + 1; // aus der Laufzahl die Aufgabennummer bestimmen
var cssaufgabennummer = "CSSAufgabe" + i ;
document.getElementById(cssaufgabennummer).style.display = "none";
i = i - 1;
}
var cssaufgabennummer = "CSSAufgabe" + nr;
document.getElementById(cssaufgabennummer).style.display = "block";
}
function verstecken()
{
for (var i=1; i < anzahl_aufgabe; i++) // bis auf Nr. 1 werden alle versteckt
{
i = i + 1; // aus der Laufzahl die Aufgabennummer bestimmen
var cssaufgabennummer = "CSSAufgabe" + i ;
document.getElementById(cssaufgabennummer).style.display = "none";
i = i - 1;
}
}
</script>
- Im JavaScript-Bereich muss die Anzahl der Aufgaben festgelegt werden.
var anzahl_aufgabe = 3 '''''(ohne Semikolon hinten!)'''''
- Im Bodytag wird die Funktion eingefügt, die alle Aufgaben bis auf die erste zunächst einmal versteckt.
<body onload=verstecken()>
- Anzeigen der Knöpfe, mit denen die Aufgaben ausgewählt werden.
<FORM name="Aufgaben"> Wähle die Aufgabe aus: <INPUT type="button" name="Aufgabe1" value="Nr. 1" size="5" onclick="ShowAufgabe(1)"> <INPUT type="button" name="Aufgabe2" value="Nr. 2" size="5" onclick="ShowAufgabe(2)"> <INPUT type="button" name="Aufgabe3" value="Nr. 3" size="5" onclick="ShowAufgabe(3)"> </FORM>
- Wollen sie mehr Aufgaben verwenden, muss beachtet werden, dass die Parameter angepasst werden, also „name“, „value“ (der auf dem Knopf erscheinende Text), „onclick“ (dadurch wird die Funktion aufgerufen, die das Erscheinen bzw. Verstecken regelt).
- Der Aufgabentext jeder Aufgabe muss in div-Tags reingeschrieben werden.
<div id = "CSSAufgabe1" class="aufgabenformat">Hier steht der Aufgabentext 1 ...</div> <div id = "CSSAufgabe2" class="aufgabenformat">Hier steht der Aufgabentext 2 ...</div> <div id = "CSSAufgabe3" class="aufgabenformat">Hier steht der Aufgabentext 3 ...</div>
- Angepasst werden muss beim Kopieren die Zahl bei dem Parameter „id“. Falls die Aufgaben ein spezielles Format haben sollen, kann dies per CSS (im Head-Bereich) geschehen.
<style type="text/css">
div.aufgabenformat
{
border: black 1px solid;
margin: 20px;
... oder andere Formatierungen
}
</style>
