Our Online Live Quiz Setup

How many limbs has Obi-Wan Kenobi severed in the movies?

True or False? The actor who played baby Harry at the start also played Harry’s son at the end.

What is Aladdin’s first wish from the genie?

All these questions and many, many more have been asked in our weekly live quizzes. Since 1st May, 2020, I (Harry, sometimes with Louise) have been hosting these quizzes live on YouTube every Friday at 8pm. At the time of writing, we’ve done 4 (Star Wars, Harry Potter, Disney & Friends).

The response has been huge, as shown with an increasing amount of players each week:

So how did we get here then?

It’s a wordy post, feel free to jump to:
When Me and John Started Quizzing
The Set
Open Broadcasting Software (OBS)
How the Quiz Runs
The Onscreen Presentation
The Live Scoreboard
Summary

When Me and John Started Quizzing

We’ve been drinking at The Chemic Tavern in Leeds for longer than we each care to admit, and take part in the General Knowledge quiz every Monday. We’ve both even taken a tenure at writing and reading the Monday quiz.

We wanted a way to link quizzing in with our podcast, and so of course film and tv quizzes were the best answer. So we booked out the back room for a quieter day: the last Sunday of every month. The landlady put on themed drinks, and people started flooding in! We even had to turn people away because the pub was full on multiple occasions!

We were going for 20 months mostly successfully, (there were a few duds, a few losses, but enough successes to more than justify it.) Then in March 2020, tragedy struck as the global pandemic shut down the pubs to save lives (I know, how selfish!) And so we moved it online.

John started doing the Monday quiz live on The Chemic’s Facebook, and I moved the Monthly quiz to YouTube Live. But I thought given that I’ll now be reaching out to a larger, potentially international, audience, I could get some extra watch minutes if I replayed all the old quizzes from the past 2 years. Save me writing new ones until I need to.

So to get live on YouTube, I had to get a few things in order. Luckily all I had was time on my hands!

I wanted these quizzes to be of a high quality. I’d watched part of one of Jay’s Virtual Pub Quizzes on YouTube. I wanted to at least match his quality. I’m not expecting to get the hundreds of thousands of subscribers he’s got, I just want to put out great content and see what people think.

The Set

So step 1 for me was to create a studio. I decided I wanted a camera at one end of a room so I wasn’t obviously talking into a webcam right by my face, but I also wanted the computer in front of me to read the questions and control the stream, comments etc. So I purchased an app called EpocCam for £7.99 which turns my iPhone into a wireless webcam. It’s quite seamless when it works, but (I think due to the old processor in my 4.5 year old iPhone 6s) it doesn’t work 100% of the time. Thankfully I can just resort to my laptop’s webcam in a crisis.

I built myself a podium out of some old speakers piled up, which gave me a decent, solid, standing-height space to put my laptop, microphone and beer. In front of it, I piled all the empty beer boxes that had somehow appeared out of thin air in mine and my girlfriend’s house. I wrapped an old BTBS t-shirt round a box and placed it at the top of the beer boxes, hiding my laptop, while also bringing some branding to the shot. I finished it off by throwing some loo rolls onto the edges to add some 2020 relevant humour to the set.

I didn’t realise it at first, but I needed some lighting for the set, as the overhead light in the spare room I was in wasn’t cutting it. So I purchased a ring light, which did a very good job of lighting the podium. I tied some string on the overhead light and pulled it into place so it was doing a better job of lighting our faces.

Behind me there was a window, which let in loads of light. The room wasn’t suitable for me to rotate the set around so I could light myself naturally, so I had to block the window (rear lighting really blows out the image), so I found some cardboard downstairs that definitely wasn’t empty beer boxes, and I duct taped it to the glass.

I did try writing an arty sign that had rules like “Enjoy Yourself” and “Don’t write answers in the comments”, but after the first quiz, unanimous feedback was that it was too difficult to read, and therefore a waste of space. So instead I closed the office blonds behind me (which hid the cardboarded windows), and attached coloured paper to them, creating a rainbow pattern. It looks great, and also doesn’t look like I’ve overcomplicated it.

The set is compete, but I still to this day like to tinker!

Open Broadcasting Software (OBS)

Before I get to the onscreen presentation, it’s important that I tell you about how everything is brought together.

So on John’s recommendation from hosting the Monday General Knowledge quiz live on Facebook, I use some free software called OBS. OBS takes media from multiple sources (webcams, remote cameras, video chats, microphones, audio files, images, slide shows, video files, screen or window recordings and many more) and puts them out as one live video feed which can be sent to YouTube, Twitch, Facebook and all sorts. It’s great.

You generally want to set up OBS to have multiple scenes, and within each scene, you bring in whatever sources you need. Mostly I use cameras, microphone, and slideshows. Cameras and Mics are very straightforward to add. Images, Slideshows and any media files are a tad more complicated. You need to locate them through OBS in your file browser. And if you change the file name or file path, OBS will loose them and display a black screen. This does have the advantage however, for people like me who do a quiz every week, I don’t need to locate all the files every time. For example, for the images and image slideshows, it looks for a file like:

Desktop > Online Quizzes > Main Slideshow > Main Slideshow.005.jpeg

Notice how in the filenames I don’t specify what the topic of the quiz is? This means that when I’m done with that quiz, I can archive those files away in a folder named “Star Wars” for example, and then next week I can just change the content of the presentation, and export it as images to the same place as last week. And then OBS has already loaded the new questions when I open it. This saves me having to locate 100+ image files every week. Massive timesaver.

In OBS you can also program in your own custom shortcuts. These actually work system wide. So I could be midway through typing a response to a comment, and just by pressing ⌘→ I can bring in the next question. Be careful not to add any shortcuts which mean other things to other programs. I recently had an issue where my iPhone camera lagged up so I used my keyboard shortcut ⌘W to switch cameras to my webcam. Unfortunately, this is also how you close a window, so first my iPhone lagged up, and then I accidentally closed the YouTube stream window! All my viewers had a black screen for a few seconds while I reopened the stream. It was a nightmare.

There’s a lot more settings in OBS, but I’m not going to go through them all here.

How the Quiz Runs

Through OBS I have several scenes set up which are 8-8:10, 8:10-8:15, Questions, Half Time, Full Time, Answers, Scores, Outro. Let me explain what all these are:

8-8:10

This plays (obviously) from 8pm when the stream starts for 10 minutes. I advertise the stream as starting at 8, but I don’t turn the camera on until 8:10. During this time there are a few sources: there is a 4 slide repeating slideshow which all show the same welcome message, branding, and schedule. Each slide has a different sentence on it, explaining how the quiz works or reminding people not to post answers in the comments. There is also some free to use background music I have brought in.

8:10-8:15

Here, my iPhone camera, and USB microphone (plugged into my laptop) get added to the source list. My webcam also gets added, it is behind my iPhone camera in the source list, so if my iPhone fails for whatever reason, with a simple keyboard shortcut, I can hide it as a source and then my webcam is shown, which has a worse angle, but atleast it’ll work.

The 4 alternating slides are gone and just a single image is onscreen which has the title of the quiz, my name (and often my girlfriend Louise’s name as well when she co-hosts). The image is taking up the whole screen, but there is video on top of it on the left half, so to the user, this slide is only on the left half. I have arranged to text to only appear in the right half.

There’s also a 5 minute countdown gif. (is it pronounced gif or gif?) The gif will repeat when it hits 0, so I just need to manually advance to the next scene when it’s done.

During this scene I still wait for people to join, even though some people (like my parents) will have been there for since before 8pm already. I’ll introduce the quiz, re-iterate how it runs with categories and breaks, and remind people not to post answers in the comments.

Questions

This scene adds in a slideshow of all 40 questions. It starts with the title “Round One” and the subtitle of whatever the first category is. I’ve set a keyboard shortcut which advances to the next slide which has the next question on it, and after the category is complete, it advances to the next category and so on.

There is also background music which can be turned off if necessary.

Half Time & Full Time

After question 20 I advance to the Half Time scene which turns the camera and mic off, and gives me a chance to get a beer or whatever. Meantime the slide show is alternating between 2 slides (every 10 seconds) which show 2 categories each. So the first half’s questions are all repeated on screen for 5 minutes, while a countdown in the bottom lets people know when I’ll be back. I then return to the Questions scene until I’ve read question 40 and am ready for the Full Time break. The Full Time scene is the same as Half Time, but with both halves of the quiz being repeated on screen (as 4 slides).

Answers

I return from the full time break straight into Answers which is exactly the same as Questions, but with a new slideshow that has the answers written in brackets (bold and yellow to stand out) at the end of each question. I run straight through with no breaks.

Scores & Outro

When I’m done with the answers, I move to the Scores section which moves the video to the right third (instead of the right half). In the middle third it brings in a live google spreadsheet with a scoreboard (I’ll get to that). And behind all that, and uncovered in the left third, is the final slide. It shows a link to submit their scores, and a little advert for next week’s quiz. At this point I frantically plug everything one last time, multiple times, while also reading out the scores as they come in.

When the scores have slowed and I think it’s time to end it. I advance to the Outro slide which is exactly the same as the previous slide, but without the camera and mic. So another part of the same slide is revealed to say thanks for playing, and reminding them to subscribe. The spreadsheet is still onscreen updating live if any scores come in.

I generally leave this on as long as people are still watching. If I need to, I can go back to the previous scene to turn my camera and mic on if there’s anything I need to communicate. But I normally chop that (along with the first 10 minutes) out of the video afterwards in YouTube Studio. The shorter a video is post-live, the more likely people will watch it.

The Onscreen Presentation

So it’s come up plenty in this blog already, but the presentation is the heart of the quiz. Getting the set all nice looking is great, but the presentation takes up more than 50% of the screen or even 100% of the screen. So it’s more important that it looks good.

I build my presentation in Keynote, but PowerPoint will do I recon. Not sure about Google Slides. It must be presentation software that can export the slides as images. Ideally it’ll have the option to export each stage of build as you export.

So when you design your slides, you need to be aware of where your video is going to be and what size and shape it’ll be. You can see in the below image, mine is all very deliberate.

Even though this will go to multiple scenes, this will be one presentation. Trust me it’s simpler this way. The opening slides will all be for the intro. My OBS setup cycles through the first 4 on repeat and then stops on the 5th when I advance scene.

The Questions slides are slightly more complicated. I have one category per slide, and 5 questions. I’ve set the questions to animate in one by one, the transition choice doesn’t matter as it wont be exported. So then when the presentation is exported, each category is exported at 6 images. Then when OBS cycles through these 6 images, it starts with just the title, and then essentially brings in each question one by one.

The below image will be the 5th image in the category. Does this make sense?

After the questions slides, I have the break slides. These ones ignore the video and put one category on the left, and a second category on the right. I generally just copy and paste these once I’ve imported the questions. Make sure you remember to remove the animation from these as these don’t want to be exported as building in slides. There are 4 slides, so you only want 4 images.

The answers are the same as the questions, I want them to build in. Then after that I have a single slide for the scores and outro. My design has some content including where to submit their scores and whats up next week. This content is on the left third. OBS will bring in the spreadsheet to the centre third, and the camera to the right third. As this slide will also be the one for the outro, I have some text reminding them to subscribe which is in the right third. This will appear when my camera dissapears.

So as mentioned in the OBS section, make sure you export the images to the same location on your computer and don’t rename the files, presentation or containing folders or else OBS won’t know where to find your images.

