Section outline

  • Collapse Expand

    General

    Collapse all Expand all
  • Collapse Expand

    Vimeo

  • Collapse Expand

    Normal mode

  • Collapse Expand

    Label mode

    • Here is a description for this video.

      Some comments here. 

    • Chillout music by Sia in Label mode.

      Here are some notes. 🎶

  • Collapse Expand

    Preview mode

  • Collapse Expand

    Tracking watch time

  • Collapse Expand

    Integrated Video Time Tabs

  • Collapse Expand

    Other videos

  • Collapse Expand

    Chapters

    • Unveil users’ learning journeys visually with our Learning paths widget. This widget showcases completed and pending courses for each user in a visually engaging manner, akin to a pathway rather than a conventional list. Administrators can craft these paths using uploaded vector graphs (SVG files), with courses automatically distributed along the path. The creative possibilities are boundless, from simple lines to vibrant, thematic designs that narrate a story. Moreover, administrators can tailor learning paths for desktop, tablet, and mobile devices, ensuring an optimized experience across all viewports. Additional configuration options allow administrators to include an info area, adjust the size of course images within the learning path, and define the display of start and finish elements or a details area. They can also dictate the order and limit the number of courses shown. Furthermore, each learning path can contain courses from one or multiple course categories. By default, the widget presents a pattern of hexagons representing courses, adding visual appeal to the learning journey. We provide lots of free design packages to create different learning paths. This video is part of a webinar on Dash, a versatile block for adding static and dynamic content to websites. Part 2: Live demo of new Dash 2.0 features – Learning paths More: https://bdecent.de/feature/widgets/learning-paths/
      Showcase completed and pending courses as visual learning paths

      Showcase completed and pending courses as visual learning paths
      Open
      00:00:11
      The Learning Path widget is a way to showcase courses
      00:00:16
      in a very visual way.
      00:00:18
      So we already have the Level Maps format,
      00:00:21
      which lets you allowed
      00:00:22
      to display course activities in a visual way, kind of
      00:00:25
      as an interactive learning journey within a course.
      00:00:29
      And each section has its own level image as a background.
      00:00:33
      And here we're one level, um, more
      00:00:37
      to the top, if that makes sense.
      00:00:39
      Um, so you, in here,
      00:00:41
      you don't show activities, you show courses.
      00:00:44
      The way this works is, um,
      00:00:46
      this year actually is a background image, an SVG image
      00:00:50
      to be more precise, which has a weed path on top of it.
      00:00:54
      And the learning path widget will recognize that path
      00:00:57
      and automatically position the courses,
      00:01:00
      which you can see here on this vector.
      00:01:04
      So you don't need to manually position the,
      00:01:06
      the courses on this page that's done automatically
      00:01:09
      by learning paths for you.
      00:01:11
      So if I, if a user clicks on a course,
      00:01:14
      let's say I click maybe on this one,
      00:01:17
      I see the information for that course.
      00:01:20
      Um, I see for example, uh,
      00:01:21
      the course preview image, I see the title.
      00:01:24
      I would see a description if this course had a
      00:01:26
      description, which it doesn't.
      00:01:28
      Um, and I can from there start the course.
      00:01:31
      So note that this is not really enrolling you automatically.
      00:01:35
      This is not like a learning path in the sense of a program
      00:01:38
      as it would otherwise be called.
      00:01:39
      Maybe. Um, it is just like a course catalog.
      00:01:43
      You see the course that are available
      00:01:46
      and from there you can then enter them.
      00:01:48
      Um, we've also added, um, the, the a way to navigate
      00:01:52
      between the different courses.
      00:01:53
      So if you want to just check out the different
      00:01:56
      courses on the path, you can just use the next
      00:01:59
      and previous buttons, uh, which I think is,
      00:02:01
      is quite nice to do that.
      00:02:03
      So, um, that's one learning path that you can use,
      00:02:09
      but there's actually a ton that we already created for you
      00:02:14
      on the main demo side
      00:02:15
      and you can do that right now if you want to.
      00:02:17
      Uh, we've got a small showcase area for Dash here
      00:02:21
      and it's just called Dash Lining Paths,
      00:02:23
      so quite straightforward.
      00:02:25
      Let me turn off editing and uh,
      00:02:27
      then you get a bit more explanation
      00:02:29
      about the learning paths here.
      00:02:31
      And, uh, lemme refresh the page so
      00:02:33
      that the editing boot is turned off.
      00:02:36
      There we go. So, um,
      00:02:38
      so this is the same one that I just showed you.
      00:02:41
      And you can see that the images here
      00:02:43
      can be smaller or bigger.
      00:02:44
      This is using the little dots,
      00:02:46
      so we are not even showing the, um, the course image
      00:02:50
      'cause it might not be relevant
      00:02:52
      or you might not even have one.
      00:02:55
      And this year is using the tiny, uh, image size.
      00:02:59
      So they, the images are tiny, just as a name suggests.
      00:03:03
      And we're using a different learning path
      00:03:05
      image in the background.
      00:03:07
      And same here.
      00:03:08
      Uh, we're using, I think that's the same size might,
      00:03:11
      it might already be small, um,
      00:03:13
      but you can, you can see
      00:03:14
      that later on when I show you the configuration.
      00:03:17
      And that, that again, is just an SVG image.
      00:03:20
      Uh, and all the causes are automatically added on top
      00:03:24
      of the SVG.
      00:03:27
      An easier example, uh, with this one here, uh, where, um,
      00:03:31
      it's just, just a line, just a vector itself,
      00:03:34
      which is dotted and that's literally nothing else.
      00:03:37
      Just a WTA path, which you can, which you can easily create
      00:03:40
      in Illustrator or Figma or wherever you want it.
      00:03:44
      Um, one side note, if you don't want to create those paths
      00:03:47
      for yourself, uh, check out the ones
      00:03:49
      that we do provide for Level Maps.
      00:03:52
      Um, so we've got quite a few, um, free learning path, um,
      00:03:57
      packages available.
      00:03:58
      Um, you need dash premium for that,
      00:04:01
      so it won't be completely free,
      00:04:02
      but once you have dash premium, you can use all
      00:04:05
      of those packages for free.
      00:04:06
      Uh, so hopefully there's something in there for you, uh,
      00:04:09
      or at least that inspires you to create your own.
      00:04:13
      And if you need training on how to create those paths, which
      00:04:15
      as I said is literally a, a very simple
      00:04:19
      and quick job, then we're more than
      00:04:21
      happy to help you with that.
      00:04:23
      So, um, again, to this example here, um, that was the last
      00:04:27
      of, of these ones here.
      00:04:28
      Um, so let me turn on editing so that you see
      00:04:31
      how this is actually working in the background.
      00:04:33
      So I'm looking at one dash here, which is called, uh,
      00:04:38
      the free Design Package Mountain
      00:04:40
      'cause it's using the mountain um, path.
      00:04:43
      And if I go to the preferences of this one, I see
      00:04:45
      that I'm using the learning path widget
      00:04:47
      and then I can choose the paths that are used.
      00:04:51
      Note that we use three paths, the desktop path,
      00:04:54
      the tablet path, and the mobile path.
      00:04:56
      Um, it would automatically resize with just one path.
      00:05:00
      So you might end up just using one path that you add to all
      00:05:04
      of the, the dropdowns here,
      00:05:06
      but we think it's, it's a bit better if you use um,
      00:05:10
      three which are, uh, optimized for the relevant view port.
      00:05:15
      So what you do here is you say, do you want
      00:05:17
      to have an info area, which is the thing at the very top.
      00:05:21
      So that's this one here, which tells you
      00:05:23
      that you've completed X out of Y courses
      00:05:27
      and tells you which one is the next one.
      00:05:29
      And the reason why we built this here is
      00:05:32
      because we wanted to give users that don't want
      00:05:34
      to be bothered with something visual.
      00:05:36
      So they might not like to look at an image
      00:05:39
      or something like that, just want to continue learning.
      00:05:42
      They don't want to like,
      00:05:44
      overcome any potential barrier here.
      00:05:46
      They just want to resume.
      00:05:48
      For that reason, we've um,
      00:05:49
      we've integrated this details area, uh, this info area,
      00:05:52
      sorry, so you can turn that off or on.
      00:05:55
      So if I turn this off, I can do that real quick.
      00:05:58
      Uh, then it's just gone
      00:06:00
      and nobody would be surprised by that.
      00:06:03
      And if I turn it back on, then
      00:06:04
      of obviously it would show again, then I pick the paths.
      00:06:08
      Um, and this will be just the path that you like.
      00:06:11
      Uh, for example, if I instead want
      00:06:13
      to have the houses designed,
      00:06:14
      then I just pick a different path here
      00:06:17
      and I will show you in a second
      00:06:18
      how they are actually uploaded.
      00:06:21
      Then you choose the dot side at the,
      00:06:23
      the cause image size could be anything from tiny
      00:06:26
      till extra large.
      00:06:27
      So depending on how you wanna reuse it really.
      00:06:30
      Um, if you're looking for pixel resolutions, they're hidden
      00:06:34
      behind the question
      00:06:35
      or the Help I icon, we can automatically add a start element
      00:06:39
      and a finish element, um, which is like this little like,
      00:06:42
      um, the start thing here.
      00:06:44
      And there's also an end thing here, which we can add,
      00:06:47
      which isn't the case in this case, but in this, um, example.
      00:06:52
      And then you can turn on or off a details area.
      00:06:55
      A details area means that if I click on this one here,
      00:06:58
      I see a modal which has more details,
      00:07:00
      hence the name details area.
      00:07:02
      If I were to hide this like, like uncheck this,
      00:07:06
      then the user would directly be redirect it, uh,
      00:07:10
      to the course that he clicked on.
      00:07:12
      So it's really a matter of how you want to work.
      00:07:14
      This last not least, you can order them by menu, order
      00:07:18
      or call short name alphabetically or by
      00:07:22
      and different other ways to order it.
      00:07:24
      You can limit it to a certain number of courses
      00:07:28
      and ultimately you can decide
      00:07:30
      which courses you want to show.
      00:07:32
      Currently we offer two ways to do that.
      00:07:34
      Number one is you pick the course category,
      00:07:36
      course categories, potentially including subcategories
      00:07:40
      or you pick the current category.
      00:07:42
      So if you are already in the category,
      00:07:45
      like you are in the course,
      00:07:46
      which is in the course category A
      00:07:48
      and put this widget into this course
      00:07:51
      and say current category,
      00:07:53
      then it would automatically pull in all the
      00:07:55
      courses from that category.
      00:07:59
      The last thing that I want to show you here is
      00:08:02
      how this is configured on the global level.
      00:08:05
      So everything that we did up
      00:08:06
      to now was basically the teacher, um,
      00:08:08
      doing that if you wanted to.
      00:08:10
      And, uh, the last thing that I need to show you
      00:08:12
      for this one is that there's just, um, three file bakers,
      00:08:16
      one for desktop, one for tablet,
      00:08:18
      and one for mobile where you can upload the paths.
      00:08:21
      And as you can see, for example, this year
      00:08:23
      and this year, they're exactly the same thing.
      00:08:25
      We just made that a little narrower so
      00:08:27
      that it fits better on the selective view port.
      00:08:32
      So that's all I had to say about the learning path widget.
      00:08:36
      Uh, we hope that you are as excited about it as we are.
      00:08:40
      And let me, um, close this widget off with one comment
      00:08:45
      and that is, it is pretty amazing.
      00:08:48
      A as to how quick this is.
      00:08:50
      Like you literally only need an image, you can use one
      00:08:53
      of the ones that we provide.
      00:08:55
      And creating this widget is a matter
      00:08:57
      of, it's not even minutes.
      00:08:59
      Like I can do it in 20 seconds,
      00:09:00
      but I'm a bit quicker than most.
      00:09:02
      So, so you can do it in,
      00:09:04
      and that's very conservative, less than five minutes.
      00:09:07
      And uh, that will completely change the appearance