Hola César: gracias por dedicar tu tiempo a leer mi problema.
He estado mirando los ejemplos y no vale que el niño tenga que apretar un botón para que se oiga la locución, sino que se reproduzca automáticamente desde que suelte la última vocal; o sea, cuando haga drop.
Te envío el código de la aplicación.
Gracias y saludos de Juan Luis.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Frase Mamá</title>
<style type="text/css">
#box1, #box2, #box3, #box4, #box5, #box6, #box7{
float:left; width:50px; height:50px; padding:5px; margin:5px;
}
#box1 { background-color: #FFFFFF; }
#box2 { background-color: #FFFFFF; }
#box3 { background-color: #FFFFFF; }
#box4 { background-color: #FFFFFF; }
#box5 { background-color: #FFFFFF; }
#box6 { background-color: #FFFFFF; }
#box7 { background-color: #FFFF00; }
#drag, #drag2, #drag3, #drag4 {
width:0px; height:0px; padding:0px; margin:0px;
-moz-user-select:none;
border:0px solid white;
cursor:pointer ;
}
#drag { background-color: #FFFF00;}
#drag2 { background-color: #FFFF00;}
.Estilo1 {
font-family: Arial;
color: #0000FF;
}
.Estilo2 {
font-family: Arial;
color: #FF0000;
}
.Estilo3 {font-family: Arial}
.Estilo5 {color: #0000FF}
.Estilo4 {color: #FF0000}
.Estilo7 {color: #FFFFFF}
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='copy';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
var iddrag = ev.dataTransfer.getData("Text");
return true;
}
function dragOver(ev) {
var iddrag = ev.dataTransfer.getData("Text");
var id = ev.target.getAttribute('id');
if( (id =='box4' || id =='box4') && (iddrag == 'drag' || iddrag=='drag4'))
return false;
else if( id =='box6' && iddrag == 'drag6')
return false;
else if( id =='box6')
return false;
else
return true;
}
function dragEnd(ev) {
ev.dataTransfer.clearData("Text");
return true
}
function dragDrop(ev) {
var iddrag = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(iddrag));
ev.stopPropagation();
return false;
}
function isNull(valor){
if (valor.toString()=='undefined'){ return true;}
else if (valor.toString()=='NULL'){ return true;}
}
function verQueTieneDebug(id){
var str="";
var caja=document.getElementById(id);
for( var i = 0; i < caja.childNodes.length; i++ ) {
if (caja.childNodes[i].nodeType === 1) {
var tipo=caja.childNodes[i];
var id1=caja.childNodes[i].getAttribute('id');
var valor=document.getElementById(id1).innerHTML;
str+="tipo="+tipo+" id="+id1+ " valor="+valor;
}
}
if(str=="") str="nada (los textos no cuentan porque no estan encapsulados en etiquetas html y no cuentan como tal. Si se les encapsula en <span></span> si que contarian (porque serian elementos hijos). Un ejemplo de esto es el cuadro negro.";
alert(str);
}
function verQueTiene(id){
var str="";
var caja=document.getElementById(id);
for( var i = 0; i < caja.childNodes.length; i++ ) {
if (caja.childNodes[i].nodeType === 1) {
var tipo=caja.childNodes[i];
var id1=caja.childNodes[i].getAttribute('id');
var valor=document.getElementById(id1).innerHTML;
str+=""+valor+"\n";
}
}
if(str=="") str="No contiene nada";
else str="Contiene:\n"+str;
alert(str);
}
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<fieldset>
<table width="36%" border="0" align="right">
<tr valign="top" class="Estilo3">
<td width="45%"><h1 align="center"><img src="Mamá.jpg" width="205" height="131"></h1></td>
</tr>
</table>
<div id="box1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<div id="drag" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">
<h1 class="Estilo1">a</h1>
</div>
</div>
<div id="box2" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<div id="drag" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">
<h1 class="Estilo1">á</h1>
</div>
</div>
</fieldset>
<div id="box3" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<h1 class="Estilo2">m</h1>
</div>
<div id="box4" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
<div id="box5" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<h1 class="Estilo2">m</h1>
</div>
<div id="box6" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
<h1 class="Estilo2"> </h1>
<p class="Estilo2"> </p>
<a href="Sitio de Dailos/Aplauso/Aplauso/Aplauso.html"></a>
<table width="41%" border="0">
<tr class="Estilo4">
<td width="16%"><div align="center" class="Estilo3">
<h1 align="left"> m </h1>
</div></td>
<td width="13%"><div align="center" class="Estilo3">
<h1 align="center"><span class="Estilo5">a</span></h1>
</div></td>
<td width="22%"><div align="center" class="Estilo3">
<h1 class="Estilo4">m</h1>
</div></td>
<td width="8%"><div align="center" class="Estilo3">
<h1 align="right"><span class="Estilo5">á</span></h1>
</div></td>
<td width="12%"><div align="center" class="Estilo3">
<h1 class="Estilo5"> </h1>
</div></td>
<td width="29%"><div align="center" class="Estilo3">
<h1> </h1>
</div></td>
</tr>
</table>
</body>
</html>
Tema: Sonido en javascript y html aplicación para niño autista (Leído 11832 veces)
RSS -
WAP2