The Live Scoreboard

Ok we’re nearly done now, but here’s the really nickety bit! I’m not going to go fully into it. Either you’re good at spreadsheets or you’re not. And I won’t lie, I’ve made a complex spreadsheet here.

Here it is simply:

It’s a Google Sheet connected to a Google Form. The form (which I have embedded at beyondtheboxset.com/score) simply asks people which quiz they just did, a team name and their score. That’s it, that’s all they have to do. The spreadsheet then automatically adds in that information to a tab named “Form Responses”, along with a timestamp.

From here you can bring it into OBS as a source (Window Capture). You’ll just need to make sure your window is sized properly. I recommend not having any other tabs in that window, because if you switch tabs, your viewers will see that instead.

Now it’s not the most visually pleasing thing just to show your viewers a table of data, which will be out of order, and possibly not even all from the same quiz. So I’ve done some spreadsheet magic and made it look way better.

To do this, I’ve first had to replicate the form responses sheet to a sheet I will later hide, so i just named it “FR”. This is because when the form is resubmitted, the spreadsheet moves everything down to put in that new data, which buggers up your formulas. In the FR sheet, in cell A2 I have =’Form Responses’!A:A . I then fill every cell in the sheet with that (the columns automatically changing to match. Now when data is put in, it appears on FR, but without shifting cells.

Then I have a sheet called “Current”. This one filters the data to only show one quiz. It has the same 4 columns as the previous 2 sheets. In cell A2 I have =IF(FR!$D2=Overview!$D$1,FR!A2,””) . This is basically saying, if the value of this row in the Quiz column on the FR sheet is the same as the quiz name specified in the overview sheet, then show the timecode that appears in this row, if not display blank (though for the Score column, I’ve changed it to display 0 instead of blank).

I have then dragged that along all rows and columns, and the formula does the rest of the work. So if in the “Overview” sheet (which I’ll get to) it says “Star Wars”, then in the “Current” sheet, it will only display records which are for the Star Wars quiz.

So the “Overview” sheet, is the sheet which the viewers will see. It’s got 5 columns, though below the header, I’ve merged 3 columns into one, just to fit things nicely into the header.

In the first header row, in column D you specify the name of the quiz. This must be the exact spelling as it is on your Google Form. The second row has fields which display the average score and the total players using the formula =AVERAGEIF(Current!B:B, “>0”) and =COUNTIF(Current!B:B, “>0”)

Then the main body shows the columns Position, Score and Team Name. Score and Team Name are filled with the same formula: =SORT(Current!B2:C,1,false)

This formula is in the top row of the table in the score column (B4), and it displays the scores and team names in the correct columns, sorted by score. It’s an amazing little formula.

Then to calculate people’s position, I have the following formula in A4: =IF(B4>0,1,0) . This one simply displays a 1 if there is a score submitted, if there are no scored submitted, then it displays 0. (I use conditional formatting everywhere to turn all the 0s white, making the cells appear blank.

In cell A5 and dragged into every cell below that, is the following formula: =IF(B5>0,IF(B4=B5,A4,COUNT(A$4:A4)+1),0)

This one checks the score it applies to and compares it to the score above. If they match, then it displays the same position as above, if not, then it counts how many cells are above it and adds one. Or if the score is blank, it displays 0. So this perfectly assigns the positions to every one who played, including ties. I’m very happy with this formula.

And that’s it really, told you it was complicated! But the point of it is, apart from changing the name of the quiz, this spreadsheet is 100% automatic. So as long as it’s open, I don’t need to do anything. At the end of their quiz, people can submit their scores themselves, and I can just commentate as they come in, without having to touch anything. I love spreadsheets.

Summary

So there you have it! Sorry I rambled. I doubt anyone’s read this far, but hey, it was fun to write.

So will I see you playing the quiz this Friday? Every Friday? Will you start your own? Send me a link with what you do!