\n
Have you heard e-learning developers talking about JavaScript? Are you wondering what all the fuss is about? Good news! This is the intro you need to understand what JavaScript is, why it’s relevant to e-learning, and how you can get started using it to create dynamic e-learning with Articulate Storyline.
\n
\nWhat’s JavaScript and Why Is It Useful for E-Learning?
\n
JavaScript is a computer programming language developers use to make websites interactive. How does that help your e-learning courses? Well, let’s imagine for a second that Mr. JavaScript is applying for a position at Storyline Corp. The hiring manager and Mr. Player are eager to learn if Mr. JavaScript is the right choice:
\n
\n
If Storyline Corp. hires Mr. JavaScript, they’ll be able to use his expertise to help Mr. Player do even more. Let’s take a closer look.
\n
Why Would You Use JavaScript?
\n
Storyline lets you create dynamic interactions with the combination of triggers, actions, conditions and variables. That’s all available for you, out of the box, without JavaScript. Why would you use JavaScript then?
\n
JavaScript lets you do things to extend the power of the built-in tools in Storyline. For example, augmenting Storyline with JavaScript lets you create math functions such as generating random numbers, rounding numbers up or down, working with dates and time, and more. String functions are also powerful in JavaScript. String functions are things like splitting text to count the number of words, searching and replacing text, or checking text for keywords.
\n
Storyline's three variable types (number, text, and true/false) require different triggers to execute the actions. This means that when you're building very complex, highly interactive courses you may end up with dozens of triggers in the triggers panel.
\n
Using JavaScript allows you to group a bunch of variables together. This can speed up the course development process and streamline the number of triggers in the triggers panel. In other words, you can accomplish more with fewer lines of code.
\n
\nWhere to Start with JavaScript
\n
Think of JavaScript as an ally that you can use to strengthen your Storyline power. I would suggest learning the basics of JavaScript before you integrate it into Storyline. It makes debugging easier. Here are some great ways to really get started with JavaScript:
\n
\n
Keep coming back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments, please share them below.
","kudosSumWeight":0,"postTime":"2016-09-13T07:10:45.000-07:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuM3wyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIxMjc0LTMxODQ1aUJENjdBNUE0RTQ5NzUwODE?revision=1\"}"}}],"totalCount":1,"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"attachments":{"__typename":"AttachmentConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[]},"tags":{"__typename":"TagConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[{"__typename":"TagEdge","cursor":"MjUuM3wyLjF8b3wxMHxfTlZffDE","node":{"__typename":"Tag","id":"tag:Article","text":"Article","time":"2021-02-24T11:46:05.000-08:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}},{"__typename":"TagEdge","cursor":"MjUuM3wyLjF8b3wxMHxfTlZffDI","node":{"__typename":"Tag","id":"tag:Personalization","text":"Personalization","time":"2022-07-15T11:53:55.000-07:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}}]},"timeToRead":2,"rawTeaser":"","introduction":"","coverImage":null,"coverImageProperties":{"__typename":"CoverImageProperties","style":"STANDARD","titlePosition":"BOTTOM","altText":""},"currentRevision":{"__ref":"Revision:revision:1121274_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":346},"visibilityScope":"PUBLIC","canonicalUrl":null,"seoTitle":null,"seoDescription":null,"placeholder":false,"originalMessageForPlaceholder":null,"contributors":{"__typename":"UserConnection","edges":[]},"nonCoAuthorContributors":{"__typename":"UserConnection","edges":[]},"coAuthors":{"__typename":"UserConnection","edges":[]},"blogMessagePolicies":{"__typename":"BlogMessagePolicies","canDoAuthoringActionsOnBlog":{"__typename":"PolicyResult","failureReason":{"__typename":"FailureReason","message":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","key":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","args":[]}}},"archivalData":null,"customFields":[],"revisions({\"constraints\":{\"isPublished\":{\"eq\":true}},\"first\":1})":{"__typename":"RevisionConnection","totalCount":1}},"Conversation:conversation:1121274":{"__typename":"Conversation","id":"conversation:1121274","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1121274"},"lastPostingActivityTime":"2017-12-08T00:40:52.000-08:00","lastPostTime":"2017-12-08T00:40:52.000-08:00","unreadReplyCount":14,"isSubscribed":false},"ModerationData:moderation_data:1121274":{"__typename":"ModerationData","id":"moderation_data:1121274","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIxMjc0LTMxODQ1aUJENjdBNUE0RTQ5NzUwODE?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTIxMjc0LTMxODQ1aUJENjdBNUE0RTQ5NzUwODE?revision=1","title":"uploads_rte_pwqdvnkr_Guest-article--Zsolt-Olah-on-JavaScript.png","associationType":"BODY","width":760,"height":380,"altText":null},"Revision:revision:1121274_1":{"__typename":"Revision","id":"revision:1121274_1","lastEditTime":"2016-09-13T07:10:45.000-07:00"},"BlogReplyMessage:message:1121280":{"__typename":"BlogReplyMessage","id":"message:1121280","conversation":{"__ref":"Conversation:conversation:1121274"},"author":{"__ref":"User:user:899827"},"revisionNum":1,"uid":1121280,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:articles"},"subject":"Re: Introduction to JavaScript for E-Learning","readOnly":false,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1121280"},"parent":{"__ref":"BlogReplyMessage:message:1121279"},"body":"Thanks for this post, Zsolt! I just signed up with \"codecademy.com\" and am digging into the \"Fundamentals of JavaScript\"... I've been wanting to learn JS for ages, so thanks for getting me started! :)
","body@stringLength":"247","rawBody":"Thanks for this post, Zsolt! I just signed up with \"codecademy.com\" and am digging into the \"Fundamentals of JavaScript\"... I've been wanting to learn JS for ages, so thanks for getting me started! :)
","author":{"__ref":"User:user:1315543"},"postTime":"2016-09-20T03:05:37.000-07:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":3},"Revision:revision:1121280_1":{"__typename":"Revision","id":"revision:1121280_1","lastEditTime":"2016-09-20T10:43:05.000-07:00"},"QueryVariables:ReplyList:message:1121280:1":{"__typename":"QueryVariables","id":"ReplyList:message:1121280:1","value":{"id":"message:1121280","first":10,"sorts":{"postTime":{"direction":"ASC"}},"repliesFirst":3,"repliesFirstDepthThree":1,"repliesSorts":{"postTime":{"direction":"ASC"}},"useAvatar":true,"useAuthorLogin":true,"useAuthorRank":true,"useBody":true,"useKudosCount":true,"useTimeToRead":false,"useMedia":false,"useReadOnlyIcon":false,"useRepliesCount":true,"useSearchSnippet":false,"useAcceptedSolutionButton":false,"useSolvedBadge":false,"useAttachments":false,"attachmentsFirst":5,"useTags":false,"useNodeAncestors":false,"useUserHoverCard":false,"useNodeHoverCard":false,"useModerationStatus":true,"usePreviewSubjectModal":false,"useMessageStatus":true}},"ROOT_MUTATION":{"__typename":"Mutation"},"CachedAsset:text:en_US-components/community/NavbarDropdownToggle-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/community/NavbarDropdownToggle-1744833251000","value":{"ariaLabelClosed":"Press the down arrow to open the menu"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/users/UserAvatar-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1744833251000","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1744833251000","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1744833251000","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1744833251000","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1744833251000","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1744833251000","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1744833251000","value":{"title":"{count, plural, one{# Reply} other{# Replies}}","title@board:BLOG":"{count, plural, one{# Comment} other{# Comments}}","title@board:TKB":"{count, plural, one{# Comment} other{# Comments}}","title@board:IDEA":"{count, plural, one{# Comment} other{# Comments}}","title@board:OCCASION":"{count, plural, one{# Comment} other{# Comments}}","noRepliesTitle":"No Replies","noRepliesTitle@board:BLOG":"No Comments","noRepliesTitle@board:TKB":"No Comments","noRepliesTitle@board:IDEA":"No Comments","noRepliesTitle@board:OCCASION":"No Comments","noRepliesDescription":"Be the first to reply","noRepliesDescription@board:BLOG":"Be the first to comment","noRepliesDescription@board:TKB":"Be the first to comment","noRepliesDescription@board:IDEA":"Be the first to comment","noRepliesDescription@board:OCCASION":"Be the first to comment","messageReadOnlyAlert:BLOG":"Comments have been turned off for this post","messageReadOnlyAlert:TKB":"Comments have been turned off for this article","messageReadOnlyAlert:IDEA":"Comments have been turned off for this idea","messageReadOnlyAlert:FORUM":"Replies have been turned off for this discussion","messageReadOnlyAlert:OCCASION":"Comments have been turned off for this event"},"localOverride":false},"ModerationData:moderation_data:1121281":{"__typename":"ModerationData","id":"moderation_data:1121281","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"BlogReplyMessage:message:1121281":{"__typename":"BlogReplyMessage","author":{"__ref":"User:user:1315543"},"id":"message:1121281","revisionNum":1,"uid":1121281,"depth":3,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:articles"},"parent":{"__ref":"BlogReplyMessage:message:1121280"},"conversation":{"__ref":"Conversation:conversation:1121274"},"subject":"Re: Introduction to JavaScript for E-Learning","moderationData":{"__ref":"ModerationData:moderation_data:1121281"},"body":"Well, it’s ten days later and I’ve created variables, discovered if/else and switch statements (my favourite, so far), generated random numbers (very cool), written functions and I even know the difference between global and functional scope. Now I can’t wait to use it all in my next Storyline project! Thanks again, Zsolt for the info – Codecademy’s free „Introduction to Javascript“ course is great! :)
","body@stripHtml({\"removeProcessingText\":false,\"removeSpoilerMarkup\":false,\"removeTocMarkup\":false,\"truncateLength\":200})@stringLength":"203","kudosSumWeight":3,"repliesCount":0,"postTime":"2016-09-30T10:10:08.000-07:00","lastPublishTime":"2016-09-30T10:10:08.000-07:00","metrics":{"__typename":"MessageMetrics","views":23},"visibilityScope":"PUBLIC","placeholder":false,"originalMessageForPlaceholder":null,"entityType":"BLOG_REPLY","eventPath":"category:learn/community:rwgqn69235board:articles/message:1121274/message:1121286","replies":{"__typename":"MessageConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[]},"customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}}},"CachedAsset:text:en_US-shared/client/components/nodes/NodeIcon-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeIcon-1744833251000","value":{"contentType":"Content Type {style, select, FORUM {Forum} BLOG {Blog} TKB {Knowledge Base} IDEA {Ideas} OCCASION {Events} other {}} icon"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"articles","messageSubject":"introduction-to-javascript-for-e-learning","messageId":"1121274","replyId":"1121280"},"buildId":"ISAhs0UxT148eG089lpQq","runtimeConfig":{"buildInformationVisible":false,"logLevelApp":"info","logLevelMetrics":"info","openTelemetryClientEnabled":false,"openTelemetryConfigName":"articulate","openTelemetryServiceVersion":"25.3.0","openTelemetryUniverse":"prod","openTelemetryCollector":"http://localhost:4318","openTelemetryRouteChangeAllowedTime":"5000","apolloDevToolsEnabled":false,"inboxMuteWipFeatureEnabled":false},"isFallback":false,"isExperimentalCompile":false,"dynamicIds":["./components/customComponent/CustomComponent/CustomComponent.tsx","./components/community/Navbar/NavbarWidget.tsx","./components/community/Breadcrumb/BreadcrumbWidget.tsx","./components/blogs/BlogArticleWidget/BlogArticleWidget.tsx","./components/messages/MessageView/MessageViewStandard/MessageViewStandard.tsx","./components/customComponent/CustomComponentContent/TemplateContent.tsx","../shared/client/components/common/List/UnwrappedList/UnwrappedList.tsx","./components/tags/TagView/TagView.tsx","./components/tags/TagView/TagViewChip/TagViewChip.tsx","../shared/client/components/common/List/UnstyledList/UnstyledList.tsx","./components/messages/MessageView/MessageView.tsx"],"appGip":true,"scriptLoader":[]}