Inspiration

We want to tell stories visually in a way that is both fun and interactive.

What it does

The user writes a customized story by filling in a number of prompts which link to words and phrases in the story, like the popular Mad Libs word game. When they click the "Create Comic!" button, their story is displayed below, along with an animated, unique comic strip that integrates the user's often-nonsensical and hilarious word options.

How we built it

The project is built entirely in HTML and JavaScript. The Mad Libs-style interface uses an HTML form to allow the user to select options, and uses JavaScript to gather and store the user's choices. The unique comics were created manually but are programmed in JavaScript to display automatically based on the user's choices. On the style side, we used both Bootstrap and Semantic for CSS.

Challenges we ran into

Across our team we had very little experience in HTML, CSS, and JavaScript. We spent most of the first 12 hours learning the languages and the basics of web development, and our lack of experience led to multiple other issues along the way.

What we learned

As a team of mostly first-time hackathon participants, we gained invaluable experience in how to form, refine, and implement an idea. We started from close to zero knowledge of web development but learned how to format a website and have it run a script.

What's next for Mad-Comics

We plan to add more stories with a diverse set of characters and settings, and eventually to allow users to create their own stories, options, and animations.

Built With

Share this project:

Updates