Whizdom

Inspiration

Whizdom was born out of the need for an all-encompassing competing standard for social/academic quiz games. In several of our (the developers') classes, we used competitive quiz games to study for tests, review in class, run a school club, and practice for academic quiz tournaments. However, these quiz services often lacked variation, did not reward speed and accuracy enough, and had game-breaking glitches. Whizdom is the culmination of our efforts to solve these problems and create the ultimate quiz game.

What it does

Whizdom is an interactive quiz game designed for groups of at least three. Whizdom is very versatile and has multiple purposes, including academic studying, school activities, or just fun with friends! The game is simple: a question pops up, and each player has the option to answer it in short answer format early for bonus points, or wait for multiple choice answers to pop up, a binary system created to encourage smart risk-taking and reward specific knowledge. All question sets are user created, meaning they can very greatly in topic, focus, difficulty, and length. Anybody can create a set in a few clicks, or can browse other people’s sets. All it takes is one device per participant plus the host!

There are many reasons to pick Whizdom over any alternatives. For starters, it can be used offline in your browser. It sounds unbelievable, but after the first time visiting whizdom.io, going to the website will allow you to practice your question sets! In addition, Whizdom is played entirely on the participants’ own computers, meaning that there is no need for a projector/television. Yet another reason to pick Whizdom is the option to add explanations for why answers are right or wrong, adding another layer of depth and allowing students to quickly learn, study, and retain knowledge. Finally, the ability to quickly and easily collaborate with teachers and friends on making question sets is hugely important, as it allows everybody to contribute and makes life easier for the maker of the set. All in all, Whizdom’s perfect combination of simplicity and features makes it the ultimate choice for a quiz game in any situation and environment, be it friendly or competitive!

How we built it

First, we decided to keep our main backend web server running on Express.js, an extension of Node.js which is a popular framework. After this decision, we decided to keep our work in typical web app style, just running html, css and javascript. We wrote all of the pages ourselves with help from Bootstrap and the Google Material Design Library for styling, as well as jQuery to extend the functionality of JavaScript. We used forms and more express calls to cover submitting data such as the CSV files we converted into JSON. The rest of the app was built on Javascript with some NPM modules installed to make the app more functional. One notable module was the WebSocketServer module which allowed us to set up a “server” to run our games off of.

Challenges we ran into

One challenge we ran into was our relative inexperience with the technologies used. Only 2 of us had used Express before (and both only on one occasion), and none of us had ever worked with WebSockets before. Thus, we spent a lot of time searching for solutions to rudimentary solutions and writing code that should have been simple setup code. This inexperience also manifested itself in an issue we had with Express wherein we didn’t realize we had to use a different middleware to read the file inputs being posted by our form. The issues bred by our lack of knowledge about our technologies hindered us in the end.

Accomplishments that we're proud of

Obviously, the greatest accomplishment at this hackathon was overcoming the difficulties and limitations we faced. Due to our inexperience with Express and WebSockets, many challenges presented themselves, over all of which we were able to prevail through perseverance and smart use of the many resources available to us. In addition, an important accomplishment is the creation of Whizdom itself. This was a large achievement to us because it was a fleshed-out project that could end up in our résumés and portfolios, thereby increasing our value to potential colleges and employers, as well as our skillset. Finally, one accomplishment that we are proud of is proving our ability to compete with the brightest students, both from colleges and high schools around the USA and the world. Although our experience with programming and technology is limited coming from a relatively small high school that has no true computer science class, we have overcome this difficulty by using the many resources we found on the Internet, as well as attending workshops and asking mentors for help.

What we learned

Rohan: I learned a lot about design at PennApps, including terms such as “dark pattern”, tips and tricks, do’s and don’ts, and resources for learning. I was able to apply a good portion of this knowledge to the design of Whizdom, using concepts such as negative space and minimalism to create a pleasant interface. In addition, I learned to carefully choose design elements based on target audience, which I used by creating an interface that I felt a teenager would interact well with and therefore maximizing the effectiveness of our product.

What's next for Whizdom

After the conclusion of PennApps we (the devs) plan on hosting the website somewhere and using the domain whizdom.io. We will make an effort to integrate Whizdom not only into our classes, but also our clubs/extracurriculars, including our school’s Academic Team.

Built With

• css
• express.js
• mdl
• node.js
• websocket