-
The ll-accordion shortcode, places an accordion onto a Learning lab page. Accordions can be a useful tool in dividing and segmenting information, if used judiciously. By default, the accordion is labelled "transcript". It's important to change this by adding title="Accordion title". Change "Accordion title" to whatever is appropriate. Preserving heading...
-
The alert-banner places an alert banner on the page. The alert banner can also be displayed via the video shortcode....
-
This page demonstrates a basic example of the embed mode using iframe=true. A likely use case may be embedding a learning lab page with a canvas module. Here we'll embed the entire "Spelling tips" page from the Learning Lab. Back to unembedded page content Lorem ipsum dolor sit amet, consectetur...
-
Cards can be useful to separate information from the main content flow. They have a max width of 640px, though it is unlikely that they would be displayed inline. It's more likely that they would be floated to the right of a series of paragraphs or displayed in a basic...
-
The ll-code shortcode displays an example piece of code. It's used a lot in this documentation section and probably not really anywhere else. There are two different variants. By default, the code will horizontally scroll. This is useful for showing html and stylesheets. When displaying shortcodes, it's likely that they...
-
...
-
Page titles Page titles should always be in sentence case. If a page title doesn't provide enough context on its own, include the parent title and then a colon, with a space after the colon, e.g. Law assessments: Exercises The site will ignore everything before the colon in the navigation...
-
Embed mode allows a Learning Lab page to be embedded in another page via an iframe. Interface elements such as navigation, footers, and breadcrumbs are hidden, depending on the options selected. Getting started To start, you'll need the following iframe code: The query string, ?iframe=true makes the page remove the...
-
- Documentation
- Page templates
When a user reaches the end of a section, you can display a panel notifying them and offering further resources to explore. Setup Instructions: Template Selection: Choose the Last content page as the page template. This will display the following field pane: The panel will only if the Section title...
-
This section offers a detailed guide to the technical aspects and processes involved in developing and deploying the Learning Lab site, covering customisations, search functionality, redirect management, and publishing as a static site. WordPress Overview The Learning Lab's WordPress theme is a heavily customised version of Picostrap5, focusing on SASS...
-
Using the shortcode ll-grid allows you to layout content in a grid. There are a range of display options available. Note that each element with the tag will be treated as another grid item. Wrap content in div tags if required and watch out for empty <p> tags and stray...
-
This pages uses an iframe to display content from another page from this website. How do I make sense of trigonometric values for angles larger than 90 degrees? This page introduces you to the unit circle and how you can map these angles onto the unit circle to clearly understand...
-
The [highlight-text] shortcode, in conjuction with [hl], allows pieces of text to be highlighted. Both a key and superscript numbering are provided. For screen readers, an option is available to provide text which will not be displayed but will be read out by screen readers, this can clarify the intended...
-
Sometimes, content is simply too wide to be accommodated on smaller screens, with equations being a common example. This often results in the entire content scrolling right on mobile devices. The hscroll shortcode helps to prevent this by allowing horizontal scrolling within a defined area. To use it, simply wrap...
-
The image shortcode [ll-image], allows you to put an image onto a Learning lab page. While the basic image mark-up is relatively simple, once options like transcripts, image sizing and captions are used, things can get more complicated. Image options Sizing Captions and transcripts Floating images Portrait images Multiple image...
-
Floating images rely on the text height exceeding that of the image to produce solid results. The img-text shortcode deals with the opposite situation. Note the following: Images will displayed at full width on smaller screens (< 768px wide). On larger screens, images are displayed to the right of text....
-
Landing shortcodes are only used on pages using the "Landing" page template, because they take up the full width of the page. Refer to the Documentation landing page to see these shortcodes in action. Landing banner The landing-banner shortcode displays and image, an introduction and a caption. For the image,...
-
The nav-panel shortcode displays a blockquote styled panel which can link to another page and display a variety of options. Visually, it is separate from the rest of the content and can provide prominence to the information contained within. Here are the options available: Category Panel title/link (required) Content/description Extra...
-
This page shares code with 404.php. This shared code is found in /includes/redirect.php. This setup exists because Sitesucker does not capture a 404 page. By using this structure, we can demonstrate most of the functionality within the WordPress environment and generate a static page. This static page is renamed to...
-
To redirect a page, follow these steps: Navigate to the WordPress dashboard Select Redirects from the left menu Select Add new redirect Enter the old path and new path into the available fields Note that the new path requires the full path to the page to be entered, including sub...
-
There are a variety of page templates available for use in the Learning lab. default page template will work for most pages, there are other options available. Page templates can be selected in the Page attributes box. In addition to the page templates you can choose from in the page...
-
...
-
- Documentation
- For developers
While the Learning Lab uses a WordPress environment to manage and update content, the publicly available site is a static version of the WordPress content. Here's how to produce this static version. 1. Export the site content to JSON From the dashboard, select "Export JSON". Then click the blue button...
-
- Documentation
- For developers
Due to limitations in our S3 hosting, we do not have access to an advanced routing and redirecting engine. As a result, redirects are executed using JavaScript from the 404.html page. Code Structure The 404.php file shares code with the page located at /redirect-404/, which utilises the page-redirect-404.php template. This...
-
- Documentation
- For developers
The search functionality on the Learning Lab site is implemented using a combination of a page template, JavaScript scripts, and a JSON data file. The search page uses the template page-search.php, the javascript search library fuse.js and the script file js/search.js to perform searches. Additionally, js/search-home.js redirects users to page-search.php...
-
WordPress shortcodes allow you to easily insert complex content into your pages without the need for complicated HTML. Enclosed in square brackets, like [shortcode], they simplify the process of adding dynamic elements. By using the shortcodes in this documentation, you can save time and enhance your content efficently....
-
The transcript shortcode [transcript], places a transcript accordion onto a Learning lab page. The transcript accordion provides an accessible alternative for content such as images, video or interactive quizzes. Here's the default version of the [transcript] accordion. It's recommended to wrap your text within <p></p> tags. The text within the...
-
The video shortcode [ll-video], allows you to embed a video in a Learning lab page. A variety of aspect ratios are available. Basic video url should either be in the form https://www.youtube.com/embed/video-id or https://youtu.be/video-id (as provided by the share button in youTube). Each video has a margin of 40px applied...
-
- Documentation
- For developers
This page documents the changes and customisations made to the WordPress theme. Although based on Picostrap5, we've primarily used it for SASS compilation, with most aspects significantly modified. All changes have been made to picostrap5-child-base. Files 404.php The 404.php file shares code with a page located at /redirect-404/, which uses...
-
- Work in progress
- Portfolio draft index
Regardless of the type of course you're studying, it is extremely likely that what you display in your portfolio will need to be accompanied by some form of writing. Let’s explore the types of writing often found in portfolios. Reflection Reflective writing means looking back on an experience, describing the...
