Generic Filter Templates for Moodle

Table of Contents

1. Description
2. Usage Examples
3. Getting Started
   • Prerequisites
   • Installation of Templates
4. Template overview
   • Supported Tools
     • Google Drive-based templates
     • Microsoft SharePoint
     • Moodle and other tools
5. Tailoring the Templates to Your Site

Description

The repository contains a set of different templates for Moodle that utilize the Generico filter plugin to insert custom code (HTML, JS, and CSS) enabling the embedding of external digital tools in Moodle.

The project was funded by Aalborg University, so some templates were discontinued due to policies at the university, and all templates are designed to be similar to the space theme design. The bundle and template folders contain the templates that are ready to use and include all features. You just need to point your Moodle administrators to this repository to install the templates (after having installed the parts mentioned in prerquisites). The legacy folder contains the first generation of templates created in the Human-Machine Interaction Research Unit at Aalborg University. Templates marked as !done are templates for digital tools that are no longer supported at Aalborg University.

Usage Examples

Getting Started

Prerequisites

The templates require two plugins to be functional:

1. The Generico filter plugin Generico Filter Plugin and
2. a Generico selector in the text editor; currently, Atto and Tiny are supported.

• Generico Atto Plugin
• Generico Tiny Plugin

Installation of Templates

Templates can be installed using the bundles or by manually copying the sections of the template. Each template requires text or code in the following sections: Key, Name, Version, Instructions, Body, End Tag, Custom JS, Custom CSS.

• Key: Template identifier
• Name: Name in the generated text and the selector menu (Atto / Tiny)
• Version: The version it was made in
• Instruction: Text or link to tutorials
• Body: HTML field
• End Tag: End of HTML code (only used in collapsible sections)
• Custom JS: Used to dynamically change template content
• CSS: Styling used to make the templates fit with the Moodle theme

Template overview

Features

• Dark mode support
• Built-in tutorials for each template: can be found in the instruction field when creating the template or using one of the two template selector plugins.
• State options: If you leave the name field empty, the template will only show the iframe without the summary element.
• Dynamic buttons based on the capability of the iframe:
  • When all capabilities are available, the iframe will have the following buttons full-screen, link, and download.

Supported Tools

Google Drive-based templates

• Publish to web template: supports slides, docs, and sheets
• Google edit template supports: slides, docs, and sheets
• Google form template embeds a Google form
• Google PDT template embeds PDFs
• Google folder embeds a folder from Google Drive

Microsoft SharePoint

• PowerPoint, Word, Excel, Form, PDF, and Stream (video)
• Microsoft files template supports: PowerPoint, Word, Excel, and Visio.
• Microsoft form embeds the form from OneDrive.
• Microsoft PDF embeds PDFs.
• Microsoft Stream embeds videos using the Stream interface.

Moodle and other tools

• Website template supports any activity or resource with its own page (URL) and can be embedded using the website template
• H5P videos have their own template
• Miro template embeds a Miro board
• Panopto template only supports videos from AAU's own Panopto server. Find the constructEmbedURL function in the JS to change it.
• Spotify template embeds a Spotify player for a podcast or a song
• SurveyXact templates embed a survey from SurveyXact

Tailoring the Templates to Your Site

• removeIframeFocus for changes to the blue focus signifier.
• toggleSummary for any changes to the behavior of the two summary states.
• setBackgroundColor for any changes to the dark mode color trigger or style.
• createNameForSummary for any changes to the name emote.
• The rest can be changed from within the style sheet.