JSXGraph
JSXGraph share

Share

Turtle bot
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/turtle-bot" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Turtle bot" 
    allowfullscreen
></iframe>
This code has to 
<table>
    <tr>
        <td>Show recording: </td>
        <td><input type="checkbox" id="show_record"></td>
    </tr>
    <tr>
        <td>Show grid: </td>
        <td><input type="checkbox" id="show_grid"></td>
    </tr>
    <tr>
        <td>Step size: </td>
        <td><input type="number" id="step_size" min="0" max="500"></td>
    </tr>
    <tr>
        <td>Angle: </td>
        <td><input type="number" id="angle" min="0" max="359"></td>
    </tr>
    <tr>
        <td>Time : </td>
        <td><input type="number" id="time" min="0" max="2000"></td>
    </tr>
</table>
<p>
    <button id="btn_record">record</button>
    <button id="btn_play">play</button>
    <button id="btn_clear">clear screen</button>

<table>
    <tr>
        <td></td>
        <td><button id="btn_forward">forward</button></td>
        <td></td>
    </tr>
    <tr>
        <td><button id="btn_left">left</button></td>
        <td></td>
        <td><button id="btn_right">right</button></td>
    </tr>
    <tr>
        <td></td>
        <td><button id="btn_back">back</button></td>
        <td></td>
    </tr>
</table>

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

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-500, 500, 500, -500],
        axis: true,
        defaultAxes: {
            x: {
                visible: false,
                ticks: {
                    label: {
                        visible: false
                    }
                }
            },
            y: {
                visible: false,
                ticks: {
                    label: {
                        visible: false
                    }
                }
            }
        }
    });
    
    // Global variables:
    var turtle = board.create('turtle', [0, 0], { strokeWidth: 2, strokeColor: 'blue', arrow: { strokeWidth: 2,
            strokeColor: 'red' } });
    var is_recording = false;
    var program = [];
    var step;
    var angle = 45;
    var stepsize = 100;
    var time = 300;
    
    // Event handlers:
    document.getElementById("btn_forward").addEventListener('click', function(evt) {
        if (is_recording) {
            program.push('turtle.forward(stepsize);');
            if (document.getElementById("show_record").checked) { turtle.forward(stepsize); }
        } else {
            turtle.forward(stepsize);
        }
    });
    
    document.getElementById('btn_back').addEventListener('click', function(evt) {
        if (is_recording) {
            program.push('turtle.back(stepsize);');
            if (document.getElementById('show_record').checked) { turtle.back(stepsize); }
        } else {
            turtle.back(stepsize);
        }
    });
    
    document.getElementById('btn_left').addEventListener('click', function(evt) {
        if (is_recording) {
            program.push('turtle.left(angle);');
            if (document.getElementById('show_record').checked) { turtle.left(angle); }
        } else {
            turtle.left(angle);
        }
    });
    
    document.getElementById('btn_right').addEventListener('click', function(evt) {
        if (is_recording) {
            program.push('turtle.right(angle);');
            if (document.getElementById('show_record').checked) { turtle.right(angle); }
        } else {
            turtle.right(angle);
        }
    });
    
    document.getElementById('btn_clear').addEventListener('click', function(evt) {
        turtle.clearScreen();
    });
    
    document.getElementById('btn_record').addEventListener('click', function(evt) {
        if (!is_recording) {
            is_recording = true;
            document.getElementById('btn_record').innerHTML = 'stop';
            document.getElementById('btn_record').classList.add('record');
            program = [];
            board.defaultAxes.x.setAttribute({ visible: true });
            board.defaultAxes.y.setAttribute({ visible: true });
            turtle.clearScreen();
        } else {
            is_recording = false;
            document.getElementById('btn_record').innerHTML = 'record';
            document.getElementById('btn_record').classList.remove('record');
    
            if (!document.getElementById('show_grid').checked) {
                board.defaultAxes.x.setAttribute({ visible: false });
                board.defaultAxes.y.setAttribute({ visible: false });
            }
    
            turtle.clearScreen();
        }
    });
    
    // Animation
    var do_step = function() {
        if (step < program.length) {
            eval(program[step]);
            step++;
            setTimeout(do_step, time);
        }
    }
    document.getElementById('btn_play').addEventListener('click', function(evt) {
        step = 0;
        do_step();
    });
    
    document.getElementById('show_grid').addEventListener('change', function(evt) {
        if (document.getElementById('show_grid').checked) {
            board.defaultAxes.x.setAttribute({ visible: true });
            board.defaultAxes.y.setAttribute({ visible: true });
        } else {
            board.defaultAxes.x.setAttribute({ visible: false });
            board.defaultAxes.y.setAttribute({ visible: false });
        }
    });
    
    document.getElementById('step_size').value = stepsize;
    document.getElementById('angle').value = angle;
    document.getElementById('time').value = time;
    
    document.getElementById('step_size').addEventListener('change', function(evt) {
        stepsize = 1 * (document.getElementById('step_size').value);
    });
    
    document.getElementById('angle').addEventListener('change', function(evt) {
        angle = 1 * (document.getElementById('angle').value);
    });
    
    document.getElementById('time').addEventListener('change', function(evt) {
        time = 1 * (document.getElementById('time').value);
    });
 </script> 
