Wiki

#Tiles Course Format

###Author: David Watson Contact author

This is the "Tiles" course format plugin for Moodle.

The latest release is available in the official Moodle plugins respository at https://moodle.org/plugins/format_tiles. For code downloads, please use the official repository in preference to the code here, since the code here is subject to ongoing development between releases.

This wiki in other languages: Español | Português

Other pages in this wiki: FAQs | Administrator Settings

##Installation and Use This plugin should be installed in a sub directory of /course/format/ called tiles

Once installed:

it will be available for an editing teacher to select as the format for a given course under Course Administration > Edit Settings > Course Format
if this is done, the format will be displayed to a user when they enter that course (as student or teacher)
an Administrator will be able to see the plugins settings under Site Administration > Plugins > Course Formats > Tiles

##Aims The plugin aims to:

provide an alternative and modern look and feel for courses
allow teachers to add visual appeal to Moodle courses easily and in as little time as possible
be mobile responsive and perform well on mobile devices
improve page load times and ease of navigation (for example by returning users to the last tile they were "in" when they reload a course, reducing calls to the server, and storing data locally temporarily for faster retrieval)
not require teachers to have any additional expertise or resources, beyond what they already needed to edit a standard Moodle course
allow easy switching between courses in standard Moodle formats and this format, and back again (with a "flick of a switch" in Course Administration)
be capable of being used with existing Moodle themes (e.g. Boost, Clean, More, Essential and Moove)
preserve standard Moodle functionality, unless it is being deliberately enhanced (e.g. in place title editing still works, drag and drop resource adding still works, hide/show tiles, restrict access and highlight still work and so on)
be accessible e.g. include labelling information for screen reader users, and controls for them to ensure that the format is usable for them
use JavaScript where it can enhance the user experience, but not to depend on it (i.e. users without JavaScript can still use courses in this format)

##Overview When the teacher selects "Tiles" as course format within Course Administration, the format presents each topic as a "Tile", with an icon (rather than just as a list down the page).

Desktop view:

Desktop view

The format is mobile responsive. The tiles adjust themselves to different screen sizes and orientations.

Mobile view:

Mobile view

The teacher can choose which icon appears on each tile by clicking the icon while in editing mode:

Icon picker

####Within a tile: sub-tiles for activities The user clicks a topic tile to open it and reveal the activities and resources. If the user has JavaScript enabled, the tile opens with an animated transition.

Within the tile, individual learning assets (i.e. course modules such as PDFs, Quizzes and so on) can be displayed in an alternative "sub tiles" format, where each learning asset has its own coloured sub tile, instead of just a list. This format mirrors the format of the "Snap" theme, but without requiring any course restructuring, or theme changes.

If the teacher wishes to divide the sub tiles into several sets, they can insert sub headings between them at any point using a label (as shown in the screen shot with "Prepare" and "Engage").

Student view:

Student view

With editing mode on:

Tile expanded with editing mode on

Should the teacher prefer, sub tiles can be de-activated at the course level under Course Administration. Standard list format will then be used within a tile (see below).

####Opening PDFs, Pages and HTML files Some activity types (PDF, Page and HTML files) can be set to open with an animated transition via a modal window. This improves the user experience, by making navigation smoother, and reducing the number of times that the server has to be asked to generate a new page back and forth.

For PDFs, the modal windows include an "open in new tab" button and a "download" button as shown on the top right of the screen shot.

This is a new feature and, for now, it does not apply to mobile devices, which still open the files in the standard Moodle way by navigating to the mod/resource/view.php... page. Other activity types may be added in future.

PDF open in modal window

####Completion tracking If activity completion is used, each tile can show a radial progress gauge i.e. percentage in a circle gauge (Progress: 80%), or numeric (Progress: 4/5), depending on the setting by the teacher (see below).

An overall progress indicator is also shown top right above the tiles.

Manual and automatic completion tracking are supported. Where modal windows are used, the modal includes a copy of the completion check box for the student to check.

