The web application "Middle School Adventures with Juliet" was inspired by novels we enjoyed reading and games we played at that age. As middle schoolers, we were influenced by games on the App Store such as "Episode Interactive" and "Choices". Creating a unique storyline with personalized characters has always been a dream, and we are grateful to finally complete this project.

What it does

Our webapp takes players through a story in the perspective of a 12 year old girl who goes to Eastside Middle School. Making to socially responsible decisions will result in Juliet gaining points. Different points lead to different endings!

How we built it

The project was broken into different components, the story, the images, the code, and the web interface. Incorporating the story, we coded a general algorithm for the various functions using JavaScript. Using HTML and CSS, we created a layout of the site with different elements including hand drawn images.

Challenges we ran into

This project was a little difficult to work collaboratively, as we would work on different versions of code occasionally without realizing we were doing so. This resulted in accidentally deleting another group members work. Additionally, there were many small bugs when writing the code that were hard to find, as we were not using a proper IDE to run our program.

Accomplishments that we're proud of

Completing the project as first time hackers! Our team has collaborated several times to work on programming projects, but this is our first program incorporating JavaScript, HTML and CSS together. As we are in the same program at Western University, we felt unsatisfied with how our JavaScript course ended, since we never created a real program. This project helped us find closure within that course and solidified our understanding of JavaScript.

What we learned

Overall, our team has a much better understanding of the elements of JavaScript, HTML and CSS, and how they tie together as one project to create a website. Our largest goal coming out of this project was to create a project that could demonstrate our knowledge in these three languages.

What's next for Middle School Adventures with Juliet

Up next, we want to improve the web interface with animations and a more professional layout, and we would like to broaden the stories being told (perhaps have multiple stories on one site). Ideally, we would also make this application cross-platform and compatible with mobile.

Share this project: