Materilize CSS: Change Tab text and indicator colour using only HTML and colour classes

When using the excellent Materialize CSS framework, it isn’t immediately obvious how to to change both text and indicator/underline colour of Tabs using only HTML and the Materialize colour classes (i.e. no changes to CSS).

To change the text color, just add the text-colour classes to the <a> tags, e.g.:

<a class="indigo-text text-darken-4" href="#test1">Test 1</a>

To change the indicator/underline colour, you can insert this before the </ul>:

<div class="indicator indigo darken-4" style="z-index: 1;"></div>

To wrap this up as a complete, 2-tab, example:

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s6">
        <a class="active indigo-text text-darken-4" href="#test1">Test 1</a>
      </li>
      <li class="tab col s6">
        <a class="indigo-text text-darken-4" href="#test2">Test 2</a>   
      </li>
      <div class="indicator indigo darken-4" style="z-index: 1;">
      </div>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
</div>

A dashboard view of Modules in Canvas

Canvas’s Modules page is a great way to show students both what is available to them and their progress through those materials. However, I’m concerned that:

  • it may be overwhelming to see everything in your course on a single page
  • it present a very linear view of a course – this may be appropriate in some circumstances but is certainly not appropriate in many HE courses.

The typical solution to this appears to be to create a course home Page where you can wrap/organise your content as you see fit. Two great guides to this are:

However, this approach has two disadvantages:

  • I’ve already spent time and energy organising, titling and indenting my content – why should I have to create a page of links pointing to that content?
  • The Modules page gives you great feedback on progress through your course – which content you have ‘completed’, what’s next, etc. A links-based home page is going to hide all this from you.

So, what we need is some way of making the Modules page more navigable. There are plenty of requests for this on Canvas’s Community pages and it would indeed be more sensible for Instructure to tackle this themeselves. However, if you’d like something that will work in the shorter term and are happy to add your own js/css, you might find the approach below interesting.

Autogenerating a Modules ‘Dashboard’

With some fairly simple JQuery, a custom stylesheet and a module naming convention it’s relatively simple to autogenerate a ‘dashboard’ of Canvas-style cards which gives students an overview of, and an easy way to navigate to your modules. ‘Top’ buttons on every Module give a quick way back to the dashboard no matter how many modules your site contains.

The JS:

Note that this assumed that Modules are named:

Module x. My module description

The code splits the Module name, based on the characters specified by the ‘delimiter’. So, in this case, my title will be ‘Module x’ and the sub-title will be ‘My module description’. You will need to chnage this caharacter if you want to split on say ‘:’.

and the CSS:

You’ll see that this css is very largely the same as the Canvas Dashboard styles but I have renamed them ‘ou-‘ so that we can make sure they are available on the Modules page and so that we can alter them as necessary.

Hope that’s useful to someone. It’s a work in progress e.g thinking about pulling in Module progress indicator(s), number of items in module, etc. Do get in touch is you spot any problems.

ical/ics feed from Rapla

We’ve been using Rapla resource booking system for years now to manage room (and associated resources such as laptops, furniture, etc) bookings and have been using the Export2iCal plugin to pull data from Rapla and display it in various other ways. I thought it would be useful to just jot down a couple of features of Rapla/iCal that may not be obvious for anyone else thinking of doing this.

  1. The url for the ical feed is:
     http://myraplaserver/rapla?page=ical&user=username[&file=fileName]

    Where:

    • username is the name of the user who has published a view on Rapla
    • fileName [for the optional file parameter] is the name of the view to return. If the file parameter is omitted, it will return the Default view.

    The thing to note here is that the ical feed returned contains the events for those resources that are shown in the Default or other named view for the user, username.

  2. In order to access a view via ical, it must first be published. This is achieved by selecting the desired view (or Default) and then clicking the Publish button, and ticking the ICAL Publish checkbox.
  3. To set which resources are shown in a given view, simply Ctrl-click to highlight them then click the Save button for the view.

 

 

 

CakePHP 3: Access a method from one Behavior (or the Table class) in another Behavior

Please note that this post refers to CakePHP 3.

Short answer is, as long as you have added both Behaviors in the Table class, you can call a method from one Behavior in another as follows:

class SecondBehavior extends Behavior {
    public function secondBehaviorMethod() {
        return $this->_table->firstBehaviorMethod();
    }
}

I couldn’t find anything about this in the docs, so initially I hoped/presumed that, as long as I had added both Behaviors to my Table class, it was simply a case of calling the method as I would in a Table, so:

In MyTable.php:

public function initialize(array $config) {
    ...
    $this->addBehavior('FirstBehavior');
    $this->addBehavior('SecondBehavior');
}

