FLBK-Wiki

Hauptsatz der Differential- und Integralrechnung: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
VisuellWikitext
 
Zeile 40: Zeile 40:
</head>
</head>
<body>
<body>
     <div id="binomBoard" style="width: 90vw; max-width: 400px; height: 60vw; max-height: 300px; margin-top:20px;"></div>
     <div id="box2" style="width: 90vw; max-width: 400px; height: 60vw; max-height: 300px; margin-top:20px;"></div>
     <script type="text/javascript">
     <script type="text/javascript">
        var brd = JXG.JSXGraph.initBoard('binomBoard', {
        JXG.Options.text.useMathJax = true;     
        axis: true,
        // JSXGraph-Board erstellen
        boundingbox: [-6.5, 0.2, 50, -0.05],
        var board = JXG.JSXGraph.initBoard('box2', {
        showCopyright: false,
            boundingbox: [-5, 5, 10, -5], // Angepasste Boundingbox für die Skalierung
        showNavigation: false,
            axis: true,
        defaultAxes: {
            showCopyright: false,
            x: {
            showNavigation: true,
                withLabel: true,
            grid: true, // Gitternetz aktivieren
                name: 'k',
            defaultAxes: {
                label: {
                x: {
                    position: 'rt',
                    withLabel: true,
                    offset: [5, 15],
                    name: '\\[t\\]',
                     fontSize: 12
                    label: {
                }
                        position: 'rt',
            },
                        offset: [-5, 20],
            y: {
                        fontSize: 14,
                withLabel: true,
                        anchorX: 'right'
                name: 'P(X = k)',
                    },
                label: {
                     ticks: {
                    position: 'rt',
                        ticksDistance: 1,
                    offset: [-45, -5],
                        minorTicks: 0
                     fontSize: 12
                    }
                },
                y: {
                    withLabel: true,
                    name: '\\[f(t)\\]',
                    label: {
                        position: 'rt',
                        offset: [5, 20],
                        fontSize: 14,
                        anchorY: 'right'
                     },
                    ticks: {
                        ticksDistance: 1,
                        minorTicks: 0
                    }
                 }
                 }
             }
             }
         }
         });
    });
 
    // --- Slider ---
    // n-Slider
    var nSlider = brd.create('slider', [[5, 0.185], [40, 0.185], [50, 150, 200]], {
        name: 'n',
        snapWidth: 1,
        fillColor: 'white',
        strokeColor: '#3498db',
        highlightStrokeColor: '#3498db',
        baseline: {strokeColor: '#3498db', strokeWidth: 2},
        highline: {strokeColor: '#2980b9', strokeWidth: 3}
    });
 
    // p-Slider
    var pSlider = brd.create('slider', [[5, 0.175], [40, 0.175], [0, 0.1, 0.2]], {
        name: 'p',
        snapWidth: 0.01,
        fillColor: 'white',
        strokeColor: '#e74c3c',
        highlightStrokeColor: '#e74c3c',
        baseline: {strokeColor: '#e74c3c', strokeWidth: 2},
        highline: {strokeColor: '#c0392b', strokeWidth: 3}
    });
 
    // k-Slider (neu)
    var kSlider = brd.create('slider', [[5, 0.165], [40, 0.165], [0, 10, 50]], {
        name: 'k',
        snapWidth: 1,
        fillColor: 'white',
        strokeColor: '#2ecc71',
        highlightStrokeColor: '#2ecc71',
        baseline: {strokeColor: '#2ecc71', strokeWidth: 2},
        highline: {strokeColor: '#27ae60', strokeWidth: 3}
    });
 
    // --- Hilfsfunktionen ---
    function binomProb(n, k, p) {
        var x, p1 = 1,
        p2 = 1,
        coeff = 1;
        for (x = n - k + 1; x < n + 1; x++) {
            coeff *= x;
        }
        for (x = 1; x < k + 1; x++) {
            coeff /= x;
        }
        for (x = 0; x < k; x++) {
            p1 *= p;
        }
        for (x = 0; x < n - k; x++) {
            p2 *= (1 - p);
        }
        return coeff * p1 * p2;
    }
 
    // Berechne Erwartungswert und Standardabweichung
    function getMu() {
        var n = Math.round(nSlider.Value());
        var p = pSlider.Value();
        return n * p;
    }
 
    function getSigma() {
        var n = Math.round(nSlider.Value());
        var p = pSlider.Value();
        return Math.sqrt(n * p * (1 - p));
    }
 
    // --- Balken vorbereiten ---
    var maxBars = 200;
    var bars = [];
    for (let k = 0; k <= maxBars; k++) {
        let heightF = function() {
            var n = Math.round(nSlider.Value());
            var p = pSlider.Value();
            if (k > n || k > 75) return 0;
            return binomProb(n, k, p);
        };


         // Alle Balken in orange
         // Funktion erstellen
         let colorF = function() {
         var c1 = board.create('functiongraph', [function(t) {
             return '#ffaa44';
             return (Math.pow(t, 5) / 24 - Math.pow(t, 3) / 2 + t);
         };
         }]);


         var poly = brd.create('polygon', [
        // Integral erstellen
             [k - 0.5, 0],
         var i1 = board.create('integral', [
            [k - 0.5, heightF],
             [-2.0, 2.0], c1
            [k + 0.5, heightF],
            [k + 0.5, 0]
         ], {
         ], {
             withLines: true,
             withLabel: true,
             borders: {strokeWidth: 1, strokeColor: '#cc8800'},
             label: {
            fillOpacity: 0.7,
                fontSize: 14,
             fillColor: colorF,
                offset: [0, 50],
             vertices: {visible: false},
                digits: 4,
             visible: function() {
                intl: {
                 return k <= Math.round(nSlider.Value()) && k <= 75;
                    enabled: false,
                    options: {}
                }
             },
             baseLeft: {   // Start point
                visible: true,
                fixed: false,
                withLabel: true,
                name: 'a'
            },
             baseRight: {    // End point
                visible: true,
                fixed: false,
                withLabel: true,
                 name: 'b'
             }
             }
         });
         });


         bars.push(poly);
         // Integral-Label anpassen
    }
        i1.label.setText(() => {
            const a = i1.baseLeft.X().toFixed(2); // Untere Grenze
            const b = i1.baseRight.X().toFixed(2); // Obere Grenze
            const value = i1.Value().toFixed(4); // Wert des Integrals
            return `\\[\\int_{${a}}^{${b}} f(t) \\, dt = ${value}\\]`;
        });


    // --- Sigmaregeln Visualisierung ---
        // Beschriftung der Funktion mit f
    // Vertikale Linien für μ, μ±σ, μ±2σ, μ±3σ (nur unterhalb der x-Achse)
         board.create('text', [3.5, 3, '\\[f\\]'], {
    var muLine = brd.create('segment', [
            fontSize: 14,
        function() { return [getMu(), 0]; },
            fixed: true,
        function() { return [getMu(), -0.005]; }
            anchorX: 'left',
    ], {
            anchorY: 'bottom',
         strokeColor: '#0000ff',
            color: 'blue'
        strokeWidth: 2,
         });
        dash: 1
    });
 
    var muPlusSigmaLine = brd.create('segment', [
        function() { return [getMu() + getSigma(), 0]; },
        function() { return [getMu() + getSigma(), -0.015]; }
    ], {
        strokeColor: '#007700',
        strokeWidth: 2,
        dash: 1
    });
 
    var muMinusSigmaLine = brd.create('segment', [
        function() { return [getMu() - getSigma(), 0]; },
        function() { return [getMu() - getSigma(), -0.015]; }
    ], {
        strokeColor: '#007700',
        strokeWidth: 2,
        dash: 1
    });
 
    var muPlus2SigmaLine = brd.create('segment', [
        function() { return [getMu() + 2 * getSigma(), 0]; },
        function() { return [getMu() + 2 * getSigma(), -0.025]; }
    ], {
        strokeColor: '#aa5500',
        strokeWidth: 2,
        dash: 1
    });
 
    var muMinus2SigmaLine = brd.create('segment', [
        function() { return [getMu() - 2 * getSigma(), 0]; },
        function() { return [getMu() - 2 * getSigma(), -0.025]; }
    ], {
        strokeColor: '#aa5500',
        strokeWidth: 2,
        dash: 1
    });
 
    var muPlus3SigmaLine = brd.create('segment', [
        function() { return [getMu() + 3 * getSigma(), 0]; },
        function() { return [getMu() + 3 * getSigma(), -0.035]; }
    ], {
        strokeColor: '#aa0000',
        strokeWidth: 2,
        dash: 1
    });
 
    var muMinus3SigmaLine = brd.create('segment', [
        function() { return [getMu() - 3 * getSigma(), 0]; },
        function() { return [getMu() - 3 * getSigma(), -0.035]; }
    ], {
        strokeColor: '#aa0000',
        strokeWidth: 2,
        dash: 1
    });
 
    // Beschriftungen für die Sigmaregeln (nach unten versetzt)
    brd.create('text', [function() { return getMu(); }, -0.0075, 'μ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#0000ff'
    });
   
    brd.create('text', [function() { return getMu() + getSigma(); }, -0.0175, 'μ+σ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#007700'
    });
   
    brd.create('text', [function() { return getMu() - getSigma(); }, -0.0175, 'μ-σ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#007700'
    });
   
    brd.create('text', [function() { return getMu() + 2 * getSigma(); }, -0.0275, 'μ+2σ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#aa5500'
    });
   
    brd.create('text', [function() { return getMu() - 2 * getSigma(); }, -0.0275, 'μ-2σ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#aa5500'
    });
   
    brd.create('text', [function() { return getMu() + 3 * getSigma(); }, -0.0375, 'μ+3σ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#aa0000'
    });
   
    brd.create('text', [function() { return getMu() - 3 * getSigma(); }, -0.0375, 'μ-3σ'], {
        anchorX: 'middle',
        fontSize: 12,
        strokeColor: '#aa0000'
    });
 
    // Anzeige von P(X=k), μ und σ (oben rechts)
    brd.create('text', [30, 0.15, function() {
        var n = Math.round(nSlider.Value());
        var p = pSlider.Value();
        var k = Math.round(kSlider.Value());
        return 'P(X = ' + k + ') = ' + binomProb(n, k, p).toFixed(6);
    }], {
        anchorX: 'left',
        fontSize: 12,
        fixed: true
    });
   
    brd.create('text', [30, 0.14, function() { return 'μ = n·p=' + getMu().toFixed(2); }], {
        anchorX: 'left',
        fontSize: 12,
        fixed: true
    });
   
    brd.create('text', [30, 0.13, function() { return 'σ = √(n·p·(1-p))=' + getSigma().toFixed(2); }], {
        anchorX: 'left',
        fontSize: 12,
        fixed: true
    });
 
