Beautiful Moodle site

Beautiful Moodle site

Tim Hunt -
Кількість відповідей: 51
Фото Core developers Фото Documentation writers Фото Particularly helpful Moodlers Фото Peer reviewers Фото Plugin developers

https://learn.unitedforwildlife.org

Yes, that really is Moodle. Great work by someone.

Середня оцінка: Coolest thing ever! (15)
У відповідь на Tim Hunt

Re: Beautiful Moodle site

Matt Bury -
Фото Particularly helpful Moodlers Фото Plugin developers

Yes, beautiful site design indeed усміхаюсь

Looks like it's by an Infrastructure as a Service agency: https://www.floream.com/

У відповідь на Matt Bury

Re: Beautiful Moodle site

Eoin McDonnell -

Hi Matt,

I'm the Head of Learning Technology at Floream.

We're not really service providers at all - software, infrastructure, or anything else.

We partner with leading brands to create shared products and platforms.

E.g. we partnered with Google to create Squared Online. They bring brand recognition and discipline expertise, we bring teaching operations, sales and marketing teams, platform, edtech op's, learning design, etc.

In this case, our team (Thomas Bell and Wil Procter primarily) designed the learning narrative and built the platform. With design from a sister company, Contentive, and wonderful aid from our dev team.

UfW provided subject expertise and content.

We create complimentary partnerships where our organisations capabilities complement our partners.

Thanks,

Eoin

У відповідь на Tim Hunt

Re: Beautiful Moodle site

Frankie Kam -
Фото Plugin developers


Another screenshot:



One more:



Cheers,

Frankie 

У відповідь на Frankie Kam

Re: Beautiful Moodle site

Visvanath Ratnaweera -
Фото Particularly helpful Moodlers Фото Translators
This is very much coursera.
підморгую
У відповідь на Visvanath Ratnaweera

Re: Beautiful Moodle site

Mary Cooch -
Фото Documentation writers Фото Moodle HQ Фото Particularly helpful Moodlers Фото Testers Фото Translators
У відповідь на Mary Cooch

Re: Beautiful Moodle site

Frankie Kam -
Фото Plugin developers

This is bril! Thanks, Mary. "This presentation is a case-study showing what is possible with Moodle, using the plugin framework and no core hacks." Absolutely no core hacks? Amazing stuff! By the way, what's a plugin framework? What is the plugin framework used for UW's MOOC? 


У відповідь на Frankie Kam

Re: Beautiful Moodle site

Tim Hunt -
Фото Core developers Фото Documentation writers Фото Particularly helpful Moodlers Фото Peer reviewers Фото Plugin developers

Moodle has/is a plugin framework.

The M in Moodle is modular. A lot of Moodle is made of plugins. Blocks, themes, course formats, etc.

They point is you can do a lot just with those plugins. No core changes.

У відповідь на Tim Hunt

Re: Beautiful Moodle site

Thomas Bell -

Hi everyone,

Glad everyone likes the site. It's a project that I've led at Floream.

Any questions, ask away...


У відповідь на Thomas Bell

Re: Beautiful Moodle site

Jeff White -

This site is a amazing! Any chance you might give a demo on how you built parts of the course and site? Maybe in an upcoming MOOC? I am particularly interested in the percentage progress gui and how your got the lessons to look like that!

I did see a you guys having a course format that is named cubegrid. I dont suppose that is going to show up in the Moodle plugins page anytime soon? 

У відповідь на Jeff White

Re: Beautiful Moodle site

Tim Hunt -
Фото Core developers Фото Documentation writers Фото Particularly helpful Moodlers Фото Peer reviewers Фото Plugin developers

Not related to this site, but at the UK Moodle Moot in London next month, my colleagues and I will be presenting about our beautiful new design for our Moodle courses:

  1. https://mootieuk.moodlemoot.org/mod/data/view.php?d=5&rid=293
  2. https://mootieuk.moodlemoot.org/mod/data/view.php?d=5&rid=294