####Local Storage If selected, each time the user clicks a tile, the content of the tile will be stored locally in the browser. In addition, if the user is not on a mobile device, the content of the next tile will be pre-loaded. This is to reduce the number of round trips to the server and increase page load times.

####Filter bar A "filter bar" above the topic tiles enables students to filter what is displayed on screen, which is particularly useful on a mobile device to save scrolling through all tiles.

The filter buttons are based on tile numbers (e.g. 1-3, 4-6 and so on) but, if course outcomes are used, these can also be used on filter buttons.

See also "Teacher controls and settings" below.

##User settings The user can disable the following two items if they wish, from the course navigation menu: - Animated navigation - disable all JavaScript animation (choice remembered indefinitely) - Data preference - disable storage of page/course data in the browser (choice remembered until user clears their browser cache)

##Teacher controls and settings #####In course controls In addition to the standard Moodle controls, and the settings under Course Administration > Edit Settings > Course Format, the teacher has available:

Convert label to page feature: Sometimes courses can develop too many labels. These are not ideal for students. This feature allows teachers to convert any label easily to a "Page" by clicking "Convert to page" in any label's editing drop down menu.
Reveal all tile contents at once feature: the default display in editing mode is hide tile contents unless expanded, but the teacher can reveal the contents of all tiles at once using the button at the bottom of the editing screen. This is useful, for example, if they need to drag items between sections
Expand one tile at once feature where required

#####Course settings The settings available under Course Administration > Edit Settings > Course Format are:

Default icon for all tiles (for where a tile specific one is not selected as described above)
Tile colour - select from pre-defined palette set by the administrator (to change the available colours see FAQs)
Completion indicator display - if activity completion is being used, teacher can select which type (see above)
Filter bar display - whether to display the filter bar to users and, if so, in what form
Use sub tiles in top section (not recommended) - if used in the very top section, sub tiles can look to big so standard form will be used instead, unless this is selected
Emphasise headings with coloured tab - if selected, each time a label includes heading text i.e. using the h1, h2 etc tags, a coloured bar will be displayed to the left of the heading to give additional emphasis

##Administrator settings

The site administrator can control various items from Site Administration > Plugins > Course Formats > Tiles as explained in Admin Settings

##Automated Test Support The plugin contains tests for PHPUnit and Behat in the tests sub-directory. The tests cover major functionality but it would be useful to increase the coverage. Instructions on using the tests appear at https://docs.moodle.org/dev/Acceptance_testing and https://docs.moodle.org/dev/PHPUnit

##Compatibility and Support The plugin is compatible with Moodle 3.3, 3.4, 3.5 and 3.6.

It supports the Privacy API.

It is intended to support the current versions of the most popular browsers such as Chrome, Firefox, desktop Safari and mobile iOS and Android.

(Internet Explorer should work broadly, but without animation. For plugin version 3.3.6 and higher, the plugin will disable animated navigation if it detects that the user is using IE).

The plugin uses Mustache templates and Javascript AMD modules.

##Licence This plugin is part of Moodle - http://moodle.org/

Moodle is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Moodle is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with Moodle. If not, see http://www.gnu.org/licenses

Icons: some icons are custom to this plugin, but the majority are from Font Awesome version 4.7 under License SIL OFL 1.1. See https://fontawesome.com/license and specifically https://fontawesome.com/v4.7.0/license

###Future enhancements under consideration Possible future enhancements:

add to automated test suite
Enable admin to allow additional icons from UI
possibly enable more activity items to be rendered in modals e.g. Book? H5P? Video? Folder?
allow photo upload to tile background?
displaying page count on PDF items? Or video durations?
remove/simplify some of the admin settings, once the related functionality has proved itself?
Remove course outcome filters.
Possibly make an easy way for people to add text to filter buttons / create filter buttons independent of outcomes
Reinstate standard option for teacher to show hidden sections as collapse or hide them altogether
On wide screens, if last row has > 1 fewer tiles than the rest and there is scope to even out the rows, JavaScript will do this. Then centre tiles on screen (narrow central window)
Allow teachers to insert row breaks after whichever tile they want on main page (to add structure)

Comments, feedback and suggestions are very welcome.

David Watson