In FirstBehavior.php:

class FirstBehavior extends Behavior {
    public function firstBehaviorMethod() {
        return "done";
    }
}

In SecondBehavior.php:

class SecondBehavior extends Behavior {
    public function secondBehaviourMethod() {
        return $this->firstBehaviorMethod();  //Gives "Call to undefined method" error
    }
}

However, this just results in a “Call to undefined method” error. However, Behaviors have the $_table property (see the Behavior API) that allows you to access other methods of the current Table. Therefore, just adding _table to the call to firstBehaviorMethod ($this->_table->firstBehaviorMethod()) fixes the issue. As well as accessing methods from other added Behaviors, you can also use find ($this->_table->find(…)), etc.

New assessment services for maths, statistics and free text from MSDLT

 

Mobile MedLearn
A view of MedLearn in Moodle, shown on a phone screen

MSDLT can now offer formative assessments in mathematics and statistics. To overcome the common criticism of multiple choice questions – that the answer is on the screen – our new service marks typed algebraic and numerical answers, understanding concepts such as simplification, significant figures, decimal places, etc.

Our aim is to improve students’ understanding of the criteria against which they are assessed – an area highlighted by students in the 2016 National Student Survey – without a corresponding increase in academic marking time. Computer-marked self-assessment should enable them to obtain feedback on their performance over a wider cross-section of their course’s learning objectives.

Cancelling Algebraic Fractions
Cancelling algebraic fractions. The CAS generates random numbers for the questions, and uses them to mark and display the worked answers.

Behind the scenes our service connects to a Computer Algebra System so questions can use random variables and can address probability, inference and descriptive statistics. Quizzes launch from seamlessly from WebLearn, without requiring a separate login.

As well as the algebraic and numeric questions, we can offer ordering; drag and drop; and a variety of multiple choice questions. We are currently also piloting computer marking of phrases and sentences with Experimental Psychology.

Embryo Grading Exercise
Video of embryos with questions and cue points

The system has already delivered a maths bridging course for incoming Biochemistry students over summer 2016. It has also enabled students on the MSc in Clinical Embryology to take a novel ‘authentic’ assessment of their ability to assess the viability of embryos for implantation.

“Excellent practice, Thanks!” – Student on MSc in Clinical Embryology

Self-test questions in Moodle

In an earlier post I outlined plans for migration of MedLearn to Moodle. The technical work is now done except for editor plugins. The migration is well underway.

The tricky bit was getting the self test questions to work. The purpose of self test questions is to enliven content and enhance learning. They are not intended to be an assessment, although it may be useful to record the answers.

The Quiz activity provides the best range of question types but it also forces questions into an assessment with a very specific workflow (start attempt; answer questions; finish; submit; review). We wanted a much looser workflow which did not present questions as a quiz. The answer (suggested by Tim Hunt) was to embed a preview question in an iFrame. We chose the Book module for the content into which the questions were embedded.

Students log in to our VLE (Sakai). They then launch an LTI tool which automatically provisions them in Moodle. They are assigned an adapted set of permissions to avoid the issues highlighted by Tim Hunt in this post. The LTI provider plugin does all the provisioning, including the assignment of the role with the permissions.

Questions are inserted into the book content using Generico filter and Atto plugin. I’ve defined a template which just takes the question number and applies the correct iFrame. A Javascript frame resize script triggers on load (and on change) so that the question appears seamlessly in the content. The plugin also has an Atto editor plugin to simplify editing.

I have modified the preview PHP so that the title and config have been stripped off, leaving just bare question with answer box and ‘check’ button. The preview PHP still accepts the querystring configuration so I passed &correctness=0&marks=0&markdp=0&feedback=1&generalfeedback=1&rightanswer=1&history=0 to it in the Generico template.

The script tag to load the JavaScript resize code is in AdditionalHTML config.

We’ve also made the content more mobile friendly using Bas Brand’s Bootstrap  3 theme and more semantically relevant HTML5 tags such as <figure>, <cite>, <dfn> and <dl>. We are about to start authoring Atto plugins to support these tags. JQuery is used to for image swaps, replacing the mouseovers and flash which aren’t mobile friendly.

The only missing feature which would be really nice to have is a way of browsing the questions from the question bank for insertion. It’s currently a little clunky to find the question ID for use in the Generico Atto plugin.

My thanks go to Tim Hunt, Juan Leyva (LTI Provider) and Justin Hunt (Generico) for making the tools which underpin this integration.

Sakai Entity Broker methods – the missing documentation

