\n
Using Drag-and-Drop for Process Training #213: Challenge | Recap
\n
Challenge of the Week
\n
This week your challenge is to share a drag-and-drop interaction for process training.
\n
If you’re new or just getting started building courses, feel free to create a simpler interaction that focuses more on the technical basics of Storyline or whatever tool you’re using.
\n
For those of you with a little more experience, try sharing a more polished or real-world example to demonstrate how drag-and-drop fractions can be used to teach step-by-step processes.
\n
Step-By-Step Interactions
\n
Here's an idea for creating a sequence drag-and-drop interaction that provides custom or specific feedback for each drop choice the learner makes.
\n
\n
Last Week’s Challenge:
\n
Before you get started with this week’s challenge, take a few minutes to check out the higher education course templates your fellow course designers shared over the past week:
\n
\n
Academic Course Starter Templates #212: Challenge | Recap
\n
Wishing you a great 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":"2018-12-02T16:38:09.000-08:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuM3wyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTM0NzE5LTMxODM5aTZGNjc2Mzc0MjFBMzQxMEM?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuM3wyLjF8b3wyNXxfTlZffDI","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTM0NzE5LTEyODA0aUU4MkQyMDhGOEU3NzcyQ0M?revision=1\"}"}}],"totalCount":2,"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:E-Learning Challenge","text":"E-Learning Challenge","time":"2015-11-11T20:02:32.000-08:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}}]},"timeToRead":1,"rawTeaser":"","introduction":"","coverImage":null,"coverImageProperties":{"__typename":"CoverImageProperties","style":"STANDARD","titlePosition":"BOTTOM","altText":""},"currentRevision":{"__ref":"Revision:revision:1134719_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":473},"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:1134719":{"__typename":"Conversation","id":"conversation:1134719","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1134719"},"lastPostingActivityTime":"2021-03-27T18:15:00.000-07:00","lastPostTime":"2021-03-27T18:15:00.000-07:00","unreadReplyCount":75,"isSubscribed":false},"ModerationData:moderation_data:1134719":{"__typename":"ModerationData","id":"moderation_data:1134719","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTM0NzE5LTMxODM5aTZGNjc2Mzc0MjFBMzQxMEM?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTM0NzE5LTMxODM5aTZGNjc2Mzc0MjFBMzQxMEM?revision=1","title":"uploads_rte_vcnzjgdt_Drag-Drop-Sequence-interactions_CHALLENGE.png","associationType":"BODY","width":1512,"height":760,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTM0NzE5LTEyODA0aUU4MkQyMDhGOEU3NzcyQ0M?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMTM0NzE5LTEyODA0aUU4MkQyMDhGOEU3NzcyQ0M?revision=1","title":"uploads_rte_lpzxnrth_Course-Starters-for-Universities-and-Higher-Education_RECAP.jpg","associationType":"BODY","width":1512,"height":760,"altText":null},"Revision:revision:1134719_1":{"__typename":"Revision","id":"revision:1134719_1","lastEditTime":"2018-12-02T16:38:09.000-08:00"},"BlogReplyMessage:message:1134748":{"__typename":"BlogReplyMessage","id":"message:1134748","conversation":{"__ref":"Conversation:conversation:1134719"},"author":{"__ref":"User:user:1300101"},"revisionNum":1,"uid":1134748,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"subject":"Re: Using Drag-and-Drop for Sequence and Step-by-Step Interactions #213","readOnly":false,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1134748"},"parent":{"__ref":"BlogReplyMessage:message:1134721"},"body":"It's been a while for me not attending weekly challenges. Glad to get some spare time to participate again. Here is my entry, Hope you enjoy it.
https://360.articulate.com/review/content/dc5b6e79-2ef2-43e6-bcc8-e40fe9a9b9a6/review ","body@stringLength":"439","rawBody":"It's been a while for me not attending weekly challenges. Glad to get some spare time to participate again. Here is my entry, Hope you enjoy it.
https://360.articulate.com/review/content/dc5b6e79-2ef2-43e6-bcc8-e40fe9a9b9a6/review ","author":{"__ref":"User:user:404768"},"postTime":"2018-12-03T21:48:15.000-08:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":7},"Revision:revision:1134748_1":{"__typename":"Revision","id":"revision:1134748_1","lastEditTime":"2018-12-06T07:20:59.000-08:00"},"QueryVariables:ReplyList:message:1134748:1":{"__typename":"QueryVariables","id":"ReplyList:message:1134748:1","value":{"id":"message:1134748","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:1134757":{"__typename":"ModerationData","id":"moderation_data:1134757","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"User:user:1314156":{"__typename":"User","id":"user:1314156","uid":1314156,"login":"LuPost","biography":null,"registrationData":{"__typename":"RegistrationData","status":null,"registrationTime":"2012-05-15T21:40:11.000-07:00"},"deleted":false,"email":"","avatar":{"__typename":"UserAvatar","url":"https://api.articulate.com/id/v1/avatars/auth0|647e8870-b37c-0131-2ee8-22000b2f96a1"},"rank":{"__ref":"Rank:rank:6"},"entityType":"USER","eventPath":"community:rwgqn69235/user:1314156"},"BlogReplyMessage:message:1134757":{"__typename":"BlogReplyMessage","uid":1134757,"id":"message:1134757","revisionNum":1,"author":{"__ref":"User:user:404768"},"readOnly":false,"repliesCount":2,"depth":3,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"parent":{"__ref":"BlogReplyMessage:message:1134748"},"conversation":{"__ref":"Conversation:conversation:1134719"},"subject":"Re: Using Drag-and-Drop for Sequence and Step-by-Step Interactions #213","moderationData":{"__ref":"ModerationData:moderation_data:1134757"},"body":"Thanks Leann, let me know if any part you like me to explain how I did.
","body@stripHtml({\"removeProcessingText\":false,\"removeSpoilerMarkup\":false,\"removeTocMarkup\":false,\"truncateLength\":200})@stringLength":"74","kudosSumWeight":0,"postTime":"2018-12-07T01:12:07.000-08:00","lastPublishTime":"2018-12-07T01:12:07.000-08:00","metrics":{"__typename":"MessageMetrics","views":34},"visibilityScope":"PUBLIC","placeholder":false,"originalMessageForPlaceholder":null,"entityType":"BLOG_REPLY","eventPath":"category:e-learning-challenges-and-recaps/category:learn/community:rwgqn69235board:e-learning-challenges/message:1134719/message:1134757","replies":{"__typename":"MessageConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[{"__typename":"MessageEdge","cursor":"MjUuM3wyLjF8aXwzfDM5OjF8aW50LDExMzQ3NTksMTEzNDc1OQ","node":{"__ref":"BlogReplyMessage:message:1134759"}}]},"customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}}},"ModerationData:moderation_data:1134759":{"__typename":"ModerationData","id":"moderation_data:1134759","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"BlogReplyMessage:message:1134759":{"__typename":"BlogReplyMessage","uid":1134759,"id":"message:1134759","revisionNum":1,"author":{"__ref":"User:user:1314156"},"readOnly":false,"repliesCount":1,"depth":4,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"parent":{"__ref":"BlogReplyMessage:message:1134757"},"conversation":{"__ref":"Conversation:conversation:1134719"},"subject":"Re: Using Drag-and-Drop for Sequence and Step-by-Step Interactions #213","moderationData":{"__ref":"ModerationData:moderation_data:1134759"},"body":"Can you tell us how you did the animations? Were they done in Storyline? Very nice and attractive course/design
","body@stripHtml({\"removeProcessingText\":false,\"removeSpoilerMarkup\":false,\"removeTocMarkup\":false,\"truncateLength\":200})@stringLength":"113","kudosSumWeight":0,"postTime":"2018-12-07T12:59:31.000-08:00","lastPublishTime":"2018-12-07T12:59:31.000-08:00","metrics":{"__typename":"MessageMetrics","views":10},"visibilityScope":"PUBLIC","placeholder":false,"originalMessageForPlaceholder":null,"entityType":"BLOG_REPLY","eventPath":"category:e-learning-challenges-and-recaps/category:learn/community:rwgqn69235board:e-learning-challenges/message:1134719/message:1134759","replies":{"__typename":"MessageConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[{"__typename":"MessageEdge","cursor":"MjUuM3wyLjF8aXwxfDM5OjF8aW50LDExMzQ3NjIsMTEzNDc2Mg","node":{"__ref":"BlogReplyMessage:message:1134762"}}]},"customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}}},"ModerationData:moderation_data:1134762":{"__typename":"ModerationData","id":"moderation_data:1134762","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"BlogReplyMessage:message:1134762":{"__typename":"BlogReplyMessage","author":{"__ref":"User:user:404768"},"id":"message:1134762","revisionNum":1,"uid":1134762,"depth":5,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"parent":{"__ref":"BlogReplyMessage:message:1134759"},"conversation":{"__ref":"Conversation:conversation:1134719"},"subject":"Re: Using Drag-and-Drop for Sequence and Step-by-Step Interactions #213","moderationData":{"__ref":"ModerationData:moderation_data:1134762"},"body":"Yes, they were all done in Storyline. I made five looping layers for those rotating gears. The layer shows when the related gear drops on the target area. And you can use two triggers to make a layer looping.
1. Hide this layer when timeline ends the layer
2. Show layer when timeline ends the layer
","body@stripHtml({\"removeProcessingText\":false,\"removeSpoilerMarkup\":false,\"removeTocMarkup\":false,\"truncateLength\":200})@stringLength":"203","kudosSumWeight":1,"repliesCount":0,"postTime":"2018-12-09T19:06:12.000-08:00","lastPublishTime":"2018-12-09T19:06:12.000-08:00","metrics":{"__typename":"MessageMetrics","views":8},"visibilityScope":"PUBLIC","placeholder":false,"originalMessageForPlaceholder":null,"entityType":"BLOG_REPLY","eventPath":"category:e-learning-challenges-and-recaps/category:learn/community:rwgqn69235board:e-learning-challenges/message:1134719/message:1134762","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},"CachedAsset:text:en_US-shared/client/components/common/Pager/PagerLoadMore-1744833251000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/common/Pager/PagerLoadMore-1744833251000","value":{"loadMore":"Show More"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"e-learning-challenges","messageSubject":"using-drag-and-drop-for-sequence-and-step-by-step-interactions-213","messageId":"1134719","replyId":"1134748"},"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","../shared/client/components/common/Pager/PagerLoadMore/PagerLoadMore.tsx"],"appGip":true,"scriptLoader":[]}