O Adobe Captivate permite que os usuários produzam um conteúdo mais poderoso e confiável usando o novo recurso de interface JavaScript. Esse recurso oferece uma plataforma comum para executar ações de JavaScript entre SWF e HTML. Isso também torna mais fácil para o JavaScript acessar o conteúdo real.

Agora, você pode gravar snippets menores de JavaScript para acessar diferentes variáveis no conteúdo. Você pode inscrever-se em diferentes eventos gerados pelo conteúdo. Você pode executar todas essas pequenas mas poderosas tarefas sem se preocupar se o conteúdo é SWF ou HTML. 

Você pode usar a interface comum de JavaScript de duas maneiras: 

  1. Execute a ação de JavaScript no projeto do Captivate. 
  2. Adicione código JavaScript ao HTML publicado no tempo de execução.
Consulte a seção Exemplos para obter mais informações. 
js interface-01

Como mostrado no diagrama acima, o JavaScript atua como uma interface entre o navegador e o conteúdo (SWF/HTML5). 

cpAPIInterface

Esse objeto é o objeto principal que sustenta toda a interface JavaScript. Ele contém muitas pequenas funções utilitárias que com frequência são necessárias em Executar ações do JavaScript. 

O cpAPIInterface é um objeto disponível na área da janela. Para acessar o objeto de interface,veja a seguir o uso recomendado: window.cpAPIInterface

Métodos:

Nome

Descrição

Parâmetros

Uso

getVariableValue Retorna o valor de nome variável especificada. - window.cpAPIInterface.
getVariableValue
("cpQuizInfoStudentID");
setVariableValue Define o valor de determinado nome de variável especificada com o valor especificado. variableName:String window.cpAPIInterface.
setVariableValue
("cpQuizInfoStudentID",
"João");
play Reproduz o filme.   window.cpAPIInterface.
play();
pause Pausa o filme.   window.cpAPIInterface.
pause();
stop Interrompe o filme.   window.cpAPIInterface.
stop();
rewind Retrocede e reproduz o filme.   window.cpAPIInterface.
rewind();
next Busca o filme para o próximo slide.   window.cpAPIInterface.
next();
previous Busca o filme para o slide anterior.   window.cpAPIInterface.
previous();
fastForward Aumenta a velocidade do filme para 2x, depois 4x e então volta ao normal em quando usado consecutivamente.   window.cpAPIInterface.
fastForward();
getPlaySpeed Mostra a velocidade de reprodução do filme em quadros por segundo (fps).   window.cpAPIInterface.
getPlaySpeed ();
getDurationInFrames Mostra o número total de quadros no filme.   window.cpAPIInterface.
getDurationInFrames ();
getDurationInSeconds Mostra a duração total do filme em segundos.   window.cpAPIInterface.
getDurationInSeconds ();
getVolume Mostra o volume de filme em porcentagem.   window.cpAPIInterface.
getVolume ();
setVolume Define o volume de filme. volume: Número (escala: 0 a 1) window.cpAPIInterface.
setVolume (0.7);
navigateToTime Busca um momento específico (em milissegundos) no filme. timeInMilliseconds: Número window.cpAPIInterface.
navigateToTime (3000);
canNavigateToTime Exibe um valor booleano que você mostra se você pode buscar um tempo específico no filme ou não. timeInMilliseconds: Número window.cpAPIInterface.
canNavigateToTime (3000);
getCurrentFrame Mostra o quadro atual do filme.   window.cpAPIInterface.
getCurrentFrame ();
getCurrentSlideIndex Mostra o índice do slide atual do filme.   window.cpAPIInterface.
getCurrentSlideIndex ();
getEventEmitter Mostra o identificador para o objeto cpAPIEventEmitter.   window.cpAPIInterface.
getEventEmitter ();

cpAPIEventEmitter

Esse objeto é semelhante a qualquer outro Gerenciador de eventos. Ela fornece o mecanismo para fazer/cancelar a assinatura de diferentes eventos que são gerados no conteúdo.

O cpAPIEventEmitter é um objeto disponível na área da janela. Para acessar a interface do objeto, recomenda-se usar window.cpAPIEventEmitter

Métodos:

