The Garbiak Pub Quiz

Background

A random idea popped into my head that it would be fun to try to create a pub quiz app. Pre-made quizzes are fun (with Sporcle being a good example) but I wanted to try to create my own. Quizzes are easy to create but hard to be fun. So here goes my attempt at building a pub quiz application using JavaScript so I can host it on my own website.

The Plan

“Fail to plan $\implies$ Plan to fail”

With this in mind, here is my plan:

1. Learn some Javascript - this seems to be the most efficient way to run the application on my website,
2. Develop the pub quiz design - what is the theme, the aesthetic, format, etc. of the quiz going to be?
3. Create pub quiz assets - I envisage this will be the most time consuming step depending on the design. I will use Audacity to capture sound clips for instance. I’m undecided on other asset types - images, video clips, maps, quotes or even just multi-choice questions are all possible.
4. Enhance the pub quiz application - metadata could be captured to create custom made quizes. An example would involve tagging actor names such that you could have an entire round on, say, Arnie films.
5. Explore added features - a database backend to collect statistics and allow registration of users who could compete on high scores. Yes, probably too ambitious, hence an added (nice-to-have) feature to be developed at a much later stage (if ever).

A couple of concerns:

• Copyright - the sound assets are from copyrighted materials. I tried to read some Copyright law but quickly noted I was falling trap to premature optimisation, my usual mistake (as originally pointed here). For now my argument is fair use which YouTube summarises here albeit from a US legal standpoint. The sound assets are short clips (vast majority less than 15 seconds long) and my website is free to use.
• GitHub capacity - this website is hosted on GitHub as I’m too cheap to pay for my own hosting (although it would be nice to have my own URL). I wonder what the bandwidth that GitHub offers before they quietly ask me for some money to upgrade to a paid plan? Again, I will ignore this for now to avoid premature optimisation.
• Public nature - this website is open to anyone to visit. Some of the sound clips I have created contain strong language only suitable for adults (you know, a lot of good films are 18+ rated). I certainly do not want to have kids listening to this. I have no mechanism to control this and do not have time to investigate how to solve this problem. My initial thought is to include a consent pop-up window to confirm you are over 18. Another thought is to ensure all content is kid friendly.

Current Status

The current (envisaged) status of the project:

• Learn some JavaScript
• Develop pub quiz design
• Create some pub quiz assets
• Capture metadata on pub quiz assets
• Launch alpha application
• Debug the horrible mess of an alpha application
• Deploy beta application for external testing to select users
• Crush the ridiculous bugs in the beta application to refine
• Launch the first release product
• Elicit feedback from end users
• Develop new requested features or give up and move onto something else

Project Log

Below I sketch out the development over time. I understand this concept of typing out a project log is a bit outdated - there are tools out there to automate changelog generation but I’m too lazy to research this further.

Day 1 - 26 April, 2020

Not really day one so to speak as I’ve created some pub quiz assets already.

I downloaded Audacity to create the sound clips. A few notes on my use of Audacity:

• I am currently on a Windows 10 machine. In Audacity I changed the settings to Windows WASAPI. This allows you to re-route the sound output as a microphone to record sounds.
• I experimented with a couple of settings:
  • Generate -> Tone: Can add a “bleep” type sound effect using a sine wave,
  • Effect -> Amplify: Can either amplify or quieten a sound clip using this effect,
  • Effect -> Vocal Reduction and Isolation: Occassionally I wanted to isolate the vocals from a music background heavy scene although I’ve found that the settings in this effect require finesse (which I do not possess) to make the clip sound passable afterwards.
• I did not have the patience to work on anything else in Audacity. To save the clips I just exported as MP3 files There are a lot more features to Audacity but as a simple tool for this workflow it’s worked great and even a dummy like me had a semi-efficient process up and running quickly. Amazing software considering it is open source and free.

I also created this blog post to explain the idea and the plan to build it out into reality.

Day 2 - 30 April, 2020

I have now learnt how to embed HTML into my markdown files by using the in-built Hugo shortcode functionality. Within the HTML file I can reference this to an external JavaScript file (hosted in the static folder at the root directory).

HTML code:

<!-- demo canvas shortcode -->
<canvas id="demoCanvas" width="170" height="120" style="border:1px solid #000000;">
    A HTML canvas with width 170 and height 120 with a small black border filled in with a blue rectangle by calling an external JavaScript file.
</canvas>
<script src="/js/democanvas.js"></script>

Note that anything written between the <canvas> tag is not rendered if the user’s browser supports the <canvas> tag. This is explained here in more detail.

JavaScript code:

const canvas = document.getElementById('demoCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
// (x postion, y postion, width, height)
ctx.fillRect(10, 10, 150, 100);

This generates the following output:

Basic but you have to start somewhere. 😄

Day 3 - 06 May, 2020

Found a very helpful GitHub repo and tutorial series to build a quiz app

• Learnt new shortcuts in VS Code for faster HTML prototyping ($ and . commands for id and class attributes respectively)
• Learnt the key concept in CSS is the box model (and that margins are collapsible)
• Was overwhelmed by JavaScript with an array of new topics:
  • Arrow functions
  • map function
  • The Promise object
• Started to get to grips with JSON as a data structure
• You can fetch the external JavaScript file within the <head> element without page loading performance issues by using the defer attribute in the <script> tag.

Fixed the trailing whitespace “bug” when rendering markdown into HTML for URLs (see this discourse post for the fix and this blog post for how to overwrite theme template files (I use the Academic theme). However it looks like whitespace can still be rendered prior to the link if there is punctation immediately before - for example:

• ([Sporcle](https://www.sporcle.com/) renders as
• ( Sporcle)

Day 4 (to 6) - 10 May, 2020

Project fatigue setting in. Skipping the JavaScript tutorials may have been a bad idea. Developing new features myself is proving that I don’t know what I am doing and requires a painful amount of debugging. The cost? I have to imagine I will end up with spaghetti code if I continue with this development strategy.

Here are a couple of concepts I am struggling with:

• Spread operator
• Whether the variable creates an object versus an array - objects do not have length properties so I have had trouble iterating over the elements (actually properties) within an object.

I am enjoying using the Chrome developer tools, particularly:

• console.log() functionality
• Device toolbar - noting how the website will display on different devices (including iOS devices)

Day 7 - 12 May, 2020

Implemented some cosmetic fixes - highlighting the correct answer with a silly little CSS animation. So, is the pub quiz code any good? It works. Too many if statements for my liking and the use of a nested setTimeout() function call. Not great. Not terrible.

What’s next? I intend to add more functionality but over a longer time period. Additionally, I think it will be fun to write out more tailored pub quiz questions - this takes quite a bit of time (source material and writing up the questions & answers). For the time being I want to get back into Blender - perhaps I can create some neon pub quiz image assets? 😏