Beautiful Moodle site

Re: Beautiful Moodle site > Radial Course Progress

by Jerome Di Pietro -
Number of replies: 9

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 smile

Average of ratings: -
In reply to Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

by Federica Marra -

Hi Jerome,

thanks very much for your quick reply and great news! smile
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.

Average of ratings: -
In reply to Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

by 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.

Average of ratings: -
In reply to Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

by 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

Average of ratings: -
In reply to C Behan

Re: Beautiful Moodle site > Radial Course Progress

by 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)


Average of ratings: Cool (1)
In reply to Jerome Di Pietro

Re: Beautiful Moodle site > Radial Course Progress

by 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 smile
Average of ratings: -
In reply to Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

by Just H -

First thing I'd check is "trusted user" settings in Site Policies: https://docs.moodle.org/30/en/Site_policies#Enable_trusted_content

Average of ratings: -
In reply to Just H

Re: Beautiful Moodle site > Radial Course Progress

by Federica Marra -

Hi, thanks for the advice!
However these settings are the same in both websites. sad

Average of ratings: -
In reply to Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

by 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.

Average of ratings: Very cool (2)
In reply to Federica Marra

Re: Beautiful Moodle site > Radial Course Progress

by 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

Average of ratings: -