Cranehoot is a cloud-hosted, mobile-friendly, multiplayer quiz powered by VueJS, NodeJS, SocketIO, MySQL & AWS
- Play singleplayer or multiplayer
- Create lobbies to play with your friends
- Use powerups to help yourself or hinder your opponents
Creanehoot uses a number of open source projects to work properly:
- Vue.js - Model–view–viewmodel front end JavaScript framework for UIs & SPAs
- Vue-Bootstrap - Responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library
- Node.js - Handle data from the database
- SocketIO - Socket management javaScript library for realtime web applications
- Amazon Web Services (AWS) - Cloud storage for database and website hosting
- Buddy Docker - CICD from GitHub
- MySQL - Relational database management system
Cranehoot requires Node.js to run.
Install the frontend & backend dependencies.
$ cd frontend
$ npm install
$ cd ../backend
$ npm installTo start simply run applet.js in /backend & the Vue CLI service in /frontend:
$/backend node applet.js
$/frontend npm run serve*Ensure db.json is present in the backend folder, in order to connect to the database
The quiz itself is quite self-explanatory, upon entering the website you will be greeted with the homepage. On this page you will see an input form for your username and lobby codes which we'll talk about later. Under these inputs there's 4 buttons:
- Join - Join a specific lobby (You'll need to input a username and valid lobby code)
- Find Lobby (Placeholder)
- Create Lobby - Create & join a new lobby
- Settings - A modal will appear giving you options that you can customize (See general settings screenshot)
When on the lobby page, you will see a unique 6 character lobby code. This is what your friends will need in order to join your lobby. There is also a game settings menu (See screenshots), from this you can specify categories, change the number of questions, & the time to answer each question. When the Start Game button is pressed the quiz will begin for all users in the lobby.
During the quiz itself the player have a number of seconds to answer a question, if correctly answered the player will recieve points equal to the number of seconds left on the timer. If correct multiple times in a row the player will gain a score streak, giving bonus points based on the lenght of the streak. The player will also have the ability to use the Powerups. There are currently 3 poweruprs in the game:
- Double Points - Doubles your points from that round if you are correct
- 50/50 - Remove 2 wrong answers from the question
- Half Score - Target another player, halfing their score for the round
After all questions have been asnwered the player(s) will be taken to the leaderboard page, & shown the final rankings/points of each player.
During the limited development window of Cranehoot we have strived to create a product that caters to as many people as possible. Although we haven't strictly adhered to WCAG AA standards Cranehoot has mutliple settings to assist with Sensory processing and Visual inpairments, this includes a high contrast background mode, background animation speed slider, all text passing WCAG AAA contrast ratio standards & customization of quiz round times to assist those using Screen Readers.
Although Cranehoot is unlikely to be developed more, we will include work we would have liked to see done.
- Pass WCAG AAA Standards
- Add MORE powerups
- Scale size of lobbies
- Add MORE questions
Sound effects & music obtained from www.zapsplat.com
Question & Answer dataset based on OpenTriviaQA from https://github.com/uberspot/OpenTriviaQA
Protected by: Creative Commons CC-BY-SA-4.0 License
Created by: @uberspot Paul S @pachacamac Marc @fredefox Frederik Hanghøj Iversen @codeniko codeniko Niko
Thanks for reading me!
Created by Team 7 for AC41004 - Industrial Team Project