Pub Trivia

Tyra D’Costa | Shiloh Light – Barnes | Omar Qureshi

Pub trivia is a decentralised trivia game that is targeted towards groups of friends or pub – goers who want to play trivia, where trivia is not being offered. This means there is no single command screen that  has exclusive control over the data or processes of the game, the game will b dynamic as players communicate data between each other. Our trivia game requires each member to Join a team, they can do this individually or collaboratively. Once all the players have joined the game the questions will begin and the console will log the players score, the top three players, and which players have guessed wrong or correctly. The trivia game we put together focuses on music and orchestral music facts from the early 1800’s to the late 1900’s.  Ideally, the player would have a multitude of topics and themes to choose from, but for the sake of demonstration our project we chose to focus on the topic of a random non fiction book we were given. This documentation seeks to display the key concepts and functionality required to develop a decentralised trivia style game app, or webpage.

See the code here: https://github.com/qureshiomar/atelier-ii-book

We decided to use Pubnub to develop the backend because its Data Stream Network (DSN) and real time data transfer capabilities are particularly useful when trying to get the players device to communicate effectively between each other. We also used P5.js to develop the backend functionality because it is what we are most familiar with and it is fairly simple to build the functions and structures that were necessary. For the front end development we formatted with HTML and CSS. We did this because we wanted to separate the  the visual aspects of the code and the functional aspects to avoid errors, and organise the code more effectively. We started with front end development, which consisted of Illustrator mockups, and the p5.js DOM library. We then began to develop a loose wireframe of pure HTML buttons, labels, and inputs – which would serve as a playground environment to test whether PubNub would be a viable option to move forward.

 

screen-shot-2019-02-12-at-7-22-05-pm

We concluded with a simple PubNub system of sending messages on one channel to join a game, and another channel to answer questions. This meant that each channel could receive a different object storing specific information. Each time a player answers a question, for example, a message is sent to all other users containing the players name, and the letter that they have selected (A,B,C,D). The computers will then continue to receive answers until the total number of answers is equal to the total number of players. Once the last answer arrives, the computers will then remove all the elements from the screen and generate the so-called results screen. From there, a simple three second timer returns all players to the question screen. The computer will continue to select questions from the array until the number of questions is equal to the variable. Overall the the development process went relatively smoothly, except for one problem we faced which restricted the ability to have a dynamic player number. We wanted the ability to invite a dynamic number of players into the game depending on the circumstance, but due to us not being able to integrate with PubNub “presence” features, we ended up having to go with a fixed “numberOfPlayers” variable. If we decided to continue with this project, we will focus on integrating a dynamic player account feature, as well as improving General bug fixes and UI elements.

CSS Reference:  ferrysdayoff et al,. Jun 11, 2018, 10:16:47 PM. “Styling HTML Forms”. [Web Article] Retrieved from:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

  • Explains how most of the CSS was done. Including how to align buttons and input bars, edit button properties and add svg files to code.

Javascript Reference: Berhanu, Yaphi. May 23 2017. “How to Make a Simple Javascript Quiz. [Web Article]. Retrieved from: https://www.sitepoint.com/simple-javascript-quiz/

  • Explains the basic functionality, problem solving tasks, and features that need to be developed in order to create a trivia game. For example, we learned that we would need to use a loop to fill in the answer choices for the current question.

CSS Reference:  ferrysdayoff et al,. Jun 11, 2018, 10:16:47 PM. “Styling HTML Forms”. [Web Article] Retrieved from:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

Javascript Reference: Berhanu, Yaphi. May 23 2017. “How to Make a Simple Javascript Quiz. [Web Article]. Retrieved from: https://www.sitepoint.com/simple-javascript-quiz/
Pub nub Reference: 
Pub nub. Aug 30th, 2016 at 4:57PM. “Solutions Home”. [Webpage]. Retrieved from: https://support.pubnub.com/support/solutions/articles/14000043857-here-now-
screen-shot-2019-01-23-at-7-03-57-am
Inspiration + Ideating   
kahoot pubtrvia

Once we chose “The story of Orchestral Music and its Times” as our story to base the project on, we contemplated the different interactive forms in which players could express their knowledge of orchestral history. Inspired by quiz games such as Pub Trivia, Kahoot, and HQ Trivia, we decided on a real-time multiplayer trivia game. From there we went back-and-forth between simply asking question after question and displaying result at the end, or showing a continuous real-time results screen containing information about players current score. We ended up going with the continuous option to keep players engaged and competitive with one another.

 

Leave a Reply