Mostrar Mensajes
681
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Crear sumas y restas aprender niños aplicación didáctico educativa
« en: 16 de Septiembre 2016, 13:57 »
Hola Ogramar.
Lo primero darte las gracias por tomarte un tiempo para revisar el código y tus comentarios.
Sobre 'use strict'; creo recordar que en el curso de JavaScript se recomienda su uso como una buena práctica, por eso lo suelo usar.
Aquí dejo el código adaptado un poco a los comentarios que me hiciste.
Aún así, aunque se vea la pantalla muy vacía, es porque lo adaptaré para que tenga un menú vertical en la izquierda y un encabezado que contendrá un título, y de momento no sé si le añadiré algo mas.
Dejo el código del menú vertical también, por si a alguien le sirve.
Saludos.
Lo primero darte las gracias por tomarte un tiempo para revisar el código y tus comentarios.
Sobre 'use strict'; creo recordar que en el curso de JavaScript se recomienda su uso como una buena práctica, por eso lo suelo usar.
Aquí dejo el código adaptado un poco a los comentarios que me hiciste.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Juego Sumas</title>
<meta charset="utf-8" />
<style>
*{font-family: arial}
body{
background: #FFE4C4;
}
#contenedor{
width: 800px;
margin: 10px auto;
padding: 1%;
text-align: center;
}
#contOperacion{
margin-top: 20px;
}
#contOperacion div{
float: left;
}
#propuestaResultado{
outline: 0px;
border: solid 1px #FFFFFF;
text-align: center;
font-size: 150px;
border-radius: 11px;
width: 222px;
}
#operacion{
font-size: 150px;
width: 60%;
}
#propResultado{
width: 40%;
}
#mensaje{
font-size: 100px;
width: 100%;
height: 200px;
}
#contRadios {
width: 100%;
font-size: 44px;
padding: 5px;
}
#contRadios label{
margin: 0 20px 0 20px;
}
.boton{
color: #FFFFFF;
border: solid 1px #FFFFFF;
border-radius: 40px;
background: #5F9EA0;
}
#botonResultado, #botonSiguiente {
outline: 0px;
font-size: 66px;
text-align: center;
padding:15px;
margin: 20px;
box-shadow: 0px 3px 15px 0px #1E90FF;
transition: all 0.10s ease-in-out;
position:relative;
}
#botonResultado {
cursor: pointer;
}
#botonSiguiente {
opacity: 0.5;
cursor: not-allowed;
}
#botonResultado:active, #botonSiguiente:active {
top:5px;
box-shadow: 0px 1px 0px 0px #1E90FF;
}
</style>
<script>
'use strict';
window.onload = function(){
crearSuma();
var nodoRadioSuma = document.getElementById('suma');
var nodoTipoOperacion = document.getElementsByName('tipoOperacion');
var btnSiguiente = document.getElementById('botonSiguiente');
var btnComprobar = document.getElementById('botonResultado');
// Evento que se ejecuta al hacer click en el botón "Comprobar".
btnComprobar.addEventListener('click', comprobarChecked);
/* Evento para decidir como se actuará al hacer click en el botón "Siguiente"
dependiendo de la opción que este marcada en los botones radio. */
btnSiguiente.addEventListener('click', function(){
if(nodoRadioSuma.checked){
crearSuma();
}else{
crearResta();
}
});
// Evento que recoge cualquier tipo de pulsación de teclado y comprueba si se ha pulsado la tecla intro.
document.addEventListener('keypress', function(codTecla){
var foco = document.activeElement.id;
if(codTecla.keyCode==13 & foco=='propuestaResultado'){comprobarChecked();}
});
// Evento que se producirá al hacer click en la opción "suma" del botón radio.
nodoTipoOperacion[0].addEventListener('click', crearSuma);
// Evento que se producirá al hacer click en la opción "suma" del botón radio.
nodoTipoOperacion[1].addEventListener('click', crearResta);
/* Función que usan dos de los eventos anteriores para saber que opción está marcada en el botón radio y
dependiendo de esto, invocar una función determinada.*/
function comprobarChecked(){
if(nodoRadioSuma.checked){
comprobarResultado('suma');
}else{
comprobarResultado('resta');
}
}
}
/**
* Función que recibe un parámetro booleano, que se encarga del diseño de algunos elementos
* según si se ha cometido un error o no en la respuesta dada, también
* indicará que elemento debe de coger el foco después de la comprobación.
*/
function apariencia(hayError){
var btnSiguiente = document.getElementById('botonSiguiente');
var resultadoPropuesto = document.getElementById('propuestaResultado');
if(hayError){
resultadoPropuesto.disabled = false;
resultadoPropuesto.focus();
document.getElementById('mensaje').innerHTML = '';
resultadoPropuesto.value = '';
btnSiguiente.style.opacity = '0.5';
btnSiguiente.style.cursor = 'not-allowed';
btnSiguiente.disabled = true;
} else {
resultadoPropuesto.disabled = true;
btnSiguiente.style.opacity = '1';
btnSiguiente.style.cursor = 'pointer';
btnSiguiente.disabled = false;
btnSiguiente.focus();
}
btnSiguiente.visibility = 'hidden';
}
/**
*Función que crea dos números aleatorios entre el 0 y el 9 que formará la operación(suma).
*/
function crearSuma(){
document.getElementById('botonSiguiente').visibility='hidden';
var sumando = [];
apariencia(true);
sumando[0] = Math.floor(Math.random()*(9-1))+1;
sumando[1] = Math.floor(Math.random()*(9-1))+1;
document.getElementById('operacion').innerHTML = sumando[0] + ' + ' + sumando[1] + ' = ';
}
/**
* Función que crea dos números aleatorios, el primero entre el 0 y el 9, y el segundo entre 0 y
* el número anterior, que formará la operación(resta).
*/
function crearResta(){
var minuendo = 0;
var sustraendo = 0;
apariencia(true);
minuendo = Math.floor(Math.random()*(10-1))+1;
sustraendo = Math.floor(Math.random()*(minuendo-1))+1;
document.getElementById('operacion').innerHTML = minuendo + ' - ' + sustraendo + ' = ';
}
/**
* Función que recibe un parámetro que contiene una cadena de texto, 'suma' o 'resta',
* a partir de ese parámetro comprobará el resultado de la operación creada anteriormente,
* dependiendo de si es una resta o una suma y acabará mostrando en pantalla 'erroneo' o
* 'correcto' dependiendo del resultado.
*/
function comprobarResultado(sumaResta){
var msgBienMal = document.getElementById('mensaje');
var resultadoPropuesto = Number(document.getElementById('propuestaResultado').value);
var operacionPropuesta = document.getElementById('operacion').textContent;
if(sumaResta=='suma'){
var resultado = Number(operacionPropuesta.slice(0,1)) + Number(operacionPropuesta.slice(4,5));
}else{
var resultado = Number(operacionPropuesta.slice(0,1)) - Number(operacionPropuesta.slice(4,5));
}
if(resultado==resultadoPropuesto){
msgBienMal.style.color = 'green';
msgBienMal.innerHTML = '¡Muy bien!';
apariencia(false);
}else{
msgBienMal.style.color = 'red';
msgBienMal.innerHTML = '!Ups¡ prueba otra vez';
}
}
</script>
</head>
<body>
<div id="contenedor">
<div id="contRadios" class="boton">
<label><input type="radio" name="tipoOperacion" id="suma" checked="checked"/>Suma</label>
<label><input type="radio" name="tipoOperacion" id="resta"/>Resta</label>
</div>
<div id="contOperacion">
<div id="operacion"></div>
<div id="propResultado"><input type="text" id="propuestaResultado"/></div>
</div>
<div id="contBotones" >
<button class="boton" id="botonResultado" >Comprobar</button>
<button id="botonSiguiente" class="boton" >Siguiente</button>
</div>
<div id="mensaje"></div>
</div>
</body>
</html>Aún así, aunque se vea la pantalla muy vacía, es porque lo adaptaré para que tenga un menú vertical en la izquierda y un encabezado que contendrá un título, y de momento no sé si le añadiré algo mas.
Dejo el código del menú vertical también, por si a alguien le sirve.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<title>Menú</title>
<meta name="author" content="Pedro Paredes" />
<meta charset="utf-8" />
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
background: #FFE4C4;
}
#menuIzq{
width: 280px;
height: 550px;
}
.flotaLeft{
float: left;
}
.borraFlujo{
clear: both;
}
#menuIzq label{
display: block;
font-size: 33px;
}
.cajaTexto {
border: solid 1px #5F9EA0;
font-size: 16px;
width:150px;
height:150px;
background: #FFFFFF;
color: #5F9EA0;
visibility: hidden;
position: absolute;
}
.menu, .cajaTexto{
border-radius: 5px;
padding: 5px;
cursor: pointer;
}
.menu {
color: #FFFFFF;
background: #5F9EA0;
border: solid 1px #FFFFFF;
}
input[type="radio"]{
display: none;
}
</style>
<script>
'use strict';
window.onload = function(){
var nodoCajaTexto = document.getElementsByClassName('cajaTexto');
var nodosMenu = document.getElementsByName('tipoOperacion');
for (var i=0; i<nodosMenu.length; i++){
nodosMenu[i].parentNode.addEventListener('mouseover', muestraCaja.bind(this, i));
nodosMenu[i].parentNode.addEventListener('mouseout', muestraCaja.bind(this, i));
}
function muestraCaja(i, ev){
if(ev.type == 'mouseover'){
nodoCajaTexto[i].style.visibility = 'visible';
nodoCajaTexto[i].style.top = nodosMenu[i].parentNode.offsetTop + 'px';
nodoCajaTexto[i].style.left = nodosMenu[i].parentNode.offsetWidth + 'px';
nodosMenu[i].parentNode.style.backgroundColor = '#FFFFFF';
nodosMenu[i].parentNode.style.color = '#5F9EA0';
}else{
nodoCajaTexto[i].style.visibility = 'hidden';
nodosMenu[i].parentNode.style.backgroundColor = '#5F9EA0';
nodosMenu[i].parentNode.style.color = '#FFFFFF';
}
}
}
</script>
<body>
<div id="menuIzq" class="flotaLeft">
<label id="plus" class="menu">
<input type="radio" name="tipoOperacion" value="suma" checked="checked"/>Sumas sin llevadas
<div class="cajaTexto">Explicación</div>
</label>
<label id="caja2" class="menu">
<input type="radio" name="tipoOperacion" value="sumaN2"/>Sumas con llevadas
<div class="cajaTexto">Explicación</div>
</label>
<label id="caja3" class="menu">
<input type="radio" name="tipoOperacion" value="resta"/>Restas sin llevadas
<div class="cajaTexto">Explicación</div>
</label>
<label id ="caja4" class="menu">
<input type="radio" name="tipoOperacion" value="restaN2"/>Restas con llevadas
<div class="cajaTexto">Explicación</div>
</label>
<label id ="caja4" class="menu">
<input type="radio" name="tipoOperacion" value="restaN2"/>Tablas Multiplicar
<div class="cajaTexto">Explicación</div>
</label>
<label id ="caja4" class="menu">
<input type="radio" name="tipoOperacion" value="restaN2"/>Multiplicaciones
<div class="cajaTexto">Explicación</div>
</label>
<label id ="caja4" class="menu">
<input type="radio" name="tipoOperacion" value="restaN2"/>Divisiones
<div class="cajaTexto">Explicación</div>
</label>
</div>
</body>
</html>Saludos.
RSS