The second talk, in particular, will include some technical details.

У відповідь на Jeff White

Re: Beautiful Moodle site > Radial Course Progress

Jerome Di Pietro -

ok, this is a bit hacky but as our Moodle is externally hosted we don't have much leeway on adding bespoke blocks or modules, so I came up with this...

Add an HMTL block on your course page (obviously you'll need Completion Progress turned on), and add the attached code snippet as HTML.

Be careful: the WYSIWYG editor (on our Moodle at least) strips out the <style> tag and its contents when you save, so you need to turn off the text editor and just use a plain text entry box.

How it works:

Uses CSS for styling the radial graph, as per:

https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9#.u551bf7pm

github: https://github.com/andsens/blog-material/tree/master/radial-progress

Uses jQuery to count the number of Completion tickboxes (and whether ticked or not) - this works because of the way the Moodle DOM is written. First the central course content column is written to the DOM and then the left/right columns. So by the time you hit that script, the elements are ready to be counted. Binding an onclick to each tickbox allows for realtime updates to the graph.

Tested and working on Moodle 3.8 (older/newer versions may use different element names in the DOM so may not work, but the idea will be the same)

Screenshot of Moodle course page with radial progress

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

Jeff White -

Thank you Jerome! Your example was simple enough for someone like me to get it working in 5 minutes усміхаюсь. I didnt even realize you could make html do this in Moodle without having to make a plugin for it. 

Now to see if I can make the radial progress show completion in the Dashboard for multiple courses усміхаюсь

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

Mihai Bojonca -
Фото Testers

Jerome, thank you for sharing the code.

When question not related, what theme, plugin or settings do you use for the collapsed topics ?

Thank you.

У відповідь на Mihai Bojonca

Re: Beautiful Moodle site > Radial Course Progress > Collapsed Topics formatting

Jerome Di Pietro -

I don't have admin access on the site but I'm pretty sure it's Collapsed Topics:
https://moodle.org/plugins/format_topcoll

I've used CSS on the course page to make changes to the look and colours.

- same principle as before, add a label with a <style> tag  - this time at the top of the content page (in section-0) so that the style definitions take effect *before* the elements are attached to the DOM.

For example, to remove the default curved corners:

<style>/* remove curved corners on collapsed topic format */
.course-content ul.ctopics li.section .content .toggle,
.course-content ul.ctopics li.section .content.sectionhidden {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0 !important;
}</style>


У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress > Collapsed Topics formatting

Gareth J Barnard -
Фото Core developers Фото Particularly helpful Moodlers Фото Plugin developers

Hi all,

It is Collapsed Topics because of the 'ctopics' class in the CSS selector.

Also it is possible to set the border to 0 in the global plugin settings for the format without resorting to custom CSS.

Cheers,

Gareth

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

Jerome Di Pietro -

ps. of course I should have typed "Tested and working on Moodle 2.8", in my original post !

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

Federica Marra -

Hi Jerome,

your animation is amazing, especially because of all in CSS and without plugins!
I think we might use it in our courses to show progression to our participants.

A question for you however: I saw that in Moodle 2.8 the animation works perfectly (I am using Adaptable as theme).
But we will migrate soon to Moodle 3.0 and in the testing phase the animation looks like not working.

Any idea why?

(screenshot below)


Thanks!

У відповідь на Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

Jerome Di Pietro -

Hi Frederica,

We've got a Moodle 3 upgrade coming up in the summer so it's definitely something I'll be looking into soon! I can't see your attached screenshot but my guess is that version3 has renamed  some of the DOM elements, specifically the completion tick boxes.

In my code the script is looking for these tick boxes as 'input[name=completionstate]' (input elements with the name 'completionstate') This might have changed in 3.0. You could try uncommenting the console.log debug messages in the code to see what's being picked up, i.e. if any of your completion tick boxes are being counted. If not, then the dial won't animate as it will remain at zero.

I can't off-hand see any real reason why the code for the css animation itself would stop working, but I'd have to try it out on an actual installation.


Hope that helps a little. I'll let you know more once I get my hands on our own testing server усміхаюсь

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

Federica Marra -

Hi Jerome,

thanks very much for your quick reply and great news! усміхаюсь
Sorry for the screenshot, the drag and drop didn't work.. Please see it below.

The problem is with the entire circle in CSS more than the animation of progression.


I am not a big expert of CSS and I don't have access to our moodle server. I will try to play around with your code to see where the problem might be..
This behavior sounds a bit weird to me as well but I am pasting the same code (your CSS) in the same theme (Adaptable), the only difference is the moodle version.

У відповідь на Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

Jerome Di Pietro -

HI again. 

That's just printing out the contents of the percentages div (the one with the 'numbers class, which is set to to be hidden by the css).

