Draw the Card

Study with friends while using pictures!

Comment

Inspiration

Our project was inspired by Zoom study sessions from the previous year. One of the most popular games played during online learning was Skribbl, which is an online version of Pictionary where friends can interact and guess randomly generated words. Draw the Card combines learning and Pictionary, allowing students to have fun and study at the same time!

What it does

Our website is comprised of two parts- one page where you and a friend can create and save flashcards. Users can add and flip flashcards to practice active recall. On another page, users are given a canvas where they can play Pictionary. Users decide on a word previously studied with friends, and draw the idea until someone guesses the word correctly. This canvas has three features- resizing the brush, changing the brush’s colors, and clearing the canvas. After finishing a round of Pictionary, users can go back to the flashcard page to continue studying.

How we built it

We used HTML5, JavaScript, and CSS to complete this project.

Challenges we ran into

We had difficulty understanding Vercel and pushing code on Github. Additionally, learning to save multiple cards was something we needed to learn. Offsetting the cursor of the canvas was another challenge we faced. In the future, we plan to create an interface that requires a login so that multiple players can guess what word was being drawn.

Accomplishments that we're proud of

We are proud of being able to code for the first time in JavaScript and CSS, and for designing our first website!

What we learned

We learned Vercel, Figma, JavaScript, HTML5, and CSS in the process of completing this project. We also learned how to customize our website using our favorite colors.

What's next for Draw the Card

We plan to turn this website into a full-scale project. It will require logins so that the website can register whether someone is guessing or drawing, and it will also need a word generator to provide the drawer with a prompt. Additionally, we plan on streamlining the UX to make our website more user-friendly.

Built With

Share this project:

Updates