En esta entrada te compartiré un recurso educativo digital que puedes usar sin conexión a internet. Es perfecto para docentes de primaria que desean enseñar las fracciones o quebrados de forma divertida, interactiva y offline.

Con este material podrás ejecutar un simulador HTML sobre las fracciones con su representación gráfica y ejecutarlo directamente desde tu computador, sin necesidad de conexión. Ideal para aulas rurales o zonas sin conectividad.

Déjanos apoyarte en demostrar que las matemáticas son fáciles si se enseñan bien.

No olvides visitar nuestra sección de fracciones para que aprendas full fácil y rápido.

¿Por qué usar juegos offline para enseñar matemáticas?

Los juegos educativos interactivos ayudan a que los niños aprendan las tablas de multiplicar de manera visual y entretenida.
Al no depender de internet, este material offline garantiza que el aprendizaje continúe en cualquier entorno.
Además, los profesores pueden proyectar el juego en clase o dejar que los estudiantes practiquen desde un computador escolar.

Existen varios tipos de juegos didácticos para practicar o enseñar matemáticas… aquí en nuestro sitio encontrarás muchos RETOS MATEMÁTICOS, además de MATEGRAMAS y CRUCIOPERACIONES!

¿Cómo utilizo el simulador de fracciones interactivo con mis estudiantes sin internet?

simulador de fracciones interactivo sin internet

Lo primero es copiar el código que aparece a continuación y seguir las instrucciones de de nuestro vídeo YouTube (está después del código)


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulador de Fracciones con Múltiples Círculos</title>
<style>
  body {
    font-family: "Poppins", sans-serif;
    background: #f3f4f6;
    color: #111827;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    padding: 40px;
  }

  .container {
    text-align: center;
  }

  canvas {
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    margin: 10px;
    transition: transform 0.2s ease;
  }

  canvas:hover {
    transform: scale(1.03);
  }

  .controls {
    margin-top: 20px;
    display: grid;
    gap: 12px;
    text-align: left;
  }

  label {
    font-weight: 600;
    font-size: 16px;
  }

  input, select {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    width: 150px;
  }

  input[type="color"] {
    padding: 2px;
    height: 40px;
  }

  .fraction-display {
    font-size: 70px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    margin-top: 100px;
  }

  hr {
    width: 80px;
    border: 1.5px solid black;
    margin: 10px auto;
  }

  h1 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .panel {
    background: white;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }

  #circles-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
  }
</style>
</head>
<body>

<div class="container">

<div style="text-align: center; font-family: Arial, sans-serif;">
 <h2> <a href="https://www.lasmatesfaciles.com" target="_blank" 
     style="color: red; font-weight: bold; text-decoration: none;">
     www.lasmatesfaciles.com
  </a></h2>
  <h3 style=" color: blue;">
    Las matemáticas son fáciles si se enseñan bien
  </p>
</div>
  <h2> Simulador de Fracciones Interactivo</h1>
  <div id="circles-container" class="panel"></div>

  <div class="controls panel">
    <label>Color de las partes:</label>
    <input type="color" id="color" value="#ff6347" onchange="dibujarFraccion()">

    
    <label>Numerador:</label>
    <input type="number" id="numerador" min="0" max="60" value="0" onchange="cambiarNum()">

<label>Denominador:</label>
    <input type="number" id="denominador" min="1" max="12" value="4" onchange="cambiarDen()">


  </div>
</div>

<div class="fraction-display panel">
  <div id="num">0</div>
  <hr>
  <div id="den">4</div>
  <div id="mixto" style="font-size:22px; margin-top:15px; color:#374151;"></div>
</div>

<script>
let num = 0;
let den = 4;
let color = "#ff6347";
const MAX_CIRCULOS = 5;

function dibujarFraccion() {
  color = document.getElementById("color").value;
  den = parseInt(document.getElementById("denominador").value);
  num = parseInt(document.getElementById("numerador").value);
  if (num < 0) num = 0;

  const circlesContainer = document.getElementById("circles-container");
  circlesContainer.innerHTML = ""; // limpiar antes de redibujar

  const totalCírculos = Math.min(Math.ceil(num / den) || 1, MAX_CIRCULOS);
  let restante = num;

  for (let c = 0; c < totalCírculos; c++) {
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 200;
    canvas.id = "circle" + c;
    canvas.dataset.index = c;
    canvas.addEventListener("click", e => detectarClick(e, c));
    circlesContainer.appendChild(canvas);

    const ctx = canvas.getContext("2d");
    const radius = canvas.width / 2;
    const cx = radius;
    const cy = radius;
    const angleStep = (2 * Math.PI) / den;

    const llenar = Math.min(restante, den);
    restante -= llenar;

    for (let i = 0; i < den; i++) {
      const startAngle = -Math.PI / 2 + i * angleStep;
      const endAngle = -Math.PI / 2 + (i + 1) * angleStep;

      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.arc(cx, cy, radius, startAngle, endAngle);
      ctx.closePath();

      ctx.fillStyle = (i < llenar) ? color : "#ffffff";
      ctx.fill();

      ctx.strokeStyle = "#000";
      ctx.lineWidth = 2;
      ctx.stroke();
    }
  }

  document.getElementById("num").textContent = num;
  document.getElementById("den").textContent = den;

  const mixto = Math.floor(num / den);
  const resto = num % den;
  const mixtoDiv = document.getElementById("mixto");
  mixtoDiv.textContent = mixto > 0
    ? `${mixto} ${resto > 0 ? resto + "/" + den : ""}`
    : "";
}

function detectarClick(e, cIndex) {
  const canvas = document.getElementById("circle" + cIndex);
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const cx = canvas.width / 2;
  const cy = canvas.height / 2;
  const angle = Math.atan2(y - cy, x - cx) + Math.PI / 2;
  const normAngle = angle < 0 ? angle + 2 * Math.PI : angle;
  const sector = Math.floor(normAngle / ((2 * Math.PI) / den));

  let numActual = num;
  const sectorGlobal = cIndex * den + sector;

  if (sectorGlobal < numActual - 1) {
    num = sectorGlobal + 1;
  } else {
    num = sectorGlobal + 1;
  }

  if (num > den * MAX_CIRCULOS) num = den * MAX_CIRCULOS;
  document.getElementById("numerador").value = num;
  dibujarFraccion();
}

function cambiarDen() {
  den = parseInt(document.getElementById("denominador").value);
  if (den < 1) den = 1;
  dibujarFraccion();
}

function cambiarNum() {
  num = parseInt(document.getElementById("numerador").value);
  if (num < 0) num = 0;
  if (num > den * MAX_CIRCULOS) num = den * MAX_CIRCULOS;
  dibujarFraccion();
}

dibujarFraccion();
</script>
</body>
</html>

Beneficios de aprender con juegos matemáticos

Jugar con las matemáticas hace que el aprendizaje sea más interactivo, divertido y efectivo. Este tipo de actividades mejora la agilidad mental, el razonamiento lógico y la memoria visual.
Además, permite que los estudiantes asocien los números con emociones positivas, reduciendo el miedo o aburrimiento hacia la materia.
Por eso en lasmatesfaciles.com creemos firmemente que “las matemáticas son fáciles si se enseñan bien”.

No olvides suscribirte a nuestro Canal de YouTube y descubrir que las matemáticas son fáciles si se enseñan bien.

Si lo que deseas es imprimir nuestro mategrama de geometría te lo dejamos aquí en versión pdf para que te diviertas con tus estudiantes o pongas a prueba tus conocimientos.

MATEGRAMA DE GEOMETRIA 2025Descarga

¿Odias las matemáticas pero amas los crucigramas? Pues acá te tenemos más de nuestros Crucigramas Matemáticos – MATEGRAMAS para que odies ambas cosas al tiempo!

De momento tenemos disponibles estos mategramas pero iremos añadiendo muchos más!

Si te gustaría descargar más de nuestras actividades y material didáctico de matemáticas no dudes en visitar nuestra sección MATERIAL.

¿Te gusto nuestro MATEGRAMA DE GEOMETRÍA – CRUCIGRAMAS MATEMÁTICOS?

Suscríbete gratis para ser el primero en enterarte de cada nuevo mategrama:

Únete a otros 23K suscriptores
MateGrama #04: Matemática Básica!Descarga
Crucigramas Matemáticos - MATEGRAMAS
MateGrama #03: Potenciación, Logaritmación y Radicación!Descarga
Crucigramas Matemáticos - MATEGRAMAS
MateGrama #02: Números Racionales, Geometría y más!Descarga
Crucigramas Matemáticos - MATEGRAMAS
MateGrama #01: Estadística, Cónicas, Ecuaciones y mucho más!Descarga
Crucigramas Matemáticos - MATEGRAMAS

Tal vez te interese el CRUCIGRAMA de Las Matemáticas en la vida cotidiana

matematicas en la vida cotidiana crucigrama

Si deseas que te avisemos a tu correo electrónico cada vez que publicamos algo nuevo, no dudes en suscribirte gratis!

Únete a otros 23K suscriptores

¿Por qué no miramos un poco hacia el espacio y la inmensidad del universo?

AstroGrama #01: ¿Seguro que sabes lo básico sobre el universo?Descarga
AstroGrama

¿Sabías que tenemos varias app que pueden ayudarte con tus tareas?

Descubre una gran colección de herramientas para echarte una mano con los deberes de Matemáticas, Física, Trigonometría y Geometría!

Si lo tuyo es ir directo al grano… aquí tenemos el enlace de descarga!!

ayudante de tareas

Nuestra App es gratuita y la puedes buscar en la tienda de aplicaciones de Google Play en tu teléfono Android con el nombre de Ayudante de Tareas (lo sentimos pero todavía no estamos disponibles para dispositivos iOS… pronto!)

ayudante de tareas
ayudante de tareas
ayudante de tareas
ayudante de tareas

¿Problemas con estadística?

Descargar GRATIS nuestra CALCULADORA DE ESTADÍSTICA

calculadora de estadística