This is a web app I created to host quiz nights online for a film discussion group I facilitate called Criterion Film Fans Unite!. The front end that the quiz participants use is a SPA which uses VueJS while the admin section with the quiz controls uses a combination of VueJS and CakePHP to manage users, teams, set up content, manage the scores, and switch between the different scenes or stages of the quiz. Since this was an app for my own use, I wanted to keep the process of joining the quiz very simple. Users choose a name, enter an access code I give them associated with the quiz, and choose an avatar. Rather than having them create an account that they sign in to, a cookie stores their session once they successfully join. User info and quiz data is all stored in a database, and I linked the controls created with VueJS to the database using Axios AJAX calls to CakePHP.
I used Pusher to communicate changes back and forth between the quiz controller which ended up working quite well. When users buzzed in, I had to use PHP's microtime function to get an granular enough time to make sure buzz ins were as accurate as possible. On the design side of things, I wanted to keep the information displayed to participants simple and straightforward, making it clear what was happening during each stage of the quiz.
I iterated a bit after using it live in my group a few times. I initially displayed the timer to show a participant it was their turn to answer along with a list displaying their buzz in order, but showing all of that information caused users to miss the prompt. I removed the list of buzzed in users and displayed only the timer which improved the usability for participants. Overall it was a lot of fun to build and allowed me to efficiently manage the quiz, allowing me to focus on making the whole experience entertaining and fun.