Nome Descrição Parâmetros Uso
Adicionar
EventListener
Adiciona uma função de ouvinte de eventos a um evento específico.
  • eventName : Um dos
    nomes de evento listados nessa página.
  • eventListenerFunction:
    Qualquer função JavaScript.
  • variableName: 
    1. opcional. 
    2. Um nome de variável do Captivate
      cuja alteração de valor deve ser notificada.
    3. Deve ser usado somente com o
      evento CPAPI_
      VARIABLEVALUECHANGED
      .
  • .
    cpAPIEventEmitter.Janela
    addEventListener("CPAPI_
    MOVIESTART
    ",
    function(){alert
    ("Filme iniciado");});
  • .
    cpAPIEventEmitter.
    addEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert("Valor
    da variável alterado");},
    "cpQuizInfoStudentID");
remover
EventListener
Remove a função de ouvinte de evento de um evento específico.
  • eventName:
    Um dos nomes de eventos listados
    nessa página.
  • eventListenerFunction: Qualquer
    função JavaScript.
  • variableName: 
    • opcional. 
    • Um nome de variável do Captivate
      cuja alteração de valor deve ser notificada.
    • Deve ser usado somente com a janela de evento
      CPAPI_
      VARIABLEVALUECHANGED.
  • .
    cpAPIEventEmitter.Janela
    removeEventListener
    ("CPAPI_MOVIESTART",
    function()
    {alert("Filme iniciado");});
  • .
    cpAPIEventEmitter.
    removeEventListener
    ("CPAPI_VARIABLE
    VALUECHANGED
    ",
    function(){alert
    ("Alteração do valor da variável");},
    "cpQuizInfoStudentID");

Lista de eventos:

Nome Descrição Dados do evento Enumerações

CPAPI_SLIDEENTER

Notifica que foi inserido um novo slide no filme.

slideNumber=NUMBER;

frameNumber=NUMBER;

 lcpversion=STRING;

 

CPAPI_SLIDEEXIT

Notifica que um slide está sendo retirado do filme.

slideNumber=NUMBER;

frameNumber=NUMBER;

lcpversion=STRING;

percentageSlideSeen=
NUMBER;

 
CPAPI_
STARTPLAYBARSCRUBBING
Notifica que o usuário começou a fazer buscas no filme usando a barra de reprodução.    
CPAPI_
ENDPLAYBARSCRUBBING
Notifica que o usuário parou de fazer buscas no filme usando a barra de reprodução.    
CPAPI_
INTERACTIVEITEMSUBMIT
Notifica que o usuário realizou uma interação com um item interativo. frameNumber=NUMBER;
includedInQuiz=BOOLEAN;
issuccess=BOOLEAN;
itemname=STRING;
objecttype=NUMBER;
questioneventdata=
[object Object];
slideNumber=NUMBER;
 
CPAPI_MOVIEPAUSE Notifica que o filme foi pausado.    
CPAPI_MOVIERESUME Notifica que o filme foi retomado após uma pausa.    
CPAPI_MOVIESTART Notifica que o filme foi iniciado.    
CPAPI_MOVIESTOP Notifica o filme foi interrompido.    
CPAPI_QUESTIONSKIP Notifica que o usuário ignorou um slide de pergunta. correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER;
objectiveID=STRING;
questionAnswered=BOOLEAN;
questionAnsweredCorrectly
=BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=
[object Object],{Name:STRING};
questionType=STRING;
quizName=STRING;
reportAnswers=BOOLEAN;
selectedAnswer=STRING;
slideNumber=NUMBER;

interactionType -

  • escolha
  • verdadeiro-falso
  • preenchimento
  • preenchimento longo
  • ponto ativo
  • sequência
  • correspondência
  • likert

questionType -

  • escolha
  • verdadeiro-falso
  • preenchimento
  • preenchimento longo
  • ponto ativo
  • sequência
  • correspondência
  • likert

questionScoringType
["Nome"]
 -

  • PretestQuestion
  • GradedQuestion
  • SurveyQuestion
