Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Number of replies: 22
Picture of Particularly helpful Moodlers Picture of Plugin developers

One of the other improvments coming to Pioneer 1.3.8 will be scroll spy while on a main course page.  This has been a major frustration with all the scrolling in large courses with editing.  

What this does is allows a teacher to turn editing on and after the page refresh it will put them exactly where they were on the page when they click edit! 


Pioneer v1.3.8(coming soon) will have the Course Editing button in the main navigation bar which is always visible on the page.  If you have 100 topics in your course and you click edit on #65 it will return you to topic #65 when done switching to edit mode.

We are super excited to bring this neat little improvement to the Moodle theme community.  These little and subtle user interface improvements can make a big difference!

And to top it off...  if you leave a course main page and go somewhere else....  when you return it will be to the place that you left off at!!!!

Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

That sounds great Chris - looking forward to seeing how you have applied that (and 'borrowing' it to improve other themes smile )

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Richard,  Should be released in a week or so.  Finalizing all the new features and then have to test and clean things up.

Also,  Thanks so much for helping with the custom header image.  Our teachers love it.  

We had talked about a radial course completion and a radial Course Grade Total.  I found in the forum the Course Completion stuff here:  https://moodle.org/mod/forum/discuss.php?d=314373#p1319920

With that as the base coding, would you have any suggestions on how to make the course grade total appear as a radial?

Here's a video of the course completion in action on the Pioneer theme utilizing the brilliant course header area with the custom images.

 

Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Off the top of my head no Chris - I know it can be done though as I seem to remember there is a plugin or piece of code been talked about on the forums somewhere recently that does it, but for the life of me I can't find that chat right now.

EDIT: https://moodle.org/mod/forum/discuss.php?d=314373#p1319920 - found it. but thats the bit you've already got - but if course grade is out of 100 (percent) or you have a total, then using the same kind of code should be able to give that radial display  would have thought - but haven't had chance to look at the code yet smile

Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Inspirational Chris smile.

Average of ratings: -
In reply to Gareth J Barnard

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
It's a simple script you put in the bottom of the course.php format page.  I can't take credit for the code.  Only the idea.  We got a top notch programmer and he worked out the math to make it work.  


The main issue is with editing turned on the page actually grows and normal spy scripts would fail to put you in the same place on the page.

His script finds the nearest section ID and goes from there.  It's a neat little trick. 

 It should work with all themes.  I am not sure about some of the other course formats.  I've only tested with topic and weekly.  


Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Ray Lawrence -
Can this be used from within an activity e.g. assignment grading table and return you to that location?
Average of ratings: -
In reply to Ray Lawrence

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Right now we are just testing with the main course page because of the way it works.  It relies on specific page elements in the code to get its position.  This allows it to better position the window when the length changes size on refresh and editing buttons, which is probably why this hasn't been done before in Moodle.  It has not been tested with all course formats yet.  

Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Chris - take a look at the attached file.

I've just added it to my working flexibase (as in the version Im working on, not even on github as of this morning as its part of something else I'm working on). It can be added as an 'include' into the course layout file, wherever you need to display it.

It's based on the code in the post you identified (or at least the original source of that) and extracts the course grade total (in a better way than I was previously using - I hope) to 'power' that code. The radial display is itself a clickable link back to the full gradebook.

Its working on my testing version (3.0 though - will test it on 3.1 as soon as I get chance to be back on my main PC rather than my laptop) right now, although needs a bit of a clean up of the code (hopefully just indents and so on, but maybe a bit more). I haven't yet looked at styling it properly into the theme, just on getting the code working and passing it on to you as your Pioneer styling may well be different to what I want for flexibase, but the core code will be the same, hopefully.

radial course total display


Richard

EDIT: slightly updated version - some tidying up done.

Currently all the code including all the LESS is all in this file - it should probably be split properly in a theme, but I've left it there for now for portability.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

And with a little bit more fiddling

Radial displays

