Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
131 lines (71 sloc) 6.39 KB

Card Interface Tweak

A bit of digital renovation for Blackboard 9.1 in the form of some Javascript and CSS that can be used to transform a standard Blackboard content page (a collection) of items into responsive, image rich card interface. A transformation that can be accomplished with minimal technical knowledge.

Before - standard Blackboard 9.1 content page

By default, Blackboard 9.1 provides a vertical list of content items.

Normal Bb 9.1 content page

(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:

  1. a horizontal interface (shown in image below), cards displayed in rows of up to 3 (depending on browser window size) cards horizontally, and
  2. a vertical interface where the cards are displayed vertically with one card to a row.

After the tweak

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)

Step 1. Add the Tweak Javascript

For the card transformation to happen on a Blackboard content page, some Javascript code needs to be inserted into the content page.

  1. Create a new Blackboard content item on your Blackboard content page.
  2. When editing this new content item, use the HTML Code View Button to open a pop-up window
  3. Copy and paste the content of the tweak.js file into this pop-up window
  4. 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.

  1. 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.

  1. 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

  1. 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.

Basic content item

It will produce the following card.

Transformed card interface

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:

  1. Paste/type the URL for an image after Card Image:

Card Image: http://djon.es/images/GrandCanyon.jpg

  1. 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.

Content item with image specified

Will produce a card like this.

Corresponding card interface

Step 4. Add a date

Each card can have a date associated with it.

  1. 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.

Card with a date

Step 5. Change the date label

By default, a card date will be preceeded by the label Commencing. You can change this.

  1. Add Card Date Label: Due Where you replace Due with whatever word you wish to use.

For example, the following content item

Content item with new date label

will produce the following card

Card with new date label

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.

  1. 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.

Content item specifying new card label

Producing this card.

Card with new label

You can’t perform that action at this time.