\n
Labeled Graphic Interactions #118: Challenge | Recap
\n
Challenge of the Week
\n
This week, your challenge is to design a labeled graphic interaction for e-learning. You can use the built-in markers or create something from scratch using shapes and graphics.
\n
Ideas for Labeled Graphics Interactions
\n
Here are some topic ideas and links to previous challenges.
\n
\n
Note: I’m not including interactive maps in this challenge since maps are a specific type of labeled graphic. Map markers and labels are a great source of inspiration, but I’d like to focus this week’s challenge on things other than maps.
\n
Resources
\n
Here are some great articles on different ways course designers are using labeled graphics:
\n
\n
Last Week’s Challenge:
\n
Before you lay down the marker for this week’s challenge, take a look at the visual design ideas your fellow community members shared in last week’s cover slide challenge:
\n
\n
Graphic Design Tips for Cover Slides RECAP #117: Challenge | Recap
\n
\n
Wishing you a mark-tastic week, E-Learning Heroes!
\n
New to the E-Learning Challenges?
\n
The weekly 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":"2016-02-19T05:03:42.000-08:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDc2NTMzLTgyODQxaUFGOEU1RDUwMjEyOEMwRkM?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDI","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDc2NTMzLTY3MTc1aUM0QjY3MEVGQjQ3QzcyNkY?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":"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:1076533_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":294},"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:1076533":{"__typename":"Conversation","id":"conversation:1076533","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1076533"},"lastPostingActivityTime":"2019-12-02T06:55:03.000-08:00","lastPostTime":"2019-12-02T06:55:03.000-08:00","unreadReplyCount":367,"isSubscribed":false},"ModerationData:moderation_data:1076533":{"__typename":"ModerationData","id":"moderation_data:1076533","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDc2NTMzLTgyODQxaUFGOEU1RDUwMjEyOEMwRkM?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDc2NTMzLTgyODQxaUFGOEU1RDUwMjEyOEMwRkM?revision=1","title":"uploads_rte_fohvyjgw_labeled-graphics-markers-in-elearning.jpg","associationType":"BODY","width":760,"height":380,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDc2NTMzLTY3MTc1aUM0QjY3MEVGQjQ3QzcyNkY?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDc2NTMzLTY3MTc1aUM0QjY3MEVGQjQ3QzcyNkY?revision=1","title":"uploads_rte_yqjkepvm_Faded-Image-Effect-for-Course-Cover-Screens.png","associationType":"BODY","width":760,"height":380,"altText":null},"Revision:revision:1076533_1":{"__typename":"Revision","id":"revision:1076533_1","lastEditTime":"2016-02-19T05:03:42.000-08:00"},"BlogReplyMessage:message:1076574":{"__typename":"BlogReplyMessage","id":"message:1076574","conversation":{"__ref":"Conversation:conversation:1076533"},"author":{"__ref":"User:user:628380"},"revisionNum":1,"uid":1076574,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"subject":"Re: Creating Labeled Graphic Interactions for E-Learning #118","readOnly":true,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1076574"},"parent":{"__ref":"BlogReplyMessage:message:1076559"},"body":"Sorry, David. Just wanted to throw this in from a previous challenge. I just used small images on a map which when clicked displayed a larger image and description of same through layers:
Demo:
http://googledrive.com/host/0B4cWLl4F_TnfeTJOWU9WRWotZG8A similar one I created was of a map of Italy which incorporated markers to display videos in the layers by city. I won't include it just to save everyone time. It was shown recently in a previous challenge.
","body@stringLength":"654","rawBody":"Sorry, David. Just wanted to throw this in from a previous challenge. I just used small images on a map which when clicked displayed a larger image and description of same through layers:
Demo:
http://googledrive.com/host/0B4cWLl4F_TnfeTJOWU9WRWotZG8A similar one I created was of a map of Italy which incorporated markers to display videos in the layers by city. I won't include it just to save everyone time. It was shown recently in a previous challenge.
","author":{"__ref":"User:user:408339"},"postTime":"2016-02-19T14:40:13.000-08:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":8},"Revision:revision:1076574_1":{"__typename":"Revision","id":"revision:1076574_1","lastEditTime":"2016-02-20T07:39:27.000-08:00"},"QueryVariables:ReplyList:message:1076574:1":{"__typename":"QueryVariables","id":"ReplyList:message:1076574:1","value":{"id":"message:1076574","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-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1744479443000","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1744479443000","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1744479443000","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1744479443000","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1744479443000","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1744479443000","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},"User:user:167199":{"__typename":"User","id":"user:167199","uid":167199,"login":"DanielaSlater","biography":null,"registrationData":{"__typename":"RegistrationData","status":null,"registrationTime":"2014-10-25T18:44:02.000-07:00"},"deleted":false,"email":"","avatar":{"__typename":"UserAvatar","url":"https://api.articulate.com/id/v1/avatars/auth0|7c7eb2f0-3edf-0132-0694-22000b280173"},"rank":{"__ref":"Rank:rank:6"},"entityType":"USER","eventPath":"community:rwgqn69235/user:167199"},"ModerationData:moderation_data:1076586":{"__typename":"ModerationData","id":"moderation_data:1076586","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"BlogReplyMessage:message:1076586":{"__typename":"BlogReplyMessage","author":{"__ref":"User:user:167199"},"id":"message:1076586","revisionNum":1,"uid":1076586,"depth":3,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"parent":{"__ref":"BlogReplyMessage:message:1076574"},"conversation":{"__ref":"Conversation:conversation:1076533"},"subject":"Re: Creating Labeled Graphic Interactions for E-Learning #118","moderationData":{"__ref":"ModerationData:moderation_data:1076586"},"body":"Thanks Alex.
","body@stripHtml({\"removeProcessingText\":false,\"removeSpoilerMarkup\":false,\"removeTocMarkup\":false,\"truncateLength\":200})@stringLength":"15","kudosSumWeight":0,"repliesCount":0,"postTime":"2016-02-20T21:41:18.000-08:00","lastPublishTime":"2016-02-20T21:41:18.000-08:00","metrics":{"__typename":"MessageMetrics","views":5},"visibilityScope":"PUBLIC","placeholder":false,"originalMessageForPlaceholder":null,"entityType":"BLOG_REPLY","eventPath":"category:e-learning-challenges-and-recaps/category:learn/community:rwgqn69235board:e-learning-challenges/message:1076533/message:1076586","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-components/tags/TagView/TagViewChip-1744479443000":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1744479443000","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"e-learning-challenges","messageSubject":"creating-labeled-graphic-interactions-for-e-learning-118","messageId":"1076533","replyId":"1076574"},"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","../shared/client/components/common/List/UnstyledList/UnstyledList.tsx","./components/messages/MessageView/MessageView.tsx"],"appGip":true,"scriptLoader":[]}