Skip to content

How to create cards#

Introduction#

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.

Pre-requisites

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)

Do you need to update the Card Interface tweak code?#

Whilst the Card Interface is designed to be stable. There are times when an update may be required. The following explains one sign that indicate you may need to update the Card Interface tweak code. The next section explains how to do this.

Are you missing the tools when adding a tools link?

The "Add Tools Link" feature allows you to add a tool link to the Blackboard menu. It should provide you with a list of tools to choose from.

If you have the Card Interface on the current Blackboard page and you are missing tools (e.g. Figure 7) when adding a tools link, then you need to update the Card Interface code.

Figure 7 - No tools listed when trying to "Add Tool Link"

How do you update the Card Interface tweak code?#

Updating the tweak code involves two main steps:

  1. Copy the latest tweak code into your clipboard.
  2. Replace the old tweak code on your Blackboard course page.

More detail follows.

Copy the latest tweak code into your clipboard

  1. View the latest tweak code in your web browser.
  2. Select all of the tweak code.
  3. Copy it into your clipboard.
    (e.g. Figure 7)

Figure 8 - Copying the latest tweak code

Replace the old tweak code on your Blackboard course page

Once you have copied the latest tweak code into your clipboard you:

  1. Visit the Blackboard course page containing the Card Interface.
  2. Edit the item containing the Card Interface instructions.
    (e.g. Figure 2 shows an example item with the Card Interface instructions).
  3. Using the HTML code view button to view the old tweak code.
    (Figure 8 shows the HTML code view button circled in red)
  4. Select all the old tweak code and replace it with the new code in your clipboard.
  5. Save your changes.

Figure 9 - Updating the Card Interface tweak code