I wonder if Moodle 3.0 has stricter settings with regards to what can be included within an HTML block? It seems as if it's stripping out the CSS declarations (and possibly also the Javascript?)

This isn't good news as far as my own update goes! Hopefully it's a site system setting that can be tweaked by the administrator, although you mentioned that you don't have access to this...

I must admit I've always been a bit surprised at how much you can add to these HTML blocks and in labels, and so I'm not massively surprised if, for security reasons, the Moodle devs had decided to make things stricter. On our own Moodle, CSS always gets stripped out if using the WYSIWYG editor, but Javascript for some reason remains untouched - which doesn't make sense and surely should be the other way around. But at least if using the plain text input box you can add all sorts of crazy code ( as per this example - including less and jquery within a block is, as I'd said, more than a bit hacky!)


Again, sorry but without access to an installation I can't really trouble shoot this. If you really want, you could send me a copy of the page source code - but I think that will just confirm what seems to be the problem, i.e. the CSS is being stripped out.

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

C Behan -

Hi Jerome, Frederica,


FYI: I'm having the same issue as Frederica on a 2.8 site. I'll let you know if I figure it out.

Catherine

У відповідь на C Behan

Re: Beautiful Moodle site > Radial Course Progress

Jerome Di Pietro -

Thanks for that info. Then my guess is that it is indeed a system setting. 

Frederica, I think your test 3.0 installation just happens to have a slightly different system settings to your 2.8

Catherine I'm assuming that you are pasting into the plain textbox? (not using the WYSIWYG editor)


У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

Federica Marra -
Hi Jerome,

could you give me and advise on the settings to check? (I am site administrator in our Moodle but not server administrator) I tried to look into the HTML settings and in the filters but I can't see any difference by now.

@ Cathrien, if you are pasting in the right editor instead, it might be the same problems I had when copying the code from github.
Be sure you copy all pieces of code: some lines do not appear immediately in Github and you have to make them visible.
If you paste Jerome's code in Notepad ++ you can follow the lines of the code better. To me it worked by removing the comments and the "+"

Hope this might help усміхаюсь
У відповідь на Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

Just H -
У відповідь на Just H

Re: Beautiful Moodle site > Radial Course Progress

Federica Marra -

Hi, thanks for the advice!
However these settings are the same in both websites. сумую

У відповідь на Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

C Behan -

Ferderica, Just H and Jerome,


Thank you for your suggestions. I removed the comments as Ferderica suggested and like magic it worked! 


I also tested it out on my local install of 3.0 and it displayed there too, but haven't yet had a chance to test it out fully.


Just to be clear for others, I had to make my text editor the 'Plain Text' one in my preferences, and then, when editing the block, choose HTML from the dropdown list. I am attaching the 'commentless' file for others here if they want to use it.


Jerome, thank you for sharing this - it's great.

У відповідь на Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

C Behan -

Hi Frederica,


Thanks again for the advice and effectively fixing my problem. 

However just to point out,  you don't need to add the code from github - the styling is all included in Jerome's html file. 


Catherine

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress > Update

Jerome Di Pietro -

For those of you foolhardy enough to have given it a go, or like me, desperate enough to have to implement this kind of hack...