An attempt to collect together some understandable documentation on how to use the Sakai (@Oxford Sakai=WebLearn) Entity Broker (EB) methods in the face of continued frustration with Sakai documentation accessed via /direct/describe (@Oxford https://www.weblearn.ox.ac.uk/direct/describe).

I’m only going to cover methods to return JSON  as that’s all we ever use and am not bothering to describe the format of the returned JSON as it’s easier just to look at what’s returned in the browser.

  • Announcement
  • Assignment
  • Content
  • Forums (including Topic, Thread and Message)
  • Group
  • Lesson
  • Lessons
  • Membership
  • Polls
  • Portal-hierarchy
  • User

announcement

Gets the announcements for a site for the logged in user.

/direct/announcement/site/siteId.json

e.g @Oxford

https://weblearn.ox.ac.uk/direct/announcement/site/d1506490-a468-46ca-a915-417d9d11be2f.json

assignment

Gets the assignments for a site for the logged in user.

/direct/assignment/site/siteId.json

e.g @Oxford

https://weblearn.ox.ac.uk/direct/assignment/site/d1506490-a468-46ca-a915-417d9d11be2f.json

content

Gets the contents of the Resources tool.

/direct/content/resources/group/siteId[/subFolderPath].json[?depth=noOfSteps]

where:

  • subFolderPath (optional) is the path a subfolder (path relative to root of Resources)
  • noOfSteps (optional) is the no of ‘layers’ of content to return (seems to have a maximum value of 3?). If not specified defaults to 1.

e.g @Oxford

https://weblearn.ox.ac.uk/direct/content/resources/group/1e969f60-9ebf-48b7-bb0f-54f598de05da/Online%20assessments%20documents.json?depth=2

forums (including topic, thread and message)

Get all fora for a site:

/direct/forums/site/siteId.json

Get all topics for a forum:

/direct/forums/site/siteId/forum/forumId.json

Get all conversations for a topic:

/direct/forums/site/siteId/forum/forumId/topic/topicId.json

Get a fully populated conversation or message. This retrieves the message tree from the specified message downwards. If the messsageId is the top level message in a conversation, the entire conversation is returned:

/direct/forums/site/siteId/forum/forumId/topic/topicId/message/messsageId .json

…and to link directly to individual parts of forums:

For direct forum link url is :

/portal/hierarchytool/siteId/discussionForum/forum/dfForumDirect.jsf?forumId=forumId

Direct forum_topic link is :

/portal/hierarchytool/siteId/discussionForum/message/dfAllMessagesDirect.jsf?topicId=topicId

Direct link to individual message is :

/portal/hierarchytool/siteId/discussionForum/message/dfViewMessageDirect.jsf?messageId=messsageId &topicId=topicId&forumId=forumId

group

Get the membership of a group.

/direct/membership/group/groupId.json

whee groupId can be found by looking at the address of the page when editing a group in Siet Info | Manage Subgroups – may also be possible to find by name with /direct/site methods?

e.g @Oxford

https://weblearn.ox.ac.uk/direct/membership/group/8513fad8-656f-4265-9573-f00b8a781d02.json

lesson

Get the contents of a lesson.

/direct/lessons/lesson/lessonId.json

where lessonId is the id or entityId returned by direct/lessons (above)

e.g @Oxford

https://weblearn.ox.ac.uk/direct/lessons/lesson/35538.json

lessons

Get a list of the lessons in a site.

/direct/lessons/site/siteId.json

e.g @Oxford

https://weblearn.ox.ac.uk/direct/lessons/site/1e969f60-9ebf-48b7-bb0f-54f598de05da.json

Note that, in Sakai 11 at Oxford anyway, the lessons EB method will not currently (03/10/16) return lessons to access users – only those with elevated rights e.g for the same call:

As a maintainer:

{"entityPrefix": "lessons", "lessons_collection": [
    {
    "contentsURL": "https:\/\/weblearn.ox.ac.uk\/direct\/lessons\/lesson\/78676",
    "gradebookPoints": null,
    "id": 78676,
    "lessonTitle": "Module 1",
    "releaseDate": null,
    "hidden": false,
    "entityReference": "\/lessons\/78676",
    "entityURL": "https:\/\/weblearn.ox.ac.uk\/direct\/lessons\/78676",
    "entityId": "78676"
    }
]}

As an access user:

{"entityPrefix": "lessons", "lessons_collection": [

]}

membership

Get information about membership of a given user in a given site

/direct/membership/userId::site:siteId.json

where:

  • userId is the id (Sakai’s internal reference) of user about which you want info (obtainable for logged in user from user/current.json as below)
  • siteId  is the Sakai siteId.

e.g @Oxford

https://weblearn.ox.ac.uk/direct/membership/d00ca345-4e31-485c-00e9-0fc880da2dc0::site:d1506490-a468-46ca-a915-417d9d11be2f.json

polls

Can’t find any way to get a list of polls for a site!

Get poll text and options

/direct/polls/pollId/poll-view.json?includeOptions=true

where:

  • pollId is the id (Sakai’s internal reference) of the poll. This is most easily obtained by hovering over the poll name in the edit view and picking out the number(!)
  • includeOptions (boolean) specifies whether to also return the options for the poll and;
  • includeVotes (boolean) specifies whether to also return the votes cast

e.g @Oxford

https://weblearn.ox.ac.uk/direct/polls/pollId/poll-view.json?includeOptions=true

portal-hierarchy (maybe only @Oxford?)

Provides a list of all the sites (to which the user has access) under a given site – one level down only.

/direct/portal-hierarchy/site.json?portalpath=pathFromRoot

e.g @Oxford

https://weblearn.ox.ac.uk/direct/portal-hierarchy/site.json?portalpath=/medsci

user

Information about the logged-in user – mainly used to get interal Sakai id for use in other methods.

/direct/user/current.json

e.g @Oxford

https://weblearn.ox.ac.uk/direct/user/current.json

more..

I’ll try to remember to add to these as I use them.

Migrating MedLearn to Moodle

Medical Sciences Division hosts its teaching material in a system called MedLearn. The pages are mixed with 2D and 3D images, video, interactive content and self test questions.

For 10 years we’ve used Magnolia CMS. It was a good, simple system. In the last 4 years they’ve released 5.x.x which requires significant effort to migrate. We tried to find an upgrade path but couldn’t without spending more than our budget. Staying on the 4.x.x branch was fine until a recent Java security changed stopped us from publishing new pages. We have decided to migrate.

There are plenty of CMS and VLEs to choose from but they need to be maintainable and free. We chose Moodle because it’s free, extensible and fits with our technology strategy. We were particularly happy with the variety of questions available through the Question Bank.

Moodle doesn’t really support our mix of teaching materials with self test question. The Book module provides a good structure for the teaching material; the Quiz Activity provides assessment. We wanted to mix these together. Lesson tool was discounted because the questions are too restrictive, the authoring is confusing and the questions are on separate pages

We think that we’ve found the solution with the Generico filter plugin and its accompanying Atto plugin. The filter will write in an iFrame showing a preview of the question. In due course we may change it to call Javascript which writes preview content into the page. All that’s missing is a method of browsing the Question Bank.

CakePHP 3: Date/Time Disappearing during Hydration

When generating a date/time for saving to a MySQL database, I’ve always tended to generate it with the PHP date method (date('Y-m-d H:i:s')). However, using CakePHP 3, with dateTime validation set on the field, the date/time would disappear during hydration of the entity, but without a validation error.

I still suspected that validation was the issue here, so started having a look at the validation method to try to work out what was going wrong. Before I got very far, I noticed that the datetime validation method validates any value that is a Cake DateTime object. Therefore, the simple solution is to create the date/time using Cake’s built-in Time class:

use Cake\I18n\Time;
$datetime = Time::now();

Cake then happily saves the DateTime in the standard MySQL format.

Moodle evaluation and testing using Vagrant

I wanted a Moodle environment for testing the latest STACK question code. The solution is to use a Vagrant box.

Vagrant allows for provisioning by a number of methods. I found a shell script developed by DigitalSparky which was ready to use. I added a build script for Maxima (to ensure it has the correct version) and made STACK part of the Moodle install.

I’ve forked the repository to my Github account. I hope that you find it useful.

To build this you will need:

The adapted script uses Ubuntu 14.04 LTS Trusty. The Moodle build is cloned from Github and will default to the latest version. The script can be changed to force an earlier version if needed. You can also look in the Hashicorp directory for other pre-built Vagrant boxes.

To complete the Install (assuming that your host system is Ubuntu):

  • install VirtualBox, Vagrant and git
    sudo apt-get install virtualbox vagrant git
  • clone the Vagrant script
    git clone https://github.com/whanrott/moodle-vagrant
  • change to the script’s directory
    cd moodle-vagrant/
  • start the Vagrant box and run the build script
    vagrant up
  • edit your hosts file to enable the URL http://moodle.local/ on your local machine. Add this line
    192.168.33.10   moodle.local

    • As an alternative you can install the Vagrant hostmanager Plug-In. Either approach will require administrator permissions to modify the Hosts file.
  • open http://moodle.local/ and complete the install. You will need to look at the notifications to install the plugins.

That should be all that’s needed for a Moodle development box.