martes, 11 de agosto de 2020

Programa para practicar Tabla de Multiplicar

El día de hoy decidí que la batalla por la tabla de multiplicar la llevaría a otro level....


Bueno la firme que todo se debe a que mi menor hijo la debe de estudiar y necesito que lo haga... pero no cuento con el tiempo para estar evaluándolo...

Aquí les dejo el programa en PHP por si quieren mejorarlo o lo necesitan...



<html>
<head><title>Tabla de Multiplicar!!!</title>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
for (paso = 1; paso <= 12; paso++) {
//console.log("Actualizando datos",paso);
var valor=Math.floor(Math.random() * 12) + 1;
document.getElementById('resul_'+paso).value = "";
document.getElementById('rpta_'+paso).style.visibility='hidden';
document.getElementById('bien_'+paso).style.visibility='hidden';
}
});
function actualizar(opcion){
//console.log("Actualizando datos",opcion.value);
var tabla=opcion.value;
for (paso = 1; paso <= 12; paso++) {
//console.log("Actualizando datos",paso);
var valor=Math.floor(Math.random() * 12) + 1;
document.getElementById('tabla_'+paso).value = tabla;
document.getElementById('base_'+paso).value = valor;
document.getElementById('rpta_'+paso).value = (valor*tabla);
document.getElementById('resul_'+paso).value = "";
document.getElementById('rpta_'+paso).style.visibility='hidden';
document.getElementById('bien_'+paso).style.visibility='hidden';
}
}
function resultados(opcion){
//console.log("Actualizando datos",opcion.value);
var resultado=opcion.value;
if (resultado==1) {
for (paso = 1; paso <= 12; paso++) {
//document.getElementById('tabla_'+paso).value = tabla;
//document.getElementById('base_'+paso).value = paso;
//document.getElementById('rpta_'+paso).value = (paso*tabla);
console.log("Actualizando datos",paso);
var valor1=$('#resul_'+paso).val();
var valor2=$('#rpta_'+paso).val();
console.log("Valor 1",valor1);
console.log("Valor 2",valor2);
if (valor1==valor2) {
document.getElementById('bien_'+paso).value = "BIEN";
} else {
document.getElementById('bien_'+paso).value = "  :(";
}
document.getElementById('rpta_'+paso).style.visibility='visible';
document.getElementById('bien_'+paso).style.visibility='visible';
}
} else {
for (paso = 1; paso <= 12; paso++) {
document.getElementById('rpta_'+paso).style.visibility='hidden';
}
}
}

</script>
<style>
</style>
</head>
<body>
 <form name="frmTabla" id="frmTabla">
    <table>
<tr>
<td>
  Tabla:
   <select name="num_tabla"  onchange="actualizar(this)">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 
  </td>
<td>
</td>
  <td>
  Mostrar Resultados:
   <select name="mostrar"  onchange="resultados(this)">
<option value="0" selected>No</option>
<option value="1">Si</option>
</select> 
  </td>
</tr>
<tr>
<td>
</td>
  <td>
<center>
  <table id="principal" width="100%" height="90%" border="0"> <tbody>
<?php 
$i = 1;
while ($i <= 12):
echo '<tr>';
echo '  <td><input type="text" id="tabla_'.$i.'" name="tabla_'.$i.'" maxlength="4" readonly size="4"/></td>';
echo '  <td>X</td>';
echo '  <td><input type="text" id="base_'.$i.'"  name="base_'.$i.'" value="0" maxlength="4" readonly size="4"/></td>';
echo '  <td>=</td>';
echo '  <td><input type="text" id="resul_'.$i.'" name="resul_'.$i.'" tabindex="'.$i.'" maxlength="4" size="4"/></td>';
echo '  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Resultado --->&nbsp;&nbsp;&nbsp;</td>';
echo '  <td><input type="text" id="rpta_'.$i.'"  name="rpta_'.$i.'" maxlength="4" readonly size="4"/></td>';
echo '  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>';
echo '  <td><input type="text" id="bien_'.$i.'"  name="bien_'.$i.'" maxlength="4" readonly size="4"/></td>';
echo '</tr>';
$i++;
endwhile;
?></tbody>
  </table>
<center>
  </td>
<td>
</td>
</tr>
    <table>
 </form>
</body>
</html>

Continúa...