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!