CPAPI_QUESTIONSUBMIT Notifica que o filme respondeu a um slide de pergunta. correctAnswer=STRING;
infiniteAttempts=BOOLEAN;
interactionID=NUMBER;
objectiveID=STRING;
questionAnswered=BOOLEAN;
questionAnsweredCorrectly=
BOOLEAN;
questionAttempts=NUMBER;
questionMaxAttempts=NUMBER;
questionMaxScore=NUMBER;
questionNumber=NUMBER;
questionScore=NUMBER;
questionScoringType=[object Object],{Name:STRING};
questionType=STRING;
quizName=STRING;
reportAnswers=BOOLEAN;
selectedAnswer=STRING;
slideNumber=NUMBER;
 
CPAPI_
VARIABLEVALUECHANGED

A inscrição nesse evento exige um parâmetro adicional - variableName. Após subscrito, qualquer alteração no valor da variável fornecida será notificada.

captivateVersion=STRING;
varName=STRING;
oldVal=STRING;
newVal=STRING;

 

moduleReadyEvent

O conteúdo do Captivate também dispara um moduleReadyEvent no objeto da janela primária para notificar que o conteúdo foi carregado. Os usuários podem usar esse evento como notificação de disponibilidade da interface JavaScript. O snippet a seguir permite adicionar um ouvinte ao moduleReadyEvent:

window.addEventListener("moduleReadyEvent", function(evt)
{
	//evt.Data carries the interface object.
	//It is same as window.cpAPIInterface
	var interfaceObj = evt.Data;
	var eventEmitterObj = interfaceObj.getEventEmitter();
});

Exemplos

Gerar um número aleatório

O código a seguir gera um número aleatório entre 0 e 1.

alert(Math.random());

KO código a seguir gera um número entre 1 e 10.

alert(Math.floor((Math.random()*10)+1));

O código a seguir usa uma função para gerar um número aleatório entre dois inteiros que são passados como argumentosnafunção.

function getRandomInt(min, max) {
   var jsRandomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
   alert(jsRandomNumber);
}

getRandomInt(10, 300);

Usar a geolocalização

Usando a geolocalização, você pode utilizar a localização geográfica de um aluno para acionar determinados eventos em um curso ou para determinar quais objetos de aprendizagem são ocultos ou exibidos.

É possível configurar esse cenário usando ações avançadas, mas também é possível configurar o suporte à geolocalização usando Javascript.

  1. Crie uma variável do tipo Geolocalização e atribua os seguintes valores à variável:

    • Latitude
    • Longitude
    • Precisão
  2. Crie um projeto com dois objetos,ss1e ss2.

    Dependendo da variável de geolocalização configurada, você mostrará o objeto ss2 e ocultará o objeto ss1.

    Observação:

    Para ocultar um objeto, use cp.hide("object_name");

    Para mostrar um objeto, use cp.show("object_name");

  3. No primeiro slide, escolha Ações e selecione Executar Javascript na lista suspensa Ao entrar. Na janela de script, digite o seguinte código:

    window.cpAPIInterface.setVariableValue("cpInfoGeoLocation","BLR");
    if (window.cpAPIInterface.getVariableValue("cpInfoGeoLocation")==="BLR")
    {
        cp.hide("ss1"); // hide object ss1
        cp.show("ss2"); // show object ss2
    }
    
  4. Visualize o projeto. Você pode ver que um objeto é exibido ou oculto com base na variável de geolocalização.

Usar o armazenamento local

Com o armazenamento local, você pode armazenar dados localmente no navegador. Por exemplo,

localStorage.setItem("learnerName","John");

Usando a notação de ponto,

localStorage.learnerName="John";

No armazenamento local, os dados são conservados mesmo depois de fechar e reabrir o navegador.