Need to take a closer look at the original code to see if I can get a full activity completion percentage, rather than just those items ticked manually

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Richard,

THANK YOU VERY MUCH!!!  I couldn't wait until tomorrow.  I started playing with it and it appears to work quite well!   

I am thinking I might remove the course completion option and use the Grade total instead.  

On the page with both scripts for course completion and your total grade called it does weird stuff mainly due to shared/conflicting CSS I think.  

I will wait to see if you come up with a better course completion solution and then implement them both.  

You are GENIUS!  Thanks again for sharing.  

Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

There's conflicting css and javascript in the version I put on here, but I have it working with both at the moment - but I'm working on the course completion one right now to just do a simple count of completion activities from the database as the current code only seems to pick up manually 'completed' activities and I do think it needs to show a percentage of all of them, rather than just those manually completed - should be sorted this evening and I'll put it up on github at that point smile

There's no conflict between this radial grade display and the one I did a few months ago that you are using - this one actually goes into the table and extracts the course total as a value, the old one essentially printed the whole table to the page and used css to hide everything else except the total - a bit clumsy, but it worked as a first step when we were both looking for a quick solution at the time.

R

Average of ratings: -
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Pushed them both to github, Chris, but I've added the files here as they are tonight as the github versions will change as I'm working. The course completion one now looks to the database to pull off completions.

Subject to those changes, the github versions are at https://github.com/roelmann/moodle-theme_flexibase/tree/master/layout/includes


For the finished version of the theme, I'll consolidate the LESS into a theme file, but for now they are in the layout files to make it portable for you and anyone else who wants them

Richard


RadialCourseCompletion file attached (fixed)

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Radial displays

RadialCourseGrade file attached

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Pure Genius Richard!

I cannot wait to integrate this into Pioneer!  This is what we talked about a year ago and I am very thankful you shared your work on coding it.  Pioneer - with the custom header image -  was designed just for this type of display in the course.  I made the theme to utilize that image space to display this kinda thing.

And now it is here!  Cannot thank you enough.   

I am going to get it up and running tomorrow.

Average of ratings: -
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I do see one issue with the course completion script.

If a user marks an item complete and then removes the mark the new script keeps the item marked as complete.  Even on page refresh and coming and leaving the course.  

Any ideas?

Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hmm, no hadn't come across that

Will need to look at what changes in the database to reflect that as the script is just a fairly simple count from the database tables. Will investigate as soon as I can

Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Fixed - on localhost, will push to github as soon as I get chance, but essentially its a missing AND in the sql

In my code on github its https://github.com/roelmann/moodle-theme_flexibase/blob/master/layout/includes/radialcoursecompletion.php#L36

    $where2 = 'userid = '.$USER->id.' AND completionstate > 0 AND coursemoduleid IN (SELECT id FROM '.$table1.' WHERE course = '.$COURSE->id.')';

Hope that helps Chris

smile

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Works like a charm!  This is awesome!!!

Average of ratings: -
In reply to Richard Oelmann

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

YES!!!!   I am going to take a look but this sounds very promising!  This is going to be top of the agenda tomorrow!

I'll be intouch.

Will this interfere with the previous course grade total you sent me?  I utilize that script with the "course grade slider" button to give a student a quick rundown of grades on the course page.


Thank you very much for sharing!  Ill be taking a look tomorrow.

Average of ratings: -
In reply to Chris Kenniburg

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Wow - seems like that should be incorporated into core themes...well, pretty much every theme!  Nice work!

Average of ratings: -
In reply to Emma Richardson

Re: Scroll Spy with Pioneer theme Coming Soon! - Return to place when turning editing on

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Note, the quiz does this in a couple of places (e.g. when a student submits a question in Adaptive mode, scroll position is preserved).

I coded it in a sort-of generic way: There is a scroll-manager class in question/qengine.js. That should be moved into core, and used at lot more. I agree that preserving scroll position makes a surprisingly big difference to usability.

Average of ratings: -