/*
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 = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-500, 500, 500, -500],
    axis: true,
    defaultAxes: {
        x: {
            visible: false,
            ticks: {
                label: {
                    visible: false
                }
            }
        },
        y: {
            visible: false,
            ticks: {
                label: {
                    visible: false
                }
            }
        }
    }
});

// Global variables:
var turtle = board.create('turtle', [0, 0], { strokeWidth: 2, strokeColor: 'blue', arrow: { strokeWidth: 2,
        strokeColor: 'red' } });
var is_recording = false;
var program = [];
var step;
var angle = 45;
var stepsize = 100;
var time = 300;

// Event handlers:
document.getElementById("btn_forward").addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.forward(stepsize);');
        if (document.getElementById("show_record").checked) { turtle.forward(stepsize); }
    } else {
        turtle.forward(stepsize);
    }
});

document.getElementById('btn_back').addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.back(stepsize);');
        if (document.getElementById('show_record').checked) { turtle.back(stepsize); }
    } else {
        turtle.back(stepsize);
    }
});

document.getElementById('btn_left').addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.left(angle);');
        if (document.getElementById('show_record').checked) { turtle.left(angle); }
    } else {
        turtle.left(angle);
    }
});

document.getElementById('btn_right').addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.right(angle);');
        if (document.getElementById('show_record').checked) { turtle.right(angle); }
    } else {
        turtle.right(angle);
    }
});

document.getElementById('btn_clear').addEventListener('click', function(evt) {
    turtle.clearScreen();
});

document.getElementById('btn_record').addEventListener('click', function(evt) {
    if (!is_recording) {
        is_recording = true;
        document.getElementById('btn_record').innerHTML = 'stop';
        document.getElementById('btn_record').classList.add('record');
        program = [];
        board.defaultAxes.x.setAttribute({ visible: true });
        board.defaultAxes.y.setAttribute({ visible: true });
        turtle.clearScreen();
    } else {
        is_recording = false;
        document.getElementById('btn_record').innerHTML = 'record';
        document.getElementById('btn_record').classList.remove('record');

        if (!document.getElementById('show_grid').checked) {
            board.defaultAxes.x.setAttribute({ visible: false });
            board.defaultAxes.y.setAttribute({ visible: false });
        }

        turtle.clearScreen();
    }
});

// Animation
var do_step = function() {
    if (step < program.length) {
        eval(program[step]);
        step++;
        setTimeout(do_step, time);
    }
}
document.getElementById('btn_play').addEventListener('click', function(evt) {
    step = 0;
    do_step();
});

document.getElementById('show_grid').addEventListener('change', function(evt) {
    if (document.getElementById('show_grid').checked) {
        board.defaultAxes.x.setAttribute({ visible: true });
        board.defaultAxes.y.setAttribute({ visible: true });
    } else {
        board.defaultAxes.x.setAttribute({ visible: false });
        board.defaultAxes.y.setAttribute({ visible: false });
    }
});

document.getElementById('step_size').value = stepsize;
document.getElementById('angle').value = angle;
document.getElementById('time').value = time;

document.getElementById('step_size').addEventListener('change', function(evt) {
    stepsize = 1 * (document.getElementById('step_size').value);
});

document.getElementById('angle').addEventListener('change', function(evt) {
    angle = 1 * (document.getElementById('angle').value);
});

document.getElementById('time').addEventListener('change', function(evt) {
    time = 1 * (document.getElementById('time').value);
});

Turtle bot

Turtle
This code creates an interactive turtle graphics board with controls for moving forward, backward, turning, and clearing the canvas. You can record sequences of commands, play them back with animation, and toggle a grid display. Parameters like step size, angle, and speed are adjustable. **AI generated desctiption**
Show recording:
Show grid:
Step size:
Angle:
Time : 

<table>
    <tr>
        <td>Show recording: </td>
        <td><input type="checkbox" id="show_record"></td>
    </tr>
    <tr>
        <td>Show grid: </td>
        <td><input type="checkbox" id="show_grid"></td>
    </tr>
    <tr>
        <td>Step size: </td>
        <td><input type="number" id="step_size" min="0" max="500"></td>
    </tr>
    <tr>
        <td>Angle: </td>
        <td><input type="number" id="angle" min="0" max="359"></td>
    </tr>
    <tr>
        <td>Time : </td>
        <td><input type="number" id="time" min="0" max="2000"></td>
    </tr>
</table>
<p>
    <button id="btn_record">record</button>
    <button id="btn_play">play</button>
    <button id="btn_clear">clear screen</button>

<table>
    <tr>
        <td></td>
        <td><button id="btn_forward">forward</button></td>
        <td></td>
    </tr>
    <tr>
        <td><button id="btn_left">left</button></td>
        <td></td>
        <td><button id="btn_right">right</button></td>
    </tr>
    <tr>
        <td></td>
        <td><button id="btn_back">back</button></td>
        <td></td>
    </tr>
</table>
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-500, 500, 500, -500],
    axis: true,
    defaultAxes: {
        x: {
            visible: false,
            ticks: {
                label: {
                    visible: false
                }
            }
        },
        y: {
            visible: false,
            ticks: {
                label: {
                    visible: false
                }
            }
        }
    }
});

// Global variables:
var turtle = board.create('turtle', [0, 0], { strokeWidth: 2, strokeColor: 'blue', arrow: { strokeWidth: 2,
        strokeColor: 'red' } });
var is_recording = false;
var program = [];
var step;
var angle = 45;
var stepsize = 100;
var time = 300;

// Event handlers:
document.getElementById("btn_forward").addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.forward(stepsize);');
        if (document.getElementById("show_record").checked) { turtle.forward(stepsize); }
    } else {
        turtle.forward(stepsize);
    }
});

document.getElementById('btn_back').addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.back(stepsize);');
        if (document.getElementById('show_record').checked) { turtle.back(stepsize); }
    } else {
        turtle.back(stepsize);
    }
});

document.getElementById('btn_left').addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.left(angle);');
        if (document.getElementById('show_record').checked) { turtle.left(angle); }
    } else {
        turtle.left(angle);
    }
});

document.getElementById('btn_right').addEventListener('click', function(evt) {
    if (is_recording) {
        program.push('turtle.right(angle);');
        if (document.getElementById('show_record').checked) { turtle.right(angle); }
    } else {
        turtle.right(angle);
    }
});

document.getElementById('btn_clear').addEventListener('click', function(evt) {
    turtle.clearScreen();
});

document.getElementById('btn_record').addEventListener('click', function(evt) {
    if (!is_recording) {
        is_recording = true;
        document.getElementById('btn_record').innerHTML = 'stop';
        document.getElementById('btn_record').classList.add('record');
        program = [];
        board.defaultAxes.x.setAttribute({ visible: true });
        board.defaultAxes.y.setAttribute({ visible: true });
        turtle.clearScreen();
    } else {
        is_recording = false;
        document.getElementById('btn_record').innerHTML = 'record';
        document.getElementById('btn_record').classList.remove('record');

        if (!document.getElementById('show_grid').checked) {
            board.defaultAxes.x.setAttribute({ visible: false });
            board.defaultAxes.y.setAttribute({ visible: false });
        }

        turtle.clearScreen();
    }
});

// Animation
var do_step = function() {
    if (step < program.length) {
        eval(program[step]);
        step++;
        setTimeout(do_step, time);
    }
}
document.getElementById('btn_play').addEventListener('click', function(evt) {
    step = 0;
    do_step();
});

document.getElementById('show_grid').addEventListener('change', function(evt) {
    if (document.getElementById('show_grid').checked) {
        board.defaultAxes.x.setAttribute({ visible: true });
        board.defaultAxes.y.setAttribute({ visible: true });
    } else {
        board.defaultAxes.x.setAttribute({ visible: false });
        board.defaultAxes.y.setAttribute({ visible: false });
    }
});

document.getElementById('step_size').value = stepsize;
document.getElementById('angle').value = angle;
document.getElementById('time').value = time;

document.getElementById('step_size').addEventListener('change', function(evt) {
    stepsize = 1 * (document.getElementById('step_size').value);
});

document.getElementById('angle').addEventListener('change', function(evt) {
    angle = 1 * (document.getElementById('angle').value);
});

document.getElementById('time').addEventListener('change', function(evt) {
    time = 1 * (document.getElementById('time').value);
});

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.