In the 3.1 cycle we worked on adding a plugin to Moodle that would enable simple walk-through style tutorials to be added to a Moodle site by the Moodle Administrator. We are continuing this work and hope to have it available in core in time for Moodle 3.2. In the meantime there is a plugin in the plugins DB that can be used for this: https://moodle.org/plugins/local_usertours
The tracker issue for this issue is: MDL-52777
I added a project page for this feature to the Moodle dev docs: https://docs.moodle.org/dev/User_Tours_Project
Hi Damyon,
Thanks for the good plugin. I see that it is using bootstrap-tour library and as you have already mentioned it is too tightly depended on the Bootstrap 2.2. I want to suggest using Introjs (http://introjs.com/#examples) as it is an independent simple javascript library. Good thing, it does support RTL as well.
Hi Shamim,
Unfortunately intro.js does not have a license compatible with Moodle and so we cannot use it.
I have been working on a new JS library which is licensed under GPL with all of the features we require, which is also extensible, supports i18n, LTR/RTL, accessible, responsive, and supports auto-positioning.
I hope to complete this library shortly and update the usertours plugin ready for integration into core.
Andrew
I thought GNU AGPLv3 is compatible with Moodle licence.
Thanks for the clarification
Hi Shamim,
Intro.js is under a dual license. It's under AGPLv3 before version 2.0.0, and for non-commercial use. For commercial use it's under their commercial license.
Although Moodle itself is non-commercial, many of its users are commercial and would likely need to obtain a commercial license for intro.js.
I'm not a lawyer so of course, I could be wrong.
Andrew
The tours plugin is one of the nicest Moodle things I have seen in quite a while, congratulations to Andrew and Gavin on your excellent work.
Thanks Marcus,
With a few more tweaks I'm hopeful that it will make a powerful addition to core for many users.
Andrew
not sure if this is a good place for suggestions. I think it would be better to make the background colour (the dark grey colour that covers page) lighter so content could be still read through it.
I agree with Shamim on a lighter overlay.
I also wanted to lighten the backdrop so it's easier to see the page behind the tour.
I found the following works well in a custom CSS file or the custom CSS field on the theme (in Site admin > Appearance > Themes > [themename] ):
.tour-backdrop { opacity: 0.5; }
I added the following CSS to make it more readable.
But I have some trouble with the bread crumb, otherwise I would have set the opacity to 1
.tour-step-background {
background-color: white;
background-image: initial;
border-radius: 0px;
opacity: 0.5;
}
I also changed the close button:
.popover[class*="tour-"] .popover-navigation [data-role="end"] {
background-color: #7a7a7a;
float: right;
font-size: 0.9em;
margin: 10px;
}.popover[class*="tour-"] .popover-navigation [data-role="end"]:before {
content: "\f011";
font-family: FontAwesome;
left:-5px;
}
and the footer info:
.usertour a {
color: #c0c0c0;
padding-left: 21px;
}
.usertour a:before {
content: "\f09c";
font-family: FontAwesome;
left:-5px;
}
Thanks to all who have worked on this great new feature!
Now that I see it, I realise I have been waiting for it for ages.
Is there a way to add a choice for the user to take the tour several times? A Pause-button. As it is now, you might click away the pop-ups at the beginning and you don't get a chance to bring them back. Which seems a bit of a waste.
You can reset the tour from the bottom of the screen, if that helps. Or did you mean something else?
Thanks Mary, this was exactly what I meant.
But, since I did not find it in the first place, I think our users might not either. Many of them are not very familiar with LMS. I think a choice to end or play later would be helpful for them. Play later would make the tour appear aigain.
Hi Mary, I wasn't sure where to post this. First the user tours are FANTASTIC!!! Great work!
2 questions
1. Is there a place to ask if anyone has a made a tour you are looking for? - I love the Tour Repository but I can't seem to find a place to make 'overall comments or requests' ( I see you can make a comment under a specific tour)
The actual tour i am looking for is a tour to help people update their user profile (just in case anyone has done one and is willing to put it up lol) - I know I can create my own tour (which is a great feature!) I just do not want to re-invent the wheel if one already exists and my 'skill level' is pretty low (But it might have to get better
2. The Tour about User Tours - is great but I just worked out that when it highlights some things (like arrows to move the order of tours up or down) when you click next on the tour it actually makes that function 'work' (as in the order of the tour really changes) - Any idea how to make it stop doing that? (I did also post that comment under that actual tour.
Thanks everyone
Cheers
Hi Kathleen - glad you like the user tours
- I don't know of such a tour if it isn't in the repository but you are more than welcome to make one and add it to there!
- That's an interesting comment about the tour of user tours - I will install it myself and have a look, although we really need a user tours expert to suggest a solution for you.
Good Morning and thanks for this reply. Looks like I might be 'enhancing my skills' lol
Oh and if I do end up being able to produce a workable tour I will DEFINITELY post it to the tour site
Is it possible to put a tour on a feature, but only in a specific course or category? If we want a tour in an orientation class, but not in regular classes, or to customise a tour for a program or class.
Hi Vicke,
Use the "Apply to URL match" to specify a particular course or category.
For example if the course id (last few digits of the course page url) is 432, in the "Apply to URL match" field, enter /course/view.php?id=432
Catherine
The User Tours plugin is a terrific addition to Moodle!
I'm using it in Moodle 3.1 and have run into an issue I haven't been able to solve.
When the User Tour includes the User menu as a step in the tour, the ‹div class="tour-step-background"› completely hides the user menu so that the user can neither see nor click on the user menu while on that step of the tour.
The problem happens in Firefox. It does not happen in Chrome or IE. Attached is a screen shot.
All of the sites where this is happening use either the Clean theme or a custom subtheme of the Clean theme. It happens regardless of whether "Invert navbar" is set to Yes or No.I tried solving it by editing the CSS but nothing seeks to work.
Has anyone else run into this and solved it?
So I decided last night to update my test site from Moodle 3.1 to 3.2RC2....and one thing I can't seem to resolve is the very large area around any CSS value I target in user tours now.
Previously I liked how the User Tours highlighted a CSS tag quite tightly, but a change seems to have been made and a bit of padding is showing around things that get highlighted...and I can't figure out how to add some CSS into the site to get rid of it.
Hope this visual explains what I mean...
Phil
While this is a great feature, since often it is the teachers that actually build their course pages, by specific blocks, implementing specific types of questions, etc..., it would be appreciated to have course teachers actually be able to make the tour for their specific course.
This is a killer feature, user tours will take care of a A LOT of support and onboarding!
I wonder if there is any roadmap for further development, or any special forum (except for this) with discussions on features for the User Tours?
I was thinking about an opportunity to have "forked" tours, where you can choose a certain path for a certain setup.
Example:
You want to add an Assignment with Group Submission
- You activate Editing and selects Assignment
- The tour for adding an assignment starts, with the question "What kind of assignment to you want to add".
- There's a choice between "Group submission" and "Individual submission"
- When I choose Group submission, the tour first asks me if I have created groups and groupings.
- If "No" or "I'm not sure": the path leads to the group administration page where it shows me how to get this done, and the goes back to continue the Assignment setup.
- If "Yes": The tour continues on the Assignment setup page, without the group/groupings setup detour.
Question: Is this in the roadmap, or maybe even possible to do already? I guess it can be done right now by beginning a Assignment setup with a statement like "If you are adding a Group submission, please quit this tour and go to Groups administration page to get your groups and groupings set up", but that is not as smooth.
Hi All,
Great work on User Tours, its a great addition to 3.2 core and will assist in automated support. One quick question, i'm looking at having a user tour activated from a link (e.g. label hyperlink, URL resource), although i can't get this to work. I'm wanting to either have a user tours section or HTML user tours block where users can activate tour at time of need. I see in the documentation that the options to link to URL are:
- /my/% - to match the Dashboard
- /course/view.php?id=2 - to match a specific course
- /mod/forum/view.php% - to match the forum discussion list
- /user/profile.php% - to match the user profile page
I can't seem to add anything to these, for example the following don't work:
- /course/view.php?id=2#assessmentusertour
- /mod/url/view.php?id=4
Cheers
We have course templates that we "restore" when we are creating a new course. I was thinking that having a user tour pop up when the instructor first opened his/her new course shell would be great. However, I don't think there's any way that I can do that, other than manually copying the tour over and changing the course id, am I right?
In case anyone is interested, I believe I've found a workaround for this that will work for us. I've done some preliminary testing and I think it will work!
1) Create a new "blank" role with COURSE context and call it something like "Template Orientee." Use all default settings for everything else.
2) Change your user tour's ROLE setting to "Template Orientee." (I used Gavin Henrick's "Standard Course Main Page" user tour for this test).
3) With a new course shell, add the Teacher as normal, but then also assign them the Template Orientee role. This can be added at your discretion. So it could be assigned only to new Moodlers, so that the old pro's don't have to cancel it when they open up their new course shell.
I could see potentially having multiple template tours for different templates and creating a role for each of them. Or, maybe I don't even need to do that. I'll find out as I learn more about creating user tours. Time to go learn more!
After working with creating a new user tour, all morning, I've got a few "wishlist" items:
- ability to disable/enable individual steps within a tour
- ability to copy steps within a tour (to make small changes)
- ability to copy steps from one tour to another tour (import/export)
- easier moving of steps up and down within a tour (right now a new step goes to the bottom and it's slow and painful to move it up near the top, if need be!)
That's it for now, but I'm having a whole lot of fun with this!
Great plugin. Playing with it now and setting some things up in our sandbox.
One thing I would like if it is not already there, would be permission so that other roles have access to edit.
We have our ICT Admins looking who have full Admin access to eLearn, then we have other levels of Admin who do the day to day work. I would like them to be able to create these tours in the first instance, as well as have access to add more in / edit them as required.
Is there a possibility of this, or is there something already that I am missing.
Thank you.
Amy
Not sure if this is the right place to post a new question about Moodle tours but I have had some success building my own tour however when I put in this step (and I've redone twice) into one tour it doesn't show the content in the content box. It works perfectly in another tour in the same moodle site and I made sure it was duplicated exactly the same. Any ideas? Thanks in advance for help.
Moodle 3.3
Is it possible to make a tour to show students where to check their grades? and how to change their profile pict?
I am trying to write a css selector for items on the front page to highlight. In this case the book module. I have looked at the code and tried to duplicate but I must be missing something or is this even possible?
A selector like this worked for me:
.iconlarge.activityicon[src*="image.php/boost/book"]
You can make the text to match in the src attribute more or less specific depending on your needs.
It works! Thanks so much.
Hallo, thanks for this helpfull plugin. I want to ask, ist possible to disable/ hide the "end tour" button ?
Thanks
Hi,
what a great plugin! Thank You.
Just a question: I'd like students have to watch all the tour before working in moodle, is it possible?
At the moment if a user click outside the buttons the modal window disappears; is it possible to "fix" it?
I'd like students couldn't skip the tour.
Thank you in advance.
Fil
Hi,
I can't tell you how to do that, but i think it could be a useful option to add to the user tour.
I think you'll have (at least) to create a tracker item for that.
Séverin
I've taken far too long to jump on this bandwagon, but am having lots of fun with tours. I have plans to implement tours all over the place, but to avoid user fatigue, I might try and create a more prominent reset tour function at the top of the screen. Sort of like a contextual help button. My plan is to try and set the tours in a completed state, and only trigger them when users call them. That's the plan anyway.
In the meantime, I've been experimenting with Fontawesome in the tours. Seems that FA has some great formatting tools built right in, so it makes sprucing up the tours with images very easy.
eg. <i class="fas fa-car fa-4x fa-border fa-pull-left mr-2"></i>
Where:
- fa-4x is four times the size
- fa-border add a square border to the icon
- fa-pull-right/left pulls the image to one side of the tour box
- mr-2 pads out the spacing of the image so your text doesn't butt up against it.
Anyway, that's it for me. More tours to write...
Adam
Would like to see some of these tours you are creating. Are you planning on sharing them on the User Tours repository?