Filipa’s Project Brief: Social Annotation

As any English teacher knows, a student’s personal engagement with literature is very difficult to track. In higher education especially, students are expected to complete the reading by themselves and come to class prepared to discuss the texts. But how can teachers gauge the student’s reading experience? And how can they encourage active reading strategies at home? The fact is that reading consists of largely isolated and invisible work, which remains inaccessible to teachers and other students. Furthermore, the habit of responding to text requires thoughtful cultivation through practice and modeling. Many students do not know how to close-read a text, much less to think critically about their responses and questions. How can teachers stimulate the student’s reading process, the moments of insight and questioning that occurs during the act of reading? Building the skills of active and critical reading calls for extensive dialogue between teachers and students, which is difficult to facilitate outside the face-to-face interaction of the classroom.

This proposal explores digital annotation as a solution to making solitary reading practices more visible, and accordingly, social. I aim to modify an existing annotation tool to use in my English 220: Introduction to Writing about Literature class at Hunter College. In general, annotation tools allow students to comment directly on the reading by highlighting the text and typing in their own response. The comments are then indicated to other users by highlighted text, to which they can respond. This tool will be implemented with careful consideration to the intended user, who is a CUNY student in an English class. Living in New York City, this student must make the most of the work spaces available to her, from the library to the subway car. The tool will function on all devices, especially cell phones, to allow accessibility for students on the move. Besides being used to guide independent reading, the tool will also facilitate less vocal students’ responses to texts in the classroom. Overall, the tool will maximize participation from CUNY students, fostering a social reading environment inside and outside the classroom. It will be deployed online, as a plugin for WordPress so that students can use it across all devices (without having to download or configure it) anywhere they have wifi service. Additionally, I hope to make it compatible with the CUNY Academic Commons, which I currently use to teach my English course at Hunter. To build this tool, I will borrow from the existing, open source annotation tools, Annotator.js and Though they look slightly different, both tools allow users to comment directly on digital text and to read each others’ comments. The complete code for both projects is on Github, and both Annotator.js and encourage extension of their work, showcasing how others have customized the tool.

My project will build on either Annotator.js or, modifying their tool for more flexibility and visibility. Annotator.js is a javascript library that can be added to virtually any webpage. To use the tool, users highlight the desired text and type their response in a simple text box that appears. After saving the response, the original text now appears highlighted, and users may view the annotation by hovering the mouse over the highlighted text. By clicking on this text, users then can add their own annotations, which will appear below the previous annotation. Annotator.js is made to be easily extensible, and is one of its more popular developments, which is also extensible. works similarly to Annotator.js, but it includes options for different reading modes and group reading. Users can control the visibility of their annotations by working in “public”,  “private” or “group” mode, as well as making all annotations temporarily invisible, to display a clean interface. Additionally, rather than rendering or “floating” the annotations over the text, stores them in a sidebar, which can be expanded or minimized by the user. The sidebar allows for threaded conversations, where users can respond to specific comments., unlike Annotator.js, is also integrated as a wordpress plugin on the CUNY Academic Commons, and I am currently using in my English 220 class at Hunter. Using this tool in my classroom has opened my eyes to its drawbacks and potential. My ideal version of the tool would make annotations more visible and interactive. In this version, the only formatting options are for bold or italicized text. My implementation would offer more extensive formatting options, allowing for different sizes and colors, so that students can read the annotations from a projected screen (in a classroom) and use color-coding to indicate different kinds of responses. Also, I would include more social features, such as voting or “liking” buttons, to encourage students to respond to their classmates’ comments.

To build this tool, I will have to familiarize myself with the existing codebase for Annotator.js and/or, and be comfortable enough with several coding languages to make changes. Though I have implemented both and Annotator.js in my past teaching and research, I have never built or customized anything with this level of complexity, and I’ve certainly never written code from scratch. From browsing the documentation and Github repositories for these tools, I sense that I would need proficiency in (at least) HTML, CSS, Javascript, and perhaps Python. I feel comfortable enough with HTML and CSS, and have a working knowledge of Javascript and Python. At this point, I anticipate that I would need to focus on strengthening my CSS and Javascript ability in order to carry out this project. I also anticipate that I will be borrowing from existing open source projects and implementations of Annotator.js. In that case, much of my preparation will also be spent researching other annotation tools, and familiarizing myself with the open annotation community.

3 thoughts on “Filipa’s Project Brief: Social Annotation”

  1. Thanks for posting this, Filipa. As noted in class, we think you should work on a more detailed environmental scan exploring the relative affordances and limitations of existing annotation tools. That will work should allow you to frame a critique which can act as both the rationale and the guide for the intervention into this space that you would like to make. We’re very excited about your project and eager to see it evolve!
    – Luke and Maura

Leave a Reply

Your email address will not be published. Required fields are marked *