Re-usable UI elements for Moodle (& elsewhere)
The following UI elements can be used to decorate your Moodle contents and create interactivity, all within the Moodle editor.
They use a combination of Bootrstap and FontAwesome. These are both 'baked in to Moodle' so it makes editing a breeze
UI elements - Enrich your online learning content (06:40)
Fancy quotes
Insert quote here.
Insert quote here
Boxes
Think
Insert content here
Read
Insert content here
Important
Insert content here
Further Information
Insert content here
Check your understanding
Insert content here
Take note
Insert content here
Remember
Insert content here
Discussion Activity - [Name of activity]
Insert content here
Record your responses in the [exact name of discussion activity] forum that follows this content.
Reflection Activity - [Name of activity]
Insert content here
Record your responses in your Personal Reflective Journal . Your reflections will help you to understand the content and prepare for assessment
Learning Activity - [Name of activity]
Insert content here
Record your responses in your Learning Activity Worksheet . Your reflections will help you to understand the content and prepare for assessment. You might be asked to share your responses in class.
Portfolio - [Name of activity]
Insert content here
Record your responses in your portfolio of evidence.
Name of video - playtime in brackets (00:00)
Insert video here
Alerts
Success: Insert details/description here.
Info: Insert details/description here.
Consider: Insert details/description here.
Important: Insert details/description here.
Interactive elements
Show/hide interface
Accordion menu (6 items max, delete unwanted items in the HTML)
Content for item 1
Content for item 2
Content for item 3
Content for item 4
Content for item 5
Content for item 6
Horizontal tabs
Horizontal tabs are most useful for small numbers of tabs and when the tab text is short
Tab 1
Content for tab 1 goes here
Tab 2
Content for tab 2 goes here
Tab 3
Content for tab 3 goes here
Tab 4
Content for tab 4 goes here
Tab 5
Content for tab 5 goes here
Tab 6
Content for tab 6 goes here
Vertical Tabs
Vertical tabs are more useful for more tabs or longer tab titles
Tab 1
Content for tab 1 goes here
Tab 2
Content for tab 2 goes here
Tab 3
Content for tab 3 goes here
Tab 4
Content for tab 4 goes here
Tab 5
Content for tab 5 goes here
Tab 6
Content for tab 6 goes here
Tables
Table - Column headings
Insert caption Col 1 Col 2 Col 3 Col 4 Table - Row headings
Insert caption Row 1 Row 2 Row 3 Row 4 Table - Row and Column headings
Insert Caption Col 1 Col 2 Col 3 Row 1 Row 2 Row 3
Modals
View larger image
This UI element requires some hand coding. You will need to manually edit the image sources for the sm ller and larger image.
These can both point to the same image, as they will be dynamically resized to suit.
Card Groups
Card Group acheive an accessible "table-like" layout of content into columns. These columns are linearised on smaller format devices
You can add/remove columns by following the instructions in the HTML comments for the snippet.
3 Cards with headers
Card header
Card body text
Card header
Card body text
Card header
Card body text
3 Cards with top image and bottom footer
Card title
Card body text
Card title
Card body text
Card title
Card body text
3 Card deck with top image and 'More ...' buttons
Attribution
Floated image
This provides an image and attribution placeholder, that can be "swapped out" with your own image and attribution
Attribution goes here
More UI's
Estimated time
This UI element allows you to provide student to complete content and activities
10 hrsTip, with image
Tip
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tip, with tip text
Tip
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quote wall
Quotes go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Qoutes can have different lengtrhs. The placement on these quote will dynamically reflow across three columns.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Attribution only
Often, when you copy an attribution statement from elsewhere (eg wikimedia) the text is too large and it dominates the screen. This reduces the test size and opacity, to make this attribution less dominant
Paste your attribution statement here
Attribution statement for Department of Training and Workforce Development
The West Australian Content has very specific requirements for attribution
Change the document tite and link, plus page number in the snippet below:
BC016 - Introduction to surveying: Second edition, p14. © Department of Training and Workforce Development, reproduced under a CC-BY 4.0 licence Hide
Attribution statement for 'Toolbox' content
This UI element is currently configured for the BuildRight toolbox. Make sure that you update details to reference other toolboxes
Source: "BuildRight toolbox" © Commonwealth of Australia 2007. - Used under the AEShareNet-S licence.
Safe Work Autralia
Edit this attribution to include the name of the publication, link and page number
Attribution statement for 'Reproduced with Permission' content
This UI elelemt is for when permission has been granted by the copyright owner.
When updating the 'Source:' statement, change the text is square brackets to reflect the source and copyright status
Attributable content goes here
[Title and year of publication], p[XX].
© [Copyright owner]. Reproduced with permission. Hide
VTA generated content/images
© VTA 2019. Reproduced with permission.
