I built a "guess the sound" quiz in one day, and 5 lessons I learned doing it

So last week I thought I'd hack up a game, for fun.

Here's the prototype: http://vidvam.com

Here's how I made it.

Sound files

The sounds are from the BBC's sound effects archive. They are WAV files hosted on http://bbcsfx.acropolis.org.uk/. I noticed that I can link directly to each WAV file, so there's no need to download and host all those files!

Test the audio

Next I created a simple HTML file and tested the audio by creating an HTML tag and linking it straight to the WAV file on the BBC website.

<audio id="player-<?php echo $question['id']?>">
  <source src="http://bbcsfx.acropolis.org.uk/../assets/<?php echo $question['id']?>.wav" type="audio/wav">
  Sorry, your browser does not support the playing of audio.
</audio>

It works. The file is large, but it's fine for a prototype. Ship first, then optimise.

Answering and scoring

Each sound on the BBC site is accompanied by a descriptive title. E.g. there's a sound titled "Long burst of shutter clicks with motor drive of 35 mm SLR camera". So detailed!

Which means we can use this to match guesses, e.g. if someone guessed the sound as "camera shutter", they'd be correct.

In future I could also use this to give more points if the player provided more detail to the guess, e.g. "35mm SLR camera shutter" would match more words, and therefore score higher than "camera shutter".

Ideally I would try and automate the scoring, writing an algorithm to match the guessed words with the words in the title. But this would take too much time, so for now, I am letting the player just score themselves. There isn't a prize and there are no multi-player features (yet) so there's no motivation for them to cheat.

So at the end of each guess the player can select whether they are completely correct, partially correct, or not correct at all.

Creating a full game

So I coded all of the above up for one sound, checked that the UX felt ok, and then it was time to create a few of these guesses for the quiz with multiple sounds.

This is a simple case of turning the HTML file into a single PHP file, and putting all of the sounds' IDs and titles into a PHP array, and looping over them to create a Q&A

for each one.

    $games[1] = [
        ['id' => '07074135',
            'answer' => 'Single cork pop and heavy guzzling.'],
        ['id' => '07059077',
            'answer' => 'Curtains being pulled - metal runners.'],
        ['id' => '07058005',
            'answer' => 'Shovelling hard, gravel soil.'],
        ['id' => '07065081',
            'answer' => 'Space invaders - electronic game.'],
        ['id' => '07061048',
            'answer' => 'Jogging or running machine.'],
    ];

I then set all the question DIVs to hidden, except for the first one.

Game logic

I decided to use Javascript/jQuery to code the game's "engine".

I'm not a great frontend developer so while I could probably go learn React or Vue and create a slicker UI, that would take too much time and no point going through all that and find out nobody really cares about the game anyway.

So I just used what I know, and shipped it.

Players has 3 options for scoring themselves on each question: Completely correct, Partially correct, or None correct.

Each answer button click runs the following:

  pauseAudio(questions[currentQuestion]['id']);
  updateTotalScore($(this).data('answer'));
  hasNextQuestion = ((questionsCount-1) > currentQuestion);

  if (hasNextQuestion) {
    goToNextQuestion();
  } else {
    showFinalScore();
  }

Basically it:

• pauses the audio ( element doesn't have a 'stop' function)
• updates the running score
• shows the next question
• or the final score if there are no more questions

Sharing work in progress

At each stage of the development, I shared it with one or two people for feedback. Usually it's my wife.

The first thing she tested was just one question and one answer - there wasn't even an answer button, but just a "reveal answer" link. This provided initial feedback on whether the core concept of listening and answering the question was viable.

The second thing she tested was playing with it when the game (with multiple questions) was ready. This provided feedback on whether the UI for answering and moving on to the next question was good enough (it wasn't and required tweaking).

The third thing she tested was the final functional version. This provided feedback on the overall look and feel and design.

The final thing she tested was the version just before going live. She found a critical bug. Phew!

Design

The design effort is very very minimal. I'm using Bootstrap 4 for the frontend (again, I'm using what I know rather than trying to learn trendy new frameworks like Tailwind).

Bootstrap's default styling is very bland, so I thought I'll just spend a tiny bit of time making it look a bit exciting. At first I thought of copying the look and feel of older games, like Trivial Pursuit, then while researching that, I came across 80s inspired designs, and it looked perfect.

So I searched for a suitable free 80s inspired tile background, and my wife provided the finer design touch of getting me to change the button colours to match the background (I'm definitely hiring her as designer if this ever takes off!).

Launch

So all that's left is to push it live. I looked through my GoDaddy account and found an unused domain name from a previous project, and used that to point it to my hosting provider, then uploaded the file to the server.

The live version is just a very basic prototype with 7 questions (tried it with 10 but felt it was too long).

Once that's done, I shared it on Twitter and Facebook, and immediately got useful feedback on Facebook from a couple of friends who are hardcore quizzers and gamers.

So all together, it took me a day of total time to build it, and then another day to share it and get useful feedback.

Lessons learned

1. Strike while the inspiration is hot. I started tinkering literally 5 minutes after seeing that article about BBC's free sound effects. If I had waited till later because "I was in the middle of something", the inspiration would have fizzled out or I would have thought too much about it and the idea would have grown larger and the task would have felt heavier.

2. Get it in front of someone as early as you can. As soon as you have something to click on and it gives some rudimentary feedback, get someone to click on it! Treat every little feature as a "micro-launch" to your trusted testers to get early feedback.

3. Share what you've done with friends who can be critical of the product. Even better if they're part of your target audience. You want someone to pick holes in it, not just "YES-people" who will like whatever you do.

4. "Do things that don't scale" is such great advice when building the first version. The one-page script I built will never scale to a large product, but it's enough to launch and get early feedback.

5. It's worth spending a bit of time on design to make it stand out and to give it some personality, but don't spend days on it.

6. Bonus lesson: You can do so much with just one PHP file!

The prototype game is up at http://vidvam.com (let me know what you think!) and you can follow me on Twitter @farez as I develop this game further to its first production version.

Photo by Icons8 Team on Unsplash