Extending Adobe Captivate With Javascript

2y ago
31 Views
4 Downloads
1.32 MB
38 Pages
Last View : 2m ago
Last Download : 2m ago
Upload by : Alexia Money
Transcription

EXTENDING ADOBE CAPTIVATEWITH JAVASCRIPTADVANCED TECHNIQUES FROM A WEB DEVELOPER’S DEMOSSTEVEN WARWICK, RIGHT (C)2017 ELEARNING OCEAN LLC1

AUDIENCE Learning interaction designers Project managers / Course strategy developers Web Developers eLearning methodology strategists Content AuthorsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC2

CONTEXT Captivate HTML projects “Responsive” design Windows 10 development environment JavaScript ECMA 2015 Chrome browser Notepad text editorCOPYRIGHT (C)2017 ELEARNING OCEAN LLC3

PLAN Captivate as a web development platform Efficient development of JavaScript/Captivate scripts Example Scripts Fully custom quiz interactions Full-screen mode D&D Adobe documented vs. undocumented functions Bridging between JavaScript and Captivate Overview of other possibilities with JavaScript QuestionsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC4

CAPTIVATE FROM THE WEB DEVELOPERS PERSPECTIVE WYSIWYG website builders: “Closed” builders generate sites that cannot easily be modified after being generated Easy to get started building, limited access to potential of modern designWeebly, Wix, Squarespace “Open” builders support direct modification of generated sites & continued editing Deeper understanding of web technologies neededPinegrow, Bootstrap Studio, Bootply Captivate – 90% closed / 10% open Custom features valuable for eLearning Reasonable strategy given initial target audienceCOPYRIGHT (C)2017 ELEARNING OCEAN LLC5

