falsefalsetrue6Symétrie centrale (widgets)20diXTTrace la symétrique de la figure grise par rapport au point O.
{base:[[2,1],[2,2],[3,2],[4,2]],org:{name:"O",pos:[2.5,2.5],dim:[25,5],nameoffset:[0,-0.8],fontsize:48},width:400,height:400,cols:5,rows:5}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false],[false,false,false,false,false],[false,false,false,false,false],[false,true,true,true,false],[false,false,false,true,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[1,1],[2,1],[1,2],[2,2]],org:{name:"O",pos:[2,2],dim:[25,5],nameoffset:[0,-0.8],fontsize:48},width:400,height:400,cols:5,rows:5}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false],[false,false,false,false,false],[false,false,true,true,false],[false,false,true,true,false],[false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[1,2],[1,3],[1,4],[1,5],[2,5]],org:{name:"O",pos:[2,3],dim:[25,5],nameoffset:[0,-0.8],fontsize:48},width:400,height:400,cols:5,rows:5}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false],[false,false,true,true,false],[false,false,false,true,false],[false,false,false,true,false],[false,false,false,true,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[1,1],[2,1],[1,2],[1,3],[1,4],[1,5]],org:{name:"O",pos:[2.5,2.5],dim:[25,5],nameoffset:[0,-0.8],fontsize:48},width:400,height:400,cols:5,rows:5}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,true],[false,false,false,false,true],[false,false,false,false,true],[false,false,false,false,true],[false,false,false,true,true]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[2,2],[3,2],[4,2],[5,2],[2,3],[2,4],[2,5],[3,5],[4,5],[2,6],[2,7],[2,8]],org:{name:"O",pos:[5,5],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,false,true,true,true,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,true,true,true,true,false],[false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[3,2],[4,2],[5,2],[3,3],[3,4],[3,5],[4,5],[5,5]],org:{name:"O",pos:[5,5],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,true,true,true,false,false],[false,false,false,false,false,false,false,true,false,false],[false,false,false,false,false,false,false,true,false,false],[false,false,false,false,false,true,true,true,false,false],[false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[2,1],[4,1],[2,2],[4,2],[2,3],[3,3],[4,3],[2,4],[4,4],[2,5],[4,5]],org:{name:"O",pos:[5,5],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,true,false,true,false],[false,false,false,false,false,false,true,false,true,false],[false,false,false,false,false,false,true,true,true,false],[false,false,false,false,false,false,true,false,true,false],[false,false,false,false,false,false,true,false,true,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[2,3],[3,3],[4,3],[2,4],[2,5],[2,6],[2,7],[2,8],[2,9],[3,9],[4,9]],org:{name:"O",pos:[3,5],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,true,true,true,false,false,false,false,false],[false,false,false,false,true,false,false,false,false,false],[false,false,false,false,true,false,false,false,false,false],[false,false,false,false,true,false,false,false,false,false],[false,false,false,false,true,false,false,false,false,false],[false,false,false,false,true,false,false,false,false,false],[false,false,true,true,true,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[4,2],[5,2],[4,3],[5,3],[4,4],[5,4],[4,5],[5,5]],org:{name:"O",pos:[5,4],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,true,true,false,false,false],[false,false,false,false,false,true,true,false,false,false],[false,false,false,false,false,true,true,false,false,false],[false,false,false,false,false,true,true,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[2,2],[3,2],[4,2],[2,3],[4,3],[2,4],[3,4],[4,4],[2,5],[2,6],[2,7],[3,7],[4,7]],org:{name:"O",pos:[5,5],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,true,true,true,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,false,false,false,true,false],[false,false,false,false,false,false,true,true,true,false],[false,false,false,false,false,false,true,false,true,false],[false,false,false,false,false,false,true,true,true,false],[false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[3,2],[4,2],[5,2],[6,2],[7,2],[8,2],[3,3],[4,3],[5,3],[6,3],[7,3],[8,3],[4,4],[5,4]],org:{name:"O",pos:[5,5],dim:[25,5],nameoffset:[-1,-1],fontsize:32},width:400,height:400,cols:10,rows:10}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,true,true,false,false,false],[false,false,true,true,true,true,true,true,false,false],[false,false,true,true,true,true,true,true,false,false],[false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}Trace la symétrique de la figure grise par rapport au point O.
{base:[[8,10],[7,11],[8,11],[6,12],[7,12],[8,12],[5,13],[6,13],[7,13],[8,13],[4,14],[5,14],[6,14],[7,14],[8,14],[3,15],[4,15],[5,15],[6,15],[7,15],[8,15],[2,16],[3,16],[4,16],[5,16],[6,16],[7,16],[8,16],[7,17],[8,17],[1,18],[2,18],[3,18],[4,18],[5,18],[6,18],[7,18],[8,18],[9,18],[10,18],[11,18],[12,18],[13,18],[2,19],[3,19],[4,19],[5,19],[6,19],[7,19],[8,19],[9,19],[10,19],[11,19],[12,19],[13,19],[3,20],[4,20],[5,20],[6,20],[7,20],[8,20],[9,20],[10,20],[11,20],[12,20],[13,20]],org:{name:"O",pos:[10,10],dim:[25,5],nameoffset:[-2,-2],fontsize:32},width:400,height:400,cols:20,rows:20}

