Visual Knowledge Builder (VKB) Tutorial

---

  

Introduction

The Visual Knowledge Builder (VKB) is a hypertext information collection system.  This means that it allows you to collect and sort information in a very natural, visual environment.  The goal is to allow users to input, organize, and access large amounts of information without having to commit to any particular convention of organization or structure.  VKB offers a wide variety of adaptable features.  What follows are explanations of a number of those basic features and how to use them.

Ø      Note:   A bulleted sentence indicates a trial exercise for the user.

Quick Toolbar Reference

A diagram of the two main toolbars follows.  This can be used as a quick feature reference if needed.  More detailed instructions on how to use the features are found on later pages.

Quick Menu Reference

Similarly, the following is a list of the basic menu options that will be important to you.  This can be used for quick reference.  More detailed instructions are found on later pages. 

Creating Objects

VKB is an object based data collection system, where pieces of text are stored in individual text boxes.  These text boxes are called objects.  Let’s create an object. 

1. Click on the Create Object button on the toolbar.   
2. Then click anywhere on the canvas to create the object.  You can repeat this for as many objects as you want. 

Ø      Practice making three objects. 

Click on the video icon to see about how we create Objects in VKB. (size 1.61 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Creating Collections

Objects containing related information can be stored together in a collection.  Collections can contain objects and other collections.  Let’s now create a collection. 

1. Click on the Create Collection button on the toolbar. 
2. Once again click anywhere on the canvas to create the collection.  You can repeat this for as many collections as you want. 

Ø      Practice making two collections.

Click on the video icon to see about how we create Collections in VKB. (size 1.69 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

 Editing Objects

Now that you have created objects, you can alter the way they look.  There are four main things you can do to alter an object: change the size, change the color, change the border, or change the text.  In order to do the first three, the object must first be selected. 

Selecting an Object

An object or set of objects is selected if their border or borders have little black “resize squares” around them like the following:

To select an object or objects, do one of the following:

(1)   Click on the border of the one object or collection to be selected; or

(2)   Go to the Edit menu and click Select All (will select everything on the canvas); or

(3)   Left drag on the canvas to create a “box” around one or more of the objects, as shown below.  All of the boxed objects and the collection become selected.

Click on the video icon to see about how we select an object in VKB. (size 1.80 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Changing the Size

1. To resize an object, it must be selected.  Try selecting one of the objects you created. 
2. Left drag any of the “resize squares” until the object reaches the desired size.  The squares on the middle of the sides will only alter one direction (the top and bottom, the height; the right and left, the width).  The corner squares will alter both directions simultaneously. 

Ø      Try making the object approximately twice the width it used to be. 

Click on the video icon to see about how we change the size of an object in VKB. (size 1.78 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Changing the Color

1. To change the color of an object, it also must be selected.  Select the same object you just resized. 
2. You can then click on any of the Background Color buttons on the toolbar (as seen below) to change the color of the object.  The default setting, as you can see, is green. 

Ø      Change the object to blue.  Select one of the other two objects and change its color to red. 

Click on the video icon to see about how we change the color of an object in VKB. (size 1.83 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Changing the Border

1.      Changing the border of an object is done in a very similar manner.  Once again the object must be selected. 

2.      There are two ways to change the border, i.e., one is to change the border color and the other is to change the border width.  You do both of these by clicking on the appropriate buttons on the toolbar (as seen below).

      Border Colors                                                  Border Widths

Ø      Try to make the red object have a purple border. 

3.      You will notice that the whole object turns purple instead of just the border.  This is because the background and border colors are “attached” in the default setting.  If you would like to alter just the border color separately from the background color, you must first make sure the attachment button is in “detached” mode.  You do this by clicking on it.  You can tell by the picture which mode it is currently in. 

Ø      Put it in detached mode.

Ø      Now change the background color back to red.  The border is probably too thin for you to tell that it has worked, so click on the rightmost border width button.  You should now have an object with a red background and a thick purple border.

4. Note that the attachment button remains compressed, meaning that future objects will similarly have detached backgrounds and borders until the button is pushed again.

Click on the video icon to see about how we change the border of an object in VKB. (size 2.17 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

1. The final option is to change the text within the objects.  Presently none of your objects should have text in them.  To add text, you must click on the inside of an object, in the “text area.” 
2. From there, you can type whatever text you would like.  You can also copy, cut, and paste text between objects or from other applications. 
3. If you would like to change the font family, font size, font color, or font style of the text of the object you are editing, click on the Editing Font and Text Color button on the toolbar.  This will bring up a menu in which you can choose these text properties (as seen below). 

Ø      Click inside the remaining green object and then click on the Editing Font and Text Color button.  Make the font size 14 and the style Bold.  Now click OK on the bottom of the menu (clicking Cancel will leave the font as it originally was).  The changes will now have taken place.  Now type your name and one of your hobbies in the object (you may have to reclick in the object’s “text area”). 

4. If necessary, resize the object so all of the text fits on the screen.

Note:  Sometimes when you create a new object, text will automatically appear in the object.  This text corresponds with the last thing you copied in an earlier application.  It is a shortcut for your benefit, since often you might copy text and immediately create an object in which to place it.  However, if you do not want that particular piece of text in the object, simply hit Delete on the keyboard since the text appears highlighted already. 

Click on the video icon to see about how we change the text inside an Object in VKB.  (size 1.94 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Editing Collections

Now that you know how to edit objects, you can similarly edit collections.  Changing the size, color, and border of collections is done in exactly the same manner as changing those features on an object.  Simply select the collection instead of the object and then push the appropriate buttons on the toolbar.  Make one of your collections yellow just to review (both background and border). 

Changing the Text (Collection Title)

Text, however, is handled in a different manner.  You cannot type directly in a collection.  You may only alter the collection title. 

1. To do this, click in the title bar of the collection and edit the collection name directly (you may highlight, copy, cut, paste, and edit the font [using the Editing Font and Text Color button] just as you did with the text in objects; however, the length of a collection title should be relatively short if you want it to be readable). 

Ø      Practice making the yellow collection title “Howdy” in blue, Comic Sans font. 

Click on the video icon to see about how we change the title of a Collection in VKB.  (size 1.99 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Moving Objects In and Out of Collections

As stated before, collections can store related information, whether it is objects or other collections, within themselves.  Therefore, we need to know how to move objects and collections in and out of the collections to which they belong.   

First, we must know how to move an object around the canvas. 

1. To do this, select the objects or collections to be moved. 
2. Then, avoiding the “resize squares,” left drag (anywhere else) on the border of any one object or collection to the desired location. 

Ø      Practice moving any one of your objects to a different location on the screen. 

In order to move objects or other collections in and out of a “holding” collection (the one we wish to use to group the others), we go through the same process. 

1. We move the objects or collections over the inside of the “holding” collection; the border of the “holding” collection will darken to show that the moving objects or collections are now in the proper position. 
2. Releasing the mouse at this point will now place the objects or collections into the “holding” collection. 

Ø      Move both the green and red objects into the yellow collection. 

Click on the video icon to see about how we move Objects in and out of the Collections.  (size 2.22 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Maximizing Collections

The final difference between objects and collections is that collections can be maximized to show all objects and collections that are stored within them.  If there is too much information in a given collection, often some of that information will be hidden from view. 

1. To see this information, simply double-click on the (usually darker) title bar of the collection (not the actual collection title).  The collection should now take up the whole canvas. 
2. Double-click again on the title bar and the collection will be restored to original size. 

Ø      Try maximizing the yellow collection and restoring it back to normal size.

_________________________________________________________ 

At this point, your VKB canvas should look similar to the one below: 

Ø      Please go to the File menu and select Save As. 

Ø      Call the file <your name>.vkb and then click the Save button.

Click on the video icon to see about how we minimize, maximize and resize Collections in VKB. (size 2.19 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here. 

Additional Features

The following are a few other features that could be helpful to you in using VKB; however, these are not essential to completing the task.  Any other features not included in this tutorial will not be used in the task (and are probably not needed by beginner users [for example, the start/end link buttons which allow you to link multiple VKB spaces]). 

Transparency

A text object or collection can be made transparent to its “holding” collection or the canvas background.  Text can be seen, but the border and background will become transparent, allowing sight of whatever is behind the object or collection in the workspace. 

1. To do this, select the objects or collections to be made transparent. 
2. Then click the transparency button on the toolbar (as seen below). 
3. Selecting the object and clicking the button again will reverse it.

Click on the video icon to see about how we can make an object or collection transparent. (size 1.98 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here. 

Send to Back

You can also send one object or collection behind another one to allow an object to be seen that is being obstructed by another. 

1.      To do this, select the object or collection to be sent to the back.

2.      Click on the Arrangement menu.

3.      Select Send to Back.

Click on the video icon to see how we send objects or collections behind others. (size 1.95 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here. 

Putting URL’s and File Links in Objects

If you wish to make an object a URL or file link, you can do this quite simply. 

1.      Create an object or go into an existing object and add the following.

2.      For a URL, type:          " URL: “http://www.location.com” "     

where http://www.location.com  is the URL.

3.   For a file link, type:     " FILE: “C:\My Documents\My File.ext” "  

where C:\My Documents\My File.ext  is the file.

Note: For a file, you may also open the file and drag and drop it into the VKB workspace.  This will automatically create the link in a new text object.

4.      Double-clicking the border of an object with a URL or file link will automatically open the site or file.

Click on the video icon to see how we put URL's and file links in objects. (size 3.04 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here. 

Duplication

If you would like to duplicate an object or collection in its entirety, the duplication button can be used. 

1. To use this, select the objects or collections to be duplicated.
2. Click on the Edit menu.
3. Select Duplicate. 
4. You can now rearrange the duplicated items as needed.

Click on the video icon to see how we duplicate objects in VKB. (size 1.75 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here. 

Deletion

You may also delete objects or collections at any time. 

1. To do this, select the objects or collections to be deleted.
2. Click on the Edit menu.
3. Select Delete.

Click on the video icon to see how we delete objects and collections in VKB. (size 1.71 MB)

 If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Start/End Link Buttons

There are two kinds of links in VKB.  One is an internal link and the other is an external link.  Internal links allow you to jump automatically to another part of your current VKB document (i.e., another object or the inside of a collection).  External links allow you to jump from one VKB document to an entirely different one.  Both of these are done using the same two buttons, the start/end link buttons (as seen below). 

1. To perform an internal link, you select the object that you want to be the start of the link.
2. Then, click the start link button. 
3. Select the other object or collection that you want the link to jump to. 
4. Click the end link button.  A yellow arrow should now appear on the top of the object that starts the link (as seen below). 
5. Clicking on this arrow will cause you to jump to the link’s ending location.

An external link is performed in the same way except that instead of picking an ending object or collection, you must pick a whole other document. 

1. Without selecting anything on the ending document, click the end link button. 
2. There will now be a red arrow on the starting object (as seen below). 
3. Clicking on this arrow will cause you to open a new window with the other document displayed.

Click on the video icon to see how we create internal and external links in VKB. (size 3.04 MB)

 If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Web Search          

You can select between search in Google and in NSDL (National Science Digital Library.)

Web search returns the results of the search in a collection.

Click on the video icon to see how we perform web search in VKB. (size 1.88 MB)

 If you cannot play the video try to download the TechSmith Screen Capture Codec here.

Background draw

Click on the video icon to see how we draw on the background of a collection. (size 2.60 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.   

History

An important feature of VKB is the history.  VKB stores every change made in the creation of a workspace, including text changes made in objects.  Any number of edits can be “undone” to revert to a previous state of the workspace.  Furthermore, you can quickly review the previous states of the workspace.  Data is not lost when exploring the evolving history of a workspace. There are various ways to access past instances of the VKB canvas. The access can be done either sequentially or directly. In the former way, the traversing can be started from any past action.

 Undo

You can go back in time by performing multiple “undo” actions.

Click on the video icon to see how we use the undo / redo feature in VKB. (size 1.98 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here.   

Timeline slider control

You can manually access a previous status of the canvas by moving the index of the Timeline slider control back and forth. Changes in a past canvas can cause the loss of information.

To Go Back in the History:

1. You can click the left arrow on the history toolbar to go back one step in the history at a time.
2. You can also drag the timeline slider control to the left to more rapidly advance.  You will notice that you can move this until the step number or time and date stamp matches the previous state you wish to visit (as seen below).  

Ø      Try going back to step number 5 on your document using the timeline slider control. 

Ø      Then go back one more step using the left arrow. 

To Go Forward in the History:

Going forward in the history is done in a similar way. 

1. You can push the right arrow on the history toolbar to go forward one step in the history at a time. 
2. You can also drag the timeline slider control to the right to more rapidly advance. 

Ø      Try using the timeline slider control to move forward to step 10.

Ø      Then use the right arrow to go forward one more step.

Playback buttons

You may also view the previous states of a workspace in a movie-like form, if you do not wish to click through them one step at a time. 

1. First, you can select the speed of playback by clicking on the playback speed button and selecting one of the speed choices. 
2. Choose “slow” for this example. 
3. You can then click the backward and forward buttons on the history toolbar to play the history in the direction you want.  It will continue to play until the workspace reaches the beginning or the end of the history, respectively. 
4. You can also manually stop the playback at any point by clicking the stop button (as seen on the next page).  These buttons work much like a VCR. 

Ø      Click the forward button to play back to the most recent state of your document. 

Ø      Watch as it rebuilds itself one step at a time.

Note: If using the Undo and Redo buttons in the Edit menu, actions are deleted from the history when a new action replaces them.  You may be asked if you are sure you want to make any changes, since once a step in the history is deleted, it is permanently gone.

Click on the video icon to see about the use of the Timeline Slider Control and the Playback Buttons  in VKB. (size 3.01 MB)

If you cannot play the video try to download the TechSmith Screen Capture Codec here. 

Summary

In general, with VKB you can perform the following tasks:

ü      Create and Edit Objects

ü      Create and Edit Collections

ü      Create links between Objects and Collections

ü      Create URL’s and File Links in Objects

ü      Access previous statuses of the canvas

Back to the VKB homepage

Center for the Study of Digital Libraries &
Hypermedia Research Laboratory
Department of Computer Science
Texas A & M University