Collaborative online annotation offers a new kind of reading experience: instead of making notes in the margin of a book, readers can now share their reactions instantaneously and build a body of commentary about a text together. The eComma (eCommentary Machine) open source drupal module allows its users to annotate texts at the word level and to share their annotations with others. The eComma drupal module was created by developers at the Center for Open Educational Resources and Language Learning (COERLL) and based on a web application that was designed by a team of graduate students and faculty members of the Department of English at the University of Texas at Austin. The project was started on a Digital Humanities Start-Up Grant from the National Endowment for the Humanities as well as an IT Grants from the University’s Liberal Arts Instructional Technology Services and is now funded by the U.S. DoE Title VI Program.

1. eComma drupal
Currently available for drupal 6

2. http://www.quitano.com/article/learn-d

3. MODULE DEPENDENCIES
• cck
• panels
• page_manager
• taxonomy
• community_tags
• Tagadelic
• comment_delete
• views_bonus_export
• og (organic groups)
• userplus

5. ECOMMA RENDERED TEXT DISPLAY

6. JAVASCRIPT TEXT RANGES
ecomma.js
ma_line").mouseup(function() {
if (window.getSelection){
sel = window.getSelection();
text = window.getSelection().toString();
}
else{
// IE.
sel = document.selection.createRange();
text = document.selection.createRange().toString();
}
if (sel.getRangeAt){
range = sel.getRangeAt(0);
}else if (document.createRange){
// Safari.
range = document.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);

7. RENDERED ECOMMA TEXT
HTML code of displayed rendered eComma text output from
ecomma.module

8. RENDERED ECOMMA TEXT
HTML code of displayed rendered eComma text output from
ecomma.module

9. RENDERED ECOMMA TEXT
HTML code of displayed rendered eComma text output from
ecomma.module

11. PANEL DISPLAY

12. PAGE MANAGER

13. PANEL

14. CUSTOM PANEL TEMPLATES & LAYOUTS
eomma.module
function
ecomma_ctools_plugin_directory($module, $plugin) {
return "includes/plugin/$plugin";
}

15. CUSTOM PANEL BLOCKS
Word Cloud with highlight links

16. CUSTOM PANEL BLOCKS
Comment display panel with highlight buttons
views_bonus_export
module
Comment delete module

17. CUSTOM PANEL BLOCKS
Comment display panel with highlight buttons
Views_bonus_export:
• Export xml
• Display views feed in google spreadsheet

18. CUSTOM PANEL BLOCKS
Tag display with highlight button and links (green on hover)

19. CUSTOM PANEL BLOCKS
Annotation input draggable dialogue window

20. CUSTOM PANEL BLOCKS
Comment Cloud
ecomma.module
JQuery plugin
drupal_add_js(drupal_get_path('module', 'ecomma') .'/js/jimpl_cloud.js');

21. CUSTOM PANEL BLOCKS
User Annotation list and (totals)

22. COLLABORATIVE TEXTS FOR CLASSES WITH OG
Organic Groups
Node
Group

23. SUPERUSER MODULE

24. DRUPAL DB TABLES CREATED ON INSTALL
ecomma_range

25. DRUPAL DB TABLES CREATED ON INSTALL
Ecomma_field_enabled

26. DRUPAL ECOMMA VOCABULARY ON INSTALL
ecomma.install
$vid_existing = db_result(db_query("SELECT vid FROM {vocabulary} WHERE
name='ecomma'"));
if(!$vid_existing):
$vocab = array(
'name' => 'ecomma',
'description' => $t('To use with ecomma.'),
'help' => 0,
'relations' => 0,
'hierarchy' => 0,
'multiple' => 0,
'required' => 0,
'tags' => 1,
'module' => 'taxonomy',
'weight' => 0,
'nodes' => array('ecomma_node' =>
'ecomma_node'),
);

27. CCK TEXT FIELD IN ECOMMA CONTENT TYPE

28. HOOK_MENU WITH AJAX
function ecomma_menu() {
$items['tag_range/%/%/%/%'] = array(
'title' => 'Annotation range',
'description' => 'Insert term annotation data.',
'page callback' => 'ecomma_tag_range_function',
'page arguments' => array(1,2,3,4),
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);

33. Photo: NASA/Bill Ingalls