Quiz

We set out to experiment can Quizzes help improve reader engagement? Quiz is a well-known and well understood format. It challenges a reader’s knowledge on a topic. It is also a low time commitment game. It is well-suited to be consumed by readers when they are on to go. All we need is one tiny slice of their attention for one question at a time. Few minutes later, they can continue with the quiz with another question.

Quiz allows newsrooms to introduce basic gamification to a story and create more online engagement around a topic. It can also be used for creating weekly news wrap-ups that help newsrooms highlight important or interesting content for readers. Users can set up timed and untimed quizzes, with or without scores.

Iteration 1

To make the quiz fun and engaging, we took design inspiration from flash cards. The question is on one side and the answer on the back of that card. After answering a question, the card flips 180 degrees to show the answer.

Iteration 2

The UI of v1 was bulky. With v2, we made the card stack thinner and the font hierarchy was improved. In previous version, the overall feeling was neutral, functional and blank. In v2, the loading bar was designed to generate a feeling of competitiveness.

The introduction card was made more inviting so readers click and start the quiz.

In mobile, the quiz takes up whole screen and there is a <Back to article link on the top. In v1, there was no sense of progress. With v2, we added card numbers 01 / 10. We introduced concept of right or wrong answers. Finally, to improve the scrolling experience, button click was replaced by vertical scrolling.

In v1, the quiz ended abruptly. In v2, we allow readers to post on social media, allow readers to go back and revisit old questions and journalists can add suggested reading list.

The journalist can run the Quiz in three modes:

• Educative mode: Questions in the quiz have no right or wrong answers.
• Game mode: Questions in the quiz have right or wrong answers. Reader at end of quiz gets a score.
• Timed Game mode: The reader has to complete the quiz within a given amount of time.

Demos

var ProtoCard1358 = setInterval(function(){if (window.ProtoEmbed){clearInterval(ProtoCard1358)};var mode = (window.innerWidth <= 500) ? "mobile" : "laptop";new ProtoEmbed.initFrame(document.getElementById("ProtoCard1358"), "https://cdn.protograph.pykih.com/7fda46f8c539/index.html?view_cast_id=037410889ef6c828eb6d2ad1%26schema_id=0eec77701464" , mode)}, 200) var ProtoCard1507 = setInterval(function(){if (window.ProtoEmbed){clearInterval(ProtoCard1507)};var mode = (window.innerWidth <= 500) ? "mobile" : "laptop";new ProtoEmbed.initFrame(document.getElementById("ProtoCard1507"), "https://cdn.protograph.pykih.com/7fda46f8c539/index.html?view_cast_id=debf86ef2c76b6555f26e26e%26schema_id=0eec77701464" , mode)}, 200) var ProtoCard1971 = setInterval(function(){if (window.ProtoEmbed){clearInterval(ProtoCard1971)};var mode = (window.innerWidth <= 500) ? "mobile" : "laptop";new ProtoEmbed.initFrame(document.getElementById("ProtoCard1971"), "https://cdn.protograph.pykih.com/7fda46f8c539/index.html?view_cast_id=854590061d86b19ec0580d2d%26schema_id=0eec77701464" , mode)}, 200)