En este instructables te guiaremos paso a paso para el desarrollo de un prototipo de aplicación web, que facilitara a que los niños de 2 y 5 años puedan conocer las diferentes formas de vida que habitan en el planeta y de igual forma aprendan e identifiquen sus respectivos hábitats los cuales son Selva Amazónica y Finca Agropecuaria Andina.

Este proyecto surgió gracias al planteamiento de un problema propuesto por el docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del programa académico Ingeniería Multimedia de la Universidad Autónoma de Occidente.

Para la correcta planeacion y realizacion de este proyecto tuvimos en cuenta los siguientes puntos:

Objetivo principal
Objetivos secundarios
Actividades
Cronograma
Definición de usuarios
Trabajos relacionados
Requerimientos funcionales
Requerimientos no funcionales
TxRx
Hw
Sw

Step 1: Recursos

Para la realización de este prototipo tendremos en cuenta los siguientes recursos:

Un computador con acceso a internet
Banco de imágenes con CC0
Sonidos con CC0
Editor web(CodeSandbox)
Scripts .js

Nota: Los animales utilizados serán:

Puma
Jaguar
Oso de anteojos
Tapir
Delfín rosado
Gallina
Cuy
Cerdo
Vaca
Caballo

Step 2: CodeSandBox

Para el desarrollo del prototipo dispondremos de un editor web llamado CodeSandbox el cual nos permite hacer uso de la librería P5.js a continuación un breve paso a paso sobre el registro y creación del proyecto el ejemplo gráfico estará en las imágenes de cabecera:

Click en el botón Sign In
Iniciamos sesión con GitHub(crear cuenta Github si no posee una)
Click en el botón "Create Sandbox"
Finalmente buscamos la librería que se llama P5.js React

Step 3: Importación De Medios

Importacion de imagenes/audio

Para este paso es necesario haber descargado los imágenes y sonidos recordando que lo mejor es que su licencia sea CC0 (Creative Commons Zero), para importar medios a CodeSandbox los pasos son los siguientes:

Nota: Imágenes ilustrativas de los pasos en la cabecera del paso.

Damos click en el botón "Upload Files"
Seleccionamos los archivos(imágenes/sonidos)
Creamos sus respectivas carpetas(Images/sounds) y organizamos cada uno en su lugar

Importación de addons de sonido P5.js

Para poder usar el audio debemos importar un addon que nos permite el control del audio por medio P5.js para poder hacerlo tendremos que hacer los siguientes pasos:

Damos click en el "Index.html"
Copiamos y pegamos la siguiente linea de codigo:

<script>src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js"</script>

Y asi tendriamos el addon importado a nuestro proyecto, recuerda siempre guardar para que surta efectos(Ctrl+ S)

Step 4: Pantalla De Inicio

Para la pantalla de inicio optamos por una imagen de fondo con el nombre del proyecto ademas de esto contiene un sonido ambiental y un botón que nos redireccione a la interactividad de la aplicación.

Para el desarrollo de esta utilizamos HTML5 y P5.js, la librería P5js la utilizamos para el sonido ambiental de la pantalla de inicio, mientras que HTML5 tanto para el botón y el fondo.

Los pasos para desarrollar la pantalla de inicio utilizamos el siguiente codigo:

<div><div><!DOCTYPE html></div><div><html lang="en"></div><div>  <head></div><div>    <meta charset="UTF-8" /></div><div>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /></div><div>    <meta http-equiv="X-UA-Compatible" content="ie=edge" /></div><div>    <!--<link href="/css/screen.css" rel="stylesheet" />--></div><div>    <link href="/css/screen.css" rel="stylesheet" /></div><div>    <link</div><div>      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"</div><div>      rel="stylesheet"</div><div>    /></div><div>    <title>Conociendo a los animales</title></div><div>  </head></div><div>  <body></div><div>    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script></div><div>    <script src="sketch.js"></script></div><div>    <!-- Se importa la librería p5.sound.js --></div><div>    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script></div><br><div>    <header></div><div>      <nav></div><div>        <a</div><div>          href="index3.html"</div><div>          class="btmenu"</div><div>          //onmouseover="PlaySound('mySound')"</div><div>          //onmouseout="StopSound('mySound')"</div><div>          style="max-width: 100%; height: auto;"</div><div>          >PLAY</a</div><div>        ></div><br><div>        <audio</div><div>          id="mySound"</div><div>          src="https://uploads.codesandbox.io/uploads/user/1bf39f0a-d47b-4ee0-b49f-f85791ca875b/3dHL-jungle.mp3"</div><div>        /></div><div>      </nav></div><div>      <img</div><div>        id="fondo-header"</div><div>        src="https://uploads.codesandbox.io/uploads/user/1bf39f0a-d47b-4ee0-b49f-f85791ca875b/BL7w-conociendo-los-animales-min.png"</div><div>        onmouseover="PlaySound('mySound')"</div><div>        onmouseout="StopSound('mySound')"</div><div>        style="max-width: 100%; height: auto;"</div><div>        alt="fondo animal"</div><div>      /></div><div>    </header></div><div>  </body></div><div></html></div></div>

CSS

<div style="color: rgb(153, 153, 153); background-color: rgb(21, 21, 21); font-family: dm, Menlo, Monaco, "Courier New", monospace; line-height: 20px;"><div> <link href="/css/screen.css" rel="stylesheet" /></div><div>    <link</div><div>      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"</div><div>      rel="stylesheet"</div><div>    /></div></div>

El CSS es el encargado de la estructura estética de un código HTML con este modelos definir tanto el color de fondo, el tipo de letra, el tamaño de letra y fondo. Con el código anterior definimos la ubicación del archivo CSS y como también la librería que utilizaremos para este.

Body

<div style="color: rgb(153, 153, 153); background-color: rgb(21, 21, 21); font-family: dm, Menlo, Monaco, "Courier New", monospace; line-height: 20px;"><div>   <title>Conociendo a los animales</title></div><div>  </head></div><div>  <body></div><div>    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script></div><div>    <script src="sketch.js"></script></div><div>    <!-- Se importa la librería p5.sound.js --></div><div>    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script></div><br><div>    <header></div><div>      <nav></div><div>        <a</div><div>          href="index3.html"</div><div>          class="btmenu"</div><div>          //onmouseover="PlaySound('mySound')"</div><div>          //onmouseout="StopSound('mySound')"</div><div>          style="max-width: 100%; height: auto;"</div><div>          >PLAY</a</div><div>        ></div><br><div>        <audio</div><div>          id="mySound"</div><div>          src="https://uploads.codesandbox.io/uploads/user/1bf39f0a-d47b-4ee0-b49f-f85791ca875b/3dHL-jungle.mp3"</div><div>        /></div><div>      </nav></div><div>      <img</div><div>        id="fondo-header"</div><div>        src="https://uploads.codesandbox.io/uploads/user/1bf39f0a-d47b-4ee0-b49f-f85791ca875b/BL7w-conociendo-los-animales-min.png"</div><div>        onmouseover="PlaySound('mySound')"</div><div>        onmouseout="StopSound('mySound')"</div><div>        style="max-width: 100%; height: auto;"</div><div>        alt="fondo animal"</div><div>      /></div><div>    </header></div></div>

El body de la pantalla de inicio es donde se declaran los paths a utilizar como por ejemplo el sonido, la imagen de fondo ademas de esto tambien se declaran las id's para poder utilizarla en un codigo javascript.

Step 5: Menu Principal

En este paso comenzaremos con la creacion de 3 carpetas:

-audio: aqui guardaremos todos los sonidos que contenga nuestra aplicacion web

-css: aqui guardamos los archivos .css que controlan el estilo grafico de nuestra aplicacion web

-images: aqui guardaremos todas las imagenes que contiene nuestra aplicacion web

Primero comenzaremos con la estructura del index.html el cual contiene toda la jerarquia de elementos de nuestra aplicacion web

- 1. definimos el doctype y el head:

<div><div><!DOCTYPE html></div><div><html lang="en"></div><div>  <head></div><div>    <meta charset="UTF-8" /></div><div>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /></div><div>    <meta http-equiv="X-UA-Compatible" content="ie=edge" /></div><div>    <link href="/css/screen.css" rel="stylesheet" /></div><div>    <title>CONOCIENDO A LOS ANIMALES</title></div><div>  </head></div></div>

