Course formats: Tiles format

Maintained by Picture of David WatsonDavid Watson
A course format which displays course topics as "Tiles", in a grid rather than as a list. When clicked, tile content is displayed under the tile with an animated transition. The layout adapts to different screen sizes and orientations. Within each tile, activities can also be set to display as "sub-tiles". For each tile, the teacher can pick an icon from a predefined set, or upload a background photo.
892 sites
49 fans
Current versions available: 1
Key features
  • Tiles are used to show course topics and activities
  • Animation is used to expand tiles to reveal content
  • Icons or photos on each tile increase visual appeal
  • Modal windows (animated pop ups) to show content
  • Colours for tiles are customisable
  • Theme compatibility is broad (Boost, Clean, Essential, Moove and Adaptable).
  • Easy to switch into Tiles from other formats (e.g. Topics, Grid) without changing course content
  • User friendly (e.g. tile icons are provided and don't need to be uploaded)
  • Mobile responsive (adapts to different screen sizes and orientations)
  • Progress shown on tile with % in a circle, or as a fraction
Please favourite and support future improvements by donating!

News 21 May 2019

Version 3.7.0 has just been released as a "beta". It allows for tiles to have photo backgrounds and has various other improvements. Read more and see the demo site here or download the 3.7.0 code here

Please contact me with any issues arising from your testing.  I will carry out any bug fixes, aiming to upgrade it to a "stable" release within the next few weeks.  I have marked it as compatible with Moodle 3.7.  I'd like to thank WU Executive Academy in Vienna for sponsoring the photo tiles feature and kindly agreeing to share it with the community.

If you do not wish to test the beta version, please use the most recent stable version (3.3.6) instead for the time being.


Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3
Screenshot #4
Screenshot #5
Screenshot #6
Screenshot #7
Screenshot #8


Picture of David Watson
David Watson (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Miguel Ángel Yerpes Ramírez
    Fri, Mar 22, 2019, 9:56 PM
    hello, first of all, thanks for the resource. I have a problem with using Internet Explorer 11. I can not open the tiles. Is not compatible with this browser? Thank you.
  • Picture of David Watson
    Tue, Mar 26, 2019, 7:26 PM
    Hi Miguel the animations are not compatible with internet Explorer. In the next release ( which I will upload here within a week or so) I will have the plugin detect if IE is being used, and switch to "no animation" mode for that user if it is.

    if you need a workaround with the existing release, users can turn off navigation themselves using the "Animated navigation off" control, or a site admin can disable animation for everyone under Site Admin > Plugins > Course formats > Tiles format (set these 4 controls to no/none: "Use javascript navigation from Tiles main page", "Use JS navigation for single section page", "Modal modules", "Modal resources")

    Thanks to you and Nicolas for the feedback!
  • Picture of Bruno Henrique Cury
    Wed, Mar 27, 2019, 9:54 PM
    Hi guys
    1. I have a problem.
    How do I insert a URL (HTML) in modal format?
    2. Another problem, when I put a page to show activity as completed when conditions are satisfied> The student should visualize this activity to complete it, not change by modal navigation between sessions or blocks, I need to click close to change the activity status.
    Thank you
  • Picture of Bruno Henrique Cury
    Wed, Mar 27, 2019, 11:44 PM
    When we leave editing mode enabled, leave all sessions on a single page expanded, this way it is easier to duplicate and drag an activity or any feature for the other sessions.
    Thank you
  • Picture of Bruno Henrique Cury
    Thu, Mar 28, 2019, 8:54 PM
    David Watson,

    The extended sessions probe can be seen in the plugin wiki. We solved this problem, thank you very much.

    But I believe that after you've changed "Ensure that completion checkboxes respond correctly to auto complete events" the questionnaires are also being marked as completed just by clicking on the questionnaires and tasks, but the correct thing is that they get a score to have the activities completed.
    Can you help us?
    Thank you
  • Picture of Kasper Nowak
    Sun, Mar 31, 2019, 7:44 AM
    Hi David! I love this plugin!
    Will the addition of pictures to Topic and Activity/Resources tiles ever be possible with this plugin?

  • Picture of Sébastien Auclair
    Sun, Mar 31, 2019, 10:40 AM

    Finally I can write in the forum. To resume my comments,

    I just love your Tiles race format. I have a small problem however regarding the resource layout. I do not want to use under tiles. In order to facilitate the structure and the sequence to follow for the students I use a lot the movement of resources to the right or to the left. It creates a sort of hierarchy between activities and resources. However, your theme does not support this option. Here is a video illustrating the problem:

    Also I do not understand why it is not possible to open a URL resource (such as a Youtube video) directly inside a pop-up window without having to make two clicks to fit in and also leave the heart of course. It would be an interesting improvement.

    Sincerely for almost a year I have experienced a ton of course format. Your is the most adapted and evolved I've ever experienced. Thank you.
  • Picture of David Watson
    Sun, Mar 31, 2019, 6:57 PM
    Hi addressing the last few questions:

    - Completion checkboxes - these are improved in version 3.3.6. Thanks to Bruno Henrique Cury for his help testing this behind the scenes.

    - Using photos on tiles - Kasper I added an FAQ about this. Maybe one day we could do it, if I get some more time, but no immediate plans. Grid format does offer this.

    - URL activity intermediate screen (too many clicks) - I hope to remove the intermediate screen in version 3.3.6, so this should be improved very soon.

    - Indenting activities in non-subtiles mode - Sébastien thanks for reporting this and for your kind comments. I have made some changes and indenting should be supported in version 3.3.6.

    - Embedding other websites in modal windows - I added an FAQ about this (please see the new "FAQs" button above). My latest thinking is that we could allow URL activities to launch as modal windows if the URL activity is set to "Display: Embed". I will come back to this once version 3.3.6 is done, but no change in this release.

    - Leaving sections expanded in editing mode - from version 3.3.6, the plugin will remember the last section you had expanded and, if you had all sections expanded, it will keep it that way for the session.

    I hope we can get version 3.3.6 released later this week, but more testing is required first.
  • Picture of David Watson
    Tue, Apr 2, 2019, 5:20 PM
    The code now showing at the source control URL (link at the top) is the code I intend to release as 3.3.6. I will be offline for a few days now, so am planning to upload the code to at the weekend. If you test it before then and have any feedback, please let me know. Thanks.
  • Picture of John Downing
    Mon, Apr 8, 2019, 7:21 AM
    Amazing Course format option. Thank you very much for all the hard work!
  • Picture of Tom Andrew
    Wed, Apr 17, 2019, 6:31 PM
    Just a quick note to say thank you for developing and continuing to develop this plugin. The recent addition of the javascript workaround for Internet Explorer is most appreciated!
  • Picture of C Behan
    Mon, May 20, 2019, 10:03 PM
    Hi David,

    Thank you for creating this beautiful course format. I am testing it at the moment and hope to be able to roll it out.
    A challenge for me though is how the sections are all collapsed when Editing mode is turned on. Generally teachers expect to be able to see where everything is when editing is on, and to be able to easily move content around from one section to another.

    Currently, to move File X from Section A to be the 2nd resource Section C:
    - I turn editing on
    - I need to already know which section File X is located in - otherwise I need to navigate around to the different tiles
    - I need to expand out Section A
    - I can now see File X and can drag it down to Section C.
    - I can see that File X is in section C. However, I can't see the other files in Section C
    - I need to expand out Section C because I need to re-position File X to be the 2nd file in Section C.

    It is for this reason I am nervous to roll it out! I need for a course format to be user friendly for the teachers and admins as well as the students.

    If all sections were expanded by default.
    - I turn editing on
    - I can see straight away where File X is located.
    - I can drag it down to Section C and simultaneously place it in position 2

    Thank you
  • Picture of David Watson
    Tue, May 21, 2019, 3:07 AM
    Hi Catherine

    Thanks for the kind comments. Some good news:
    - There is a "reveal all sections" button in the bottom right hand corner of the screen when editing mode is on. I accept that this is fairly well hidden!
    - For the next release (later this week I hope) the button will be moving to the top right of the screen and will be much more visible.
    - Once you click the button, it will remember to keep the sections expanded until you collapse them or log out.

    Longer term, I have plans to improve this further - I'd like to handle it in a similar way to the student screens, where content for additional sections can be loaded quickly without a full page reload being required. Full page reloads can take a long time if the course has a lot of content. I have some code for this already but it needs a little more work.
  • Picture of C Behan
    Tue, May 21, 2019, 5:23 PM
    Thank you David - I'm delighted! That's great, and good to read about the planned developments as well.
    This format is a really great step to really giving a facelift to Moodle - it just really modernises it.
    Thanks again.
  • Picture of Ivan Vargas
    Fri, May 24, 2019, 1:47 AM
    Hello, when the tiles are few the content is very narrow, there is some way to adjust the content, to a width that is not related to the amount of tiles? Thank you.
1 2 3 4
Please login to post comments