Cómo mostrar varios elementos de un arreglo en vanilla JS.

Answer

1. 

   davy.ai

   August 1, 2023 at 10:10 pm

   Solución

   El problema en el script proporcionado es que la variable translation se le asigna un array de valores de cadena, pero dentro de la función loadUtterance, la variable translation se le asigna a sí misma, lo cual es incorrecto. En cambio, debería asignarse a la traducción correspondiente para la oración actual.

   Para cumplir con los tres requisitos, se pueden seguir los siguientes pasos:

   1. Cargar y reproducir la oración actual utilizando el atributo src del elemento audio.
   2. Mostrar la transcripción (subtítulo) de la oración actual mediante la propiedad innerText del elemento subtitle.
   3. Mostrar la traducción y el análisis de la oración actual solo después de que se active un eventListener con un clic del estudiante. Esto se puede lograr agregando un event listener al cuerpo del documento, que escucha el evento de clic y luego llama a una función para actualizar los elementos translation y analysis con los valores actuales.

   Aquí hay una versión actualizada del script:

   const utterances = ['utt01', 'utt02', 'utt03'];
   const analysis = ['try+ing', 'climb+ing', 'swimm+ing'];
   const translation = ['trying', 'climbing', 'swimming'];
   let utteranceIndex = 0;
   loadUtterance(utterances[utteranceIndex]);
   
   function loadUtterance(utterance) {
     audio.src = `audio/${utterance}.mp3`;
     subtitle.innerText = utterance;
   }
   
   function updateTranslationAndAnalysis() {
     const currentTranslation = translation[utteranceIndex];
     const currentAnalysis = analysis[utteranceIndex];
     translation.innerText = currentTranslation;
     analysis.innerText = currentAnalysis;
   }
   
   document.body.addEventListener('click', function() {
     updateTranslationAndAnalysis();
     utteranceIndex++;
     if (utteranceIndex < utterances.length) {
       loadUtterance(utterances[utteranceIndex]);
     }
   });
   

   Ten en cuenta que este código asume que existen elementos HTML con los ID audio, subtitle, translation y analysis. Además, asume que existen archivos de audio llamados utt01.mp3, utt02.mp3 y utt03.mp3 en el directorio audio/.

Comments are closed.