← blogs.sussex.ac.uk

E-learning team presentation at Moodle Moot Dublin 2013

In case our Moodlemoot Dublin abstract has left you salivating but you have found that our presentation wasn’t recorded, we thought we’d give a quick overview.

Sussex University is a research-led Higher Education institution using a customised Moodle install called Study Direct. We have 1,500 editing tutors, 15,000 students, 2,099 2012/13 Moodle courses  and 13,500 unique hits per day.

The e-learning team is a team of five including two developers, one front line support officer, one teaching support officer and one manager. We don’t have any departmental learning technologists like many institutions.

What does that mean?

One, we cannot train all our tutors to make beautiful sites

Two, before we made changes to our interface, many of our hard working, conscientious tutors made Moodle courses which were long lists of links (#listofdeath, c.f. #scrollofdeath). The courses our tutors created gave our students a poor experience and left tutors, who had tried their best, unsatisfied and demotivated.

What if our tutors made BBC web pages?

Would BBC pages stop looking like this?

And start looking like this?

We decided we couldn’t rely on training to ensure that our tutors would create rich learning resources for our students. We needed something cleverer.

Implicit and explicit calls to action

We started to look at other content creation tools.


People using word processor applications would struggle to create a learning resource that looked like a Moodle course.


People using spreadsheet applications would struggle to create anything that wasn’t a spreadsheet.

Presentation software has explicit calls to action such as “Click to add a title” which help people create understandable presentations.

Blog editors have explicit and implicit calls to action such as title input boxes and text editors which make it obvious how to create understandable web pages with text and images.

We concluded that an interface has the power to explicitly influence the shape, design and type of content the user creates.

Moodle calls to action

So what does the Moodle interface look like and what are the calls to action on the busy academic tutor when he or she come to build a Moodle course?

Well, if they work out to “Turn editing on” this is what they get:

Hey! The primary call to action is to add a resource or activity. Yes, they could choose to add a label but what is a label anyway? Or they could add a summary to their section but how do you do that? Can you guess?

Should we be surprised that our tutors created lists of resources and activities without context?

Adding calls to action to Moodle

What would happen then if we added the calls to action that helped our tutors to create engaging learning courses. What might that look like?

Well, this is what our Moodle install looks like:

What are the primary calls to action on this page? If I were a tutor what would I do first to create a learning course for my students?

I see that there is an implicit call to add a section title and section content. I think I’d start with that. What about you?

And guess what. When I am adding the title and content I am adding contextual online learning material and not simply adding to the “list of death”. Nice start!

What then?

The bright green colours give me a clear steer.

It is asking me to add a site image. That sounds nice. I can add a visual representation of my course much like the cover of a book.

I can also see how I can add another section.

The “add activities” and “add resources” are large green calls to action at the bottom. They boldly indicate how I can add interactive content and detailed materials that I would like my students to drill down into.

Ah and then there is a dashboard. That is where I do the administrative gubbins for my course.

So what has this meant for our users?

We have found that, in many cases, these prominent calls to action have changed the habits of our tutors. The courses they create are more similar to the first image of the BBC than the second – more similar to content people are used to seeing on the internet.

We are seeing an increasing number of tutors create engaging online learning sites with content and context.

We think our changes have substantially improved the tutors’ workflow and our students’ online learning experience.

We have made other changes, briefly covered in our presentation, such as ‘pages’ opening in an ‘accordion style’ so this content always has context, but I’ll leave these for another post.

Future

We know we haven’t got it right yet and we have a long way to go, but we have great ideas.

For example, should the resources and activities go directly into the web editor?

We are not sure, but if they should it might work like this:

Or even like this:

Despite having loads of good ideas we are faced with the same dilemma as all developers using Moodle – whether to improve the tutors’ and students’ experience of our VLE/LMS or stick with the Moodle core. We are walking a tight line, but we want Moodle to become something like our Moodle install – in fact something better.

We know if Moodle is to continue to be successful it will do this – it is just a question of time.

As a small development team we can’t contribute much code ourselves, but these blog posts hope to generate ideas and help steer its direction.

Finally, I’d like to extend a big thank you to the organisers of MoodleMoot Dublin #mootie13.

Turnitin user group meeting, 15 February 2013 part 1 – support, resources and product releases

This Turnitin user group meeting came at an important time for the Learning systems team, as we think about how best to support the goals of our institution and our users with tools for managing assessments.

A lot was covered in the discussions, but I’m just going to pick out the areas that were particularly relevant for us.

Support issues – challenges and how they will be addressed

Tom Rees (Product Specialist Lead in Newcastle) talked about the challenges that the support team had faced over the last year, caused by unpredicted high growth in the user base. Support hours based in the UK were being extended to 7.00 to 17.30 Mon-Fri with some weekend cover too. A nasty reminder that using Turnitin can involve support issues outside of the control of your own institution, and that this needs to be factored in to any policy.

There was also a detailed conversation about how Turnitin should communicate information about specific problems. The general approach is to offer a number of channels so that institutions can pick what suits them.

https://twitter.com/TurnitinStatus (option to enable mobile alerts)

Strategy, implementation and training resources

Strategy, policy and procedures

Helpful resources available at http://www.plagiarismadvice.org/

Using Grademark

Grademark showing the quickmarks tool being used to annotate student work

Grademark online tutorial: http://www.turnitin.com/demo/dv

The tutorial is set within the Turnitin document viewer and invites the trainee to carry out a series of tasks that enable them to use Grademark features in a real marking exercise. For Sussex, where we are keen to give our lecturers and senior managers a flavour of using Grademark, this could provide a very easy, low stakes way of doing it.

Marking schemas in Grademark

One of Grademark’s strengths is that it makes it relatively easy for marking schemas (Grademark calls them rubrics) to be shared with appropriate staff. For large class sizes  where a number of faculty and associate tutors will be marking work, the use of schemas can help with maintaining consistency. The US Common Core State Standards (CCSS) initiative has authored some rubrics for assessment of maths and writing skills at levels K9-12 (translation – secondary school age), and Turnitin has built these into Grademark for its US market. Some of these have been made available for UK institutions. They aren’t directly relevant, but they give a good idea of how to implement a coherent rubric.

ACTION: embed into Grademark on test platform for demo purposes.

Turnitin – new developments

Will Murray, VP of International at Turnitin, presented the product development news.

Keeping up to date with information about product

https://twitter.com/TurnitinProduct/

Quarterly product talks from Tabitha Edwards (Product Manager):http://pages.turnitin.com/talk.html

(next session at time of writing is 19th March 2013)

Document viewer memory leaks – March 2013

Will confirmed that there had been some real issues with the document viewer in Turnitin (this is the screen that you use to view the Turnitin report or to mark within Grademark), including some memory leaks that had been particularly challenging.

Engineering update

Will acknowledged that the Turnitin platform had creaked at times, and had caused significant inconvenience to users with assessment deadlines.

Christopher Minson had been appointed as  VP for Engineering, with a remit to make considerable improvements to the QA process. “We are going to start testing software before releasing it.”

iPad app for Grademark – May 2013

This was probably the announcement that generated the most interest in the room, judging by the tweets at any rate.

The iPad app is due to be released in May 2013. The date at the meeting for it being publically available within the App Store was 3 May 2013, but the circulated notes from the meeting indicated that this had slipped, but not what the new target date was.

It uses “class based authentication” – in other words, the tutor needs to get a code for the assessment they wish to mark from their usual Turnitin grading screen. They then enter this code into the iPad app in order to download the student work and associated materials including marking schemas.

The iPad app will make it easy to see which student work has been marked and which has not.

From the iPad app, the tutor will be able to view the Originality report, and see which text in the student’s work matched sources within the TII database.

The app will allow tutors to add Grademark’s quickmarks – the pre-prepared marking comments. It also supports the use of marking schemas.

The great news is that this will provide an offline tool for marking using Grademark on an iPad.

Is this going to be our tutors’ preferred marking style?

The future of marking with grademark? A photo by tö

Interestingly though, Will confirmed that there were no current plans to produce an offline version of Grademark for laptops / desktops.

There is also no current plan to release an Android app.

Document viewer version 2 – Q3 2013

This project is due to run for the next 6 months, based in Newcastle. The aim is the rewrite the document viewer so that it uses the HTML5 Canvas element, and to improve the speed and fluidity of the viewer.

Support for multiple markers in Grademark – Q4 2013

This sounds like a useful feature that brings in the idea of review layers. Review layers enable multiple markers to work independently. The initial release will not implement privacy, so all markers will be able to view all layers, but further releases will enable this.

Changes to marking will be tracked, and an audit tool provided.

Admin tools – Q4 2013

As we move to supporting more complex setups in Turnitin than we do at present, the new admin tools are likely to be extremely useful. The tools are basic admin tools that really should have been there all along. When we are using Turnitin more widely across the institution, we will need to factor in the costs of additional support for staff and students. We will need Turnitin admins who can bridge the gap from moodle into Turnitin and be able to confidently manage Turnitin assessments within the Turnitin interface when necessary. These tools should help with that.

Improving Moodle import. Part 3: The application

We have developed a new import tool for importing materials from one course to another. The advantages over the Moodle import are:

  • it is easy to use
  • it is reliable
  • it is fast
  • it only imports questions used in the quiz while maintaining question category structures that are used
  • it shares many similarities with our custom rollover tool
  • clicks to import materials is a minimum of 3 compared to the standard moodle which has a minimum of 6
  • it imports embedded files without bringing all files (unlike Moodle 1.9 import)

Technical stuff

Anyone with experience of Moodle’s import, backup and restore features will know that reliability is an ongoing problem. If you are in any doubt try following the backup and restore discussions.

Further to this it is still a bit clunky to use. For example, it takes too many clicks, it brings all questions in quizzes whether they are used or not in the quiz you are importing (see bug tracker issue) and, in our version, it does not bring embedded files or images.

Our import does not rely on the backup and restore functionality. This means it does not create a temporary zip of an xml representation of the course and associated files which is useful when transferring courses between Moodle installs and keeping course-based backup, but inefficient when importing materials between courses within a Moodle install. Instead it copies records within tables and data files. As  a result our import is fast and reliable where, in our experience, the standard Moodle import hasn’t been.

Please feel free to ask any questions!

Brighton UX conference 2012

I am relatively new to user experience. My colleague, Stuart, is a keen advocate and a lot of what he says makes undeniable sense. I have therefore started to dip my toe into this new world. I began by reading The Elements of User Experience by Jesse James Garrett. His name made him sound like a cowboy. Not a cowboy as in someone who does building work badly, but a cowboy as in Henry Fonda and this was good enough for me. The book was a good read and gave practical advice for staging and managing the design and implementation of a product; any product but particularly a web site. It included easily accessible process management principles which resonated with my Master’s in software management I completed years ago.

Last November I had my second toe dipping into UX when I attended the Brighton UX conference, and it was an absolute hit with me. It confirmed what I thought. UX covers a lot of the bases of successful software design, implementation and management and is easily accessible.

The first talk, “The web that wasn’t” was given by Alex Wright. This talk gave an overview of Alex’s thought on some technological ideas that got left behind. He premised the conference with three philosophical ideas.

  • First, that a software developer engages with problems which require them to make novel decisions to reach novel solutions. Arguably from a subjectivist epistemology our decisions are always novel but perhaps those made by software developers can be more earth shattering
  • A second, that history does not plot a trajectory of human progress, it simply plots time when things happened and those things things often affect other things
  • And a third, that our society is based on planned obsolescence. As human logic dictates when you shoot you shouldn’t shoot yourself in the foot, so capitalist logic dictates that when you build something to sell you shouldn’t build it to last
YouTube Preview Image

Ben Bashford gave a talk on future shock. He argued that technology was moving so fast that it is scary to many of us. And that as designers of new technologies we need to make our systems less scary by giving them human traits. Ben proposed we design technology with the traits which we would like our users to think of it, giving it emotion and character.

YouTube Preview Image

Karl Fast talked about models of learning. He argued in favour of theories of learning that describe the importance of tools and environment to our learning, such as embodied cognition, distributed cognition and activity theory (a personal favourite I am using in my doctorate in Education).

He gave a number of examples to make his point:

  • Its easier to make words in scrabble when we move the letters around to make words
  • Its easier to do a jigsaw puzzle than to think about it
  • Experienced and capable Tetris players over rotate the pieces more than those inexperienced and poor at it. Over-rotation is a pragmatic and epistemic action that is faster, simpler and less prone to error
  • Brainstorming is easier when using sticky notes than retaining the information in our heads
  • When we talk we use our hands. Our hands help express things. This is independent of the person we are talking to. We do it on the phone, we do it when talking with the blind and even blind people do it. The hands are a tool which help us think

He made the point that a phone on its own is useless but a phone in someone’s hand is powerful. Turn this on its head and a person with a phone is more powerful than one without.

We wouldn’t get rid of iPhone, iPad, Facebook or youtube – its the infrastructure for much of our knowledge; information is cheap – understanding is expensive.

YouTube Preview Image

Other talks included Mark Bachler, games designer, who discussed issues that came up when designing natural user interfaces such as the Kinect interface and Guy Smith-Ferrier gave a very amusing talk on neuro headsets which could literally read your brain waves.

YouTube Preview Image YouTube Preview Image

Abstract accepted: Moodlemoot Ireland 2013

Our abstract for Moodle Moot Dublin has been accepted. Woohoo! Here is the abstract we submitted. See you there!

Interface design for rich, beautiful and engaging Moodle courses

Most of our Moodle courses used to look to like messy file repositories. The students’ experience of using them was usually functional, but rarely pleasurable. The courses largely consisted of files for the students to download and open in non-web based, proprietary applications such as MS Word or PowerPoint.

We relatively quickly realised our tutors weren’t doing this by chance. Our tutors are not web designers. They do what the technology they are using encourages them to do. In the case of our Moodle this was to upload resources one after the other with the minimum of context. This usually resulted in the students’ learning sites looking like their tutors’ file directories.

In order to counter this we made a concerted effort to encourage tutors to create rich, beautiful and engaging learning resources for their students. We did not do this by coercion or strict training programmes. We made focused modifications to the Moodle editing interface which changed the tutors’ workflow and enticed them to add inline text, images and videos. This improved the look and feel of the sites and made them easier to use by their students.

This, combined with a focused communications strategy, has made a considerable difference to the learning sites our students are using today. To find out more come to our presentation!!

Improving Moodle import. Part 2: testing

The e-learning team has a long term goal of building our testing framework at the same time as writing the specification of a project – something like a test-driven development environment . As a result of being a small team and the way in which some of our projects grow organically this isn’t always possible.

The Sussex import grew out of a proof concept project that wanted to establish that we could import materials between courses without using the expensive backup functionality. It only became a project when we realised it wasn’t only possible it was immanently sensible. As a result we needed to build in our testing framework after we had written the import feature.

We wanted the testing framework to expose changes to the database contents so we were confident the feature wasn’t compromising data integrity. This would compliment our usual testing.

We looked into the inbuilt Moodle unit tests, which in our 1.9 version of Moodle was based on SimpleTest. We thought that the implementation of SimpleTest in Moodle was potentially powerful because it could run multiple tests before a project went live which establish that the changes haven’t broken the functions being tested.

However, we ultimately decided that SimpleTest was unsuitable in this case because the import creates entities in the database. Running this for each Moodle module every time we wanted to run a unit test would be too labour intensive.

Instead we decided to write our own unit tests (loosely described) which logged the results of the tests in the browser console.

The tests would collect data before and after the import and then compare the data returned. The comparison would give the tested pass and fail results.

The comparison looked at a number of data components including:

Course module count

The course module count established that the course modules in the source course stayed the same and the course modules in the target course incremented by one for each asset imported.

Section count

The section count established that the sections in the source course stayed the same and, if the section of the imported asset existed in the target course, the sections in the target course also stayed the same. And, if the section of the imported asset didn’t exist in the target course, the sections in the target course incremented by one.

Assets count

The assets (module) count established that the assets in the source course stayed the same and the assets in the target course incremented by one for each asset imported.

Asset specifics

The asset specifics tested that modules had been correctly copied. The most complicated module was the quiz. The test established that the source course quiz, quiz questions, question answers and question categories all stayed the same and that a new target course quiz is created, with identical quiz questions and answers put into a new category associated with the course.

An example of how the test data helped

The comparison data would return like this in the browser console:

In the case above it can be seen that there is a problem in the target sections. The details were also stored in the console log so that the programmer could look into the details and see what actually happened.

The details showed that the import did not increment the number of assets added to the section.

The unit tests proved a useful addition to the project allowing us to feel more secure in the fact that the import was not compromising data integrity.

We hope this blog detailing our approach will be useful to others.

As always, your comments welcome!

Better user experience; better learning experience?

In order for students to have great learning experiences, we believe that students, and the people who teach and support them, need to have great user experiences.

That’s been at the heart of the work that we’ve been doing since 2010.

John and I are in Manchester at ALT-C 2012, where we’ve presented a paper exploring this issue.

Better user experience, better learning experience? ALT-C 2012 paper

Moodle usability – interviews from 2010 (#1)

In 2010, Graham MacAllister,  founder of  Player Research, interviewed a number of staff members here at Sussex and videoed them interacting with our old version of Moodle.

These videos – and Graham’s subsequent report – were very helpful to us in deciding on the priorities and approaches to adopt in taking forward the work that we’ve done with Moodle since then.

We can’t post the videos because we didn’t request appropriate permissions from the interviewees, but here is a totally anonymous transcript of a short section of one of the interviews.

This is a screen shot of the Moodle site from 2010 they are looking at:

Interviewer: Imagine if we suddenly decide that it would be much better if it was in 10 sections? How would you go about changing it to 10 sections?

[4 second pause]

Interviewer: If I can ask you,  just to talk out loud about the things you’re looking for or what you would expect.

Staff member:  [replies straight away] Well, we need something to add onto here [with her mouse she is indicating the final section in the 5 sections visible on the screen - marked with a green star on the screenshot] …. but i’m not quite sure how you’d do that [2 second pause]

[starts to look at other parts of the screen – goes to the Site menu – the top left hand block]

Site menu [reads and runs mouse along the link] “Topic 1” [moves mouse across the Section 0 which is parallel to where it says topic 1]

Is that Topic 1? [shakes head][6 second pause in which she shakes head, looks around the page, ]

I really don’t know[now sliding mouse into the sussex library resources block]

[starts reading the list within this block] “Reading lists” [confidently, this is something she recognizes, then tailing off again]

No  [shakes head, looks to bottom of screen and says quietly] I don’t know let’s just go down

[Scrolls a bit further down the page, sighs, sits back in chair in a gesture of defeat] Sorry.

Interviewer: What would you like to  see?

Staff member:  [much more quickly and confidently] Um a drop down menu. [Moves mouse to the Site menu]

Or – [interrupts herself, sounds less confident, moves mouse to Site menu] This is a site menu ..

Interviewer: Mm [neutral tone]

Staff member:  [sigh] [pause][sits back in chair] I just think it’s completely .. [turns to where the interviewer is sitting] confusing

Improving Moodle import. Part 1: the database schema

The Moodle import feature copies resources and activities (mods) from one to course to another. Unfortunately we found the import process rather unintuitive (although better in 2.3), and we wanted to improve its speed, reliability and ease of use.

We found that the Moodle import is based on the Moodle backup feature. Moodle backups create external representations of courses as a zip. It’s great at keeping packaged archives of Moodle courses, and sharing them. However, incorporating backup into the import process meant packaging mods into temporary zip archives and then unpackaging them again, even though all it really needs to do is copy a mod and associated files.

We found that relying on Moodle’s backup wasn’t the most efficient method.   Our new import isn’t based on the Moodle backup functionality and as a result is faster, more robust and easier to use. Unlike the standard Moodle import tool it is also able to copy files linked from html within mods.

In this first of a trilogy of posts we’ll sketch out the database schema we are copying.

Database schema for generic course modules

The generic database schema for course mods looks like this:

Some of the Moodle mods have no further data associated with them than this. Others only have user generated data which the import doesn’t need to copy.

In our Moodle install mods with no further data associated with them include resources, assignments, chat modules, journals, forums, wikis and labels.

Some of the Moodle mods have subtables associated.

For example the choice mods have an associated table with choice options, the database mods have an associated table with database fields, and the feedback mods have an associated table with feedback items.

The lesson mods have an associated table with lesson pages and these pages have an associated table with lesson answers.

Database schema for glossary modules

The glossary was the only mod where we decided it was important to import user data as these included glossary definitions added by the tutors and a glossary without definitions wouldn’t be worth importing. As a result the database schema was a little more complicated. Glossary mods have associated tables with glossary entries and categories and there is a linking table between entries and categories. Furthermore, entries have an associated table with aliases.

Database schema for quiz modules

By far the most complicated mod was the quiz. The quiz has associated tables quiz feedback and quiz question instances. Quiz question instances joins questions from a Moodle question bank. The questions are in categories which are associated with the quiz itself through the context table.

There are number of questions types all using their own database schema. Most of the question types use the question answers table.

There are a number of question types which randomly pick questions. The random short answer matching (slickly named!) picks any short answer question in the category that is not currently in use to make a matching question by pairing the question and answers of the short answer questions.  The random question will pick any question currently not in use in the quiz that is in the same category or a subcategory.

We hope this approach will be useful to others who have problems with import in moodle.

In the next posts we will talk about the unit testing we did to establish that import was working and finally the Sussex import feature in its working form.

As always, comments very welcome.

Moodle icons

Question : What do you need from an open source cms and icons on the web today?

  • Clean separation of content and decorative elements
  • Icons scalable for different devices
  • Optimisation of icons and markup for page loading times
  • Easy to skin/theme

The moodle roadmap currently contains an issue – Completely new default icon set and graphic design – and that is a rather wonderful thing but i will miss the ye olde moodle icons…..

Moodle icons today

Let’s take a look at the current state of moodle icons. I think we all find standard icons in moodle are rather characterful, and somehow our hearts have grown rather fond of them.

They have a fantastic naive charm but unfortunately to the rest of the world something about them instantly makes moodle look cluttered and dated, no matter how modern the theme you apply is.

The same is also unfortunately true for the markup displaying the icons.

<li class="activity forum modtype_forum" id="module-1772">
<div class="mod-indent">
<a href="#">
<img src="http://demo.moodle.net/theme/image.php?theme=nimble&amp;image=icon&amp;rev=500&amp;component=forum" class="activityicon" alt="Forum">
<span class="instancename">News forum</span>
</a>
</li>

It’s a lot of code, for something relatively trivial. In my screen reader this read out “Forum (from img alt tag)  - News forum (from link text)” .

Editing icons are based on the same model :

<a class="editing_moveright" title="Move right" href="#"><img class="iconsmall" alt="Move right" title="Move right" src="http://demo.moodle.net/theme/image.php?theme=nimble&amp;image=t%2Fright&amp;rev=500"></a>

which was read by my screen reader as “Move right (the a title) – Move right (the img alt) – Move right (the img title)” . I can see what the developer is doing here – using alt tags and title tags for accessibility, but unfortunately not achieving what they want.  Other screen readers might read the title, alt or even nothing. Because there is no actual text in the a link, some screen readers will actually read the link as ‘ ‘ or announce the url address. It’s a well intentioned model that we can examine improving.

Icons on the rest of the web

Let’s think about most web icons. They are mostly what is can be described as ’decorative’. Web standards for accessibility tell us these decorative elements shouldn’t be causing clutter to any users.

Decorative icons don’t need title or alt attributes, the content should always be the text in the actual dom node. Applying this to our code gives us :

<a title="move right" href="#"><img src="http://demo.moodle.net/theme/image.php?theme=nimble&amp;image=t%2Fright&amp;rev=500">Move right</a>

That’s a bit clearer, but we can take it a step further :

<a title='Move right' class='move_right' href="#">Move right</a>

You’ll recognise this approach as those first magic steps to the separation of content and display. There are no erroneous title and alt tags, the simple a href content does most of the work for us as Tim Berners-Lee intended. We are now free to use css to add decorative styles.

.move_right {
text-indent: -3000px;
display:inline-block;
padding-left:16px;
background: transparent url({path to icon}) 0 center no-repeat;
}

One line of css gives us the same as an img tag and src for every move icon on a page. It is a dramatic step towards optimising any site’s performance, while keeping code clean, improving accessibility, maintainability  and  giving us that all important separation of  content from display.

Edit icons as css background-image demo

For activities we can use the same approach:

<li class="activity forum modtype_forum" id="module-1772">
<a href="#">
News forum
</a>
</li>

Activity icons as css background-image demo

Another advantage is that this separation makes it a lot easier for developers to make fantastic themes for a cms.

Fun with html entities as icons

You can also use html entities as decorators to save on http requests and image load time.

Edit html entity as image demo

Our approach at Sussex

There have been a lot of people asking about our EDITING ACTIVITIES, LABELS & RESOURCE blog post, so here’s  basic walk though.

Without changing the core code changing the icons in moodle is currently an interesting challenge. It involves going through folders in your theme and physically replacing icons while keeping to the naming conventions, icon size, icon mime types and folder structure specific to moodle’s guidelines. For us it proved an insurmountable barrier to integration with other systems where we wanted consistent icons cross cms, or dynamic icons for javascript interactions.

At Sussex we wanted to alter our moodle icons by using a web standards approach based on this separation of content from display, optimisation, accessibility in mind and mobile and cross device adaptability – we are still not there yet, but we plan to be soon. We did, unfortunately,  have to implement the changes to core code outlined above to move towards this.

Semantics

First we suppressed all the icons spat out by php in moodle. Second we devised a semantic structure for classes. For resources and activities it follows this pattern :

class="asset {resource or activity} {type} {mime_type}"

This allows you to use css to add icons based on the mime type of a file resource, the resource and/or activity type. It makes the asset itself self describing, the sort of thing that gives a web developer a little glint in their eye when they view source on a webpage (as compared to the sinking feeling of despair you normally get). We could than apply a our png icon set via css, and some sprite icons where appropriate.

Other icon formats

In other parts, such as the drop down arrows above, we used a combination of html entities and svg icons from the noun project. Path dependency was no longer an issue and we are able to use icons internal and external to moodle, in whatever format was most suitable.

For activities we chose a different approach of using text based ‘faux icons’.

It still relies on the semantic self describing markup, but instead of images we use css to create text ‘faux icons’, such as the Quiz and Forum above, with unique text and background colours.

Activity text ‘faux icons’ css demo

Icons on the web today

The landscape for how you create and use icons has really changed. The principles of keeping content and styling separate are still the golden rule, alongside semantic mark up, accessibility and optimisation of page load speeds – some of our four requirements.

The ability of users to view your content on devices with different pixel densities has opened up a requirement for scalable icons such as svg and font icon sets.

Twitter bootstrap font based icon set


Zurb foundation font based icon set

Next time we re-visit our icons at Sussex we will almost certainly be using a font based icon set. Frameworks such as  Twitter bootstrap and Zurb foundation are already providing beautiful font based scalable icons which can be styled with css – as you would any font.

So what can we takeaway for moodle from this blog post?

It would be great to see moodle moving towards the future in its choice of icon format. Perhaps even more importantly to developers is to see moodle move towards web standards of accessibility, semantic markup and separation of content from display.

Be interesting to see what happens and if you feel strongly about this, as always, please contribute to the future of moodle on the forums and tracker.