Read and Annotate: RnA

• 

  The Main Page

• 

  Here is the Chrome extension part at work!

• 

  Highlighting text

• 

  Adding an annotation marker

• 

  An actual annotation appears when the marker is clicked

• 

  A way to view all the documents with the annotations

• 

  All of the notes on the text will appear in one document.

• 

  A profile with information on the user

Inspiration

 I am currently a TAMS student at UNT, and I have a lot of homework to do daily. A lot of my homework requires me to do things like textbook reading and annotation. While I use the method of writing down my notes on a separate document while reading the text, I often have to do this very annoying thing where I switch back and forth to pick the correct notes and tabs. Additionally, all of the reading on my screen sometimes hurts my eyes and they need a break! Therefore, a TTS reader would be super useful and helpful to allow me to listen to what I read as well. This will make learning and studying much less tedious and much more fun. Additionally, a good TTS system makes things like online documents accessible to those who may have trouble reading. Therefore, as a tired college student, something like RnA is both an intuitive and useful idea! Additionally, making a colorful and retro project sounded like a lot of fun! 

What it does

 Read and Annotate, aka, RnA would work like a Chrome extension and website used to read text off of websites and take notes on them. RnA allows TTS reading to read the text on the website in any speed or voice type of the user's choosing. Additionally, you can also annotate on RnA. To do this, you just take pick which type of annotation that you want to do and then type it up. The best part is, RnA will save your notes and annotations based on the order of the text itself. If there are multiple pages, they will also save on the same document for easy access. Additionally, you can go back to the source and view the source material for the annotations so that you can keep editing or adding on to the notes. 

How we built it

 Since this is a prototype, I used an online website called Proto.io to create and edit this prototype website. 

Challenges we ran into

 I have never really used Proto.io before as a way to make prototypes. I have never really made many prototypes for websites like this that are digital as most prototypes that I have made have been on paper. Therefore, it was a challenge learning how to use an entirely foreign program to me to create this project. 

Accomplishments that we're proud of

 I am very happy with the idea and the fact that I actually managed to learn how to use a new program! I hope to see more in the future for RnA.

What we learned

 I learned a bit about web design and graphic design in general. I do some coding, and it is interesting to see ways that the code can work and what it can do to an idea like this. Both website design and coding go hand-and-hand, so there need to be a balance of style and functionality. 

What's next for Read and Annotate: RnA

 I do have a little bit of coding experience with HTML, Java, and Python. However, I do not really have the skills to really make this thing real in such short period of time. Therefore, it will remain as a prototype, but it is a cool idea for a possible future project that I could do. RnA would be really useful for those broke college kids like myself! 
 Additionally, some other features for the annotation mode could be useful, such as adding more options like to circle or underline. Also, it would be nice to have more ways to edit the document itself and maybe ways to share the document too. 

Built With

• html.
• online
• proto.io
• prototype