Skip navigation
All Places > Blackboard Open LMS Community > Blog > 2017 > March



In Moodlerooms 3.1 we introduced Competency Based Education (CBE) and Learning plan components. Here are 3 exciting reasons to be excited about it and an additional overview presentation that can be used freely.


1. Multiple components and configurations

Moodleroms CBE implementation provides flexibility in its components to put in place the CBE strategy that better fits organization's context. e.g. Modelling competency frameworks, creating learning plans templates, importing frameworks and having multiple configuration options.


2. Integration with courses, activities and resources

Learning plans and competencies are designed integrate with other Moodlerooms components such courses, activities and resource. This provides an opportunity to create great learning experiences that are coherent with the CBE strategy.



3. Reviewing mechanisms and roles


Whether it be that you're measuring competency completion from learning experiences on the platform or outside from it, Moodlerooms provides mechanisms to evaluate user proficiency and asses prior learning evidences. There are also automation rules for rating, manual review processes and different reviewing roles that allow work distribution or centralization as needed.



Be sure to check the Competency Based Education in Moodlerooms presentation to get more information about CBE in Moodlerooms.


Are you already using CBE in your initiative or are you planning to use it?


It would be great to hear from your experiences. Let's discuss!

One of the things that we have prided ourselves about Snap in Moodlerooms is the ability to customize the look and feel based on the use of CSS (Cascading Style Sheets). CSS is not something that is easy for just anyone to pick however and we receive questions from clients about wanting to make small changes to Snap without purchasing one of our branding services. While I will be the first to recommend a branding service to a client because it really helps to create a cohesive look for your entire site I also want to give clients ideas to make the own changes.


One simple change that can have a huge impact on the look of Snap for a site, but does require CSS is just changing the background color for the logo and menu bar.  Below is a screenshot of what I am referring to as the logo and menu bar.


This blog post makes some assumptions about the reader. First off I am assuming you have some knowledge of what CSS is. If you do not then I recommend reviewing the W3C’s CSS introduction and tutorial pages. These pages will give you a good introduction to what CSS is and some of the code that will be used in this blog. There isn't going to be a lot of code, as I promised this should be a pretty simple change we are working with background colors, font colors and then the brightness of one icon. Let's dive into the CSS.


To start we need to navigate to Snap's customization area. In order to do this, you must have administrative privileges on your Moodlerooms site. I also recommend that you only attempt these changes on your sandbox Moodlerooms site and not on your production site until you are sure they are working the way you want them to be. To access the Snap administration area Click on the administration cog in the upper right of the main site page then select Appearance > Themes > Snap > Snap.


