Glossary Tool
This is a tool we've developed to allow ANGEL course developers to create a glossary of terms and tag instances of those terms in the course content. Then when users mouse over terms the glossary definition of the term will be displayed. This tool uses JavaScript, AJAX and CSS to make the content interactive. Mouse over the terms in the previous sentence to see this tool in action.
This tool does not require a database. Though it is designed for use in the ANGEL LMS, it could be used in any web site.
The Files:
ajax.js - an AJAX library by SitePoint.com
behaviour.js - Uses css selectors to apply javascript behaviours to enable
unobtrusive javascript in html documents. [more info]
glossary.js - parses the document and looks for elements with class="glossary" or class="highlightSpan" and makes them interactive.
glossary.css - contains the styles used by glossary.js to control the appearance of the glossary terms. You can use your own CSS to override the ones defined here.
glossary.txt - your list of terms with definitions. Each term must be on its own line. Your definitions can contain valid HTML, but NO extra line breaks. I suggest that you keep your terms in alphabetical order.
The Setup:
1. Copy and paste to following code into each page where you want glossary tooltips before the closing </body> tag:
<script src="/msu_jscript/behaviour.js" type="text/javascript"></script>
<script src="/msu_jscript/ajax.js" type="text/javascript"></script>
<script type="text/javascript">var vuDAT_glossary = "$COURSE_PATH$_assoc/glossary.txt";</script>
<script src="/msu_jscript/glossary/glossary.js" type="text/javascript"></script>
2. Create a file called glossary.txt in the text editor of you choice. Make sure you file is NOT in unicode format. Use the format in the sample file. Each glossary term and definition must be on a single line, separated by a pipe ( | ). Show Example.
3. Put glossary.txt in your ANGEL course.
Log into ANGEL > Lessons Tab > Utilities > Associated File Manager > Add content > Upload Files > Browse (find your file) > Upload File
4. Highlight the terms from your glossary in your course text (make sure the page format is set to "HTML Text").
- Tag terms manually by putting them in spans with
class="glossary"orclass="highlightSpan".
Example:
--I like to eat <span class="glossary">beef</span> because it tastes good.
Or - Tag it using the ANGEL HTML editor
-- Highlight your term (ie. beef) > Click the Style dropdown menu > select Highlighted
Figure showing how to tag terms using the ANGEL HTML Editor
FAQ
Q: How many terms can I have in my glossary?
A: I've tested the script with a few hundred terms and it performed fine. The more terms you have, the longer it will take to find definitions. Terms at the beginning of the glossary will be found quicker.
Q: Can I have multiple definitions for the same term?
A: Yes, however only the first one will be displayed in the tooltip. If you want different instances of a term to display different definitions, read about 'context'.
Q: Why am I getting a blank popup when the page loads?
A: Chances are that a path is wrong. Please make sure that you have all of the files in place and they are referenced properly.
Q: How can I have the entire glossary displayed in my site?
A: Set up your page like the rest of your content page with glossary terms in them using steps 1-3 from the setup section above. Then paste this code into the page where you want the glossary. <div id="glossary"></div>. Only insert one instance of this code in a page or you'll get errors. There is an example below of what the output looks like.
