#CSS3 transforms to improve the #moodle feedback activity

The Moodle feedback activity is useful in so many ways and we use it both in academic and business areas inside the college.  Unfortunately since Moodle 2 they made it very difficult to allow anonymous guest users to complete them, so we still use our old 1.9 install for public surveys.

We recently started using it across a whole faculty, so several hundred students had to use it.  When I showed a colleague she instantly commented on how unattractive it was so I decided to improve it slightly by modernising the CSS.  I added an animated background colour and glow on the text boxes, with subtle rounded corners.

Here is the CSS:-

.feedback_items input, .feedback_items textarea{
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;}


.feedback_items input:focus, .feedback_items textarea:focus {
background-color: #EFF;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

Posted in Code, Moodle | Leave a comment

#CSS3 Transforms to improve the moodle quiz

The basic styling of Moodle has definitely moved on since the days of 1.9, with SVG icons and some CSS rollovers on course page resources. However, the individual activities still lag behind considerably with quizzes, WIKIs and forums still looking pretty much the same as they always have. With quizzes being used much more frequently now I decided to have a look to see if I could make them look slightly more appealing, without having to add images to individual questions.
Looking at how Smartphone apps behave now and the ease of implementing some CSS3 transitions I decided to add an animated glow and increase in text size on rollover and selection of multiple choice answers. At the same time I added very small rounded corners to various elements.
This is the code I have so far (it needs Opera specific transforms etc to work everywhere, but hardly any of our students use it):-

.que input, .que textarea, .que .answer div{
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;}

.que .content input:focus, .que .content textarea:focus+label, .que .content input label:focus {
outline:none;
background-color: #EFF;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

.que .content .answer div:hover{box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
font-weight: bold; }
.que .content .answer div{
margin-bottom: 6px;
}

.que .formulation{
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Posted in Code, Moodle | Leave a comment

Adding Custom #CSS to Moodle

One of the underused aspects of Moodle is the ability to add custom CSS to themes without having to edit the theme files on the server.  On our site I have completely reskinned “formal white” to reflect the main corporate website without having to touch the server (although I do manually back up the CSS into a text file).  Another advantage of this is that it allows you to test CSS changes quickly and without switching on theme designer mode.

I recently gave a colleague some of my CSS, and it was only after a while that I realised they were unaware of this capability, so this is just a quick walk through.

All of the custom CSS is applied on a theme by theme basis, so firstly you need to find which theme you are currently using.  To find this find the theme selector page under:-

Site administration > Appearance > Themes > Theme selector

Once you know your default theme you need to find it in the list of themes in the site admin menu and click on it.  At the bottom of all of the theme options there is a large text box where you can paste or hand code your CSS.  As soon as you hit the save button your CSS changes will be active!

Posted in Moodle | Leave a comment

OFSTED reports and #edtech innovation in FE. #ukfechat

This is going to be a very short post, partly in response to the recent FELTAG report that makes many suggestions about improving the uptake of edtech led curriculum innovation in UK further and adult education.  The FELTAG report has been authored by organisations and individuals across all facets of the sector, including OFSTED.

The report makes a pretty clear point that OFSTED, along with the other regulatory mechanisms, has prevented FE from properly investigating efficiency improvements.  I would suggest that they may even have caused organisations to go backwards.

Here are three colleges which have all experimented with the replacement of a certain percentage of face-to-face delivery, and links to OFSTED reports that make no explicit mention of this fact!

Thanet College (Now East Kent College) OFSTED Report

Kingston College OFSTED Report (Here is a related link to their Curriculum KUBE strategy resources)

Worcester College OFSTED Report (Here is Peter Kilcoyne talking about their approach at a Moodlemoot on Youtube)

Posted in eLearning Strategy | Leave a comment

(Really) Essential App for #iPaded. Video compressor

I don’t have that much to do with iPads. I think that they are pretty transformative as themselves, and don’t need much exploration by ‘experts’.  However, I occasionally come across some aspects of them that I find totally bizarre.  The case in point is the complete lack of built in options for controlling the quality of video capture.  A teacher captured a range of short clips, without a great deal of action, but some still were a quarter of a gigabyte for less than 2 minutes!  A few minutes research showed that there was no way to do anything about this without an app!

OK, so Apps are often free and easy to install, and Apple like to keep their interfaces clutter free, but a High, Medium and Low slider wouldn’t take much space.

Anyway, to end the very small rant, I found this app, Video Compressor, for free.  We got it downloaded and tested, and were really pleasantly surprised by both the speed and the reduction in size.  So, if you want to do anything much with video off the iPad (and you’re missing out if you don’t), it really is an essential app!

Posted in Mobile Learning | 1 Comment

Free SCORM #eLearning Authoring for Diagrams and Picture Dicts

You can download my  scorm compatible Picture Dictionary authoring tool for free here.  Parapal Hotspots allows you to take any jpeg image and add interactive regions so students can learn new terms and then test themselves.

The software works on Windows XP to Windows 8. 

Parapal Hotspots 2014

Download134 downloads

Posted in edtech | 2 Comments

Progress Bar, an Essential Plugin for easy tracking

I missed this Plugin for a long time, mainly because for many years it was difficult getting any teachers involved in the systematic use of quizzes which is where this works best.  Now we have a few areas that totally understand that for their vocational students, studying for multiple choice tests, practice is one of the best ways of learning.

The progress bar provides an incredibly simple graphic view to students of what they have achieved and what they still need to do.  Each block represents an activity (SCORM, Assignments etc also work) and it turns green when students have completed them.

I have used this with some very busy teachers who are only just getting into Moodle and needed to make it totally foolproof.  I opened up the progress bar report and sorted it by progress, so the highest performing students appeared at the top.  I then copied the URL and added it directly onto the main section of the course, clearly labelled but hidden to students.  With a single click the teachers were able to see exactly who was ready to take the exam, and those who needed a little more support.  The link should be similar to that below.

http://moodle.mysite.co.uk/blocks/progress/overview.php?id=7537&courseid=254&tsort=progress

Here is a Youtube demo of the progress bar.  Download the plugin here, https://moodle.org/plugins/view.php?plugin=block_progress

 

Posted in edtech, Moodle | 1 Comment

2 Simple Online Badge Generators for making #Openbadges

We are trying to encourage more staff to start using Badges in their Moodle courses to motivate students and provide some friendly competition.  Although I love any opportunity to use Photoshop to make something interesting, I know that it’s not really very sustainable.  Luckily there are lots of free services for making attractive badges  easily and quickly.

The first is very simple, from webestools.  It allows you to choose from some simple templates such as stars and shields in different colours.  Then you simply choose the font, text content and angle.  Then you just click “Preview”, adjust if needed and then click on the download link to save it.

 

The obvious difference with the second one, 3d Badge Maker, is the significantly larger size (although you can resize it) and the ability to upload an image to be incorporated into the badge.  You have to go through several stages to make the badge, but it does have proper layers so you can drag your text and images into the right place.  Although it initially seems that you have to use Facebook or Google to login and get the image, with obvious privacy issues, it is possible to click on a direct download link to get your image.

If you found this post interesting, you should also look at my post on using badges.

Posted in Moodle, Web 2.0 | 1 Comment

How to Install the Moodle Soundcloud filter

In UK FE Music Depts do seem to have an above interest in the use of eLearning but we have had trouble allowing them to use more sophisticated methods of interaction.  Recent, and necessary, changes to Moodle means that it is no longer easily possible to give students access to embed media, particularly the popular Soundcloud service.

Looking for a solution, I found the Soundcloud filter plugin, designed to turn soundcloud links into embedded players, and installed it on our test server.  It simply did nothing.  Checked all the settings and searched the forums and still nothing:-(

As filters are quite simple I looked into the core code and saw that “http” was hardcoded as the filter, but now Soundcloud is using “https”.  Having changed that, it started to do something.  Unfortunately the something was an oauth2 error, asking for a consumer secret and key. Again checked moodle.org, the settings and the read me file but couldn’t find anywhere to put a them.  Looked at Google oauth2 etc etc, anyway you get the idea, I couldn’t find the answer!

Eventually tried to install the associated Soundcloud Repository plugin and enabled it, and it does prompt you for a Soundcloud key and secret.  To get these I signed up for a free Soundcloud account and then used Google to search for how to set up the Soundcloud oauth2 keys.  To get these you have to set up a new App on Soundcloud to get the keys, which you put into Moodle and save.  Then Moodle gives you a callback url that you paste back into Soundcloud to complete the circuit.

So now it all works!  Students can simply paste the URL of their Soundcloud file into a Moodle forum and it will embed the file AND the interactive timeline comments that I really want without having to leave the system.  Fingers crossed it will get students doing more than just uploading their assignments!

Posted in Moodle, Web 2.0 | 1 Comment

Simple Category Themes in Moodle

When we upgraded to Moodle 2.5 last Summer we decided to give the site a more corporate theme, very similar to the college website and also stop teachers having access to course themes.  Rather than developing a new theme from one of the simpler, standard themes I worked out that the new “Additional CSS” theme options it would be possible to easily modify the “Formal White” theme (using this method it is essential to keep a copy of the CSS in a separate document as a backup).

As I started working with the theme I noticed the wide range of body classes,  but particularly the category-1, category-2 etc classes.  I thought that I could easily personalise each curriculum area and give it its own identity.  We have a nice prospectus with clear, bold colours for each curriculum area and silhouettes so that made it easy to choose colours and styles.  To completely change the appearance of each category required just 2 lines of css for each one, plus an extra line for a category motif.  The simplest way to give a slight 3d gradient on the menu bars was to create a semi transparent png as an overlay.

The code to create this was:

.category-13 .navbar, .category-25 .navbar{background-image:url(“http://moodle.mysite.ac.uk/images/bkg_menu_middle.png”); background-color: #A7c209;}
.category-13 .block .header .title, .category-25 .block .header .title{background-image:url(“http://moodle.mysite.ac.uk/images/bkg_menu_middle.png”); background-color: #B6D31A;}
.category-13 #page #page-header #headerlogo:before{content: url(“http://moodle.mysite.ac.uk/images/bg1.gif”);}

Posted in Moodle | 1 Comment