Hauptsatz der Differential- und Integralrechnung: Unterschied zwischen den Versionen

Markierung: Zurückgesetzt
Markierung: Zurückgesetzt
Zeile 33: Zeile 33:
* Liegt der Graph von <math>f</math> unterhalb der x-Achse, ist das bestimmte Integral negativ.
* Liegt der Graph von <math>f</math> unterhalb der x-Achse, ist das bestimmte Integral negativ.
* Liegt der Graph von <math>f</math> sowohl unterhalb als auch oberhalb der x-Achse, ist das bestimmte Integral die Differenz aus dem oberen Flächeninhalt und dem unteren Flächeninhalt.
* Liegt der Graph von <math>f</math> sowohl unterhalb als auch oberhalb der x-Achse, ist das bestimmte Integral die Differenz aus dem oberen Flächeninhalt und dem unteren Flächeninhalt.


<html>
<html>
<head>
<head>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraphcore.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraphcore.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    <!-- KaTeX einbinden -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraph.css" />
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraph.css" />
</head>
</head>
Zeile 44: Zeile 45:
     <div id="box2" style="width:25%; aspect-ratio:3/2; margin-top:20px;"></div>
     <div id="box2" style="width:25%; aspect-ratio:3/2; margin-top:20px;"></div>
     <script type="text/javascript">
     <script type="text/javascript">
        JXG.Options.text.useMathJax = true;     
         // JSXGraph-Board erstellen
         // JSXGraph-Board erstellen
         var board = JXG.JSXGraph.initBoard('box2', {
         var board = JXG.JSXGraph.initBoard('box2', {
Zeile 93: Zeile 93:
             [-2.0, 2.0], c1
             [-2.0, 2.0], c1
         ], {
         ], {
             withLabel: true,
             withLabel: false, // Label in JSXGraph deaktivieren
            label: {
                fontSize: 16,
                offset: [0, 50],
                digits: 4,
                intl: {
                    enabled: false,
                    options: {}
                }
            },
             baseLeft: {    // Start point
             baseLeft: {    // Start point
                 visible: true,
                 visible: true,
Zeile 117: Zeile 108:
         });
         });


         // Integral-Label anpassen
         // Text-Element für das Integral-Label erstellen
         i1.label.setText(() => {
         var integralLabel = board.create('text', [1, 4, ''], {
            fontSize: 16,
            fixed: true,
            anchorX: 'left',
            anchorY: 'bottom',
            color: 'black'
        });
 
        // Funktion zum Aktualisieren des KaTeX-Labels
        const updateLabel = () => {
             const a = i1.baseLeft.X().toFixed(2); // Untere Grenze
             const a = i1.baseLeft.X().toFixed(2); // Untere Grenze
             const b = i1.baseRight.X().toFixed(2); // Obere Grenze
             const b = i1.baseRight.X().toFixed(2); // Obere Grenze
             const value = i1.Value().toFixed(4); // Wert des Integrals
             const value = i1.Value().toFixed(4); // Wert des Integrals
             return `\\[\\int_{${a}}^{${b}} f(x) \\, dx = ${value}\\]`;
             const latexCode = `\\int_{${a}}^{${b}} f(x) \\, dx = ${value}`;
         });
           
            // KaTeX rendern und in das Text-Element einfügen
            katex.render(latexCode, integralLabel.rendNodeText, {
                throwOnError: false
            });
         };
 
        // Event-Handler für die Aktualisierung des Labels
        i1.baseLeft.on('drag', updateLabel);
        i1.baseRight.on('drag', updateLabel);
 
        // Initiales Rendern des Labels
        updateLabel();


         // Beschriftung der Funktion mit f
         // Beschriftung der Funktion mit f
Zeile 133: Zeile 145:
             color: 'blue'
             color: 'blue'
         });
         });
console.log("MathJax loaded:", typeof MathJax !== 'undefined');
     </script>
     </script>
</body>
</body>