Skip to content

How to create cards#


To use the Card Interface you:

  1. Add the tweak Javascript to a Blackboard content area (for example Figure 1).
  2. Create an item in the content area for the cards to appear
  3. Specify which items in the content area should appear as cards.

Each of these steps is explained in more detail below.


The assumption is that you have

  1. A Blackboard site for which you have permission to create content.
  2. A content area (a Blackboard page) where you have a list of items.
  3. Can copy the Card Interface tweak code into your clipboard.

Figure 1 - An example Blackboard Content area

Step 1. Add the tweak Javascript#

For the Card Interface to work, this collection of HTML/Javascript code must be present on the page.

  1. Copy all the Card Interface tweak code into your clipboard.
  2. Add a new content item to your Blackboard page (e.g. Figure 1).
    You can choose any name for this item. It will not be visible to students.
  3. Use the HTML code view button to paste the Card Interface tweak code into the new content item..
  4. Save and submit your changes.

This step only needs to be done once. If successful and assuming Edit Mode is on you should see something like Figure 2. With Edit Mode on the Card Interface code will display pointers to this documentation. When Edit Mode is off (i.e. what students will typically see) this new item will be hidden.

Figure 2 - Card Interface tweak code successfully added and showing some instructions

Step 2. Create a content item for the cards to appear#

The Card Interface code will look for a content item called Card Interface on the current page. This is where it constructs the cards. To add this item:

  1. Create a new Blackboard content item on your page.
  2. Give it the name Card Interface
  3. Leave its content empty
  4. Save your changes

This step only needs to be done once. It doesn’t matter where the Card Interface item is located. You can move it around on the page. Figure 3 shows an empty Card Interface item. The next explains how you specify which items on the page become cards.

Figure 3 - Empty Card Interface item added (no cards specified on this page yet)

Step 3. Specify which items to appear as a card#

The last step is to specify which items on the Blackboard page should be displayed as cards in the Card Interface item.

  1. Edit a content item (or create a new one).
  2. Add a new line to the text of the card that starts with and contains only Card Image: (see Figure 4)
    It doesn’t have to be in bold, but it should include the colon.
  3. Save your changes.

Figure 4 - Added "Card Image:" to make a card

When this change is made you will see something like Figure 5 (with Edit Mode on) while what students will see Figure 6 (Edit Mode off). With Edit Mode on nothing is hidden. The original content item and the tweak code are still visible.

The card will also display a link [View origin]. This link will change the page display to focus on the originating content item. This is useful on a page with many cards when you wish to make a change.

What is shown in Figure 5 and Figure 6 is the default appearance of the card. There are many ways to customise a card and customise all cards.

Figure 5 - First card visible (edit mode on)

As shown in Figure 6 students will not be able to see the tweak code, the original Blackboard content item, or the [View origin] link. Students will be able to see other non-card items on the page.

Figure 6 - First card visible (edit mode off)