Turtle bot

Show recording:
record play clear screen

	forward
left		right
	back

The underlying JavaScript code

HTML code:

<style>
button {
  min-width:100px;
}
.record {
  background-color: #ffaaaa;
}
</style>
Show recording: <input type="checkbox" id="show_record"><br/>
<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>

JavaScript code:

const board = JXG.JSXGraph.initBoard('turtlebox', { 
    boundingbox: [-500, 500, 500, -500], axis:true
});

board.defaultAxes.x.setAttribute({visible:false});
board.defaultAxes.y.setAttribute({visible:false});

// Global variables:
var turtle = board.create('turtle', [0,0]);
var is_recording = false;
var program = [];
var step;
var angle = 90;
var stepsize = 100;

// 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(100); }
    } 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(100); }
    } 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(45); }
    } 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(45); }
    } 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'); 
    board.defaultAxes.x.setAttribute({visible:false});
    board.defaultAxes.y.setAttribute({visible:false});
    turtle.clearScreen();
  }
}); 

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