Customise all cards#
How to customise the card interface#
By default, the Card Interface will display cards in rows of three with an Engage button for Navigation cards as shown in Figure 1. However, the Card Interface also allows you to modify how the card interface is displayed. It allows you to display the same collection of Blackboard items in very different ways.
This document introduces you to the current possibilities and how to use them.
How to customise – Templates and Attributes#
The Card Interface supports two types of customisation that impact the entire interface.
- Templates; and,
Influencing how the cards are organised on the page. - Card attributes.
Influencing card appearance, e.g. what buttons appear and the labels for those buttons.
While they are used in similar ways, they modify different parts of the interface.
The following two sub-sections summarise the two types of customisation. The rest of this document illustrates how to use them and provides examples.
Adding parameters to the Card Interface item’s title
Both types of customisation are used by adding the appropriate parameters to the Name of the Card Interface item. For example Figure 2 shows the Card Interface item being edited, and the Name element having two parameters
- engage=Start – An attribute to change the label for the engage button to Start.
- template=by4 – A layout parameter that will result in the Card Interface being displayed in rows of 4 cards.
Templates
The organisation of cards into rows of individual cards – 3 to a row – in Figure 1 is the default card layout. The following table summarises the currently available layouts.
Name | Description |
template=by4 | Show 4 cards per row. The 4 can be replaced with any whole number from 1 through 6. |
template=assessment | Use a special card design – designed specifically for assessment items – to display cards one per row |
template=vertical | Show only one card per row. The cards are show vertically with the image displaying to the left hand end of the card. Note: This template is not currently working well. |
Attributes
It’s also possible to specify certain parameters that will be applied to each card and change attributes of the cards.
Example | Description |
noengage | Don’t display the engage button |
engage=’Some word’ | Replace the Engage button label with Some word |
markReviewed=’Check Completed’ | Change the Mark Reviewed button label to Check Completed. Indicating that the student has yet to mark the card completed/reviewed |
reviewed=’Completed’ | Change the Reviewed button label to Completed. |
noImages | Hide any Card images for all cards. |
noCardNumber | Hide any card numbers on cards with card labels. |
How to arrange cards vertically using template=vertical?#
The vertical customisation of the Card Interface aims to display cards vertically. i.e. one card per row. By adding template=vertical to the name of the Card Interface item the card interface shown in Figure 1 is transformed into Figure 3.
Note: This feature is somewhat unreliable and generally not recommended for use.
How to change the number of cards per row using template=b1y[123456]?#
Change how many cards per row. By default 3, to display 5 cards per row (rather than 3), add template=by5 to the name of the Card Interface Blackboard item.
Figure 4 shows a by5 card display based on the same Card Interface shown in Figure 1 and Figure 3.
template=by1 will display 1 card per row. But the Card image will be displayed at the top of the card, rather than to the left-hand side of the Card as done with template=vertical (see Figure 3)
How to use the assessment template - template=assessment?#
The assessment template modifies the appearance of the card interface (e.g. Figure 5) to better serve the task of displaying details about a list of assessment items to students. Will use the assessment template to display the cards using a template designed specifically to display Griffith University assessments (see Figure 5).
As well as changing the appearance, the assessment template also ignores some card variables and recognises some new card variables.
Figure 5 - Example assessment template Card Interface
Card variables ignored
The assessment template does not include space for either a Card Label or a Card Image (or associated image variables Card Image Size, Card Image Iframe).
Card Image: is still required, any image is just ignored
Each item to be displayed by the Card Interface using the assessment template must include a Card Image: line to indicate it should be displayed. However, any image information will not be used when it is displayed.
Specific assessment template card variables
The assessment template does recognise some additional card variable summarised in the following table. These variables are informed by information included in course profiles at Griffith University. There are no constraints on the values. The table below shows common example values.
Label | Example Values | Description |
Assessment Type: | Research-based assignment | Indicate the type of assessment as outlined in the course profile |
Assessment Weighting: | 30% | How much % is allocated to the task |
Assessment Outcomes: | 1,4 | To which course learning outcomes is this assessment intended to check |
Example assessment template
Figure 5 shows an example assessment template Card Interface. It contains two assessment items: 1 and 2. Each assessment item has a title, a description, and values for each of the assessment template variables listed in the able above.
The Card Date and Card Date Label variables work exactly as they do for the default Card Interface template. More explanation below.
The first assessment item card in Figure 5 is defined by the Blackboard content item shown in Figure 6. This content item ends with the description that is shown on the card, but it starts with a sequence of card variables, including:
- Card Image:
This is left empty as the assessment template does not display an image. However, this variable is necessary to identify this item as one that should be displayed as a card. - Assessment Type:, Assessment Weighting:, and Assessment Outcomes
These are the assessment template specific variables introduced in the table above. Whatever values are provides for these variables are displayed in specific locations on the card as shown in Figure 5. - Card Date: and Card Date Label:
Specify that the date section of the should be displayed as being “due” on the Friday of Week 5 of the course site’s current study period/trimester (e.g. Jan 1).
Card Date information is not necessary
If no card date variables are provided, then the card will not display the date widget. As shown in the second card in Figure 5.
How to change or remove the engage button?#
By default the Card Interface displays an Engage button at the bottom of each Card that links to some other resource.
Changes you can make to the engage button, include:
- Remove the engage button; or,
- Change the label displayed on the button.
- Changes to the engage button can be made for both the entire collection of cards – explained below - or each individual card – explained here.
- The Card specific method is checked first. It overrides this method.
Remove the engage button - noengage
Figure 7 displays the card interface almost exactly the same as the default display. Three cards to a row with images. The main difference is that it does NOT display the engage button on each card.
Change the engage button label
Figure 8 shows a card interface where the Engage button label has been changed to Start.
Note: The first card below doesn’t have a button. That’s because it is an information card. i.e. a card that doesn’t link anywhere, it just displays information. Information cards don’t have an Engage button.
To create the change shown in Figure 8 the name of the area within which the cards are displayed (the Card Interface area) has been changed to include engage=’Start’ (see Figure 9)
How to change the order of cards?#
You change the order of cards by using Blackboard’s interface to change the order of the items on the Blackboard page.
To change a card, you change the corresponding Blackboard item
The following image has two cards. Each card is implemented using its own Blackboard item (only visible with editing on). To make any changes to a card you must make that change to the corresponding Blackboard item.
The order in which Cards are displayed is the same as the order of the Blackboard items. Change the order of the Blackboard items and you will change the order of the Cards.
Figure 10 - Order of cards is the same as the order of the Blackboard items
How to change the order of Blackboard items.
With editing turned on it is possible to drag and drop Blackboard items to change their order. This resource from Reading University in the UK illustrates how to rearrange Blackboard items.
Remember to refresh the page
Changing the order of the Blackboard items using the above method won’t change the order of the cards. This is because the Cards are only displayed when the page is loaded from scratch.
Once you’ve finished rearranging the Blackboard items, refresh or reload the web page.
Numbering is automatically updated
The image below shows the Instrument Cards from above, but re-ordered. The Instrument Cards are using the auto-numbering feature. Each Card has a Card Label – Instrument – and each Card has been auto-numbered.
Auto-numbering is based on the order of the Blackboard items. Change the order and the auto-number changes. The following shows the Oboe as instrument 1 and the Bassoon as instrument 2. This is different from the first image of the Instrument Cards shown above.
Figure 11 - Change the order of the Blackboard items to change the order of the cards
How to add a download button#
A "download button" provides a way to add and customise a single button at the top of the Card Interface. As shown in Figure 12 this is often used to offer a way to download PDF.
You specify the behaviour of the download button using three configuration options summarised in the following table.
Variable | Purpose |
downloadButtonLabel | Defines the text that appears on the label |
downloadButtonURL | When the button is clicked, it will go to this link |
downloadButtonTip (optional) | A collection of HTML that appears as a tooltip when the visitor rolls their mouse over the button (see Figure 12 for an example) |
To add a download button you add to the appropriate Blackboard page, the values outlined in the above table. The label, URL and (optionally) the tip.
The next table summarises how to add each value. Examples are given in the sections below.
Variable | How to add the value |
downloadButtonLabel | Add as a parameter to the name of the Content Interface content item. Default value is Download File |
downloadButtonURL | Add a web link item to the page with the name downloadButtonURL and the link containing the URL |
downloadButtonTip | Add a content item to the page with the name downloadButtonTip. Enter the HTML for the tip in the content for the item |
The downloadButtonURL and downloadButtonTip can be quite long, whereas the downloadButtonLabel will tend to be fairly short. This is why the label can be set as a parameter, but the URL and Tip have to be additional items on the page.
downloadButtonLabel
The Content Interface item is the item in which the Content Interface content will appear in Blackboard. You can change the label for the download button – from the default value Download File – by editing the Content Interface item and adding an assignment statement to the name of the item. For example, if with Edit Mode on you would see something like Figure 13.
Change the value between the quotes and you change the label displayed on the download button.
downloadButtonURL
When the button is clicked it will attempt to visit the URL (aka link) that you specify as the downloadButtonURL. This link can be a file or another web page. Anything you can link to on the web.
To specify the downloadButtonURL you add a web link item to the Content Area. The name for the web link should be downloadButtonURL and the URL for the web link is the URL you wish visited when the button is clicked.
With Edit Mode the content area should include a web link item that looks like Figure 14. Figure 15 shows the same web link item being edited.
downloadButtonTip
downloadButtonTip defines a tooltip that will be displayed when the visitor hovers their mouse over the button. Typically intended to be used to provide some additional information that helps the visitor understand the purpose of the button. As shown in Figure 12.
To configure downloadButtonTip you should create a new content item on the content area page. The name of the new item should be downloadButtonTip and the text will be whatever message you wish to display in the tooltip.
Figure 16 shows the downloadButtonTip content item for the tooltip shown in Figure 12.
