Living in the bay area, most people here are lucky to live in a place with new technological advancements right at their fingertips. We were able to explore the world and express our creativity using computers and other gadgets ever since we were small children. But our team realized that the whole world does not have same education and access to technology that we have. There are many lower-income families who cannot learn and pursue their interests, even if they really wanted to.That's why we thought a simple website where people can take a few short lessons on what they are interested in for free would give them a kick-start for their pursuit to do what they love in life.
What it does
Portable Tutor is like a tutor right in your pocket. Upon visiting the website, you can start looking for tutors that will teach you what you want. You can choose a subject, such as Science, Math, or Computer Science, and the website will provide tutors who are available to teach you right now. There will also be more filter options to narrow down your results. Once you choose a tutor, you will be taken to a "LiveNotes" session page. LiveNotes is a service that lets the actions and explanations of the tutor be viewed in real time by the student. The teacher can write, sketch, and doodle with different colors, and explain the exact questions that the student has, right then and there. After the students have felt they have understood, they can thank the tutor and leave LiveNotes.
How we built it
For the website, we coded in HTML and CSS. We explored many different CSS styles, and chose the one that looked more organized and was easy on the eyes based on UX design concepts. The images and logo were made using Adobe Photoshop, where we created rounded rectangles, and added drop shadows. We also used Keynote to tweak the images. Overall, we tried to go with a simple and minimalist design. We coded the LiveNotes entirely in Java. We created two different files, a "Server" file and a "Client" file, where the server would be the tutor, and the client would be the student. We used networking by making Socket and ServerSocket objects. Here is an example of the code from the Server side:
ss = new ServerSocket(7778); ... dos = new DataOutputStream(s.getOutputStream());
We used this to share information like cursor X/Y coordinates and the current color chosen. We used the package javax.swing to make the GUI of LiveNotes. JRadioButton was used for the buttons that choose the color, and JPanel and JFrame were used to make the main drawing board and window. MouseListener and MouseMotionListener were used to track mouse actions.
Challenges we ran into
We were originally going to have the LiveNotes open up in the browser as a Java applet, but many browsers blocked the applet for security reasons. This forced us to use JFrame to create a stand-alone version of LiveNotes.
Accomplishments that we're proud of
We are proud of the successful networking of LiveNotes, since the sketches and lines show up at exactly the same positions at the same time, and networking in Java is something we learned entirely during HackingEDU. We are also proud of the professional look and design of the buttons, logos, and titles.
What we learned
All of our team members now know basic HTML, since we all worked together to fix problems and errors with the website. We also learned the basics of networking with Java, and got an idea of what goes on behind the scenes whenever we use the internet or play multiplayer games. Overall, we brushed up on all our coding skills, and learned new languages while also discovering new possibilities to the languages we already knew.
What's next for Portable Tutor
The Portable Tutor we are presenting here is more of a prototype of what this service could actually be. LiveNotes could be vastly improved by implementing more options for the tutor, such as an eraser option and change of line thickness, and more interactivity for the students, so they could sketch on the drawing pad as well and also send messages back and forth with the tutor. Real tutors could sign up for Portable Tutor and be ready for any questions students have. Portable Tutor could be a place for everybody, whether they are trying to understand a concept from school, or are not able to go to school. Our hopes are that this idea can be used to make sure everybody's dreams for their life can come true and that everybody gets the education they deserve.