ANATOMY OF A WEBSITE (CAPTIVATE FILE LAYOUT) A module produced by Captivate is structured in a very common website design styleA zipped module is simply a single-file version of this exact directory structureWhen a captivate module is loaded into an LMS, the zip file is simply uncompressed by the LMSWebsites typically need to be “served” by a server program (apache/nginx) in case externalcontent needs to be loaded When all content is inside the module directory, a browser can be used to view the website (file://)COPYRIGHT (C)2017 ELEARNING OCEAN LLC6

ANATOMY OF A CAPTIVATE WEBSITECSSHTMLJavascript Same structures are seen in Captivate as in all websites “CPM.js” file contains All content data – shapes, text, timing, placement, quiz Captivate JavaScript Library that “runs” the website Since the file is compressed, it is hard to decipherCOPYRIGHT (C)2017 ELEARNING OCEAN LLC7

WHY JAVASCRIPT? Most popular programming language – StackOverflow / Github Used for both user interaction in browser and business logic on server Access all the power of the browser Completely free development environment All Browsers have powerful, built-in debugging tools Very fast design/test cycle - no “publishing/compiling” process Most profound change in learning process – learning on demand Stackoverflow http://stackoverflow.com/insights/survey/2016 2.7Million questions, 3.2Million answers in 2015 Thousands of tutorialsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC8

WHY USE JAVASCRIPT WITH CAPTIVATEUpside All “Automation” functions in one place – Model/View/Controller Architecture JavaScript can control any aspect of UI Change shape properties, display notifications, react to any user eventCreate custom quiz interactions, unique animations etc. JavaScript functions can be debugged while the presentation is running, unlike advanced actions Many online tutorials for using JavaScript with Captivate Large subject area, no tutorial is can be comprehensive – point solutions and examplesDownside Steeper learning curve – HTML/CSS/Jquery/Captivate Lots of cool stuff is undocumented by Adobe, discovered and published by developersCOPYRIGHT (C)2017 ELEARNING OCEAN LLC9

HOW TO WORK EFFICIENTLY WITH JAVASCRIPT Internally supported approach: Use built-in JavaScript script window No syntax checking Must re-publish module to update Hard to maintain, code is sprinkled throughout the modulesCOPYRIGHT (C)2017 ELEARNING OCEAN LLC10

HOW TO WORK EFFICIENTLY WITH JAVASCRIPTBetter approach: External file holds all JavaScript functions Changes in file will be loaded whenever the module is viewed, no need to republish course – rapid development!Downside: Files “outside” a module are only accessible when using http:// not file:// No Captivate “preview” mode - must “publish” Use local web server Move file inside module - automationCOPYRIGHT (C)2017 ELEARNING OCEAN LLC11

HOW TO WORK EFFICIENTLY WITH JAVASCRIPTOn enter execute JavaScript continue playing projectif( !externLoaded ) { ('body').append(' script src "./multichoice.js" async "false" /script '); (fontLink).appendTo("head");externLoaded true;} JavaScript file is outside of course module, is not deleted when module is republished Add to every slide in cases where LMS can jump past first slideCOPYRIGHT (C)2017 ELEARNING OCEAN LLC12

HOW TO WORK EFFICIENTLY WITH JAVASCRIPTNotepad text editor as exampleFar easier than built-in script window! JavaScript syntax and error highlighting Variable name validation Multiple windows, spell check etc.COPYRIGHT (C)2017 ELEARNING OCEAN LLC13

DEBUGGING JAVASCRIPT WITH CHROMEF12 opens Chrome debugger!Pauses execution of function,enables complete debuggingenvironment in ChromeStep-by-step debugging – unlike advanced actionsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC14

EXAMPLE – CUSTOM QUIZ DEMOSRules:No scoring until “Submit” is pressedTrue/false toggles correctlyScore for each answer may be different 25 points for 4/5 right answers 50 points for 5/5 right answersStrategy:All of the user interactions managed byJavaScriptQuiz will be scored and submitted by JavaScriptCOPYRIGHT (C)2017 ELEARNING OCEAN LLC15

EXAMPLE – CUSTOM QUIZ INTERACTION Slide “on enter execute JavaScript”: Add script file and links to fonts ('body').append(' script src "./multichoice.js" async "false" /script ');var fontLink ' link href "https://fonts.googleapis.com/css?family Calligraffitti" rel "stylesheet" '; (fontLink).appendTo("head"); All buttons are simple circle smartshapeswith “use as button” Add an additional state called “selected” This will be controlled by JavaScriptCOPYRIGHT (C)2017 ELEARNING OCEAN LLC16

EXAMPLE – CUSTOM QUIZ INTERACTION The shapes are labeled using aregular pattern that will be easilydistinguished in the JavaScriptCode The hidden answer buttons are allset to “Include in Quiz” and pointscan be assigned to each answer Add variables to enableconnection between JavaScriptand Captivate That’s it. no advanced actionsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC17

EXAMPLE CUSTOM QUIZ INTERACTION - TOGGLEFind all buttons that start with the word“Question”. When clicked, call“manageToggleButtons functionTake the name of the button that waspressed, changes any “ T ” to “ F ”and any “ F ” to “ T ”Call an undocumented captivate function“cp.changeState” to toggle between the“Normal” view and the “selected” viewOver the years, many people have contributed to weeding through the CPM.js code to find these functionsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC18

EXAMPLE CUSTOM QUIZ INTERACTION - SCORING The first line triggers the quiz submit functionfor the button with the ID “submitButton” Variables defined in captivate can bedirectly used in JavaScript! The correct answers are defined by which ofthe question buttons were set to state“selected” If the correct answer is selected, which hiddenbutton should be activated?COPYRIGHT (C)2017 ELEARNING OCEAN LLC19

EXAMPLE CUSTOM QUIZ INTERACTION - SCORINGWhen writing code, try to keep things flexible. Determine maximum number of questions,maximum score, answered questions and scorevalues on the fly Here’s how to get the value of a quiz button Here’s how to find the state of a slide object If the right button was selected then we callanother undocumented function that signals tocaptivate that an answer was given correctly.COPYRIGHT (C)2017 ELEARNING OCEAN LLC20

EXAMPLE CUSTOM QUIZ INTERACTION - SCORINGFind quiz value for the bonus points bylooking at the Captivate dataAward points based on some criteria here it is at least 4 answers rightHere it is 5 answers right After done, signal to move to next slideby simply setting the “next slide” flagvariableCOPYRIGHT (C)2017 ELEARNING OCEAN LLC21

EXAMPLE – CUSTOM QUIZ INTERACTIONWhy is this example important? Other than labeling the buttons, setting question values and loading the external JavaScriptmodule, no advanced actions or special processing is needed The scoring is completely general. Any set of button presses can be used to generate aspecific quiz result Scoring doesn’t happen for any of the quizzing until the interaction is complete Custom interactions need not be limited to one “slide” Although not shown, at any point in the process, additional information can be given to theuser Other measures can be made along the way: How many times has the user changed their score? How long did it take before the user completed the quiz?COPYRIGHT (C)2017 ELEARNING OCEAN LLC22

EXAMPLE – “FULL SCREEN” MODE Any button that has a name starting in “fullscreen” will activate this code Also works for presentations embedded in other applications (IFRAME)COPYRIGHT (C)2017 ELEARNING OCEAN LLC23

EXAMPLE – DRAG AND PYRIGHT (C)2017 ELEARNING OCEAN LLC24

EXAMPLE – DRAG AND PYRIGHT (C)2017 ELEARNING OCEAN LLC25

EXAMPLE – DRAG AND �team”Drop Target“candidates”Source PoolAll scoring functions in JavaScriptEach time a “candidate” is dropped, “game1drop()” is called“team”Object Actions“team” correctAnswer poolCOPYRIGHT (C)2017 ELEARNING OCEAN LLC26

EXAMPLE – DRAG AND t JavaScript figure out what sourceitem was movedCreate scoring based on some criteria- count of dragged components- value score for team memberGive feedback by changing colors ofshapes directly using CSS on shapesCOPYRIGHT (C)2017 ELEARNING OCEAN LLC27

UNDOCUMENTED CAPTIVATE FUNCTIONS ANDDATA STRUCTURES.The CPM.js library 25,000 JavaScript statements in the basic library to “run” a presentation 100,000 statements to define all objects in a large presentationCPM.js defines 100 “top level objects/properties”CP top object - defines 751 objects/propertiesCP.D - all of the slide objects and quizzing informationCP.DD - drag/drop interaction dataCP.em - event mangerCP.movie – timing managerLots of other things, too much to even begin to describe.AnimationDisplay timingQuiz handlingDrag/Drop interactionsLMS Reporting system.CPM.js code is well organized with very descriptive top level function namesCOPYRIGHT (C)2017 ELEARNING OCEAN LLC28

UNDOCUMENTED CAPTIVATE FUNCTIONS ANDDATA STRUCTURES USED IN THESE TWO EXAMPLEScp.changeState(targetID, ;cp.show(targetID) , cp.hide(targetID)cp.D[targetID].qnq(find question data for targetID)cp.D[questionID].w(question score value – can read and write!)cp.SubmitInteractions(targetID, cp.QuestionStatusEnum.CORRECT, 0)(click answer raction() (get activeDDInteraction)activeDDInteraction.m DsFrameSetDataID; (id of last dropped target)ActiveDDInteraction.OnResetButtonClicked(); (click DD reset button)activeDDInteraction.undoAvailable (check if undo is nt"), 1)COPYRIGHT (C)2017 ELEARNING OCEAN LLC(create a new message box)29

DOCUMENTED CAPTIVATE/JAVASCRIPT FUNCTIONS terface.getEventEmitterCOPYRIGHT (C)2017 ELEARNING OCEAN LLCReturns the value of the given variable name.Sets value of the given variable namePlays the movie.Pauses the movie.Stops the movie.Rewinds and plays the movie.Seeks the movie to the next slide.Seeks the movie to the previous slide.Increases the movie speed to 2x, then 4x and then back to normal on consecutive calls.Returns movie playback speed in Frames per second (fps).Returns the total number of frames in the movie.Returns the total duration of the movie in seconds.Returns the volume of the movie in percentage.Sets the volume of the movie.Seeks to a particular time (milliseconds) in the movie.Returns a boolean value showing whether you can seek to a particular time in the movie or not.Returns the current frame of the movie.Returns the current slide index of the movie.Returns the handle to the cpAPIEventEmitter object.30

DOCUMENTED CAPTIVATE/JAVASCRIPT EVENTS interface.htmlcpAPIEventEmitter.addEventListener (event, function )cpAPIEventEmitter.removeEventListener( event )CPAPI SLIDEENTERCPAPI SLIDEEXITCPAPI STARTPLAYBARSCRUBBINGCPAPI ENDPLAYBARSCRUBBINGCPAPI INTERACTIVEITEMSUBMITCPAPI MOVIEPAUSECPAPI MOVIERESUMECPAPI MOVIESTARTCPAPI MOVIESTOPCPAPI QUESTIONSKIPCOPYRIGHT (C)2017 ELEARNING OCEAN LLC31

FAR TOO MUCH TO “FIGURE OUT” IN CPM.JSWhat is an efficient custom interaction development strategy? Build basic shapes and simple interactions that do not require advanced actions directlyin Captivate Use Adobe Documented JavaScript library as starting place Developers familiar with HTML/CSS/JAVASCRIPT: Build custom interactions decoupled from the Captivate data structures as much aspossible Bridge back into Captivate using the CPM.js library functions Leverage undocumented features only as neededCOPYRIGHT (C)2017 ELEARNING OCEAN LLC32

JAVASCRIPT TO CAPTIVATE BRIDGE All shape information is found in the object CP.D cp.D.shapenamecp.D.shapenameccp.D.shapenameq0Shape name is used as a base to build HTML div id theSquare canvas id theSquarec div id theSquare vTxtHolder div id re-theSquarec div id theSquare vTxtHandlerHolder div id theSquareaccStr Use these objects to create custom effectsCOPYRIGHT (C)2017 ELEARNING OCEAN LLC33

JAVASCRIPT TO CAPTIVATE BRIDGE All variables in captivate are now global JavaScript variablesExample: cpInfoCurrentSlide e") Event-driven JavaScript functions ( mouse clicks. ) Indirect: use actions and scripts in captivate (captivate dependency) Direct: use JavaScript events tied directly to HTML objects (JavaScript only) Captivate monitors all variable values once every frame interval( 1/30 sec ) Simply setting timing-control variables to “true” will cause changes in state Example: cpCmndNextSlide 1 Quiz management has another data structure,COPYRIGHT (C)2017 ELEARNING OCEAN LLCtoo much to describe here34

CPM.JS INTERNALSNotepad JavaScript formatterConvert compressed CPM.js to readable codeSave formatted version back into projectEnables modification & debuggingCOPYRIGHT (C)2017 ELEARNING OCEAN LLC35

105 “TOP LEVEL” VARIABLES GENERATED BY AndResumecpCmndGotoSlideCOPYRIGHT (C)2017 ELEARNING OCEAN temptsOnCurrentQuestion foCourseNamecpQuizInfoNegativePointsOnCurrent QuizInfoStudentNamecpQuizHandledAll36

WHAT ELSE DOES JAVASCRIPT OPEN UP? References to external content – fonts, libraries Real-time, group interactions with backend data sources (AJAX) Video game-level animations Dynamic Graphing and Charting Fine-grained experience measurement Pass information between parent/child windows Custom reporting to LMS/LRS Access to the entire web development community!COPYRIGHT (C)2017 ELEARNING OCEAN LLC37

QUESTIONS?Steven Warwick, eLearningOcean LLCsdwarwick@elearningocean.comCOPYRIGHT (C)2017 ELEARNING OCEAN LLC38

cpAPIInterface.play Plays the movie. cpAPIInterface.pause Pauses the movie. cpAPIInterface.stop Stops the movie. cpAPIInterface.rewind Rewinds and plays the movie. cpAPIInterface.next Seeks the movie to the next slide. cpAPI

Related Documents:

Adobe, the Adobe logo, Acrobat, Adobe Audition, Adobe Bridge, Adobe Device Central, Adobe OnLocation, Adobe Premiere, Adobe Premiere Pro, Adobe Technical Communication Suite, After Effects, Contribute, Captivate, Creative . Downloading updates from in-house update server on client machines running AAMEE 2.0 or later

From Project Template Create a Captivate project from a template h. Blank Project Start a blank project . For more information on editing your PowerPoint Project in Captivate, refer to The Captivate Editing Environment section of this documentation. . Timeline View project timeline, allowing you to edit presentation timing . Page 14 of 38

An Adobe Captivate library is a repository of resources, such as, audio files, images, and animations. Every Adobe Captivate project contains its own library. Resources or ‘items’ are automatically added to the library when you use them in the project. However, you can also import them into the library

Adobe Version Cue CS4 Adobe CreAtive Suite 4 deSign StAndArd Combines: Adobe InDesign CS4 Adobe Photoshop CS4 Adobe Illustrator CS4 Adobe Acrobat 9 Pro Plus Adobe Bridge CS4 Adobe Device Central CS4 Adobe Version Cue CS4 deSign

2.2 TS16 I Camera Calibration 6 2.3 Calibration and Producer Certificates 6 3 Leica Captivate Apps & Software Options 6 3.1 Leica Captivate Software for TS 6 3.2 Apps included in Leica Captivate for TS (827 646) 6 3.3 Optional Apps for Leica Captivate for TS 7 3.4 Optional Licences for

Leica Geosystems AG Heinrich-Wild-Strasse CH-9435 Heerbrugg Switzerland Leica Captivate Release Notes v3.00 www.leica-geosystems.com Leica Captivate v3.00 Software Release Notes Product Leica Captivate Field Controllers: CS20, CS35 Total Stations: TS16, TS60, MS60 Release

Adobe Captivate is designed to help you create instructional videos, also called screen casts. . Press Pause again to resume recording. 9. To end the recording, press the End key on your keyboard. 10. After pressing End, Captivate will proc

JavaScript Manual for LCCS Teachers 13 Client-side JavaScript vs. server-side JavaScript For many years JavaScript was a client-side scripting language. This was because JavaScript programs could only be run from inside web browsers which were installed on client machines. Because of the fact that JavaScript code can run on client devices it means