Chapters
Section outline
-
-
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 pathsThe Learning Path widget is a way to showcase coursesin a very visual way.So we already have the Level Maps format,which lets you allowedto display course activities in a visual way, kind ofas an interactive learning journey within a course.And each section has its own level image as a background.And here we're one level, um, moreto the top, if that makes sense.Um, so you, in here,you don't show activities, you show courses.The way this works is, um,this year actually is a background image, an SVG imageto be more precise, which has a weed path on top of it.And the learning path widget will recognize that pathand automatically position the courses,which you can see here on this vector.So you don't need to manually position the,the courses on this page that's done automaticallyby learning paths for you.So if I, if a user clicks on a course,let's say I click maybe on this one,I see the information for that course.Um, I see for example, uh,the course preview image, I see the title.I would see a description if this course had adescription, which it doesn't.Um, and I can from there start the course.So note that this is not really enrolling you automatically.This is not like a learning path in the sense of a programas it would otherwise be called.Maybe. Um, it is just like a course catalog.You see the course that are availableand from there you can then enter them.Um, we've also added, um, the, the a way to navigatebetween the different courses.So if you want to just check out the differentcourses on the path, you can just use the nextand previous buttons, uh, which I think is,is quite nice to do that.So, um, that's one learning path that you can use,but there's actually a ton that we already created for youon the main demo sideand you can do that right now if you want to.Uh, we've got a small showcase area for Dash hereand it's just called Dash Lining Paths,so quite straightforward.Let me turn off editing and uh,then you get a bit more explanationabout the learning paths here.And, uh, lemme refresh the page sothat the editing boot is turned off.There we go. So, um,so this is the same one that I just showed you.And you can see that the images herecan be smaller or bigger.This is using the little dots,so we are not even showing the, um, the course image'cause it might not be relevantor you might not even have one.And this year is using the tiny, uh, image size.So they, the images are tiny, just as a name suggests.And we're using a different learning pathimage in the background.And same here.Uh, we're using, I think that's the same size might,it might already be small, um,but you can, you can seethat later on when I show you the configuration.And that, that again, is just an SVG image.Uh, and all the causes are automatically added on topof the SVG.An easier example, uh, with this one here, uh, where, um,it's just, just a line, just a vector itself,which is dotted and that's literally nothing else.Just a WTA path, which you can, which you can easily createin Illustrator or Figma or wherever you want it.Um, one side note, if you don't want to create those pathsfor yourself, uh, check out the onesthat we do provide for Level Maps.Um, so we've got quite a few, um, free learning path, um,packages available.Um, you need dash premium for that,so it won't be completely free,but once you have dash premium, you can use allof those packages for free.Uh, so hopefully there's something in there for you, uh,or at least that inspires you to create your own.And if you need training on how to create those paths, whichas I said is literally a, a very simpleand quick job, then we're more thanhappy to help you with that.So, um, again, to this example here, um, that was the lastof, of these ones here.Um, so let me turn on editing so that you seehow this is actually working in the background.So I'm looking at one dash here, which is called, uh,the free Design Package Mountain'cause it's using the mountain um, path.And if I go to the preferences of this one, I seethat I'm using the learning path widgetand then I can choose the paths that are used.Note that we use three paths, the desktop path,the tablet path, and the mobile path.Um, it would automatically resize with just one path.So you might end up just using one path that you add to allof the, the dropdowns here,but we think it's, it's a bit better if you use um,three which are, uh, optimized for the relevant view port.So what you do here is you say, do you wantto have an info area, which is the thing at the very top.So that's this one here, which tells youthat you've completed X out of Y coursesand tells you which one is the next one.And the reason why we built this here isbecause we wanted to give users that don't wantto be bothered with something visual.So they might not like to look at an imageor something like that, just want to continue learning.They don't want to like,overcome any potential barrier here.They just want to resume.For that reason, we've um,we've integrated this details area, uh, this info area,sorry, so you can turn that off or on.So if I turn this off, I can do that real quick.Uh, then it's just goneand nobody would be surprised by that.And if I turn it back on, thenof obviously it would show again, then I pick the paths.Um, and this will be just the path that you like.Uh, for example, if I instead wantto have the houses designed,then I just pick a different path hereand I will show you in a secondhow they are actually uploaded.Then you choose the dot side at the,the cause image size could be anything from tinytill extra large.So depending on how you wanna reuse it really.Um, if you're looking for pixel resolutions, they're hiddenbehind the questionor the Help I icon, we can automatically add a start elementand a finish element, um, which is like this little like,um, the start thing here.And there's also an end thing here, which we can add,which isn't the case in this case, but in this, um, example.And then you can turn on or off a details area.A details area means that if I click on this one here,I see a modal which has more details,hence the name details area.If I were to hide this like, like uncheck this,then the user would directly be redirect it, uh,to the course that he clicked on.So it's really a matter of how you want to work.This last not least, you can order them by menu, orderor call short name alphabetically or byand different other ways to order it.You can limit it to a certain number of coursesand ultimately you can decidewhich courses you want to show.Currently we offer two ways to do that.Number one is you pick the course category,course categories, potentially including subcategoriesor you pick the current category.So if you are already in the category,like you are in the course,which is in the course category Aand put this widget into this courseand say current category,then it would automatically pull in all thecourses from that category.The last thing that I want to show you here ishow this is configured on the global level.So everything that we did upto now was basically the teacher, um,doing that if you wanted to.And, uh, the last thing that I need to show youfor this one is that there's just, um, three file bakers,one for desktop, one for tablet,and one for mobile where you can upload the paths.And as you can see, for example, this yearand this year, they're exactly the same thing.We just made that a little narrower sothat it fits better on the selective view port.So that's all I had to say about the learning path widget.Uh, we hope that you are as excited about it as we are.And let me, um, close this widget off with one commentand that is, it is pretty amazing.A as to how quick this is.Like you literally only need an image, you can use oneof the ones that we provide.And creating this widget is a matterof, it's not even minutes.Like I can do it in 20 seconds,but I'm a bit quicker than most.So, so you can do it in,and that's very conservative, less than five minutes.And uh, that will completely change the appearance
-