con la etiqueta link definimos que .css esta relacionado con nuestro html

la etiqueta title se encarga de mostrar el titulo de la aplicación en la pestaña del navegador

luego importamos el siguiente contenido a las carpetas que creamos:

-audios:

-imagenes:

para terminar de maquetar la estructura de nuestro menu principal escribimos el siguiente codigo

<div><div><body></div><div>    <div align="center"></div><div>      <h1>CONOCIENDO A LOS ANIMALES</h1></div><div>    </div></div><br><div>    <div class="animales"></div><div>      <img</div><div>        id="caballo"</div><div>        class="animal"</div><div>        src="images/caballo.png"</div><div>        alt="imagen caballo"</div><div>      /></div><div>      <img class="animal" src="images/cerdo.png" alt="imagen cerdo" /></div><div>      <img class="animal" src="images/cuy.png" alt="imagen cuy" /></div><div>      <img class="animal" src="images/Vaca.png" alt="imagen vaca" /></div><div>      <img class="animal" src="images/delfin_rosado.png" alt="imagen delfin" /></div><div>      <img class="animal" src="images/gallina.png" alt="imagen gallina" /></div><div>      <img class="animal" src="images/jaguar.png" alt="imagen jaguar" /></div><div>      <img</div><div>        class="animal"</div><div>        src="images/osoanteojos.png"</div><div>        alt="imagen oso anteojos"</div><div>      /></div><div>      <img class="animal" src="images/puma.png" alt="imagen puma" /></div><div>      <img class="animal" src="images/tapir.png" alt="imagen tapir" /></div><div>    </div></div><br><div>    <div class="habitat"></div><div>      <img</div><div>        id="selva"</div><div>        class="contenido"</div><div>        src="images/selva.jpg"</div><div>        alt="imagen selva"</div><div>      /></div><div>      <img</div><div>        id="finca"</div><div>        class="contenido"</div><div>        src="images/finca.jpg"</div><div>        alt="imagen finca"</div><div>      /></div><div>    </div></div><br><div>    <audio id="audiocorrecto"></div><div>      <source type="audio/mp3" src="./audio/correcto.mp3" /></div><div>    </audio></div><div>    <audio id="audioincorrecto"></div><div>      <source type="audio/mp3" src="./audio/incorrect.mp3" /></div><div>    </audio></div><br><div>    <script src="script.js"></script></div><div>    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script></div><div>    <script src="sketch.js"></script></div><div>  </body></div><div></html></div></div>

Step 6: Creando Nuestra Segunda Interfaz

Ahora que tenemos nuestra estructura visual lista(menu principal), sabemos que nuestra aplicación se compone de dos pestañas y cada una es un archivo .html, ya tenemos creada la pestaña para el menú principal, ahora procedamos a crear la pestaña que contiene la descripción de nuestros animales.

creamos un nuevo archivo html y lo nombramos descripcion.html, copiamos y pegamos el siguiente codigo

<div><div><!DOCTYPE html></div><div><html lang="en"></div><div>  <head></div><div>    <meta charset="UTF-8" /></div><div>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /></div><div>    <meta http-equiv="X-UA-Compatible" content="ie=edge" /></div><div>    <link href="/css/des.css" rel="stylesheet" /></div><br><div>    <title>Descripcion Animal</title></div><div>  </head></div><div>  <body></div><div>    <h1 align="center" id="descripcion">Descripción</h1></div><br><div>    <div align="center" class="foto"></div><div>      <img id="imagen" class="animal" /></div><div>    </div></div><div>    <br /></div><br><div>    <div class="texto" id="texto"></div><div>      <p id="texto"></p></div><div>    </div></div><div>    <div align="center"></div><div>      <audio id="sound" controls></div><div>        <source type="audio/mp3" /></div><div>      </audio></div><div>      <br /><br /></div><br><div>      <input</div><div>        name="button"</div><div>        type="button"</div><div>        onclick="window.close();"</div><div>        value="Cerrar esta ventana"</div><div>      /></div><div>    </div></div><br><div>    <script src="script.js"></script></div><div>    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script></div><div>  </body></div><div></html></div></div>

