<iframe 
    src="https://jsxgraph.org/share/iframe/matrix-multiplication-ii" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Matrix multiplication II" 
    allowfullscreen
></iframe>

<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()">

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    JXG.Options.text.useMathJax = true;
    
    var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: true });
    
    var a = board.create('slider', [[-5, -2], [5, -2], [-5, 1, 5]], { name: 'a', snapWidth: 0.1 });
    var b = board.create('slider', [[-5, -3], [5, -3], [-5, 0, 5]], { name: 'b', snapWidth: 0.1 });
    var c = board.create('slider', [[-5, -4], [5, -4], [-5, 0, 5]], { name: 'c', snapWidth: 0.1 });
    var d = board.create('slider', [[-5, -5], [5, -5], [-5, 1, 5]], { name: 'd', snapWidth: 0.1 });
    
    var v = board.create('point', [2, 2], { face: 'o', size: 2, name: 'v' });
    var va = board.create('arrow', [[0, 0], v]);
    
    var v2 = board.create('point', [
              () => a.Value() * v.X() + b.Value() * v.Y(),
              () => c.Value() * v.X() + d.Value() * v.Y()], 
              { face: 'o', size: 2, name: "v'", fillColor: 'black', strokeColor: 'black'});
    var va2 = board.create('arrow', [[0, 0], v2], { strokeColor: 'black', strokeWidth: 1 });
    
    var t = board.create('text', [-8, 5,
                () => '\\[M = \\begin{pmatrix}'
                  + (a.Value()).toFixed(2) + '&'
                  + (b.Value()).toFixed(2) + '\\\\'
                  + (c.Value()).toFixed(2) + '&'
                  + (d.Value()).toFixed(2) + '\\end{pmatrix}\\]']);
    
    var t2 = board.create('text', [-8, 2,
                 () => "\\[\\lambda = \\frac{|v'|}{|v|} = " + (
                      JXG.Math.Geometry.distance([0, 0], [v2.X(), v2.Y()]) /
                      JXG.Math.Geometry.distance([0, 0], [v.X(), v.Y()])
                      ).toFixed(3)
                      + "\\]"
                  ]);
    
    var showTrace = false;
    var toggleTrace = function() {
        showTrace = !showTrace;
        v.setAttribute({ trace: showTrace });
        v2.setAttribute({ trace: showTrace });
        var b = document.getElementById("toggleButton");
        if (showTrace) {
            b.value = "Hide trace";
        } else {
            b.value = "Show trace";
            v.clearTrace();
            v2.clearTrace();
        }
    };
 </script>