<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/tangram" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Tangram" 
    allowfullscreen
></iframe>

<a href="javascript:solveit()">Click here to solve it</a>

<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';

    function solveit() {
        var t = 400;
        f1.setAttribute('shadow:false');
        f2.setAttribute('shadow:false');
        f3.setAttribute('shadow:false');
        f4.setAttribute('shadow:false');
        f5.setAttribute('shadow:false');
        f6.setAttribute('shadow:false');
        f7.setAttribute('shadow:false');
        //board.suspendUpdate();
        p11.moveTo([16, 5], t);
        p21.moveTo([16, 5], t);
        p22.moveTo([13.5, 7.5], t);
        p31.moveTo([18.5, 12.5], t);
        p32.moveTo([16, 10], t);
        p41.moveTo([11, 5], t);
        p42.moveTo([16, 10], t);
        p51.moveTo([11, 15], t);
        p52.moveTo([16, 10], t);
        p61.moveTo([16, 5], t);
        p62.moveTo([18.5, 7.5], t);
        p71.moveTo([18.5, 7.5], t);
        //board.unsuspendUpdate();
        window.setTimeout('hidePoints()', 1000);
    }
    
    function hidePoints() {
        p11.setAttribute('visible:false');
        p21.setAttribute('visible:false');
        p31.setAttribute('visible:false');
        p41.setAttribute('visible:false');
        p51.setAttribute('visible:false');
        p61.setAttribute('visible:false');
        p71.setAttribute('visible:false');
        p12.setAttribute('visible:false');
        p22.setAttribute('visible:false');
        p32.setAttribute('visible:false');
        p42.setAttribute('visible:false');
        p52.setAttribute('visible:false');
        p62.setAttribute('visible:false');
        p72.setAttribute('visible:false');
    }
    
    var board = JXG.JSXGraph.initBoard(BOARDID, { showNavigation: false, showCopyright: true, originX: 0, originY: 670,
        unitX: 30, unitY: 30, keepaspectratio: true });
    
    var p1 = board.create('point', [11, 5], { visible: false });
    var p2 = board.create('point', [11, 15], { visible: false });
    var p3 = board.create('point', [21, 15], { visible: false });
    var p4 = board.create('point', [21, 5], { visible: false });
    var f = board.create('polygon', [p1, p2, p3, p4], { fillcolor: 'none' });
    for (var i = 0; i < f.borders.length; i++) {
        f.borders[i].setAttribute('strokeColor:black');
    }
    
    // First polygon 
    var p11 = board.create('point', [16, 16], { face: 'circle', fillColor: 'blue', strokeColor: 'blue', withLabel: false,
        visible: true });
    var c11 = board.create('circle', [p11, 5], { visible: false });
    var p12 = board.create('glider', [21, 16, c11], { face: 'plus', strokeColor: 'blue', withLabel: false, visible: true });
    var p13 = board.create('point', [function() { return -p12.Y() + p11.Y() + p12.X() }, function() { return -p11.X() + p12
            .X() + p12.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var f1 = board.create('polygon', [p11, p12, p13], { fillcolor: '#99FF00', visible: true, shadow: true });
    for (i = 0; i < f1.borders.length; i++) {
        f1.borders[i].setAttribute('strokeColor:black');
    }
    
    // Second polygon
    var p21 = board.create('point', [11, 16], { face: 'circle', fillColor: 'blue', strokeColor: 'blue', withLabel: false,
        visible: true });
    var c21 = board.create('circle', [p21, 5 / 2.0 * Math.sqrt(2)], { visible: false });
    var p22 = board.create('glider', [11.0 + 5 / 2.0 * Math.sqrt(2), 16, c21], { face: 'plus', strokeColor: 'blue',
        withLabel: false, visible: true });
    
    var p23 = board.create('point', [function() { return -p22.Y() + p21.Y() + p22.X() }, function() { return -p21.X() + p22
            .X() + p22.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var f2 = board.create('polygon', [p21, p22, p23], { fillcolor: '#0099CC', visible: true, shadow: true });
    for (i = 0; i < f2.borders.length; i++) {
        f2.borders[i].setAttribute('strokeColor:black');
    }
    
    // Third polygon
    var p31 = board.create('point', [11 + 5 / 2.0 * Math.sqrt(2), 21], { face: 'circle', fillColor: 'blue',
        strokeColor: 'blue', strokeColor: 'blue', withLabel: false, visible: true });
    var c31 = board.create('circle', [p31, 5 / 2.0 * Math.sqrt(2)], { visible: false });
    var p32 = board.create('glider', [11, 21, c31], { face: 'plus', strokeColor: 'blue', withLabel: false, visible: true });
    var p33 = board.create('point', [function() { return -p32.Y() + p31.Y() + p32.X() }, function() { return -p31.X() + p32
            .X() + p32.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var f3 = board.create('polygon', [p31, p32, p33], { fillcolor: '#FFFF00', visible: true, shadow: true });
    for (i = 0; i < f3.borders.length; i++) {
        f3.borders[i].setAttribute('strokeColor:black');
    }
    
    // Fourth polygon
    var p41 = board.create('point', [1, 5], { face: 'circle', fillColor: 'blue', strokeColor: 'blue', withLabel: false,
        visible: true });
    var c41 = board.create('circle', [p41, 5 * Math.sqrt(2)], { visible: false });
    var p42 = board.create('glider', [1 + 5 * Math.sqrt(2), 5, c41], { face: 'plus', strokeColor: 'blue', withLabel: false,
        visible: true });
    var p43 = board.create('point', [function() { return -p42.Y() + p41.Y() + p42.X() }, function() { return -p41.X() + p42
            .X() + p42.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var f4 = board.create('polygon', [p41, p42, p43], { fillcolor: '#FFCCFF', visible: true, shadow: true });
    for (i = 0; i < f4.borders.length; i++) {
        f4.borders[i].setAttribute('strokeColor:black');
    }
    
    // Fifth polygon
    var p51 = board.create('point', [1 + 5 * Math.sqrt(2), 13.5], { face: 'circle', fillColor: 'blue', strokeColor: 'blue',
        withLabel: false, visible: true });
    var c51 = board.create('circle', [p51, 5 * Math.sqrt(2)], { visible: false });
    var p52 = board.create('glider', [1, 13.5, c51], { face: 'plus', strokeColor: 'blue', withLabel: false,
    visible: true });
    var p53 = board.create('point', [function() { return -p52.Y() + p51.Y() + p52.X() }, function() { return -p51.X() + p52
            .X() + p52.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var f5 = board.create('polygon', [p51, p52, p53], { fillcolor: '#996699', visible: true, shadow: true });
    for (i = 0; i < f5.borders.length; i++) {
        f5.borders[i].setAttribute('strokeColor:black');
    }
    
    // Sixth polygon
    var p61 = board.create('point', [1, 15], { face: 'circle', fillColor: 'blue', strokeColor: 'blue', withLabel: false,
        visible: true });
    var c61 = board.create('circle', [p61, 5 / 2 * Math.sqrt(2)], { visible: false });
    var p62 = board.create('glider', [1 + 5 / 2 * Math.sqrt(2), 15, c61], { face: 'plus', strokeColor: 'blue',
        withLabel: false, visible: true });
    var p63 = board.create('point', [function() { return -p62.Y() + p61.Y() + p62.X() }, function() { return -p61.X() + p62
            .X() + p62.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var p64 = board.create('point', [function() { return -p62.Y() + p61.Y() + p61.X() }, function() { return -p61.X() + p62
            .X() + p61.Y() }], { face: 'circle', fillColor: 'blue', withLabel: false, visible: false });
    var f6 = board.create('polygon', [p61, p62, p63, p64], { fillcolor: '#EE0000', visible: true, shadow: true });
    for (i = 0; i < f6.borders.length; i++) {
        f6.borders[i].setAttribute('strokeColor:black');
    }
    
    // Seventh polygon
    var p71 = board.create('point', [6, 14.5], { face: 'circle', fillColor: 'blue', strokeColor: 'blue', withLabel: false,
        visible: true });
    var c71 = board.create('circle', [p71, 5 / 2 * Math.sqrt(2)], { visible: false });
    var p72 = board.create('glider', [8.5, 17, c71], { face: 'plus', strokeColor: 'blue', withLabel: false,
    visible: true });
    var p73 = board.create('point', [function() { return p72.X() - p71.X() - p72.Y() + p71.Y() + p72.X() },
    function() { return p72.X() - p71.X() + p72.Y() - p71.Y() + p72.Y() }], { face: 'circle', fillColor: 'blue',
        withLabel: false, visible: false });
    var p74 = board.create('point', [function() { return p72.X() - p71.X() - p72.Y() + p71.Y() + p71.X() },
    function() { return p72.X() - p71.X() + p72.Y() - p71.Y() + p71.Y() }], { face: 'rectangle', fillColor: 'blue',
        withLabel: false, visible: false });
    var f7 = board.create('polygon', [p71, p72, p73, p74], { fillcolor: '#FFCC33', visible: true, shadow: true });
    for (i = 0; i < f7.borders.length; i++) {
        f7.borders[i].setAttribute('strokeColor:black');
    }
 </script>