Como aprender a multiplicar jugando

Este sencillo juego esta pensado para ayudar a los niños a aprender las tablas de multiplicar.

Se podría haber montado sin necesidad de Google Apps Script, pero creo que como ejemplo puede ser muy interesante y lo podéis usar como base para vuestros proyectos, tiene todo lo necesario para hacer prácticamente cualquier web.

Aquí os dejo el código:

Index.hmtl

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style type="text/css">
      button
      {
        text-decoration: none;
        padding: 20px;
        font-weight: 600;
        font-size: 40px;
        color: #ffffff;
        background-color: #1883ba;
        border-radius: 12px;
        border: 4px solid #0016b0;
        width: 130px;
      }
      button:hover 
      {
        text-shadow: 1px 1px 6px #fff;
        border-shadow: 
      }
      
      #question
      {
        width: 600px;
        padding: 10px;
        font-weight: 600;
        font-size: 30px;
        color: #44ff55;
        background-color: #f3f3bf;
        border-radius: 6px;
        border: 2px solid #0016b0;
        text-align:center;
      }

      #tabla
      {
        margin: 10px;
        width: 100px;
        padding: 10px;
        font-weight: 600;
        font-size: 40px;
        color: #ff4455;
        background-color: #33f3bf;
        border-radius: 6px;
        border: 2px solid #0016b0;
        text-align:center;
      }

      #countdown
      {
        margin: 10px;
        width: 50px;
        padding: 10px;
        font-weight: 600;
        font-size: 50px;
        color: #ff4455;
        background-color: #fff3bf;
        border-radius: 25px;
        border: 2px solid #ff16b0;
        text-align:center;
      }
      
      #error
      {
        margin: 10px;
        width: 400px;
        min-width: 400px;
        padding: 10px;
        font-weight: 600;
        font-size: 50px;
        color: #ffaabb;
        background-color: #776655;
        border-radius: 25px;
        border: 2px solid #ff16b0;
        text-align:center;
      }

      #accept
      {
        margin: 10px;
        width: 400px;
        min-width: 400px;
        padding: 10px;
        font-weight: 600;
        font-size: 50px;
        color: #aaffbb;
        background-color: #667744;
        border-radius: 25px;
        border: 2px solid #16ffb0;
        text-align:center;
      }

      audio
      {
        display: none
      }