brd.create('text', [30, 0.12, function() { return 'P(|X-' + getMu().toFixed(2) + '|\u2264' + getSigma().toFixed(2) + ') \u2248 0,683';}], {
        anchorX: 'left',
        fontSize: 12,
        fixed: true,
        strokeColor: '#007700'
    });
 
brd.create('text', [30, 0.11, function() { return 'P(|X-' + getMu().toFixed(2) + '|\u2264 2·' + getSigma().toFixed(2) + ') \u2248 0,955';}], {
        anchorX: 'left',
        fontSize: 12,
        fixed: true,
        strokeColor: '#aa5500'
    });
 
brd.create('text', [30, 0.1, function() { return 'P(|X-' + getMu().toFixed(2) + '|\u2264 3·' + getSigma().toFixed(2) + ') \u2248 0,997';}], {
        anchorX: 'left',
        fontSize: 12,
        fixed: true,
         strokeColor: '#aa0000'
    });
     </script>
     </script>
</body>
</body>
</html>
</html>
<html><iframe width="280" height="157.5" src="https://www.youtube.com/embed/Lc_R0vBSKHw?si=V72WfOUjhQRQlrN9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></html>


<html><iframe width="280" height="157,5" src="https://www.youtube.com/embed/MX_WQS5-vAg?si=N2TxoCi_PHsr1_1B" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></html>
<html><iframe width="280" height="157,5" src="https://www.youtube.com/embed/MX_WQS5-vAg?si=N2TxoCi_PHsr1_1B" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></html>
Abgerufen von „https://wiki.flbk-hamm.de/Hauptsatz_der_Differential-_und_Integralrechnung“