########## # ### # M a t h e m a t i k in F i r e f o x ( M i F ) # # # ==================================================== ## # # # # # geiring@gmx.de 2007, 2014-11-24 20:47 # # # # # # ohne jegliche Gewährleistung # ###### Die ästhetischere Darstellung von mathematischen Symbolen in einem Browser als hier in dieser Handreichung ist durch MathML (Mathematical Markup Language) prinzipiell gegeben. Im Alltag des Lehrbetriebs ist die direkte Handhabung der Elemente von MathML bei der Erstellung von Dateien für den Browser aber viel zu umständlich. Ein Rechtsklick in Firefox auf eine mathematische Formel, die mit MathML generiert wurde, zeigt in Option "MathML-Quelle anzeigen", wie komplex die Low-Level-Darstellung in einem Browser ist. Es sind einige Tools entwickelt worden, z.B. ASCIIMathML.js von Prof. Jipsen in den USA (-> Quellen), die alltagstauglich für den Schulbetrieb und ausbaubar sind. ASCIIMathML.de.js ist eine Version von ASCIIMathML.js mit weiteren praktischen Funktionen, insbesondere die Möglichkeit der animierten Zeichnung ohne weitere Datei mit minimalem Schreibaufwand, mit Zeichnen von Funktionen- scharen, 3D, mit Bäumen, intuitiven Matrixstrukturen mit Leerstellen, usw. Für Studenten ist es wichtig, mit Mustern (z.B. Minimal.htm, S. 3) und ganz wenigen Tastatureingaben durch Kopieren und Ändern schnell sichtbaren Erfolg zu haben, um dabei zu bleiben und zu zeitaufwändigeren Darstellungen motiviert zu werden. Am Muster Minimal.htm sieht man auch, dass ASCIIMathML.de.js in eine HTML-Datei eingebaut wird, wodurch alle seine Funktionen dann verfügbar sind. Die Einführung in dieses Tool ASCIIMathML.de.js wird mündlich (face to face) im Computerraum gegeben; schriftlich wäre sie zu umfangreich und zeitraubend in der Aneignung. Notwendig für die selbständige Arbeit des Studenten ist ein schneller Zugang zu den einzelnen, oft als kryptisch empfundenen Funktionsbe- zeichnungen, nachdem er/sie die Funktionsweise gesehen hat und eine mündliche Einführung bekommen hat. Dies ist der Zweck der vorliegenden Seiten. Aus sich heraus sind sie nicht verständlich. In Proportionalschrift werden minimale Zeichen wie ,.:`' fast verschluckt und die Ausarbeitung hätte fünf Mal so viel Zeit gekostet und wäre nie entstanden; deshalb diese hässliche Schriftart mit fester Zeichenlänge. Animation bedeutet hier den Live-Abruf der (lange) vorher und an einem anderen Ort notierten Handlungssequenzen. Es sind Bilder, Episoden und Filmsequenzen, die in unserem Gedächtnis leichter haften bleiben als Texte und Zahlen; daher dienen Animationen dem Lernen und Einprägen. Sie laufen hier nicht selbst ab, sondern sind in Eigenzeit per Mausbewegung steuerbar und wiederholbar. Aus einem toten Mathematik-Lehrbuch eine Bildsequenz vor dem inneren Auge zu generieren, fällt vielen Studenten schwer; Animationen liefern diese Bildse- quenzen, die zum Verständnis vieler mathematischer und naturwissenschaft- licher Sachverhalte notwendig sind. Die mathematischen Leitideen Algorithmus, Variable, Raum & Form, Funktion, Vernetzen und Modellieren aus den Bildungsstandards werden bei der Beschäftigung mit dem vorliegenden Material besonders gefördert. Wir wissen ohne zu überlegen, ob wir uns in einem Gebäude befinden oder im Freien oder in einem Auto; im Computer verlieren wir uns häufig in den verschiedenen Systemebenen. Wenn ein Fehler auftritt und die Schreibweise stimmt (einschließlich Groß- und Kleinschreibung), dann sollte man sich als Nächstes fragen: Auf welcher Ebene bin ich denn eigentlich hier? Diese Systemebenen oder Stufen oder Klammerungen sind zu unterscheiden: 1. Windows XP und Windows 7: Die Computersysteme, die Lehrkräften und Schülern an unserer Schule zugänglich sind. Editor Notepad und Browser Firefox rufen wir in diesen Systemen - und in keinen anderen - auf. 2. HTML: Fast alles findet innerhalb von HTML (Hyper Text Markup Language) statt, der elementaren, internetfähigen Sprache eines Browsers. Ein HTML-Dokument hat meist zwei Teile, den (Dokumentenkopf) und den . Alle HTML-Tags sind an <...> oder erkennbar. Im steht, wo der Browser die Datei ASCIIMathML.de.js finden kann und im steht auch die Animationsfunktion function Animation(evt) { t = Math.min(Math.max(getX(evt), -2.5), 3.0); }, die auf viele Animationen anpassbar ist. Es genügt ein primitiver -> Editor, um HTML-Dateien zu schreiben. 3. `...`: Innerhalb von von HTML ist flache mathematische Schreibweise zugänglich, wenn im -Teil ASCIIMathML.de.js eingebunden wurde. Mit `...` können Formeln geschrieben werden, z.B. wird der Bruch `a/b` im Browser mit waagrechtem Bruchstrich dargestellt. `rArr` wird im Browser zum Doppelpfeil nach rechts, `sqrt(2)` wird zu Wurzel 2 mit dem richtigen Wurzelsymbol. Solange in den schulüblichen Betriebssystemen XP und 7 keine dehnbaren Zeichensätze integriert sind, funktionieren viele mathematische Darstellungen nicht ohne Vorbereitungen. Das Hochkomma von `...` ist das Zeichen zwischen der ß-Taste und der Backspace-Taste (Zeichen löschen und eins nach links gehen) auf der deutschen Computertastatur. Zuvor muss die Shift-Taste (Umschalttaste) niedergehalten werden und bei niedergehaltener Shift-Taste muss die `-Taste getippt werden. Danach muss die Leertaste getippt werden. Mit anderen Hochkommazeichen werden die mathematischen Formeln nicht umgesetzt. Das Wurzelzeichen ist ein ganz anderes Zeichen als der Buchstabe w, weil es über einen ganzen Term hinweg gedehnt werden können muss, und weil im Inneren des Wurzelzeichens andere Zeichen stehen können. Im w-Zeichen kann kein anderes Zeichen stehen. Die dehnbaren Zeichensätze müssen im Betriebssystem abgelegt werden, was in Schulen ohne Administratorhilfe nicht möglich ist, weil in Netzwerken der Zugang zu Systemänderungen durch den einfachen Benutzer wie Lehrkraft oder Schüler gesperrt ist. Zuhause jedoch hat man meist ein Einzelplatzsystem und ist meist sein eigener Administrator. Man sucht im Internet die kostenlose Datei "mit-mathml-fonts-1.0-fc1.msi", mit der man direkt die dehnbaren Zeichensätze ins eigene System integrieren kann, wenn man Administrator- Rechte hat. "mit" ist das Acronym für das renomierte Massachusetts Intitute of Technology in Cambridge im Osten der USA (web.mit.edu). 4. agraph ... endagraph: Innerhalb von von HTML können SVG-Funktionen (SVG = Scalable Vector Graphics) des Browsers Firefox angesprochen werden. Das Klammerpaar agraph ... endagraph erlaubt die schnelle Erzeugung von Funktionsdiagrammen und Körperdarstellungen, die bei direkter Ansprache von SVG viel mehr Zeitaufwand bedeuten würden. Die Syntax ist Javascript. "in agraph" meint im Folgenden: innerhalb von agraph ... endagraph. 5. Animation(evt) im HEAD-Teil des HTML-Textes befindet sich vordefiniert die Javascript- Funktion function Animation(evt) { t = Math.min(Math.max(getX(evt), -2.4), 2.2); // hier folgen Ihre animierten Objekte } In den Anweisungsteil { ... } dieser JavaScript-Funktion können weitere Anweisungen (und Deklarationen) eingefügt werden. Fig. 11 und 13 (im farbigen Cover dieses Textes: geiring.de/MiF-Figuren.pdf) zeigen solche Anweisungslisten. function Animation ist dem Event (evt) Mausbewegung zugeordnet und ändert den Wert der Variablen t laufend mit der horizontalen Bewegung der Maus, solange sich der Mauszeiger über dem Diagramm bewegt. Die (änderbaren) Zahlen -2.4 und 2.2 definieren ein Intervall und sorgen so dafür, dass Werte außerhalb des Intervalls keine Fehlermeldungen und Unterbrechungen produzieren. Maus und Mauszeiger werden nicht unterschieden. 6. FragAnt, FA.exe Einige der beschriebenen Funktionen beziehen sich auf das Entwicklungssystem FragAnt, mit dem browserfähige Frage-Antwort-Spielchen aus TXT-Dateien automatisch erzeugt werden können. Diese Fragen und Antworten können Formeln (innerhalb von ` ... `) oder Diagramme (innerhalb von agraph ... endagraph) enthalten, ebenso einige HTML-Elemente. Mit FragAnt kann man schnell mathematische Lerninhalte ins Internet stellen. Zum Diagnostizieren und Lernen von Vokabelkenntnissen und beliebigem Faktenwissen ist FragAnt ebenfalls im Schulalltag gut geeignet. Der Hersteller von Frage-Antwort- Spielchen mit FragAnt wird von Gestaltung der Internetseite abgeschirmt, er muss "nur" die Syntax für einfachen HTML-Text und die ASCIIMathML.de.js- Syntax für mathematische Inhalte und Graphen beachten. Es genügt somit ein primitiver Editor, um im Browser für das Internet schön gestaltete Formeln zu erzeugen, Diagramme zu produzieren, Animationen zu schaffen, und Frage-Antwort-Spiele zeitsparend herzustellen, durch einfaches Aneinanderreihen von wenigen Buchstaben und Zeichen der Tastatur. `int_-1^2 3e^(-1/2 x^2) dx` genügt, um einen relativ aufwendigen Integral-Term flach einzugeben. agraph plot(sin(x)) endagraph genügt, um eine Sinuskurve in einem x-y-Koordinatensystem zu zeichnen (Fig. 5). Die zusätzliche Zeile line([t,0], [t, sin(t)], "vertical"); innerhalb der Funktion Animation(evt) genügt, um in einer animierten Zeichnung die Abfolge der Funktionswerte bei der Sinusfunktion zu zeigen, indem man die Maus (= den Mauszeiger) waagrecht über die Zeichnung bewegt. Die Minimalversion einer Animation "Minimal.htm", um das soeben Genannte zu demonstrieren (Fig. 5), würde also folgenden flachen Text beinhalten: ---------------- Minimal.htm ------------------------------------- agraph plot(sin(x)); endagraph int_-1^2 3e^(-1/2 x^2) dx = `int_-1^2 3e^(-1/2 x^2) dx` ---------------- Minimal.htm ------------------------------------- Wenn keine Sinuskurve entsteht oder kein schöner Integralterm entsteht im Firefox-Browser, dann * fehlt die Datei ASCIIMathML.de.js im gleichen Verzeichnis wie die Textdatei Minimal.htm oder * im Betriebssystem fehlen die mathematischen (dehnbaren) Zeichensätze oder * es liegt ein Tippfehler vor. Nun der Hauptteil zum schnellen Finden der mehr oder weniger seltsamen Zeichen und Bezeichnungen in mindestens sechs unterschiedlichen Kontexten: > Zeichen für Mausklick > Start Mausklick linke Maustaste auf Start in der Taskleiste in Windows XP > Start > Programme > Zubehör > Editor in Windows XP > Start > Alle Programme > Accessories > Notepad in Windows 7 Mausklicks nacheinander auf Start, dann auf Programme, dann auf Zubehör, dann auf Editor. <, > Zeichen, die andeuten, dass wir uns in HTML befinden `>` größer als `gt` greater than in `...` `<=` kleiner gleich `le` less equal in `...` "-" Leiterstück in -> Elektro(P, "-", Q) -> Netzwerk(... in agraph "*-" Leiterstück mit Verknüpfungspunkt vorn -> Elektro(... -> Netzwerk(... `*` Malpunkt in `...` `**` Stern * in `...` `***` fetter Malpunkt (•), da `*` manchmal zu klein ist in `...` `oo` unendlich `ooo` unendlich mit kleinerem Abstand in `...` `_-` Minuszeichen mit kleinerem Abstand als Minus-Operator `-` in `...` ^ Dach auf Zeichen: `hat x` x Dach ^ in `...` - auf Zeichen: `bar(x)` x quer in `...` -> Vektor auf Zeichen: `vec(x)` in `...` `~~` ungefähr in `...` `~=` ähnlich in `...` `!=` ungleich in `...` `_|_` orthogonal, rechtwinklig in `...` `/` Bruchstrich in `...` // Kommentarbeginn in agraph, in Javascript, bis Zeilenende in agraph noaxes() lässt sich nicht mit // auskommentieren. `\ ` Abstand ein Leerzeichen in einer Formel in `...` `::` ebenso, geeignet innerhalb `## ... ##`, ln::x in `...` `quad` größerer Abstand `\ \ \ ` Abstand 3 Leerzeichen in einer Formel in `...` `//` Schrägstrich / vorwärts in `...` `\\` Schrägstrich \ rückwärts in `...` `xx` angelsächsisches Malzeichen, gehobenes x in `...` `|->` Pfeil "wird zugeordnet" in `...` `->` oder `rarr` Pfeil rechts (right arrow) in `...` `=>` Doppelpfeil rechts `rArr` geht auch in `...` `<=>` Doppelpfeil beidseitig `iff` (if and only if) in `...` `AA` für alle in `...` `EE` es existiert in `...` `vv` oder in `...` `^^` und in `...` `{:(x, y),(u, v):}` Zahlenschema, {: unsichtbare Matrixklammern in `...` ; Anweisungstrennzeichen, um mehrere Anweisungen in eine Zeile in agraph zu schreiben: A=7; stroke="blue"; strokewidth=2; , Parametertrennzeichen dot([3.5, 7]) Komma trennt 3.5 von 7 in agraph , Dezimalkomma in `1,6*10^-19\ C` in `...` 3D -> Achsen -> weg([-2, 3, 1], "green", 0.1); zeichnet Weg parallel zu in agraph Koordinatenachsen zum Punkt [-2, 3, 1] `|x|={(x, if x>=0), (-x, if x<0):}` abschnittsweise Definition in `...` `## ... ##` -> Matrix in `...` ------------------------------- Alphabetische Liste --------------------------- Sprung zur nächsten Internetseite Ableitung in `...` Am besten lesbar ist `f´` oder `f´(x)` oder `f´´(x)` oder `f´´´(x)`. Accent aigu (´) wird erzeugt durch Antippen der Taste rechts neben der ß-Taste, Loslassen der Taste und Tippen der Leertaste. Innerhalb von `...` wird automatisch vor und nach dem Ableitungsstrich ein kleiner Abstand eingefügt, damit das f im Browser nicht mit dem Ableitungsstrich verschmilzt, aber nur, wenn man Accent aigu (´) verwendet. Im Browser wird Accent aigu ziemlich senkrecht (Unicode u2032) dargestellt, wie es bei der Ableitung sein sollte. Ab der 4. Ableitung wird arabisch geschrieben: `f^((4))(x)` Ableitung physikalisch `dot x` x Punkt, Punkt auf dem x in `...` Ableitung, zweite `f´´(x)` oder `ddot x` x zwei Punkt in `...` Ableitung, dritte `f´´´(x)` in `...` Ableitung, vierte `f^((4))(x)` in `...` Ableitung, partielle Ableitung `del` in `...` Ableitung, Tangentenfeld -> slopefield(... in agraph Ableitung als Funktionsbezeichnung in Funktionsdiagrammen in agraph text([0.2, 4], "`f'(x)`", "right" ); funktioniert nicht, weil ' ein Anführungszeichen in Javascript ist. Accent aigu ´ ist das mathematische Ableitungszeichen und in `...` so programmiert, dass davor und danach ein kleiner Zwischenraum kommt. Bezeichnungen von y-Achsen können so gemacht werden: text([0.2, 4], "`f´(x)`", "right" ); für 1. Ableitung text([0.2, 4], "`f´´(x)`", "right" ); für 2. Ableitung Ableitungsfunktion zeichnen -> plotAbl(... -> plotFunAbls(... in agraph abschnittsweise Definition `|x|={(x, if x>=0), (-x, if x<0):}` in `...` Abstand in Formeln `\ ` `quad` in `...` in der intuitiven Matrixschreibwese `##...##` sind Leerzeichen Spaltentrenner, deshalb kann lnx nicht als ln x wie sonst in Formeln geschrieben werden. ln::x macht den gleichen Abstand wie ln x zwischen ln und x, enthält aber kein Leerzeichen. Öffnende und schließende unsichtbare Klammern sollen deshalb nicht so {::} sondern so {: :} geschrieben werden. in :     `_-` ist wie `-` das Minuszeichen, hat aber weniger Abstand, kann als Vorzeichenminus betrachtet werden. `+-+` ist wie `+-`, hat aber weniger Abstand zum nächsten Zeichen `ooo` ist wie `oo` unendlich, hat aber weniger Abstand. -> Leerzeichen Abstand vertikal Aufg. `1^\ ` um für Hochzahl Platz zu lassen in Tabellen in `...` Achse -> axes(... -> noaxes() in agraph agraph ... endagraph produziert zwei Koordinatenachsen ohne Pfeile gridstroke="white"; xmin=1; xmax=25.5; zeichnet nur waagrechte in agraph Linie (Achse) mit Ticks -> tickLineX(..., -> tickLineY(... xAchse(); x-Achse mit Pfeil und Text xscl=1; x- und y-Achsenbeschriftung jeden cm (1 = 1 cm), in agraph zeichnet auch Raster Gitternetzlinien xyAchsen(); beide Achsen mit Pfeil und Text xyAchsen2(); beide Achsen mit Pfeil ohne Text xyzAchsen( n, n1, n2, n3 ); 3D-Achsen mit Pfeilen n: Länge x1-Achse, n1: Position von text "x1", n2: Position von text "x2", ... in agraph n1, n2, n3 optional; x1-Achse geht aus dem Bildschirm heraus, x1-Achse perspektivisch verzerrt. yachse(); y-Achse mit Pfeil und Text Achsfarbe axesstroke = "grey"; in agraph agraph ... endagraph wandelt Text in SVG-Grafik um, wenn ASCIIMathML.de.js eingebunden ist. Amperemeter -> Elektro(A, "A", B ); in agraph -> Elektro([4,3], "A", [4,-3] ); -> Netzwerk ähnlich `~=` in `...` `aleph` 1. Buchstabe im hebräischen Alphabet in `...` ändern -> Programm ändern, -> Animation angleArc(F,A,D,1.5,2.3,"`beta`"); macht einen Winkelbogen im Scheitel A des Winkels FAD, der im Gegenzeigersinn durchlaufen wird. 1.5 ist der Radius des Winkelbogens, 2.3 ist der Abstand des Winkelzeichens beta vom Scheitel A, innerhalb des Winkels. angleArc(F,A,D,1.5,1.1,"","rw"); macht einen Winkelbogen für einen rechten Winkel in A mit Punkt im Winkelbogen. 1.5 ist der Radius des Winkelbogens, 1.1 ist der Abstand des Winkelpunktes vom Punkt A. Stichwort: rechtwinklig, rechter Winkel Animation in Animation(evt) Was animierte Zeichnungen betrifft, sollte in der function Animation(evt) (s. Minimalversion, S. 3) gespeichert werden. Damit ein Punkt wandern kann, muss er eine Identifikation haben. in agraph dot([t, t*t]); wird nicht gelöscht beim Animieren, dot([t, t*t],"", "A", "right", "Laufpunkt"); wird gelöscht beim Animieren, weil eine Identität "Laufpunkt" angegeben ist. line([-1,0], [2,3], "schraeg", "o-o" ) wird gelöscht beim Animieren, line([-1,0], [2,3]) wird nicht gelöscht. Die Figuren 5, 11, 12, 13 zeigen Animationen. -> Kurvenschar Die globalen Variablen t0, t1, ..., sind vordeklariert und können in function Animation benutzt werden, um Werte von Aufruf zu Aufruf zu erhalten. Die globale Variable aufruf ist bei Programmstart auf 0 gesetzt und kann in function Animation benutzt werden, um die Aufrufe dieser Funktion zu zählen. Mehrere Diagramme agraph ... endagraph in einer Datei: in Animation(evt) switchTo("picture2"); zeichnet die nachfolgenden Objekte nur in das 2. Diagramm. Mit dem folgenden Code kann man erreichen, dass im 1. Diagramm nichts animiert ist, Punkt P sich im 2. Diagramm bewegt und Punkt Q sich gegenläufig im dritten Diagramm bewegt: t = Math.min(Math.max(getX(evt),-4.9),4.9); switchTo("picture2") dot( [-t, 3], "","P","left", "Laufpunkt2" ); switchTo("picture3") dot( [t, 3], "","Q","left", "Laufpunkt3" ); Um einen einfachen Zugang zu Animationen zu bieten, gibt es nur eine vordefinierte Animationsfunktion. Durch Angabe des Arguments "id" (Identität des grafischen Objekts) kann man erzwingen, dass sich die Animationsfunktion auf eine bestimmte Grafik bezieht, indem man im betreffenden agraph ... endagraph das Objekt ebenfalls (statisch) plaziert. Dann ist die Anweisung switchTo("picture2"); nicht nötig. Beispiel: function Animation(evt) { in t = Math.min(Math.max(getX(evt),-4.9),4.9); dot( [-t, 3], "","P","left", "Laufpunkt2" ); } und im zweiten agraph ... endagraph statisch: agraph in dot( [0, 3], "","P","left", "Laufpunkt2" ); endagraph Mit einer MausIn-Abfrage verhindert man, dass eine Mausbewegung in "picture1" eine Veränderung in "picture2" auslöst: function Animation(evt) { in t = Math.min(Math.max(getY(evt), ymin), ymax); if (MausIn(evt, "picture2")) { // Wenn Mauszeiger in Diagramm2 text([-1,-2], t.toFixed(2), "above", "MeldungY"); } } Mit agraph ... endagraph erzeugt man automatisch "picture1", in mit einem weiteren agraph ... endagraph in erzeugt man "picture2", usw. Anker setzen -> Sprung zur nächsten Internetseite arc([0,0],[2,2],4) Kreisbogen von [0,0] bis 2,2] mit Radius 4 im Gegenzeigersinn, höchstens ein Halbkreis mit Radius > 0.5 * Abstand der Punkte. Um einen Bogen mit mehr als 180° zu zeichnen, braucht man zwei arc-Anweisungen. Arg Argument f(a, b, c) b ist das 2. Arg in Funktion f in agraph arrowfill = "orange" Füllfarbe für Pfeile in agraph ASCIIMathML.de.js einbinden: in -> S. 3 Minimal.htm zeigt die Stelle, wo eingebunden wird. axes(); möglichst weglassen, automatisch drin in agraph axes(2, 3, "labels", 1, 3); Ticks 2;3 Grid 1; 3 kein Parm darf 0 sein! axes -> noaxes(); axes(dx, dy, null, dx, dy) äquivalent zu grid(dx, dy) allg. Form in agraph axes sollte sehr früh kommen, ist aber nicht nötig, da Achsen automatisch gezeichnet werden xscl=1; macht eigentlich alles, was man von Achsen erwartet axes(20,1,null,20,1); plot(cosA(x)); macht auf x-Achse alle 20 Einheiten (Grad) einen Strich, auf y-Achse schon nach 1; Zahlen werden nicht (null) an die Ticks geschrieben axes(1,3,"",4,2); macht Ticks und schreibt Zahlen auf der x-Achse jede Einheit, auf der y-Achse nur jede 3. Einheit, macht alle 4 Einheiten eine senkrechte Gitternetzlinie, macht alle 2 Einheiten eine waagrechte Gitternetzlinie. Weil axes(... automatisch durch agraph ... endagraph aufgerufen wird, macht ein zusätzliches axes(... manchmal so viel Probleme, dass Firefox abstürzt. axesstroke = "grey"; Achsfarbe in agraph ... bold fett in backgroundstyle = "fill-opacity:0.3; fill:yellow"; wirkt nur, in agraph wenn danach axes(); oder noaxes(); aufgerufen wird. Hintergrundfarbe. fill-opacity:0 funktioniert nicht `bar x` `bar(ab)` x quer ab quer in `...` Baumdiagramm -> horTree(... in agraph Betrag, abschnittsweise Definition `|x|={(x, if x>=0), (-x, if x<0):}` Bézierkurve Bezierkurve path( plist ) macht eckige, geradlinige Verbindungen von Punkten. Man kann mit path aber auch Bézierkurven zeichnen. Die folgenden Zeilen bilden zusammen ein Beispiel: in agraph xscl=1; A=[-3, -3]; B=[-3.5, -0.5]; C=[2, 0]; D=[3, -3]; stroke="black"; path([A, B, D], "kurve4", "S"); stroke="blue"; path([A, B, C, D]); stroke="red"; path([A, B, C, D], "kurve1", "T"); stroke="green"; path([A, B, C, D], "kurve2", "C"); stroke="violet"; path([A, B, D], "kurve3", "Q"); Ändern Sie die Punkte mehr oder weniger ab, und Sie sehen, wie S: glatte, Q: quadratische, T: glatte quadratische, C: kubische Bézierkurven erzeugt. Bild vergrößern -> graphsize in agraph Binomialkoeffizienten -> über, 5 über 3 in `...` Blank -> Leerzeichen block(x, y, z, a, b, c, id) zeichnet Quader mit drehbarer in Animation(evt) x1-Achse bei Mausbewegung nahe [0,0,0]. xyz ist Ecke links unten, a nach vorn, b nach rechts, c nach oben. Voraussetzung ist: t8 = Math.min(Math.max(getX(evt), xmin), xmax); in Animation(evt) t9 = Math.min(Math.max(getY(evt), ymin), ymax); in Animation(evt) Beruht auf s3([ ... ], "id1"); in Animation(evt) Bogenmaß -> Sinus
Zeilenvorschub in HTML br = break in FragAnt übersetzt Enter-Taste in
Breite des Diagramms in Pixel width=650; in agraph Browser: Ein Programm, mit dem man im Internet surfen kann. in Windows XP Was in einem Browser dargestellt werden kann, kann weltweit + in Windows 7 im Internet gelesen werden. Diese Anleitung zeigt, wie man druckschöne Formeln und Diagramme für das Internet schnell erstellen kann. Bruchstrich, waagrecht `/` `a/b` `a/(bc)` schräg: `a//b` in `...` Bruchzahlen displaystyle=false; macht Bruchzahlen kleiner in `...` C(n, k) n über k, Kombinationen C(5, 2) = 5! / (2! * 3!) = 10 C(43, 6) liefert die Anzahl der Mögichkeiten im Lotto "6 aus 49" -> Rechenfeld -> Zufall Calculator -> Taschenrechner
...
zentriert auf der Seite in in
agraph ... endagraph
zentriert ein Diagramm auf der Seite circle([1,3],2); Kreis um M(1|3) mit Radius 2 in agraph circle( center, radius {,id, schraffno}); allgemeine Form circleXD3( center, radius {,id}); x-y-Kreis in 3D ist schiefe Ellipse circleZD3( center, radius {,id}); x-z-Kreis in 3D ist schiefe Ellipse circleZD3([0,0,3], 2); center ist dreidimensional! -> Schraffur cm -> Achsen, xscl in agraph cube(a, x,y,z, id) Würfel mit Kante a, Würfelpunkt hinten links in agraph unten die Koordinaten x, y, z hat. cube(2, 0, 0, 0) Würfel mit Kante 2, Kanten auf Koordinatenachsen Quader -> cuboid(... cuboid(a,b,c, x,y,z, id) Quader mit den Kanten a, b, c in agraph Der Quaderpunkt hinten links unten hat die Koordinaten x, y, z. cuboid(1, 4, 2, -1, 0, 0) Quader mit Kanten 1, 4, 2, dessen Vorderkanten auf der x2- und x3-Achse liegen. fill="yellow"; fillopacity=0.3; cuboid(1, 1, 1, -1, 0, 0); cuboid(1, 1, 1, 0, 0, 0); fill="none"; zeichnet zwei gelbe teilweise durchsichtige Würfel Würfel -> cube(... curve(a,b,c,d) legt durch die 4 Punkte eine -> Bézierkurve Bezierkurve Der 2. Punkt gibt die Richtung an. curve([[-.5,.5],[0,1],[1,1],[1,0]]) curve(a,b,c,d) macht "T"-Kurven im Sinne von SVG. Details über Bézierkurven in SVG lesen Sie bitte nach in svg.tutorial.aptico.de oder de.wikipedia.org/wiki/Bézierkurve "D", "D+", "D-" -> Elektro( A, "D", B ); -> Diode -> Netzwerk in agraph d3([2, 1.5, 0]) erzeugt aus 3D-Punkt 2D-Punkt perspektivisch verzerrt Dach auf Zeichen: `hat x` x Dach ^ in `...` `darr` Pfeil ab in `...` default -> Voreinstellung `del` partielle Ableitung in `...` define Definieren von kleinen Erweiterungen in macht aus der Eingabe `yy` im Browser das Absatzzeichen, das in ASCIIMathML.de.js selbst nicht vorhanden ist. Dezimalpunkt, Dezimalkomma: Komma in Zahlen, die in agraph ... endagraph stehen, ist immer der Punkt, weil dieser Dezimalpunkt von einer Computersprache weiterverarbeitet wird. In Computersprachen trennt das Komma Parameter oder Argumente von Funkt. Komma in Zahlen, die in `...` stehen, ist Komma: 6,02*10^23 weil es ein Darstellungskomma ist (deutsche Norm). Dezimalstellen -> String Diode -> Elektro( A, "D-", B ); in agraph Elektro([2,1], "D+", [-2,1]); zeichnet Diode in der anderen Richtung "D" = "D+" -> Netzwerk Doppelklick auf Zeichnung -> Programm ändern doppelter Doppelpunkt ist Abstand dot -> Punkt zeichnen dot(center {, typ, label, pos, id}) in agraph dotradius = 4; Punktdicke in agraph dreidimensional -> Achsen Dreieck -> rwDreieck(... -> triangle Dreieckszeichen in Texten `Delta ABC` `A_Delta` in `...` durchsichtig -> opacity Wert 1 Editor: Primitives Textverarbeitungsprogramm für ASCII-Texte, in Windows XP mit dem man alle diese Texte hier in den Computer eingeben + in Windows 7 kann, die zu schönen mathematischen Formeln oder Diagrammen werden im Browser. Notepad ist ein solcher Editor, den wir über > Start > Programme > Zubehör > Editor in Windows XP > Start > Alle Programme > Accessories > Notepad in in Windows 7 Zum Schreiben dieser Texte, die der Browser in Formeln und Diagramme umsetzen können soll, darf man keineswegs das .doc-Format von Microsoft Word verwenden. "Hinter" dem sichtbaren Text befindet sich ein Vielfaches an Formatierungen, die den Browser an der exakten Darstellung hindern. Ein Editor speichert (außer Zeilenvorschub) keine Formatierungen. Er akzeptiert und produziert ausschließlich sichtbare Zeichenketten (plus Leerzeichen und Tabulatorzeichen). e-Funktion -> Exponentialfunktion Einheiten -> Achsen, xscl -> Tick in agraph elektrisches -> Netzwerk(... in agraph Elektro(... (Elektrogeräte) in agraph Elektro(A, geraet, B) zeichnet die Schaltung eines Gerätes. A, B sind Punkte, geraet ist das Elektrogerät dazwischen. geraet = "A": Amperemeter, "B": Batterie, "D", "D+", "D-" Dioden, geraet = "K": Kondensator, "L": Lampe, "LED", "LED+", "LED-": Leuchtdiode, geraet = "M": Motor, "N": Netzgerät, "NPN": Transistor, "PNP": Transistor, geraet = "R": Widerstand, "Rv": variabler Widerstand, "SAuf": SchalterAuf, geraet = "Sp": Spule, "SpE": Spule mit Eisenkern, "SZu", "V": Voltmeter, geraet = "-": Leiter, Verbindung ohne Gerät Elektro([-1,2], "*V*", [3,2]) zeichnet ein Netzgerät zwischen die Punkte [-1,2] und [3,2]. Die Punkte müssen entweder gleiche x-Werte oder gleiche y-Werte haben. Wegen * werden die genannten Punkte als elektrische Verbindungspunkte fett gezeichnet. Siehe auch -> Netzwerk(..., -> Verzweig(..., -> VPunkt(... Element von (Menge) `in` Epsilon `!in` ist nicht Element von in `...` Element `{: :}_(\ 92)^238U` Uran 238 links oben 92 links unten in `...` ellipse([0,0],5,3) Ellipse um M(0|0) mit horiz. Halbachse 5 und in agraph vertikaler Halbachse 3 ellipse( center, rx, ry {,id}); allgemeine Form schiefe Ellipse: -> circleXD3(..., -> circleYD3(... Zeigt, wie eine Ellipse mit der Gärtnerkonstruktion entsteht: do { in Animation(evt) path(p.slice(0,d+1), "Funktion"); in Animation(evt) if (d" | "<-o" | "o->" | "*-*" | "o-o" | "*-*" | ";->" | ";-;" | ... line(p,q {,id,endpts}) ist die allgemeine Form einer Strecke line([0,0], [2,1],,"*-*"); Strecke mit fetten (*) Endpunkten line([0,0], [2,1],,";->"); Pfeil mit senkrechtem Strich hinten vector([0,0], [2,1]) ist besser als line([0,0], [2,1],,";->"), weil die Pfeildicke und der Bemaßungsstrich hinten mit strokewidth=3 wachsen. line([0,0], [2,1],,";-;"); Strecke mit 2 senkrechten Bemaßungsstrichen plot(x^2, 0, 1, 4, "parab", "o-o" ); Parabelstück von x=0 bis x=1 mit 4 Stützpunkten/x-Einheit und leeren, dicken Endpunkten eqnarray aus LaTeX wird vielseitiger durch `## ... ##` -> Matrix Erweiterungen von ASCIIMathML.de.js -> define Es existiert ein x in R mit ... `EE x in RR` mit ... evt, Maus-Event -> Animation in Animation(evt) Exponentialfunktion plot(e^x) zeichnet die e-Funktion in agraph e = 2.7182818 ist vordefiniert und sollte nicht geändert werden. Fallunterscheidung -> Betrag -> if-Abfrage Farben -> Netscape-Farbnamen Achsfarbe axesstroke = "grey"; in agraph -> fontfill (Textfarbe in Grafik) -> fontstroke Gitternetzlinienfarbe gridstroke = "grey"; in agraph (white, wenn Gitternetzlinien fehlen) Hintergrundfarbe -> backgroundstyle in agraph Punktinnenfarbe ändern -> markerfill stroke = "darkblue"; Linienfarbe, alle 120 Netscape-Farbnamen in agraph sind erlaubt Strichfarbe -> stroke -> arrowfill Textfarbe, Schriftfarbe in Grafiken ändern: fontfill="red"; in agraph Farben in Formeln: im `sqrt(16 + 9) rot(!=) 4 + 3` macht nur Ungleichheitszeichen rot in `...` `s blau(in) RR` macht nur das Elementzeichen blau in `...` `x gruen( <= ) 7` macht nur das <=-Zeichen grün in `...` `a lila( < ) 0` macht nur das <-Zeichen lila in `...` Farben in HTML: grey red blue green yellow pink black orange ... in Farben in HTML, leichte: aliceblue lavender cornsilk beige moccasin in lightyellow palegreen lightgrey gold aqua seashell silver in Fehler, häufige gray führt manchmal nicht zum Erfolg, es muss grey heißen. ` Das falsche Hochkomma benutzt. stroke = red; Anführungszeichen fehlen: stroke = "red"; Diagramme: Wenn scheinbar alles richtig ist, kann es sein, dass in agraph ein Folgediagramm ein vorausgehendes Diagramm beeinflusst. Isoliert man das "fehlerhafte" Diagramm in einer neuen HTML-Datei, so verschwindet der Fehler häufig. -> Sprung auf eine andere Internetseite in in point(e); Fehlermeldung, da e = 2.71218 und kein Punkt in agraph t Diese Variable ist für Animationen reserviert und wird von der Mausbewegung verändert. y-Achse erhält mit xscl Dezimalzahlen statt ganzer Zahlen -> Verhältnis Reihenfolge der Anweisungen kann wichtig sein. Was zum Zeichnen des Koordinatensystems wichtig ist, muss am Anfang stehen: xmin=-7.5; xmax=22; ymin=-8; ymax=14.5; width=400; height=700; plot("sin(x)") funktioniert eher als plot(sin(x)); plot(x) funktioniert nicht, aber plot(1x) funktioniert dot([t, -t*t], "","","","P4") funktioniert eher als dot([t, -t^2], "","","","P4") in Animation(evt) `D_f = RR` funktioniert nicht wunschgemäß, besser ist `D_{f} = RR`. fett -> Font fett Funktion schreibt Funktion fett in in Figuren, auf die hier zur Demonstration verwiesen wird, sind in geiring.de/MiF-Figuren.pdf enthalten. Figuren, für die es eine besondere Anweisung gibt: in agraph -> arc(... -> ASdot(... -> circle(... -> ellipse(... -> loop(... -> path(... -> rect(... -> rwDreieck(... -> sector(... -> triangle(... -> angleArc(... Figur 12a und 12b erläutert unter -> Integralfunktion fill="none"; folgende Figuren nicht füllen, fill abschalten fill="green"; füllt folgende geschlossene path-Figuren, circle, ... fillopacity=0.5; Wert zwischen 0=undurchsichtig und 1=voll durchsichtig fill -> backgroundstyle, -> Schraffur in agraph fix -> Zahl in String wandeln in agraph Fläche markieren inhalt(1/x, 0.5, 2.5); umrahmt die Fläche in agraph unter der Kurve, fill="yellow"; davor inhalt(1/x, 0.5, 2.5, 50, "A1", -2.5, 1.5); gibt auch Inhalt an Fläche zwischen zwei Kurven -> inhalt2(... flacher Text Text ohne Tiefstellung, Hochstellung, ohne Fettdruck, ohne Formatierungen, wie der vorliegende Text, kann mit einem Editor wie Notepad geschrieben werden und kann von Browsern in schön gestaltete Seiten umgewandelt werden. Schriftart in in Hoch- und Tiefstellung in Formeln mit Serifenschriften sind nach dem Druck schwer lesbar. Voreingestellt ist deshalb Formelschrift Arial, die in Formeltext auch in HTML eingestellt sein sollte. Font-Größe in passt zu Schriftgröße in in passt zu in Font fett: in Formeln und Diagrammen in fontfamily = "sansserif"; oder "serif" oder "fixed" in agraph fontfill = "none" innere Fontfarbe -> fontstroke in agraph fontfill="red" ändert die Farbe von Text in Zeichnungen. fontsize="16"; Zeichensatzhöhe in Pixel in agraph fontstroke = "none" Fontrandfarbe in agraph fontstroke "verdickt" die Buchstaben, macht einen Rand. -> fontfill für Ändern der Textfarbe in Diagrammen fontweight = "normal" normal|bold|bolder|lighter|100|...|900 in agraph Zeichensatzdicke normal fett fetter dünner for-Schleife in Javascript -> Spirale -> Integralfunktion FragAnt ist ein Frage-Antwort-System zum effizienten Herstellen von Lern- und Diagnosewerkzeugen. In der Herstellung können HTML mit Formeln und Diagrammen gemischt werden. Spanische und französische Sonderzeichen können über eine deutsche Tastatur leicht eingegeben werden -> FragAnt-Sonderzeichen. Fragen und Antworten werden mit dem Editor Notepad in eine .TXT-Datei getippt und Programme in der Programmiersprache PERL wandeln die .TXT-Datei in eine .HTM-Datei um. Das Lernen oder Diagnostizieren von Kenntnissen mit dem Endprodukt von FragAnt erfolgt im Firefox-Browser. ASCIIMathML.de.js ist immer Begleitdatei. FragAnt-Format : 1. Zeile: Titel: .... (linksbündig) Der Titel erscheint als Titel des Frage-Antwort-Spiels. Fragezeilen beginnen immer linksbündig. Antwortzeilen sind immer um 3 Leerzeichen eingerückt. Leerzeilen sind in Fragen und Antworten erlaubt. Ein Zeilenvorschub im Editor wird in HTML zu
. " " in der .TXT-Datei wird zu "   " (no break space) in HTML. Die FragAnt-Dateien werden dadurch leichter schreibar und lesbar. Ansonsten werden HTML-Tags wie gewohnt interpretiert. Insbesondere kann man in Fragen und Antworten Tabellen mit
... machen. FragAnt-Sonderzeichen " " (2 Leerzeichen) werden in HTML zu "   " Da der Browser beliebig viele aufeinanderfolgende Leerzeichen als ein Leerzeichen interpretiert, ist dies eine einfache Möglichkeit, Abstände in Fragen oder Antworten einzufügen. "~n" oder "*n" wird im Browser zu "ñ" oder "Ñ". ",c" wird im Browser zu "ç" ":e" wird im Browser zu "ë" "??" wird im Browser zu "¿" "?P" wird im Browser zu "¿P" für alle Buchstaben "!!" wird im Browser zu "¡" "!P" wird im Browser zu "¡P" für alle Buchstaben "(oe)" wird im Browser zu "œ" "(OE)" wird im Browser zu "Œ" Füllfarbe -> fill, -> Schraffur Funktionen und Operatoren, eingebaute: +, -, *, /, ^, pi, e, sqrt(), ln(), abs(), sign(), floor() [Abrunden], ceil() [Aufrunden], n! [Fakultät], C(n,k) [n über k], ran(a,b,n) [Zufallszahlen zwischen a und b mit n Nachkommastellen], sin(), cos(), tan(), sin^-1(), cos^-1(), tan^-1(), sinh(), cosh(), tanh(), sinh^-1(), cosh^-1(), tanh^-1(), sec(), csc(), cot(), sec^-1(), csc^-1(), cot^-1(), sech(), csch(), coth(), sech^-1(), csch^-1(), coth^-1() Gerechnet mit diesen Funktionen wird beim Zeichnen und in Rechenfeldern. Funktionen zeichnen -> plot(... Funktionenschar -> plot, Funktionenschar Funktionspfeil `|->` "wird zugeordnet" in `...` Für alle n Element G `AA n in GG` in `...` gegen -> Limes `to` `->` in `...` genau dann wenn, Doppelpfeil beidseits `iff` in `...` Gerade durch P und Q in agraph gerade( P, Q, id ) Gerade durch P und Q gerade([-2, -3], [1, 1]); Gerade durch [-2, -3] und [1, 1] gerade([t, -3], [1, 1], "schraeg" ); bewegte Gerade in Animation(evt) Gerade y = 0,5x + 2 zeichnen: plot(0.5x+2); in agraph geschnitten `nn` Mengenoperation in `...` `nnn` geschnitten fett in `...` gestrichelt -> strokedasharray in agraph getX(evt), getY(evt) -> S. 3, Minimal.htm Gitternetzlinienfarbe gridstroke = "grey"; in agraph (white, wenn Gitternetzlinien fehlen) gleichbedeutend mit, Doppelpfeil beidseits `iff` in `...` Gleichungen, Gleichungslösungen bündig darstellen -> Matrix in `...` Glühlampe -> Elektro(A, "L", B); Elektro([-3,1], "L", [3,1]); in agraph -> Netzwerk `grad` Gradient Nabla-Operator `vec grad` mit Vektorpfeil drauf Wenn width und height nicht geändert werden: in agraph graphsize = 2.33 ergibt in Firofox Ausdruck 60 % je Einheit 1 cm in agraph graphsize = 1.995 ergibt in Firofox Ausdruck 70 % je Einheit 1 cm in agraph graphsize = 1.75 ergibt in Firofox Ausdruck 80 % je Einheit 1 cm in agraph graphsize = 1.55 ergibt in Firofox Ausdruck 90 % je Einheit 1 cm in agraph graphsize = 1.395 ergibt in Firofox Ausdruck 100 % je Einheit 1 cm in agraph graphsize = 1.1 vergrößert Graphik um 10 % in agraph gray führt manchmal nicht zum Erfolg, es muss grey heißen. Grenzwert -> Limes Grid -> axes gridColor Gitternetz Koordinatennetz in agraph gridColor( "black", "orange", "none" ) Gitternetz Koordinatennetz alle 10er-Koordinatenlinien schwarz, alle 5er-Koordinatenlinien orange, bei xscl=1 und vielen Koordinatenlinien nützlich; xscl = 1 zeichnet 1er-Koordinatenlinien grau grey gridstroke gridColor( "black", "orange" ) zusätzlich werden alle 10er-Koordinaten am Rand dick angezeigt gridstroke = "grey"; Gitternetzlinienfarbe in agraph (white, wenn Gitternetzlinien fehlen) gridstroke="white"; xmin=1; xmax=25.5; zeichnet nur waagrechte in agraph Linie (Achse) mit Ticks Griechische Buchstaben: `alpha` // Griechische Buchstaben `beta` `epsilon` `varepsilon` `Epsilon` ergibt E psi lon, unerwünscht `mu` anstatt my `nu` anstatt ny `upsilon` statt `ypsilon` `theta` `Theta` // theta mit Strich drin `vartheta` wie bei Temperatur üblich `prod` großes Pi für Produkt in halb durchsichtig -> opacity `harr` Pfeil links/rechts `hat x` x Dach ^ hebräischer Buchstabe `aleph` in `...` height=420; Höhe des Diagramms in Pixel in agraph Hintergrundfarbe -> backgroundstyle hoch `2^3` 2 hoch 3 `2^(a+b)` 2 hoch a+b in `...` hoch: Übereinandereschreiben von Symbolen -> stackrel -> Uran Hochkomma: Im Abschnitt `...` muss das Hochkomma mit Umschalttaste niederhalten, Accent rechts neben ß antippen, alles loslassen, Leertaste tippen erzeugt werden. Accent ohne Umschalttaste wirkt nicht oder führt zu einer Fehlermeldung. Das Hochkomma ' auf der #-Taste wirkt nicht oder führt zu einer Fehlermeldung. Es muss ` sein. Hochstellung `2^3`, `2^"oben"`, `2^(3a)` in `...` Hochzahl links oben -> Uran Höhe des Diagramms in Pixel height=420; in agraph horTree( h, baum, col1, col2, col3, VR ); zeichnet einen horizontalen Baum mit fixem Startpunkt St=[-5,0], h ist horizontaler Abstand der Stufen baum="3322" bedeutet: 1. Stufe: 3 Zweige, 2. Stufe: 3, 2, 2 Zweige baum="2321221" bedeutet: 1. Stufe 2 Zweige, 2. Stufe: 3, 2 Zweige, 3. Stufe: 1, 2, 2, 1, 0 Zweige. Fehlendes wird mit Nullen (=0 Zweige) aufgefüllt. col1, ... sind Farben der Zweige innerhalb einer Stufe, VR ist der Vertikale Rand (Voreinstellung =1). horTree( 2, "222", "red", "blue" ); HTML Hyper Text Markup Language, die Sprache, in der Internetseiten geschrieben sind. "Hyper" = "Über" weist hin auf die Möglichkeit, auf eine andere Seite zu springen, quasi über den momentanen Text hinweg. -> Leerzeichen -> Sprung zur nächsten Internetseite (Surfen) -> Kommentar -> S. 2 -> S. 3 (Minimal.htm) -> fett ->
-> center -> Farben -> -> ->