Javascript: eigene Tests2

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche
Kurzinfo
GadApedia.jpg
Diese Seite gehört zur GadApedia.

Inhaltsverzeichnis

Funktioniert HTML in ZUM-Wiki nicht mehr?

Wir brauchen dafür SecureHtml. Mal sehen, ob das funktioniert. <shtml hash="5d7fce1d2cf8d5b9f1254b3d9d6aa271">Hier ist ein Text in Bold</shtml> so? aa <shtml hash="ac0d81fb750f126c793c84b4e0a64299"></head> <body>

Steigung einer Geraden bestimmen

Bestimme die Steigung einer Geraden, die durch zwei vorgegebene Punkte A(x1|y1), B(x2|y2) verläuft. </body> </html></shtml>



Baustelle mit alten, damals funktionierenden Teilen

<html lang="de"> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript">

function Wertefuerpunkteeingeben () {

m = parseFloat(document.getElementById("zahl1").value);
 if (isNaN(m)) {
   document.getElementById("text1").firstChild.data = "Bitte gib eine gültige Zahl für die Steigung ein, z.B. 1.5!";
 } else {
zm = m;
document.getElementById("text1").firstChild.data = " . ";
if (zm==-0.5) {document.getElementById("text3").firstChild.data = " m stimmt! ";gm=1;}
     else {document.getElementById("text3").firstChild.data = " m? überlege noch einmal ";gm=0;}
 } // von der if-Abfrage
b = parseFloat(document.getElementById("zahl2").value);
 if (isNaN(b)) {
   document.getElementById("text2").firstChild.data = "Bitte gib eine gültige Zahl für den y-Achsenabschnitt ein, z.B. 5 !";
 } else {
zb = b;
document.getElementById("text2").firstChild.data = " . ";
if (zb==2) {document.getElementById("text4").firstChild.data = " b stimmt! ";gb=1;}
     else {document.getElementById("text4").firstChild.data = " b? überlege noch einmal ";gb=0;}
 } // von der if-Abfrage

} // Funktionsende


function Zeigetext0 () {

zm=0; zb=0;
  document.getElementById("text0").firstChild.data = "Die Parabel hat ihren Scheitelpunkt bei (0|0), und geht man von dort aus 1 nach rechts, so geht es 1 nach oben.";

} // Funktionsende

function Zeigetext5 () {

 goalmb=gm+gb; // ist 2, wenn sowohl m als auch b richtig ermittelt wurden.
 if(goalmb==2){ 
 document.getElementById("text5").firstChild.data = "x²=-1/2 x +2 lösen, d.h. x²+1/2 x =2";}
 else { document.getElementById("text5").firstChild.data = "bestimme erst einmal die Gerade, d.h. m und b ( s.o.)" ;}

} // Funktionsende

function xsWerteingeben () {

xs = parseFloat(document.getElementById("zahl3").value);
 if (isNaN(xs)) {
   document.getElementById("text8").firstChild.data = "Bitte gib eine gültige Zahl für die xs ein, z.B. 1.525!";
 } else {
zxs = xs;
document.getElementById("text8").firstChild.data = " . ";
if (Math.abs(zxs-1.186)<0.001) {document.getElementById("text9").firstChild.data = " xs stimmt! ";gxs=1;}
  else { if (zxs>1.186) {document.getElementById("text9").firstChild.data = " xs ist zu groß.";gxs=0;} ;
         if (zxs<1.186) {document.getElementById("text9").firstChild.data = " xs ist zu klein.";gxs=0;} } 
 } // von der if-Abfrage

} // Funktionsende


function Zeigetext10 () {

 if(gxs==1){     // gxs ist 1, wenn xs richtig ermittelt wurde.
 document.getElementById("text10").firstChild.data = "A1=Integral von 0 bis xs von x²=1/3 (xs³-0³) und A2=Integral von xs bis 4 von -1/2x+2=(-1/4 4²+2 4)-(-1/4 xs²+2 xs)";}
 else { document.getElementById("text10").firstChild.data = "bestimme erst einmal xs ( s.o.)" ;}

} // Funktionsende