No Adobe Captivate, você pode usar o armazenamento local para transferir variáveis de um curso para o seguinte. Para implementar o armazenamento local,

  1. Em um projeto em branco, crie uma variável learnerName que armazena o nome do aluno.

  2. Atribua a variável a uma caixa de entrada de texto. O nome que você digita na caixa é atribuído à nova variável.

    learner
  3. Crie um botão ao lado da caixa de entrada de texto. Digite o seguinte código JavaScript de modo que o código seja acionado ao clicar no botão.

    localStorage.setItem("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));
  4. Visualize o projeto em um navegador. Digite o nome de um aluno e clique em Enviar. Depois de atribuir o nome à variável, o valor é armazenado no armazenamento local.

  5. Abra o modo do depurador do navegador. Por exemplo, no Chrome, abra o modo do depurador e clique na guia Recursos. Expanda Armazenamento local e escolha o host necessário.

    LocalStorage debugger

    Você pode ver o valor da variável armazenada no armazenamento local como um par chave-valor.

    LocalStorage persistence
    1 Nome do aluno.
    2 Nome da variável.
    3 Valor da variável.

Usar o armazenamento de sessão

No armazenamento de sessão, os dados armazenados são apagados quando você termina uma sessão da página. Uma sessão de página dura enquanto a página estiver aberta em um navegador. Se você abrir a página em uma nova guia ou janela, uma nova sessão é iniciada.

sessionStorage("learnerName","John");

Para obter os dados do armazenamento de sessão,

var myData = sessionStorage.getItem("learnerName");

Para remover os dados do armazenamento de sessão,

sessionStorage.removeItem("learnerName");

No Captivate, você pode armazenar o nome de um aluno no armazenamento da sessão. Por exemplo,

sessionStorage.setItem("newLearner", window.cpAPIInterface.getVariableValue("newLearner"));

Depois de visualizar o projeto no navegador, abra o console do depurador e, em sessionStorage, você pode localizar o nome do aluno, conforme mostrado abaixo:

sessionStorage
1 Nome da variável.
2 Valor da variável.

Incrementar o contador do slide

O código a seguir obtém o valor de uma variável "mySlideVisitCounter", incrementa-o quando o usuário insere um slide e devolve-o para o conteúdo.

//check if window.cpAPIInterface is available
if(window.cpAPIInterface) 
{
	//check if window.cpAPIEventEmitter is available
	if(window.cpAPIEventEmitter) 
	{
		//add a listener to CPAPI_SLIDEENTER event
		window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER",function(e)
																	{
																		//get the current value of mySlideVisitCounter from Captivate content	
																		var lSlideVisitCtr = window.cpAPIInterface.getVariableValue("mySlideVisitCounter");	
																		//increment lSlideVisitCtr by 1
																		lSlideVisitCtr = lSlideVisitCtr + 1;
																		//set the value of mySlideVisitCounter in the Captivate content
																		window.cpAPIInterface.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
																	});
	}
}

O código acima pode ser usado da seguinte maneira:

 

  1. Executar ação JavaScript
     
    1. No projeto Captivate, clique na guia Ações no Inspetor de propriedades

    2. No OnEnter suspenso, selecione Executar JavaScript e clique em Script_Window

    3. Cole o código JavaScript na janela. 

    Você pode executar uma ação JavaScript em qualquer ação do Captivate, como mostrado na captura de tela a seguir: 

    execute-action
  2. Alterar o conteúdo publicado 

    Você também pode publicar o conteúdo e acessá-lo internamente usando a interface JavaScript de fora.

    Adicione o snippet a seguir no HTML publicado:

    <script>
    var interfaceObj;
    var eventEmitterObj;
    window.addEventListener("moduleReadyEvent", function(evt)
    {
        //evt.Data carries the interface object.
        //It is same as window.cpAPIInterface
        interfaceObj = evt.Data;
        eventEmitterObj = interfaceObj.getEventEmitter();
    });
    //check if window.cpAPIInterface is available
    if(interfaceObj)
    {
        //check if window.cpAPIEventEmitter is available
        if(eventEmitterObj)
        {
            //add a listener to CPAPI_SLIDEENTER event
            eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e)
                                                                {
                                                                    //get the current value of mySlideVisitCounter from Captivate content  
                                                                    var lSlideVisitCtr = interfaceObj.getVariableValue("mySlideVisitCounter");   
                                                                    //increment lSlideVisitCtr by 1
                                                                    lSlideVisitCtr = lSlideVisitCtr + 1;
                                                                    //set the value of mySlideVisitCounter in the Captivate content
                                                                    interfaceObj.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
                                                                });
        }
    }
    </script>

Projeto de amostra

Você pode fazer download do projeto do Captivate de amostra anexado, para consulta. 

Download

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online