Com os assuntos dados criei um mini - programa na qual a professora vai colocar nas funções o valor das frações vazias e as frações preenchidas e vai representar em tempo real para os alunos graficamente.
<canvas width="600" width="400"></canvas>
<script>
function desenhaFracaoPreenchida(quadrados) {
var tela = document.querySelector("canvas");
var pinsel = tela.getContext("2d");
var tamanho = quadrados*50
x = 0
while(x < tamanho) {
pinsel.fillStyle = "green";
pinsel.fillRect(x, 0, 50, 50);
pinsel.strokeStyle = "black";
pinsel.strokeRect(x, 0, 50, 50);
x = x + 50}
}
function desenhaFracaoVazia(quadrados){
var tela = document.querySelector("canvas");
var pinsel = tela.getContext("2d");
var tamanho = quadrados*50
x = 0
while(x < tamanho) {
pinsel.strokeStyle = "black";
pinsel.strokeRect(x, 0, 50, 50);
x = x + 50}
}
//Exemplo:
desenhaFracaoVazia(8);
desenhaFracaoPreenchida(5);
</script>