function A1Werteingeben () {

A1 = parseFloat(document.getElementById("zahl4").value);
 if (isNaN(xs)) {
   document.getElementById("text10").firstChild.data = "Bitte gib eine gültige Zahl für A1 ein, z.B. 1.525!";
 } else {
zA1 = A1;
document.getElementById("text10").firstChild.data = " . ";
if (Math.abs(zA1-0.55627)<0.002) {document.getElementById("text11").firstChild.data = " A1 stimmt! ";gA1=1;}
  else { if (zA1>0.55627) {document.getElementById("text11").firstChild.data = " A1 ist zu groß.";gA1=0;} ;
         if (zA1<0.55627) {document.getElementById("text11").firstChild.data = " A1 ist zu klein.";gA1=0;} } 
 } // von der if-Abfrage

} // Funktionsende

function A2Werteingeben () {

A2 = parseFloat(document.getElementById("zahl5").value);
 if (isNaN(xs)) {
   document.getElementById("text10").firstChild.data = "Bitte gib eine gültige Zahl für A2 ein, z.B. 1.525!";
 } else {
zA2 = A2;
document.getElementById("text10").firstChild.data = " . ";
if (Math.abs(zA2-1.97945)<0.002) {document.getElementById("text12").firstChild.data = " A2 stimmt! ";gA2=1;}
  else { if (zA2>1.97945) {document.getElementById("text12").firstChild.data = " A2 ist zu groß.";gA2=0;} ;
         if (zA2<1.97945) {document.getElementById("text12").firstChild.data = " A2 ist zu klein.";gA2=0;} } 
 } // von der if-Abfrage

} // Funktionsende


function AWerteingeben () {

 A=zA1+zA2;
 goalA=gA1+gA2; // ist 2, wenn sowohl A1 als auch A2 richtig ermittelt wurden.
 if(goalA==2){ 
 document.getElementById("text13").firstChild.data = "A=" +A;}
 else { document.getElementById("text13").firstChild.data = "bestimme erst einmal die Flächen A1 und A2( s.o.)" ;}

} // Funktionsende



</script> <head>

</head>

<body>


<input type="button" value="Welche Parabel?" onclick="Zeigetext0()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Nun sollst Du von der orangefarbenen Geraden (f und g sind nur im ersten Quadranten gezeichnet) die Steigung und den y-Achsenabschnitt bestimmen. \color{Orange} g(x)=m\cdot x +b Bitte m und b eingeben :

<html lang="de"> <body>

<label> m= <input type="text" id="zahl1" size="4"></label> <label> b= <input type="text" id="zahl2" size="4"></label> (Kommazahlen mit Punkt z.B. 2.3 )

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

<input type="button" value="Stimmen meine Werte?" onclick="Wertefuerpunkteeingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Jetzt den Schnittpunkt \color{cyan} x_s von \color{Green} f und \color{Orange} g bestimmen. Wenn Du nicht weisst, wie man das macht, dann klicke auf den "Wie geht das?" - Button: <html lang="de"> <body>

<input type="button" value="Wie geht das?" onclick="Zeigetext5()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Wenn Du Dich damit nicht ( mehr ) auskennst, dann kannst Du es hier nachlesen: eine quadratische Gleichung lösen Für die quadratische Gleichung gibt es zwei Lösungen. Gib Deine Lösungen für den x-Wert des Schnittpunktes von f und g als Kommazahl mit drei Nachkommastellen ein : <html lang="de"> <body>

<label> xs= <input type="text" id="zahl3" size="4"></label> (Kommazahlen mit Punkt z.B. 2.3 )

. . . . . . . . . . . . . . . . . . . . . . . . .

<input type="button" value="Stimmt mein Wert für xs?" onclick="xsWerteingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Berechne nun die als \color{magenta} A_1 und \color{red} A_2 gekennzeichneten Flächen! <html lang="de"> <body>

<input type="button" value="Wie geht das?" onclick="Zeigetext10()">

. . . . . . . . . . . . . . . . . . . . . . . . .

<label> A1= <input type="text" id="zahl4" size="4"></label> (Kommazahlen mit Punkt z.B. 2.3 )

<input type="button" value="Stimmt mein Wert für A1?" onclick="A1Werteingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

<label> A2= <input type="text" id="zahl5" size="4"></label> (Kommazahlen mit Punkt z.B. 2.3 )

<input type="button" value="Stimmt mein Wert für A2?" onclick="A2Werteingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Die gesuchte Fläche ist die oben blau markierte Fläche \color{blue} A und das ist die Summe der Flächen \color{magenta} A_1 und \color{red} A_2 also hier: <html lang="de"> <body>

<input type="button" value="Das Ergebnis A ist" onclick="AWerteingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Vielen Dank an J.H. für die schöne Aufgabe und die Erlaubnis, sie hier zu veröffentlichen, ich bin als Lehrer sehr stolz auf sie.

