Project 2: Real Time Study Buddy

For this project I wanted to focus on how I could apply real time communication over the web to an actual problem. I thought about how students often like to study together before a big test but aren’t always available to physically get together. So, I created a website where multiple users can connect at the same time to study and discuss a particular class through a real time chat. I also know that it is helpful to quiz each other on test material. Not only does this help students think about and predict which questions their teacher will ask but it also allows other students to test their knowledge of the material. With this in mind I divided my project into two parts. One half for a chat and the other half for quizzing each other. Users are able to submit quiz questions with expected answers and then see when another answers their question correctly. I also added a feature that allows users to separate into different rooms so different study groups can all use the same site at the same time.

Instead of using p5 to create the display I focused on how I could use Javascript to manipulate the DOM. I used socket.io to send various pieces of information back and forth between users, including usernames, user colors, questions, messages, and when someone answered a question correctly. When using socket I had to make sure I followed the trail of callbacks carefully so that the correct information was displayed at the right time. I also used arrays to store the questions, expected answers, and who asked each question.

Project 2: Real Time Study Buddy from kshioshita on Vimeo.

Project 2: Study Buddy Demo from kshioshita on Vimeo.

Link to Real Time Study Buddy

GitHub

Index.html, server.js, and style.css:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s