Card Interface Tweak
Before - standard Blackboard 9.1 content page
By default, Blackboard 9.1 provides a vertical list of content items.
(See larger image)
After - responsive, image rich card interface
With a few extra elements added (e.g. an image, a related date etc) the tweak transforms the default Blackboard appearance into a fully responsive and visual card interface.
New!! Now with two different card interfaces:
- a horizontal interface (shown in image below), cards displayed in rows of up to 3 (depending on browser window size) cards horizontally, and
- a vertical interface where the cards are displayed vertically with one card to a row.
Origins and inspiration
This Tweak is inspiried by and built somewhat upon the Blackboard Tweaks building block.
How to use the tweak
Assumptions is that you are starting with a Blackboard 9.1 site and that you have a Blackboard content page (see the before above)
- Create a new Blackboard content item on your Blackboard content page.
- When editing this new content item, use the HTML Code View Button to open a pop-up window
- Copy and paste the content of the tweak.js file into this pop-up window
- Save and submit your changes
Step 2. Create a space for the cards to appear
The card interface produced by the Tweak needs to appear in an existing content item on the same content page.
- Create a new Blackboard content item that is titled Card Interface
Current advice is to leave this content item empty. The tweak will add content to it.
- Choose the type of card interface you wish by adding one of the following words after Card Interface
- vertical for one card per row with elements of a single card displayed horizontally
- by5 to have 5 cards per row
- by5no to have 5 cards per row without any image
- noengage if you'd prefer not to have the "Engage" button appear for content folders
Step 3. Specify the content item/folder you want to appear as a card
- Add the phrase Card Image: (including the colon) to the content item/folder
It's assumed that only content items or content folders are turned into cards. Each works a little differently. A content item will become an "info card". i.e. providing only information. A content folder will also be clickable. Clicking on a content folder will take the user into the folder.
The following is almost the simplest content item/folder for a card.
It will produce the following card.
The title of the content item has become the title of the card, and the content of the content item becomes the card content. Card Image: and other "card commands" are removed from the content.
Note: that the card above does not have an image, rather the top of the card is a blank yellow space.
Step 4. Specify the image you want to appear on the card
There are two methods that can be used:
- Paste/type the URL for an image after Card Image:
Card Image: http://djon.es/images/GrandCanyon.jpg
- Insert the image into the Blackboard content item and ensure that the Image Description for the image is Card Image
For example, a content item like the following.
Will produce a card like this.
Step 4. Add a date
Each card can have a date associated with it.
- Add Card Date: as a single line to the content item followed by the relevant date using the MMM DD format
For example, if Card Date: Mar 4 is added to the content item from the previous steps the card will have a calendar graphic added to the top right of the card.
Step 5. Change the date label
By default, a card date will be preceeded by the label Commencing. You can change this.
- Add Card Date Label: Due Where you replace Due with whatever word you wish to use.
For example, the following content item
will produce the following card
Step 6. Change the card label
If the content item you are adding is either a Content Folder or Module Page (i.e. it links to another Blackboard content page) then card will be labelled (by default) as Module X. Where X is replaced a number representing the number of the card.
For example, the card above has the card label Module 5. Meaning it was the 5th card content item on this page. Module may not be the label you wish to use.
- Add a line with Card Label: new name to the content item
Replace new name with the label you wish to use. Use an empty label if you don't want a label to appear.
For example, the following content item specifies the use of Learning path as the new card label.
Producing this card.