Cards For Humanity

This week I decided to participate for the first time in the Articulate Storyline eLearning weekly challenge. I had been meaning to participate for a while now, but hadn’t had the time.  However, this week’s challenge was to create a simple eLearning game, which frankly I love doing.  I couldn’t resist.

I have been playing a lot of one particular game lately – Cards Against Humanity.  For those unfamiliar, it is similar to “Apples to Apples” but much more misanthropic and inappropriate.  It’s definitely a game made for drinking and not made for kids or those who are easily offended.  But it guarantees a lot of laughter and a raucous good time, both things I love.

So, inspired by this wonderful and terrible game, I made an eLearning game called Cards For Humanity.  It isn’t quite so raucous, but I also think it is a somewhat interesting way to present a multiple choice quiz to learners.  I tried to add in an element of silly as well.

Visual Design

My first step was to consider the visual design.  I wanted it to be simple and resemble a card game.  Since the original game is all done in black and white, I chose those as my primary colors and used a wooden background to look like a table. I also found an image of a hand over at the eLearning Bros website and did a quick Photoshop magic lasso job to cut out the thumb so it looked as though it was holding the cards.

And that was it.  Aside from one short instruction on the first slide (done in red to stand out) along with the scoring and the feedback (done in black and white to match the cards) there were no other elements.

title slide   game board

Game Play

The game play is simple.  It is really just a multiple choice quiz set up as a drag and drop. You have a question and four possible answers.  You drag the best answer to the table to play your card.

In order to make it feel more like a real card game, I wanted to make sure that each round automatically submitted your answer once it was dropped on the table.  In order to do this I created a trigger for each card so that the interaction was automatically submitted if it was dropped on the drop area. Once two template slides were created (one that assigns points to player 2 and one that assigns points to player 3) I just copied and pasted and changed the question and answers.  It was actually a pretty quick build.


Feedback is always important in a quiz.  I made it pretty simple for this game, putting it in a black box on the bottom left corner. Positive feedback just gives you kudos and lets you know you earned a “point”. Corrective feedback was presented as an opponent playing a better answer, letting you know what that better answer is (which will actually be a card still remaining in your hand).

positive     corrective


Scoring is always fun for me.  I grew up a kid of the 80s and definitely noted the types of scoring and health meters that were used in video games.  I use these when possible in my games and feel like figuring out how to make those meters work is always a little bit of a logic puzzle (and I very nerdily LOVE logic puzzles).

For this game, I wanted to show how many rounds had been won by each of the players.  In real game play, you would have a stack of the black cards that you had won.  So, I made each player an empty stack in a bar at the top of the screen. Each time you win a point, a box in your stack turns black. Each time you miss the answer, a box turns black in one of the other players stacks.


To assign points I used 3 variables, one for each player.  If the correct card was drawn, a point was assigned to you.  If an incorrect card was drawn, a point was assigned to either player 2 or player 3. Once submitted, the feedback layer has triggers to fill in a box in the correct stack. Once a stack is completely filled you are taken to the last slide either for congrats or a please try again message.


Other tricky bits

– I wanted the opponents cards to fly in and out, like they were really being thrown anew each time.  But that meant I needed the slide to pause so they didn’t fly out before you had time to make your selection.  So I created a pause layer that has nothing on it and pauses the base layer timeline. The layer is tied to a little box hidden off screen (the blue box in the picture). When the timeline for the blue box starts, the pause layer is shown. The layer hides when you click the continue button on a feedback layer, allowing the base layer timeline to finish and the cards to exit.



– I wanted to randomize the card draws but had some difficulty getting my skip logic to work with a question bank.  If anyone has some simple brilliant idea on how to make this happen, I would love to hear it!

– I also considered allowing the player to be the judge every three rounds, to make it more like real game play, but in the end decided this would bring more complexity to the game play, so may not be a great idea for those that don’t know how to play the game already.

So What Do You Think?

Take a moment to play the game and let me know what you think!  You can also download the source file and use it as a template for yourself.