this.onload = function() {
    var me = this;
    var wait = function() {
        if ((me.reponse.find("#input-1") === null)) {
            setTimeout(wait, 100);
        } else {
            var G = me.question.find("#grid");
            var P = me.question.find("params").innerText;
            P = JSON.parse(P.replace(/(\w*):/g, "\"$1\":"));
            var REPS = null;
            if (me.reponse.find("#input-1").value) {
                REPS = JSON.parse(me.reponse.find("#input-1").value);
                if ((REPS.length !== P.rows) || (REPS[0].length !== P.cols)) {
                    REPS = null;
                }
            };
            var ALL = [];
            var d;
            var W = P.width;
            var H = P.height;
            G.inner("").stl(`width:${W}px;height:${H}px`);
            G.mdown = G.selected = false;
            G.paint = function(_elt) {
                _elt.stl(`background-color:${_elt.selected?"orange":"unset"}`);
            };
            G.store = function() {
                var reps = [];
                var logs = [];
                var line;
                for (var i = 0; i < ALL.length; i++) {
                    line = [];
                    for (var j = 0; j < ALL[i].length; j++) {
                        line.push(ALL[i][j].selected);
                        if (ALL[i][j].selected) logs.push([j + 1, i + 1]);
                    }
                    reps.push(line);
                };
                console.log(JSON.stringify(logs));
                me.reponse.find("#input-1").val(JSON.stringify(reps));
                me.reponse.find("#input-1").dispatchEvent(new KeyboardEvent('keyup', {}));
            };
            var line;
            for (var i = 0; i < P.rows; i++) {
                line = [];
                for (var j = 0; j < P.cols; j++) {
                    d = $.create("div").stl(`position:absolute;left:${j*W/P.cols}px;top:${i*H/P.rows}px;width:${W/P.cols}px;height:${H/P.rows}px;border:1px solid gray;`);
                    d.row = i;
                    d.col = j;
                    d.selected = REPS ? REPS[i][j] : false;
                    d.mousedown(function(e) {
                        var elt = e.target;
                        G.mdown = true;
                        G.selected = elt.selected = !elt.selected;
                        G.paint(elt);
                    });
                    d.mouseup(function() {
                        G.selected = G.mdown = false;
                        G.store();
                    });
                    d.ontouchmove = function(e) {
                        if (G.mdown) {
                            var elt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    };
                    d.mouseover(function(e) {
                        if (G.mdown) {
                            var elt = e.target;
                            elt.selected = G.selected;
                            G.paint(elt);
                        }
                    });
                    G.paint(d);
                    line.push(d);
                    G.add(d);
                };
                ALL.push(line);
            };
            var B = P.base;
            for (var i = 0; i < B.length; i++) {
                var XY = [B[i][0] - 1, B[i][1] - 1];
                var DOM = $.create("div").stl(`position:absolute;left:${XY[0]*W/P.cols+1}px;top:${XY[1]*H/P.rows+1}px;width:${W/P.cols-2}px;height:${H/P.rows-2}px;background-color:rgba(150,150,150,0.5);pointer-events: none;`);
                G.add(DOM);
            }
            var O = P.org;
            var w = O.dim[0];
            var h = O.dim[1];
            var offx = O.nameoffset[0] * W / (2 * P.cols);
            var offy = O.nameoffset[1] * H / (2 * P.rows);
            var DOM = $.create("div").stl(`position:absolute;transform: rotate(45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;transform: rotate(-45deg);left:${O.pos[0]*W/P.cols-w/2}px;top:${O.pos[1]*H/P.rows-h/2}px;width:${w}px;height:${h}px;background-color:#2296F3;pointer-events: none`);
            G.add(DOM);
            DOM = $.create("div").stl(`position:absolute;left:${(O.pos[0]-0.5)*W/P.cols+offx}px;top:${(O.pos[1]-0.5)*H/P.rows+offy}px;width:${W/P.cols}px;height:${H/P.rows}px;text-align:center;pointer-events: none;color:#2296F3;font-size:${O.fontsize}px;font-weight:bold;line-height:${H/P.rows}px`).inner(O.name);
            G.add(DOM);
        };
    };
    wait();
    me.reponse.hide();
};

[["[[false,false,false,false,false,false,false,true,true,true,true,true,true,true,true,true,true,true,false,false],[false,false,false,false,false,false,false,true,true,true,true,true,true,true,true,true,true,true,true,false],[false,false,false,false,false,false,false,true,true,true,true,true,true,true,true,true,true,true,true,true],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,true,true,true,true,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,true,true,true,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,true,true,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,true,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,true,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,true,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false]]","text"]]custom-line{"inps":[["a","text"]],"sfx":"z"}