Scroll to the very bottom of the page and you should see a text field labeled Custom CSS. This is where all of the CSS from the blog post should go. We want to change the background color of the entire bar to something other than white. For this tutorial, I am going to change the color to the default cyan (hex color value #3BCEDB) that we create most Moodlerooms sites with. Below is the CSS code to change the background color:


#mr-nav {

  background-color: #3bcedb;



Copy this text above and paste it into the Custom CSS field. The result should be similar to what is shown in the screenshot below:



The CSS code #mr-nav refers to the HTML div tag that has the id mr-nav. The background color is as you would expect to change the background color. Do you notice a problem in the screenshot above? Yup you guessed it where did the text My Courses go? Well since it is the same color as the background color we just changed the bar to it disappears visually. It is still the and you can highlight it with your mouse, but it looks like it vanished. To resolve this add the CSS code below to the Custom CSS text area below the existing CSS.


a#fixy-trigger {

  color: #FFF;



You should see something similar to the screenshot below.


Your My Courses's text should be visible on the page in white. In the CSS above a#fixy-trigger refers to the link with the id fixy-trigger which is what our developers decided the id should be for the link to the My Courses menu. If you open up your site in a browser where you haven't logged into the site (was that a mental twister?) you will notice another problem. Just like in the image below the login button has disappeared.


As with the previous problem, the reason it is gone is because the text color and the background color are the same. To fix this we need to add the following CSS to the Customer CSS text area below the already existing CSS code.


#mr-nav .snap-login-button {

  color: #FFF;



Now you will be able to see the Login button.Moodlerooms_University.png

The CSS here refers to the div tag that has the id mr-nav and then any other HTML tags that have the class snap-login-button.


If you want to get fancy here you might try adding a white border around the link. The way I want to get fancy however is to change the cog/gear icon from the gray it is now to white. To do this we use a CSS filter and increase the brightness of the image until it is pure white. This is similar to over exposing a photograph until all you see is white light. Add the CSS below to the Custom CSS field below all the other CSS you have.


#admin-menu-trigger img {

  filter: brightness(200%);



Now your cog/gear icon should be pure blissful white. MDS__Administration__Appearance__Themes__Snap__Snap.png

If you have any questions about this please feel free to post a discussion about it.


Languages@Warwick and Snap

Posted by tm37475 Mar 2, 2017

Our Moodlerooms site Languages@Warwick applied the Snap theme during the summer of 2015 after piloting with a group of interested tutors. Their responses were generally positive to the move to a more mobile friendly theme and they approved of the desire to reduce the "scroll of death" and improve the interface. This document was created to publicise the move and new tutorials created to support navigation. As you know there have been further changes made to the interface since Moodle 3 so we try to help inform our users through an open G+ community and opportunities for "show and tell" sessions during the year.


One of our first challenges was to support tutors in their section of images for their course. As we have an international team of tutors there are many different attitudes towards sources images and I was concerned that we would quickly run in to copyright issues. I provided resources to help find CC0 images, increase awareness of Google advanced search, Creative Commons licencing and having these discussions with colleagues was vital to raise awareness of the thorny issues of ownership in the digital world. Since then I have also co-authored this ALT-C blog post to share wider thinking on the use of media. I am currently project managing a Warwick International Higher Education Academy project with staff and students (#knowhow)  to extend the conversation across our campus around open educational practice.


A further challenge was to help staff organise and structure their courses so as not to overwhelm our learners and I created this advice in the form of a Top Tips for Course creation on Listly. The site features and navigation are further supported by video tutorials on our open gallery and YouTube channel .  


All tutors are enrolled on a 101 course on our site where they can access the documentation and resources from the Moodlerooms knowledge base as well as our own resources. The news forum also provides the latest news on webinars and events for professional development. The Languages@Warwick site prioritises interaction through speaking, listening, video, screen capture etc. thanks to our tools which include Blackboard Collaborate, Voicethread, Kaltura media console and media space and has been how we have managed to innovate in teaching and learning, as captured in some of my publications here:


Learning to swim in new waters

Creating and nurturing a Community of Practice

Using e-tools to facilitate international collaborations

A new approach to assessing Online Intercultural Exchange


H5P, a new tool...

Posted by ab37750 Mar 1, 2017

An Introduction to H5P

Thanks to those who could make it to one of the Territory Moots to hear me babble about H5P and the interactive content you can create with it.

I will launch a few posts about this tool but I thought it would be good to start with capturing some highlights of the presentation here and share my slides for that part which include my notes.

To start, especially for those who might have missed out on the talk, H5P is an Open Source tool and a Free Project. The folks at are providing a really dynamic and exciting tool which lets you author, share/borrow, and reuse content for learning. The content, of which there are about 30 different types, is in HTML5 format, so it is web friendly by design and will work on all those cool mobile devices like tablets and smartphones.

What kind of content?

Truly interactive content like Games (like Memory or Flashcards), Quizzes, Interactive Videos, Presentations, Timelines, and more. Content that really expands the possibilities for reaching learners in varied and engaging ways.

While you can embed the content straight from the site into your course page, the Moodle integration really shines by including an Activity for H5P that provides an authoring tool right in the Settings page. You don't have to launch extra tools or purchase and install software suites in order to create content that is powerful and interactive. You'll need to request the Activity (H5P) to be installed on your Moodlerooms site. There is no charge and it is a simple process. A great suggestion that came up a few times was to install it on the sandbox first to test and then enable it on the production environment.

h5p-create-flashcards.pngOnce the activity is there, you can start authoring content in the activity tool. The interface is dynamic, meaning that it changes based on the content type you choose. It is also pretty straightforward and simple to use but supports a great depth of settings and features. The Activity also includes links to tutorials on the site to help you understand what the content types do and how they are created. Lastly but not least, H5P includes essential support for accessibility, such as captioning for videos and alternative text.


We explored some of the content types and discussed some ideas on how to leverage these in teaching and learning. One key element I want to hit on again is that the embedded content works out of the box, but the authored or imported content in the activity format will automatically add a grade item to the grade book and record student performance. Very Exciting!


One last note I want to make in this post. As HTML5 content, your H5P activities and embedded content will also work on student's mobile devices, no fuss. Learners can engage in the content on their web browser on their device, and embedded content displays in the Moodle Mobile App automatically. While the App does not support the activity natively, it will just launch the browser for the student and let them interact with the content through that interface.


So check out the H5P content and activity, and watch for my next post on the topic where we will explore some of the specific content types that I am currently infatuated with and I'll share some example files as well.