............................. zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz <html lang="de"> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript">

function Wertefuerpunkteeingeben () {

x1 = parseFloat(document.getElementById("zahl1").value);
 if (isNaN(x1)) {
   document.getElementById("text1").firstChild.data = "Bitte gib eine gültige Zahl für den x-Wert des linken Schnittpunktes ein, z.B. 1.5!";
 } else {
zx1 = x1;
document.getElementById("text1").firstChild.data = " . ";
if (zx1==2.5) {document.getElementById("text3").firstChild.data = " x1 stimmt! ";gm=1;}
     else {document.getElementById("text3").firstChild.data = " x1? überlege noch einmal ";gm=0;}
 } 
x2 = parseFloat(document.getElementById("zahl2").value);
 if (isNaN(x2)) {
   document.getElementById("text2").firstChild.data = "Bitte gib eine gültige Zahl für den x-Wert des rechten Schnittpunktes ein, z.B. 5 !";
 } else {
zx2 = x2;
document.getElementById("text2").firstChild.data = " . ";
if (zx2==3.5) {document.getElementById("text4").firstChild.data = " x2 stimmt! ";gb=1;}
     else {document.getElementById("text4").firstChild.data = " x2? überlege noch einmal ";gb=0;}
 } 

}


function Zeigetext0 () {

zm=0; zb=0;
  document.getElementById("text0").firstChild.data = "-Symmetrieachse-. Sie ist wie ein Spiegel: Spiegelt man die Graphen links davon, so erhält man die Graphen rechts davon.";

}

function Zeigetext5 () {

 goalmb=gm+gb; 
 if(goalmb==2){ 
 document.getElementById("text5").firstChild.data = "Das Integral von 3 bis x2 berechnen von f-g";}
 else { document.getElementById("text5").firstChild.data = "bestimme erst einmal die Schnittpunkte x1 und x2 ( s.o.)" ;}

}

function Zeigetext6 () {

 document.getElementById("text6").firstChild.data = "f(x)-g(x)=-4x²+24x-35";

}

function AWerteingeben () {

A = parseFloat(document.getElementById("zahl3").value);
 if (isNaN(A)) {
   document.getElementById("text8").firstChild.data = "Bitte gib eine gültige Zahl für die Fläche A ein, z.B. 1.525!";
 } else {
zA = A;
document.getElementById("text8").firstChild.data = " . ";
if (Math.abs(zA-0.666)<0.0015) {document.getElementById("text9").firstChild.data = " xs stimmt! ";gxs=1;}
  else { if (zA>0.667) {document.getElementById("text9").firstChild.data = " xs ist zu groß.";gxs=0;} ;
         if (zA<0.665) {document.getElementById("text9").firstChild.data = " xs ist zu klein.";gxs=0;} } 
 } 

}


</script> <head>

</head>

<body>


<input type="button" value="So nennt man die gepunktete Gerade" onclick="Zeigetext0()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Nun sollst Du die Schnittpunkte x1 und x2 der beiden Parabeln bestimmen, d.h. löse:

 -(x-2)\cdot (x-4) =3\cdot (x-2)^2 Nach dem Lösen der quadratischen Gleichung kannst Du Deine Ergebnisse erst einmal mit den abgelesenen Werten vom Graphen ( s.o. ) vergleichen. Bitte x1 und x2 eingeben :

<html lang="de"> <body>

<label> x1= <input type="text" id="zahl1" size="4"></label> <label> x2= <input type="text" id="zahl2" size="4"></label> (Kommazahlen mit Punkt z.B. 2.3 )

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

<input type="button" value="Stimmen meine Werte?" onclick="Wertefuerpunkteeingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Wegen der grau gepunkteten Geraden und deren besonderer Eigenschaften genügt es, die Fläche A2 zu bestimmen, denn A ist das doppelte von A2. Bestimme jetzt also die Fläche A2. Wenn Du nicht weisst, wie man das macht, dann klicke auf den "Wie geht das?" - Button: <html lang="de"> <body>

<input type="button" value="Wie geht das?" onclick="Zeigetext5()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Wenn Du Dich damit nicht ( mehr ) auskennst, dann kannst Du es hier nachlesen: Fläche zwischen f und g bestimmen mit Integral Als Ergebnis für den Zwischenschritt f(x)-g(x) bekommt man heraus ( alles vorher ausmultiplizieren ) : <html lang="de"> <body>

