Introducción al contenido interactivo

Este documento está destinado a instruir a los desarrolladores en la construcción de contenido interactivo para que 4YouSee Player lo muestre.

Introducción
El contenido interactivo es contenido HTML5 que permite a los usuarios interactuar con ellos y generar información sobre estas interacciones. Los botones de reacción, las encuestas y los formularios de evaluación son ejemplos de este contenido.

El proceso para producir material de este tipo es simple: a través de 4YouSee Designer, todo el diseño, con elementos y animaciones, puede crearse rápidamente utilizando una interfaz gráfica y luego exportarse a HTML5, JavaScript y CSS. Con el código exportado, solo agregue algunas líneas de código JavaScript para permitir la interactividad con el contenido.

 

Agregar interacciones
Para agregar interacciones a los objetos, debe:

En 4YouSee Designer, asigne un nombre al objeto que permitirá la interacción;

Exporte el contenido y extraiga el archivo zip;
En el contenido exportado, abra el archivo js / designer_events.js en un editor de código, busque en la línea 2 la variable _eventsPerObject. Las interacciones deben agregarse a esta variable, con el siguiente formato;

 

var _eventsPerObject = {
nome_objeto: {
click: function() {
// Código a ser executado ao clicar no objeto "nome_objeto"
}
}
};

 

Ejemplo
En este ejemplo, crearemos contenido que muestre botones de promoción y reacción. Cada botón, cuando se hace clic, envía una solicitud a un servicio web.

 

1. Cree un nuevo proyecto en 4YouSee Designer;
2. Seleccione uno de los modelos de escena existentes;
3. Agregue 3 botones de reacción llamados "me gusta", "amor" y "no me gusta";
4. Guardar y exportar el proyecto;
5. Extraer el archivo zip;
6. Edite el archivo js / designer_events.js y agregue las siguientes dos funciones. Serán responsables de solicitar la persistencia de los datos de iteración (nombre del botón y fecha / hora de la interacción) en el servicio web, y de mostrar un mensaje de éxito al usuario;

 

var postRequest = function(btnName) {
var payload = {
btnName: btnName,
dateTime: new Date().toISOString()
};

fetch('https://api.conteudointerativo.com', {
method: 'post',
body: JSON.stringify(payload)
}).then(function(response) {
if (response.ok) {
showSuccessMessage(btnName);
}
throw Error("Status: " + response.status);
}).catch(function(error) {
throw Error("Fetch error. " + error.message);
});
};

var showSuccessMessage = function (btnName) {
alert(`Obrigado por participar!\nVocê clicou no botão "${btnName}".`);
};

 

7. Aún en el archivo js / designer_events.js, cambie la variable _eventsPerObject de la siguiente manera:

var _eventsPerObject = {
like: {
click: function() {
postRequest('like');
}
},
love: {
click: function() {
postRequest('love');
}
},
dislike: {
click: function() {
postRequest('dislike');
}
}
};

 En este artículo, aprendemos cómo crear contenido interactivo. A través de 4YouSee Designer y la adición de código JavaScript podemos obtener información de los tipos más diversos a través de los contenidos. ¡Lea también artículos relacionados para aprender a identificar el entorno de ejecución de contenido, ver datos de noticias de 4YouSee Manager y más!

¿Le resultó útil? No

Enviar comentarios
Lamentamos no haberle podido ayudar más. Sus comentarios nos ayudarían a mejorar este artículo.