\n
Combining Sliders for Interactive Infographics #260: Challenge | Recap
\n
Interactive sliders are a great way to get learners to touch the screen and explore relationships between two or more concepts. In this week’s challenge, we’re looking at how sliders can be used to make data more interactive.
\n
Slider Infographic
\n
Here's a slider example that combines two sliders to create a masking effect.
\n
\n
View the project | Download
\n
Oil Infographic
\n
Here’s a good example of how sliders can be used to create interactive infographic. I like this example because it uses a masking effect combined with custom sliders that share a single variable. How does that work? You can read more about Mike’s example and learn how he built it in this article.
\n
\n
Click to view the example
\n
Challenge of the Week
\n
This week, your challenge is to show creative ideas for using sliders to build interactive infographics. Sliders are relatively simple to use in Storyline 360, but your examples could require some advanced techniques.
\n
If you get stuck or have any questions this week, please post your questions in the Storyline forums and we'll help you out.
\n
New Entries Only!
\n
We’ve hosted several slider challenges and the examples are always amazing. To keep things fresh, we’re asking that you share only new examples this week. You’re more than welcome to re-work a previous example.
\n
Related Challenges
\n
\n
Last Week’s Challenge:
\n
Before you slide into this week’s challenge, take a few minutes to browse the holiday-themed examples and course starters your fellow challengers shared over the past week:
\n
\n
Holiday E-Learning Examples #259: Challenge | Recap
\n
Wishing you a sliderrific week, E-Learning Heroes!
\n
New to the E-Learning Challenges?
\n
The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
","kudosSumWeight":0,"postTime":"2019-11-30T10:52:37.000-08:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTE4NjkwaTkzMDAzN0U2OTg2NEE1OUI?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDI","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTYwODQyaUZDRjA1QkM0NDFEMEEyN0I?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDM","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTE2Mzk3aTY4ODEwNzY4MjdENTQ4REM?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDQ","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTIyM2kzQUVFMUNENUFGNDcxMkJD?revision=1\"}"}}],"totalCount":4,"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":"MjUuMnwyLjF8b3wxMHxfTlZffDE","node":{"__typename":"Tag","id":"tag:E-Learning Challenge","text":"E-Learning Challenge","time":"2015-11-11T20:02:32.000-08: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:1144136_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":125},"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:1144136":{"__typename":"Conversation","id":"conversation:1144136","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1144136"},"lastPostingActivityTime":"2024-03-22T12:47:46.000-07:00","lastPostTime":"2024-03-22T12:47:46.000-07:00","unreadReplyCount":136,"isSubscribed":false},"ModerationData:moderation_data:1144136":{"__typename":"ModerationData","id":"moderation_data:1144136","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTE4NjkwaTkzMDAzN0U2OTg2NEE1OUI?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTE4NjkwaTkzMDAzN0U2OTg2NEE1OUI?revision=1","title":"uploads_rte_bguvmcrp_Using-sliders-for-interactive-infographics_CHALLENGE.png","associationType":"BODY","width":1512,"height":760,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTYwODQyaUZDRjA1QkM0NDFEMEEyN0I?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTYwODQyaUZDRjA1QkM0NDFEMEEyN0I?revision=1","title":"uploads_rte_gslucehv_Slider-infographics-by-montse.gif","associationType":"BODY","width":794,"height":446,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTE2Mzk3aTY4ODEwNzY4MjdENTQ4REM?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTE2Mzk3aTY4ODEwNzY4MjdENTQ4REM?revision=1","title":"uploads_rte_jcbnwxvf_oil infographic2.gif","associationType":"BODY","width":714,"height":398,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTIyM2kzQUVFMUNENUFGNDcxMkJD?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTQ0MTM2LTIyM2kzQUVFMUNENUFGNDcxMkJD?revision=1","title":"uploads_rte_xcoepanf_Holiday-Theme-Interactions_RECAP.jpg","associationType":"BODY","width":1512,"height":760,"altText":null},"Revision:revision:1144136_1":{"__typename":"Revision","id":"revision:1144136_1","lastEditTime":"2019-11-30T10:52:37.000-08:00"},"BlogReplyMessage:message:1144159":{"__typename":"BlogReplyMessage","id":"message:1144159","conversation":{"__ref":"Conversation:conversation:1144136"},"author":{"__ref":"User:user:441585"},"revisionNum":1,"uid":1144159,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"subject":"Re: Using Sliders to Design Interactive Infographics #260","readOnly":false,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1144159"},"parent":{"__ref":"BlogReplyMessage:message:1144144"},"body":"Baby's Stages of Development
Demo:
https://bit.ly/33H360GDownload:
https://bit.ly/35Wun0NNothing like watching a new baby discover a cat in the house. It put the new trigger panel to the test in this demo. Lots of state changes. Have a good week!
","body@stringLength":"495","rawBody":"Baby's Stages of Development
Demo:
https://bit.ly/33H360GDownload:
https://bit.ly/35Wun0NNothing like watching a new baby discover a cat in the house. It put the new trigger panel to the test in this demo. Lots of state changes. Have a good week!
","author":{"__ref":"User:user:365586"},"postTime":"2019-12-01T15:48:09.000-08:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":7},"Revision:revision:1144159_1":{"__typename":"Revision","id":"revision:1144159_1","lastEditTime":"2019-12-02T13:26:33.000-08:00"},"QueryVariables:ReplyList:message:1144159:1":{"__typename":"QueryVariables","id":"ReplyList:message:1144159:1","value":{"id":"message:1144159","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-shared/client/components/users/UserAvatar-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1744215894971","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1744215894971","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1744215894971","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1744215894971","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1744215894971","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1744215894971","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},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1744215894971":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1744215894971","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"e-learning-challenges","messageSubject":"using-sliders-to-design-interactive-infographics-260","messageId":"1144136","replyId":"1144159"},"buildId":"Btkyb7T6TeYM9D2gUmiOv","runtimeConfig":{"buildInformationVisible":false,"logLevelApp":"info","logLevelMetrics":"info","openTelemetryClientEnabled":false,"openTelemetryConfigName":"articulate","openTelemetryServiceVersion":"25.2.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"],"appGip":true,"scriptLoader":[]}