<input type="button" value="f(x)-g(x)" onclick="Zeigetext6()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Gib Deine Lösung für die Fläche \color{Blue} A , also das Doppelte von \color{red} A2 als Kommazahl mit drei Nachkommastellen ein : <html lang="de"> <body>

<label> Fläche A= <input type="text" id="zahl3" size="4"></label> (Kommazahlen mit Punkt z.B. 2.3 )

. . . . . . . . . . . . . . . . . . . . . . . . .

<input type="button" value="Stimmt mein Wert für A?" onclick="AWerteingeben()">

. . . . . . . . . . . . . . . . . . . . . . . . .

</body> </html> Man kann durch die Verschiebung der Graphen um 3 Einheiten nach links auch zum gleichen Resultat kommen. Wer möchte diese Rechnung zur Veröffentlichung hier vorführen?

Danke nochmal an J.H. für diese Aufgabe und die Erlaubnis, sie hier zu veröffentlichen.

So klappt es

Ein gutes Werkzeug ist die automatische Entfernung von Linefeeds mit folgendem Programm: http://www.textfixer.com/tools/remove-line-breaks.php

Newline-Zeichen herausschneiden

Bei komplizierteren Ausdrücken, die z.B. Javascript innerhalb von HTML enthalten, hatte ich zunächst keinen Erfolg, bis ich die Newline- ( oder Carriage-return) Zeichen aus den javascript-funktionen herausgeschnitten hatte. Das hier funktioniert:

<shtml hash="1af7a937a108663dcb9a3bccdc12bcf2"><head><title>Steigung einer Geraden berechnen</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> function ZufallsSteigungAufgabestellen () {Zy1 = Math.ceil(10*Math.random()); Zy2 = Math.ceil(10*Math.random()); Zx1 = -3+Math.ceil(8*Math.random()); Zx2 = Zx1+Math.ceil(10*Math.random()); document.getElementById("ergebnis10").firstChild.data = "dabei ist A(" + Zx1 + "| " + Zy1 + ") und B(" + Zx2 + "| " + Zy2 +")";} function ZufallsSteigungBerechnen () {var Steigung = ( Zy2-Zy1 ) / ( Zx2-Zx1 );document.getElementById("ergebnis11").firstChild.data = "Die Steigung ist " + Steigung;} </script> </head> <body> Bestimme die Steigung einer Geraden, die durch zwei vorgegebene Punkte A(x1|y1), B(x2|y2) verläuft.

<input type="button" value="Erzeuge eine Aufgabe zur Geradensteigung!" onclick="ZufallsSteigungAufgabestellen()">

Ergebnis:

Notiere jetzt auf einem Blatt Papier Deine eigene Rechnung und Dein Ergebnis für die Geradensteigung. Danach darfst Du vergleichen mit der Lösung:

<input type="button" value="Computer berechne das Ergebnis!" onclick="ZufallsSteigungBerechnen()">

Ergebnis:

</body></shtml>

aber das hier funktioniert nicht:

<shtml hash="79acaf8bc1eafc19c569d7e2bb653c75"><head><title>Steigung einer Geraden berechnen</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> function ZufallsSteigungAufgabestellen () {

Zy1 = Math.ceil(10*Math.random());
Zy2 = Math.ceil(10*Math.random());
Zx1 = -3+Math.ceil(8*Math.random());
Zx2 = Zx1+Math.ceil(10*Math.random());
  document.getElementById("ergebnis10").firstChild.data = "dabei ist A(" + Zx1 + "| " + Zy1 + ") und B(" + Zx2 + "| " + Zy2 +")";

} function ZufallsSteigungBerechnen () {

var Steigung = ( Zy2-Zy1 ) / ( Zx2-Zx1 );
  document.getElementById("ergebnis11").firstChild.data = "Die Steigung ist " + Steigung;

} </script> </head> <body> Bestimme die Steigung einer Geraden, die durch zwei vorgegebene Punkte A(x1|y1), B(x2|y2) verläuft.

<input type="button" value="Erzeuge eine Aufgabe zur Geradensteigung!" onclick="ZufallsSteigungAufgabestellen()">

Ergebnis:

Notiere jetzt auf einem Blatt Papier Deine eigene Rechnung und Dein Ergebnis für die Geradensteigung. Danach darfst Du vergleichen mit der Lösung:

<input type="button" value="Computer berechne das Ergebnis!" onclick="ZufallsSteigungBerechnen()">

Ergebnis:

</body></shtml>

Auch die Leerzeichen stören manchmal

Die Leerzeichen verhindern in SHTML an den Stellen die funktion des Zusammenfügens von Text-werten und Zahlen-Werten. Beispiel: in der Funktion unten klappt es nicht, wenn

document.getElementById("ergebnis11").firstChild.data = "x1 = " + x1 ;

da steht, aber es klappt, wenn es

document.getElementById("ergebnis11").firstChild.data = "x1 = "+x1;

heisst. Seltsam, aber wahr. Immerhin habe ich so eine Möglichkeit gefunden, dass es dann doch klappt. Vielleicht kann ich das Weglassen der Newline-Befehle auch wieder rückgängig machen, und alles lag nur an diesen Leerzeichen? Überprüfe ich später.

<html lang="de"> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> function NewtonverfahrenAufgabestellen () {

k = parseFloat(document.getElementById("zahl").value);
 if (isNaN(k)) {
   document.getElementById("ergebnis10").firstChild.data = "Bitte gib eine gültige Zahl ein!";
 } else {
zx = (4+k*0.2);
  document.getElementById("ergebnis10").firstChild.data = "Aufgabe: Sei f(x)= x³-" + zx + " x-10";
 } 

} function ComputerBerechnetx1x2 () {

f3 = 3*3*3-zx*3-10;
fs3= 3*3*3-zx;
x1 = 3- f3/fs3;
fx1= x1*x1*x1-zx*x1-10;
fsx1=3*x1*x1-zx;
x2 = x1-fx1/fsx1;
fx2 =x2*x2*x2-zx*x2-10; 
fsx2=3*x2*x2-zx;
x3 = x2-fx2/fsx2;
fx3 =x3*x3*x3-zx*x3-10; 
fsx3=3*x3*x3-zx;
x4 = x3-fx3/fsx3;
fx4 =x4*x4*x4-zx*x4-10; 
fsx4=3*x4*x4-zx;
x5 = x4-fx4/fsx4;
fx5 =x5*x5*x5-zx*x5-10; 
  document.getElementById("ergebnis11").firstChild.data = "x1 = " + x1 ;
  document.getElementById("ergebnis12").firstChild.data = "x2 = " + x2 ;
  document.getElementById("ergebnis13").firstChild.data = "f(x2) = " + fx2 ;
  document.getElementById("ergebnis14").firstChild.data = "f(x0) = " + f3 ;
  document.getElementById("ergebnis15").firstChild.data = "f'(x0) = " + fs3 ;
  document.getElementById("ergebnis16").firstChild.data = "f(x1) = " + fx1 ;
  document.getElementById("ergebnis17").firstChild.data = "f'(x1) = " + fsx1 ;
  document.getElementById("ergebnis18").firstChild.data = "x3 = " + x3 ;
  document.getElementById("ergebnis19").firstChild.data = "x4 = " + x4 ;
  document.getElementById("ergebnis20").firstChild.data = "x5 = " + x5 ;
  document.getElementById("ergebnis21").firstChild.data = "f(x5) = " + fx5 ;

} </script> </head> <body>

<label>Bitte Deine Zahl k eingeben: <input type="text" id="zahl" size="4"></label>

<input type="button" value="Erzeuge eine Aufgabe zum Newtonverfahren!" onclick="NewtonverfahrenAufgabestellen()">

Aufgabe 1:

Berechne ausgehend von x_0 = 3 nach dem Newtonverfahren die nächsten Näherungswerte für die Nullstelle, also x_1 und x_2 . Notiere diese jetzt auf einem Blatt Papier. Danach darfst Du vergleichen mit der Lösung:

<input type="button" value="Computer berechne das Ergebnis!" onclick="ComputerBerechnetx1x2()">

Ergebnis:

Ergebnis:

Ergebnis:

Man sieht: mit x_2 ist man einer Nullstelle von f schon ziemlich nahe gekommen. Würde man das Newtonverfahren weiter betreiben, so käme man noch näher heran. Und hier noch ein paar Zwischenergebnisse:

Ergebnis:

Ergebnis:

Ergebnis:

Ergebnis:

Und zum Schluss für sehr interessierte Schüler noch einige weitere Schritte im Newtonverfahren zum Nachrechnen:

Ergebnis:

Ergebnis:

Ergebnis:

Ergebnis:

</body> </html>