Teaching with Moodle

Embed html text 'game'

 
Picture of Alex Vanden Bosch
Embed html text 'game'
 

I was wondering if there is some way to create a very simple 'game' where the text is blurred but as you hover over it it appears. An example is here:

http://www.pcadvisor.co.uk/test-centre/mobile-phone/20-best-power-banks-2016-2017-uk-whats-best-power-bank-3534490/

The grey table listing the various specs becomes blurry as you hover a mouse over the text. I just want to do the opposite of that.

 
Average of ratings: -
Picture of Matthias Giger
Re: Embed html text 'game'
 

You can put a text into a <span> to blur it via css and than use a :hover to unblur it.

see: http://codepen.io/mattgig/pen/NbwzVY

 
Average of ratings: Useful (3)
Picture of Alex Vanden Bosch
Re: Embed html text 'game'
 

Amazing, thanks Matthias! That is brilliant and exactly what I need. Where exactly does the CSS need to be placed in Moodle for a 'page' activity?

 
Average of ratings: -
Picture of Matthias Giger
Re: Embed html text 'game'
 

Sorry, I was rather busy the last few weeks and didn't catch your question.

The best way to do it is to place your CSS formating in "site administration" > "appearance" > "themes" > your theme in the "custom css section".

(Depending on the theme you use, this option might not be available.)

After that you can put the <span class="..."> element in any page you create.

 
Average of ratings: -
Picture of Alex Vanden Bosch
Re: Embed html text 'game'
 
Anyone else know how to implement Matthias' code?
 
Average of ratings: -
Matt Bury
Re: Embed html text 'game'
Group Particularly helpful MoodlersGroup Plugin developers

Hi Alex,

Normally, if you try to include CSS code inline, Moodle will filter it out so it won't work.

If your theme supports it, you can include the CSS through that (you'll need administrator privileges). Then you can simply use the class="blur" attribute on any HTML element anywhere in your site.

I hope this helps smile

 
Average of ratings: -
Picture of Alex Vanden Bosch
Re: Embed html text 'game'
 

Thanks Matt!

I initially thought you had to add CSS through FTP or something, and I don't have much access on this particular Moodle site, but then realised you could add custom CSS via the Moodle theme customisation options! 

I've got it all working now and its brilliant - The students love it smile 

 
Average of ratings: -
Matt Bury
Re: Embed html text 'game'
Group Particularly helpful MoodlersGroup Plugin developers

Great! Glad to hear it's working for you smile

 
Average of ratings: -