STEAMPictionary

Let our girls learn STEAM by thinking actively.

Comment

STEAMPictionary

A Fun and Engaging Way to Learn STEAM Concepts with Friends.

Inspiration

Quite often, introductions of STEAM concepts are usually passive. This is where STEAMPictionary comes in- making learning more fun and interactive through gamifying the process and actively engaging users to formulate their own interpretation of STEAM concepts.

What it does

The game is very similar to the traditional Pictionary game, except that the words to be guessed are STEAM jargons. One drawer is selected from the group of players who tries to depict the concept of the jargon through drawing, while the rest of the players guess the word. Users can go to the revision room to review the words learnt.

How we built it

The game is written in HTML, CSS and JavaScript and is developed with the package socket.io and nodemon. To run the scripts: 1) clone the STEAMPictionary and STEAMPictionary-server repositories included below 2) open the terminal, run npm start in both repositories 3) open the link http://localhost:1234/index.html 4) start playing

What we learned

I definitely learnt a lot more about Javascript concepts such as querySelectors and event listeners through this hands on project, and my knowledge of client-server network is also strengthened through working with socket.io.

Challenges we ran into

A client-server network has to be established in order to make this game, which is completely new to me. To achieve this, I watched youtube tutorials, read documentations and researched similar GitHub projects, finally deciding to use socket.io. Regarding the web layout, I took reference from existing Pictionary games such as skribbl.io.

Accomplishments that we're proud of

It is my first time building a client-server network, so it is really fascinating to create a working multiplayer game.

What's next for STEAMPictionary

1) Allow user-defined study sets 2) Enhance web appearance through collaboration with web designer friends 3) Allow users to store their progress in an account.

Built With

Share this project:

Updates