</style>
    <script>
      var end = new Date();
      var process_blocked = 0;
      
      function Init()
      {
        setInterval(showRemaining, 1000);
        Accept();
      }

      function Accept()
      {
        document.getElementById("error").style.visibility  = "hidden";
        document.getElementById("tip").style.visibility    = "hidden";
        document.getElementById("accept").style.visibility = "hidden";

        var now = new Date();  
        end.setTime( now.getTime() + 10*1000 );
        process_blocked = 0;
      }

      function Error(error)
      {
        document.getElementById("error").innerHTML = error;
        document.getElementById("error").style.visibility  = 'visible';
        document.getElementById("accept").style.visibility = 'visible';
        process_blocked = 1;
      }

      function Response(str)
      {
          if(process_blocked)
            return;

          var splitted = str.split(",");
          var msg = splitted[0]; 
          document.getElementById("tabla").innerHTML    = msg.split("X")[0].trim();
          document.getElementById("question").innerHTML = msg;

          if(msg.indexOf("FINAL") != -1 )
          {
            var audio = document.getElementById("audioWIN");
            audio.play();

            document.getElementById("countdown").style.visibility = 'hidden';
          }

          if(splitted.length > 1)
          {
            var tab = splitted[1];
            document.getElementById("buttons").innerHTML = tab;
          }

          if(splitted.length > 2)
          {
            var audio = document.getElementById("audioFAIL");
            audio.play();

            var error = splitted[2];
            Error(error);
            return;
          }
          else
          {
            var audio = document.getElementById("audioOK");
            audio.play();
          }

          Accept();
      }

      function Push(value)
      {
        if (!process_blocked)
        {
          var question = document.getElementById("question").innerHTML;
          google.script.run.withSuccessHandler(Response).Answer(question,value);
        }

        var now = new Date();  
        end.setTime( now.getTime() + 10*1000 );
      }

      function showRemaining() 
      {
         if( process_blocked)
            return;

         var now = new Date();
         var distance = end.getTime() - now.getTime();
         if (distance < 0) 
         {
            Push(0);
            return;
        }
        var seconds = Math.floor(distance/1000);
        document.getElementById('countdown').innerHTML = seconds;
    }
    </script>

  </head>
  <body onload="Init()">
    <audio id="audioOK" controls>
      <source type="audio/wav" src="https://sampleswap.org/samples-ghost/SOUND%20EFFECTS%20and%20NOISES/VIDEO%20GAMES/carnival/27[kb]ranking.wav.mp3">
    </audio>
    <audio id="audioFAIL" controls>
      <source type="audio/wav" src="https://sampleswap.org/samples-ghost/SOUND%20EFFECTS%20and%20NOISES/Alarm%20Sounds/81[kb]vidgame-gliss-down.aif.mp3">
    </audio>
    <audio id="audioWIN" controls>
      <source type="audio/wav" src="https://sampleswap.org/samples-ghost/SOUND%20EFFECTS%20and%20NOISES/VIDEO%20GAMES/carnival/330[kb]bonus1.wav.mp3">
    </audio>

    <p> <a id='tabla'>2<a><a id='question'>2 X 2 =<a> <a id="countdown"></a></p>
    <div id='buttons'>
    <table>  
      <tr>
        <td><button onclick="Push(2)"> 2 </button></td>  
        <td><button onclick="Push(3)"> 3 </button></td>    
        <td><button onclick="Push(4)"> 4 </button></td>    
      </tr>
      <tr>
        <td><button onclick="Push(5)"> 5 </button></td>    
        <td><button onclick="Push(6)"> 6 </button></td>    
        <td><button onclick="Push(7)"> 7 </button></td>    
      </tr>
    </table>
    </div>
    <div id='info'>
      <p><a id='error'> </a> </p>
      <p><a id='tip'> </a> </p>
      <p><button id='accept' onclick="Accept()"> OK </button></p>
    </div>
    
  </body>
</html>

Code.gs

function doGet()
{
    return HtmlService.createTemplateFromFile('index')
        .evaluate() // El evaluate siempre debe estar antes del FrameOptions
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getRandomNumber(min, max)
{
   return Math.floor( Math.random() * (max - min) + min );
}

function Answer(question, value)
{
  var error = false;
  var result = "";
  var items = question.split("X");

  var num1 = items[0].trim();
  var num2 = items[1].split("=")[0].trim();
  var old1 = num1;
  var old2 = num2;
  var expected = num1*num2;

  if( expected == value )
  {
     num2++;

     if(num2 > 9)
     {
       num1++;
       num2 = 2;

       if(num1 > 9)
       {
         result = "FINAL!!!";
       }
     }
  }
  else
  {
     error = true;
     num2 = 2;
  }

  if ( result == "" )
  {
      result = num1 + " X " + num2 + " =";
  }

  var desired = num1*num2;

  var options = new Array();

  options.push(desired);

  for(var i = 0 ; i < 5 ; ++i)
  {
    var candidate = desired + getRandomNumber(-5,5);

    var ok = true;
    for(var j = 0 ; j < options.length && ok ; j++)
    {
      if( options[j] == candidate )
      {
        i--;
        ok = false;
      }
    }

    if( ok )
    {
      options.push( candidate );
    }
  }
  
  options.sort();

  result += ",";
  result += "<table>";
  result += "<tr>";
  var i = 0;
  for( ; i < options.length/2 ; ++i)
  {
    result += "<td><button onclick='Push(" + options[i] + ")'> " + options[i] + " </button></td>";    
  }
  result += "</tr>";

  result += "<tr>";
  for( ; i < options.length ; ++i)
  {
    result += "<td><button onclick='Push(" + options[i] + ")'> " + options[i] + " </button></td>";    
  }
  result += "</tr>";


  result += "</table>";

  if(error)
  {
     result += "," + question + " " + expected ;
  }

  return result;
}

No vaciléis en hacerme llegar vuestras propuestas. Si sabéis de algún niño que le cueste aprender las tablas de multiplicar no os lo penséis y probad con este juego

Nos vemos

Tutoriales Google Apps Scripts

Como aprender a multiplicar jugando

No hay comentarios:

Publicar un comentario

Tal vez te interese