Having now used this code in a few courses, I've found that my first version only works for self-completion tickboxes (i.e. where completion is set by the student themselves).

Where completion is entirely driven by automatic criteria (such as grades, item view or participation) I've found that moodle doesn't use inputs to display the tickboxes. Instead images are used depending on completion state (completed pass, completed fail, etc.).


I've attached an update of the script to handle both completion types. (Two versions, with and without code comments as I gather that some of you have found inline comments break the script on your installations) 

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress > Update

Richard Oelmann -
Фото Core developers Фото Particularly helpful Moodlers Фото Plugin developers Фото Testers

Hi Jerome,

I adapted your previous work for Pioneer and Flexibase themes and did it in such a way so its using the database record of completion and that will recognise all completions not just the self-ticked ones.

Also adapted it for a radial display of course grades.

That enabled Chris (Pioneer) and myself to add your ideas into the theme header, rather than as a block.

Thanks for the great work!

Richard

У відповідь на Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress > Update

Federica Marra -

Hi Jermone,

thanks a lot for updating the code and the checkings. I think we had problems because we use only automatic criteria for the completion of resources, therefore the old code was giving problems.

I tested the new code on Moodle 2.8+ and it works perfectly!

У відповідь на Thomas Bell

Re: Beautiful Moodle site

Sebastian Zapata -

Thomas! I'm am actually working on our university Moodle, and we are planning to make a complete redesign of it (like yours).

I wonder how many pleople did you lead and their respective professional skills to make this beautiful design. How much time did that development take? 

Thanks for you help. Regards!


У відповідь на Frankie Kam

Re: Beautiful Moodle site

Thomas Bell -

No core hacks indeed, but plenty of work done with the following plugin types:

  • auth
  • theme
  • course formats
  • blocks
  • availability restrictions
  • local.. 
У відповідь на Thomas Bell

Re: Beautiful Moodle site

Anant Sahni -

Hi Thomas,

By now, you must have already got loads of appreciation of your work. !!

Its really awesome.


We are also trying our bit to Modify moodle. Wanted some heads-up in terms of which theme/Course Formats did you modify to reach that effect.

Any other pointers/tips would be really helpful.


Thanks & Regards

Anant Sahni

У відповідь на Frankie Kam

Re: Beautiful Moodle site

Paul Rettey -

It was great to see the team here at Floream bring this site to life. Great direction and great structure,

У відповідь на Tim Hunt

Re: Beautiful Moodle site

David Dunn -

That's an inspiring example. Another one that I've been impressed with is https://elearning.elevatehealth.eu

The developers offer a sneak-peek via a demo course that was presented last year at a competition of Ed-tech projects at Dutch universities. You can log in using

surfchallenge

Elevate@2014

The design is very user-friendly and bears close resemblance to other customized online platforms, with the simple step progression, timing and discussions highlighted.

One feature I particularly liked was the teacher dashboard, which can be viewed in slide 39 of the Elevate presentation at the Surf Challenge.


У відповідь на David Dunn

Re: Beautiful Moodle site

Derek Chirnside -

David, I have the same question as Mike.

-Derek

У відповідь на Tim Hunt

Re: Beautiful Moodle site

Melanie Dillmon -

I've been wanting to beautify my company's Moodle site since I started working with it!! How might I go about doing this?

У відповідь на Tim Hunt

Re: Beautiful Moodle site

Michael Milette -
Фото Core developers Фото Documentation writers Фото Particularly helpful Moodlers Фото Plugin developers Фото Testers Фото Translators

There are some really nice looking Moodle site out there. 

Here is a different looking Moodle theme that I did for the Government of Canada just over a couple of years ago. The site is fully bilingual (English/French) and WCAG 2.0 Level AA compliant:

Screenshot of the publichealth.gc.ca/training Moodle site.

Visit the site at: https://training-formation.phac-aspc.gc.ca/

Best regards,

      Michael Milete