Como nuevas etiquetas podemos observar:

h1 esta etiqueta indica y contiene el titulo principal de la pagina

la propiedad id nos sirve para agregar un identificador particular para cada elemento, esto nos ayuda a agregar ciertos estilos e incluso manipular la funcionalidad desde javascript

input nos sirve para crear el botón que cierra la ventana y con la propiedad onclick definimos que accion realiza cuando se presiona, value nos muestra el texto del boton

Step 7: Agregando Funcionalidad a Nuestra Aplicación Con JavaScript

Ya tenemos listas todas las vistas de nuestra aplicación, el ultimo paso restante es agregar la funcionalidad

para esto creamos un nuevo script dentro de la jerarquía del proyecto llamado script.js, copiamos y pegamos el siguiente codigo:

<div><div>const dropSelva = document.getElementById("selva");</div><div>const dropFinca = document.getElementById("finca");</div></div>

primero creamos estas dos variables que nos servirán como el lugar donde vamos a arrastrar y soltar las imágenes de los animales, con la parte de document.getElementById estamos buscando dentro del documento html el elemento con el id (selva, finca), que en nuestro caso es la etiqueta que contiene la imagen de la (selva, finca).

Si quieres saber mas sobre como funciona el metodo getElementById puedes leer la siguiente documentacion:

Documentacion getElementById

ahora vamos a declarar los eventos que detectan si estamos arrastrando o soltando la respetiva imagen dentro de su contenedor

Primero necesitamos declarar el evento "dragover" este metodo se dispara cuando el objeto que estamos arrastrando se mueve sobre la zona de destino (dropSelva, dropFinca)

<div><div>dropSelva.addEventListener("dragover", (e) => {</div><div>  e.preventDefault();</div><div>  console.log("Drag Over");</div><div>});</div></div>

el metodo prevenDefault() previene que el navegador haga el comportamiento por defecto

Lo siguiente es declarar el siguiente evento "drop" este se ejecuta cuando soltamos el objeto en la zona donde lo requerimos

<pre>dropSelva.addEventListener("drop", (event) => {});

dentro de las llaves vamos a programar la funcionalidad de la aplicación web

agregamos el siguiente código:

<div><div> const id = event.dataTransfer.getData("text");</div><div>  if (id === "https://85zjd.csb.app/images/puma.png") {</div><div>    console.log("funciono");</div><div>    var audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    var newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "El puma es también conocido como león de montaña o león americano. Pertenece a la familia Felidae y es un mamífero carnívoro nativo de América. Es el segundo mayor felino en el continente después del jaguar y el cuarto de mayor tamaño en el mundo. Su hábitat incluye bosques de coníferas, bosques tropicales, praderas, pantanos y ambientes con abundante vegetación. Estos felinos alcanzan la velocidad de 55 km/h pero no está adaptado a carreras largas. Es más hábil para escalar y aunque no es muy afecto a nadar, puede realizarlo sin problema.";</div><div>      newWin.document.getElementById("imagen").src = "./images/puma.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/PUMA.mp3";</div><div>    };</div><div>  } </div></div>

en la variable id guardamos toda la data que trae el objeto que estamos arrastrando y con la estructura condicional if comparamos si la id de la imagen corresponde a el animal que pertenece al hábitat en el cual la estamos arrastrando en este caso el de la selva, vemos que en el código de ejemplo esta el id del puma lo comparamos con la ruta de la imagen y si es igual reproducimos un sonido que le indica al usuario que realizo una selección correcta , luego con window.open estamos llamando y abriendo la otra pagina que corresponde a la descripción.

mientras esta abre con la funcion onload estamos capturando los elementos de la descripcion del animal, la ruta de la imagen y la ruta donde esta el sonido, luego los cambiamos por el que corresponde y si el animal no corresponde al hábitat se va a la parte del else donde se repoduce un sonido que le indica al usuario que el animal no pertenece al hábitat

