Digital Media Officer Anthony Lewis explains how to use Twitter's image cropping algorithm to create a whimsical quiz.
Over the last couple of years we’ve tried a few different things to interact with people on Twitter. We’ve hosted chats with writers and scientists, live tweeted the science of sports events and released series of Vines encouraging people to tinker with their gadgets. Some have worked really well, others less so, but nothing has been embraced with quite as much enthusiasm as our weekly #FridayQuiz.
The idea is simple: we ask five science questions loosely themed on a different topic each week, and encourage people to play along, think about the questions, and let us know how they get on. To each tweet we attach four images with possible answers, and make use of Twitter’s consistent cropping algorithm to conceal the ‘Correct’ or ‘Wrong’ label until the images are clicked. If we've done it right, when someone clicks on an answer the image enlarges to show the previously hidden edges, and their success or failure is revealed.
We chat to people as we go, dishing out arbitrary points for correct answers and steering people in the right direction if they guess wrong. It’s a good opportunity to engage with our followers in a light-hearted, fun way. Writing the questions is a bit of an art (getting zero out of five is no fun, and if everyone got full marks each week it’d be hardly worth playing), and striking the right tone for the chit chat is important too.
But almost every week someone asks how we make the quiz images. We first saw the technique being used by a BBC account a year or two ago and adopted it, so to pass on the knowledge we borrowed from someone else, here’s a quick guide on how to do it from scratch. We use Adobe Illustrator, but there’s no reason you couldn’t do all of this in pretty much any image editor.
Create an image with numbers running vertically down it, and attach four copies of it to a tweet from a test account (a dummy account with no followers is really useful for trying out new ideas – if you don’t have one already, make one now).
Test quiz tweet 1 pic.Twitter.com/ofGfomo0jf— Ri Test (@ri_test_123) April 21, 2016
Look at the tweet in a few different browsers/platforms and see which numbers are always visible, and which are reliably hidden. You can use this to create a guide in Illustrator:
Now just make your answer images so that the options are shown in the ‘always visible’ zone, and the answers are hidden in the top or bottom edges. To make it easier to create the 20 images needed for each quiz, we use an Illustrator document with 20 artboards lined up. Once all the information is in place, go to File>Export and export all the artboards as PNGs; much easier than creating each image individually.
Sometimes Twitter, in its over-enthusiastic attempts to show the most important part of an image, will decide to crop an image in a different way without warning. The best way to avoid the problem is to keep your images as consistent as possible. This tweet, for example, revealed the answer to most users, probably because Twitter was bamboozled by the relatively lengthy explainer underneath the correct answer:
Another thing to watch out for is Twitter changing the way it shows images. Towards the end of 2015, it started arranging four-image tweets with one large and three small thumbnails in order to ‘make Twitter more immersive’. For a moment we thought it might be the end of the quiz, but in fact it just meant rebuilding our templates to accommodate the new approach.
Also, this little hack won’t work for absolutely everyone. Some twitter readers don’t show images at all, and a few phones show photos in their own weird and wonderful ways, which can spoil the fun altogether. If you need to be entirely sure of how everyone will see something, don't use this trick, but from what we can tell it does work for the majority of users.
If you try this, or something similar, let us know – we’d love to see what you come up with. And follow us at @Ri_Science to join in with the quiz every Friday!
Head of Digital Cassie Williams takes us behind the scenes of our April Fools video.
Posted to Behind the scenes on5th April 2018
Ri's Head of Digital, Cassie Williams, takes us through the lessons learned from six years of the Ri Channel.
Posted to Behind the scenes on16th November 2017