This project was a personal project intended to explore parts of front-end web development and JavaScript further. This included:
While the outcome of this project was orientated towards learning front-end methods more than anything else, I always envisioned the project being used in a presentation setting as an alternative to existing quiz sites like Kahoot or Quizlet, except orientated towards a single person.
Before I fully-committed to building this as a larger project, I had some basic criteria I wanted to meet when building a skeleton version.
My initial skeleton focused on establishing a re-usable quiz format. For this I used a JavaScript object. Originally I was hoping to use an actual JSON file to store quizzes, but because I was not using a web server for this project, CORS prevented me from doing this. I offloaded creating elements seen on screen to JavaScript, so they could later be reused for both browsing contexts, and so they could interact with the quiz questions. At this time the quiz states progressed through a massive if-else chain. Crude, but effective.
While at this point I did not have the two-screen set up working, the work to this point was useful for proof-of-concepts and working out how far I could take the project, and some of the limits and constraints I would be working within.
I believed music and audio were essential to the project. The original game has separate queues and background music for each question, and that is something I wanted to keep.
I worked out each audio file would need to be defined so it could be called upon later in different places. At this stage, I was working with a fixed 15-length question set, so the music code was not customisable and was pre-defined.
I was not at all happy with the way I had music working, even at this early stage. Every audio file being defined in the way it was came with huge readability issues, and the if-else chain was simply absurd. I would need to significantly re-invent this part of the project.
To resolve the ineffectiveness of my initial music management, I refactored the all the audio functions and where the music files where defined.
As each question has its own music, I realised these could be quite efficiently defined in the same place as the questions themselves, and the function could index into this object to retrieve each audio object as the game progressed. This would also help with the customisation of quiz lengths later on, if you wanted more or less than 15 questions.
As part of the format being revised, I allow for more control of the games lifelines, so you could choose how many you wanted and after which question they were available. I began implementing some of the more basic ones, like 50:50 and Phone A Friend, while leaving a framework for ones that needed more time, like Ask the Audience.
In addition, I implemented dynamic statistics to follow the progress of the game, such as how much money the player stood to win and loose during as the game progresses.
As part of my criteria I always intended on having a second screen, which would be for the player, whilst the existing one would be for the host and person controlling the game.
Despite initially intending to reuse the layout of the existing host screen, I realised this would be an ineffective choice for two reasons. One, the player screen would not have controls and statistics, resulting in wasted space. Two, my host screen was modelled off the actual TV show overlays. I came to see this was impractical and illogical for the intended use of the project, as I would only ever display the questions, lifelines and money tree on screen.
I revised the layout by increasing the question block to full width, which would be useful for longer questions and readability, and re-draw the money tree as a floating box, rather than a side module. I would do the same with the lifelines, which also allowed space for a logo.
I soon felt that the solution I gave to the player screen could be adapted to the host screen as well, as I felt its use of space and symmetry was vastly superior.
With further additions such as implementing missing lifelines and the ability to reset the game, I felt I had constructed a largely functional project and from this point further changes were to enhance visuals, optimisation and customisation.
I made many changes improvements to the project, some of which focused on backend functionality and others that were focused on the experience.
Throughout the development I added a total of six lifelines, plus the ability to set "safety nets" or "milestones" on the money tree during the game. These lifelines included "50:50", "Phone a Friend", "Ask the Audience", "Ask the Host", "Double Dip" and "Switch".
Lifelines that depended on human interaction such as Phone a Friend and Ask the Host were quite basic implementations. For Ask the Audience, I included to options, a way to input a headcount which would convert votes into percentages, and a computer generated random result, which would bias the correct answer, but less so the further the player progressed.
I would later change how lifelines were assigned in the quiz format. Initially, they were fixed and the settings for them were independent of the quiz questions loaded into the game. By changing this, different quizzes could choose how many lifelines were available, and any number of lifelines could be granted before each question loaded, and repeatedly for the same ones.
I evolved the question rotation logic of the quiz many times. Initially, only one question could be assigned to each question in the money tree. For example, for a 15 question length quiz, there would only be 15 questions.
To have multiple rounds at a time without swapping out the question file, I changed this so multiple questions could be assigned to each question on the money tree (I called these "sub questions" internally to differentiate from the question length of the quiz). When starting a question on the money tree, a random (sub) question of those available for that question would be selected. That specific (sub) question could not be used again until all available (sub) questions were used, or the page was refreshed/reloaded.
This was largely effective at producing variated back-to-back rounds provided enough questions were created. However, it became problematic when questions of the same topic were rolled one after the other. To maintain random selection whilst reducing this annoyance, I added question categories.
The final question rotation logic worked as follows: when rolling the next question, questions of unseen categories would be prioritised and chosen at random. If no new categories were left, it would choose a random question of those unseen, but ignoring categories. If all questions had been seen, the pool of (sub) questions for the question would be reset.
Initially I used a static picture of the Millionaire Logo for the centre of the player screen. However, I always felt this was rather bland and could be used as an opportunity to make the experience more "immersive" by having it respond to events. This is true also for the 2018 reboot of the show, which features a large animated logo in the background. Most of the animations and states I chose to model directly from the show, while I took creative liberty with some of the others.
The logo is really brought to life with animations, using colour, scaling and many other transformations. The logo is created simply by using many html elements, plus some images to overlay the typeface. A canvas is only used to produce particles. Due to the number of layers, rendering the page can be demanding at times.
This was an enjoyable explorative project. Whilst it certainly could be improved in many ways, I was quite happy with the end result. If I were to expand on the project, some things I would consider doing would be:
Watch a demo of the Player Screen in action.
This project is not publicly accessible. Access may be granted upon request.
This is an unofficial personal project. All trademarks and visual assets related to Who Wants to Be a Millionaire? belong to their respective owners. This project is not affiliated with, endorsed, or approved by Sony Pictures Television or any associated parties.