<div><div>const dropSelva = document.getElementById("selva");</div><div>const dropFinca = document.getElementById("finca");</div><br><div>dropSelva.addEventListener("dragover", (e) => {</div><div>  e.preventDefault();</div><div>  console.log("Drag Over");</div><div>});</div><br><div>dropSelva.addEventListener("drop", (event) => {</div><div>  const id = event.dataTransfer.getData("text");</div><div>  if (id === "https://85zjd.csb.app/images/puma.png") {</div><div>    console.log("funciono");</div><div>    var audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    var newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "El puma es también conocido como león de montaña o león americano. Pertenece a la familia Felidae y es un mamífero carnívoro nativo de América. Es el segundo mayor felino en el continente después del jaguar y el cuarto de mayor tamaño en el mundo. Su hábitat incluye bosques de coníferas, bosques tropicales, praderas, pantanos y ambientes con abundante vegetación. Estos felinos alcanzan la velocidad de 55 km/h pero no está adaptado a carreras largas. Es más hábil para escalar y aunque no es muy afecto a nadar, puede realizarlo sin problema.";</div><div>      newWin.document.getElementById("imagen").src = "./images/puma.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/PUMA.mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/tapir.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "Es mamífero perisodáctilos de la familia  Tapiridae, conocidos vulgarmente como tapires.Pertenece al mismo orden que los caballos, que son sus parientes vivos más cercanos. La principal característica del tapir es su alargado hocico en forma de pequeña probóscide, que usa principalmente para arrancar las hojas, hierbas y raíces que constituyen su alimento. Esta trompa resulta especialmente útil para recolectar plantas acuáticas en los pantanos donde suele pasar buena parte del día. También le sirve para tomar agua y, cuando son machos, para enfrentarse a sus rivales en la época de apareamiento. Los tapires habitan en regiones selváticas húmedas y, en el caso del tapir de montaña, los páramos andinos.";</div><div>      newWin.document.getElementById("imagen").src = "./images/tapir.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/TAPIR.mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/osoanteojos.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "El oso también conocido como oso frontino, oso andino, oso sudamericano. Es una especie de mamífero de la familia Ursidae.Es la única especie viviente de su género. El hocico es corto, de color café claro o blanco, con manchas blanquecinas que se extienden alrededor de los ojos y la nariz a través de las mejillas, bajando por el cuello hasta el pecho, y que varía mucho entre individuos. Posee cinco dedos con garras largas y curvas no retráctiles. De hábitos diurnos, solitarios, omnívoros, terrestres y trepadores, su alimentación es predominantemente vegetariana. Se distribuye en la cordillera de los Andes, actualmente desde la región andina.";</div><div>      newWin.document.getElementById("imagen").src = "./images/osoanteojos.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/OSO.mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/delfin_rosado.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "Los delfines llamados también delfines oceánicos  de gran tamaño, el hocico alargado y solo un espiráculo en la parte superior de la cabeza.Son carnívoros estrictos. Están entre las especies más inteligentes que habitan en el planeta. Se encuentran relativamente cerca de las costas y a menudo interactúan con el ser humano.Los delfines utilizan los sonidos, la danza y el salto para comunicarse, orientarse y alcanzar sus presas, Algunos comen peces como la sierra o la macarela, otros comen calamares y las orcas también pueden comer otros mamíferos o tortugas.";</div><div>      newWin.document.getElementById("imagen").src =</div><div>        "./images/delfin_rosado.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/DELFIN .mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/jaguar.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "El jaguar es un carnívoro félido de la subfamilia de los Panterinos y género Panthera. Es la única de las cinco especies actuales de este género que se encuentra en América. Habita principalmente en zonas tropicales secas y húmedas, pero también vive en matorrales áridos. Su dieta es muy amplia, puede cazar grandes presas, incluido ganado, o pequeños animales.";</div><div>      newWin.document.getElementById("imagen").src = "./images/jaguar.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/JAGUAR.mp3";</div><div>    };</div><div>  } else {</div><div>    var audio1 = document.getElementById("audioincorrecto");</div><div>    audio1.play();</div><div>  }</div><div>});</div><br><div>dropFinca.addEventListener("dragover", (e) => {</div><div>  e.preventDefault();</div><div>  console.log("Drag Over");</div><div>});</div><br><div>dropFinca.addEventListener("drop", (event) => {</div><div>  const id = event.dataTransfer.getData("text");</div><div>  if (id === "https://85zjd.csb.app/images/caballo.png") {</div><div>    console.log("funciono");</div><div>    var audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    var newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "El caballo  es un mamífero perisodáctilo domesticado de la familia de los équidos. Sea bosque o pradera, el caballo es capaz de adaptarse al nuevo medio cuando su hábitat cambia. La alimentación del caballo variará dependiendo si está en libertad o es doméstico. Los caballos salvajes se alimentan principalmente de la hierba que encuentran en los prados por donde campan. En cautiverio, en cambio, suelen tener una dieta más variada; se les suele ofrecer pienso específico para ellos y alimentos como la alfalfa, el maíz, la avena, el calabacín, las zanahorias y las manzanas.";</div><div>      newWin.document.getElementById("imagen").src = "./images/caballo.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/CABALLO .mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/cerdo.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "Mamífero paquidermo de cuerpo pesado y rechoncho, piel generalmente rosada o parda con fuertes cerdas, cabeza grande, hocico chato y casi cilíndrico, grandes orejas caídas, patas cortas, y cola pequeña y delgada; es doméstico y se cría en granjas. Los cerdos son omnívoros, pueden comer plantas y animales. Los cerdos escarban y comen cualquier tipo de comida, incluyendo insectos muertos, lombrices, cortezas de árboles, animales muertos, excrementos (incluyendo los suyos), basura y otros cerdos.";</div><div>      newWin.document.getElementById("imagen").src = "./images/cerdo.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/CERDO .mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/cuy.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "El conejillo de indias, también llamado Cuy, es una especie de roedor que pertenece a la familia Caviidae y el género Cavia. nativo de América del Sur(Perú, Colombia y Venezuela). Se cría fundamentalmente con el objeto de aprovechar su carne. También es conocido con los nombres de cobayo, curi y conejillo de indias.El cuy debe mantenerse en un ambiente cuya temperatura le permita vivir sin estar expuesto ni al frío ni al calor excesivo.Es un animal herbívoro que en estado silvestre come los pastos y plantas que lo rodean.";</div><div>      newWin.document.getElementById("imagen").src = "./images/cuy.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/CONEJO.mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/Vaca.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "La vaca es un mamífero artiodáctilo de la familia de los bóvidos. Por naturaleza viven en los campos donde se alimentan de hierbas y comen durante la mayor parte del día, en total, cerca de ocho horas diarias.Los productos que se obtienen de la vaca, además de la carne son la leche, como alimento y para producir quesos, cremas, yogures y mantequillas; la piel, para fabricar diferentes artículos; y su excremento, para abono o fertilizante en tierras de cultivo.";</div><div>      newWin.document.getElementById("imagen").src = "./images/Vaca.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/VACA.mp3";</div><div>    };</div><div>  } else if (id === "https://85zjd.csb.app/images/gallina.png") {</div><div>    console.log(id);</div><div>    audio = document.getElementById("audiocorrecto");</div><div>    audio.play();</div><div>    newWin = window.open("descripcion.html");</div><div>    newWin.onload = function () {</div><div>      newWin.document.getElementById("texto").innerHTML =</div><div>        "Es un ave que forma parte del orden de las especies galliformes, caracterizadas por su pico corto y algo curvado, sus alas también cortas y sus patas robustas. Las gallinas, cuyas plumas son lustrosas, tienen una cresta carnosa de color rojizo.De las gallinas domésticas hay que destacar que pueden encontrarse en todos los rincones del mundo, que vuelan muy mal al contrario que otras aves, que son animales que tienen una clara jerarquía entre ellos y que se han convertido en una especie que ha pasado a formar parte fundamental de la alimentación del ser humano. Y es que a este le aportan huevos y, además, le proporcionan su carne.";</div><div>      newWin.document.getElementById("imagen").src = "./images/gallina.png";</div><div>      newWin.document.getElementById("sound").src = "./audio/GALLINA.mp3";</div><div>    };</div><div>  } else {</div><div>    var audio1 = document.getElementById("audioincorrecto");</div><div>    audio1.play();</div><div>  }</div><div>});</div><br></div>

Realizamos lo mismo para el otro hábitat en la pate superior esta el codigo completo del script

para mas info:

Cambiar datos de otro html

Drag and Drop javascript