Genial.ly: Creating an Interactive Game

Hi! This is Lindsay and in this tutorial we're going to take a look at using Genial.ly to create a game. Genial.ly offers all kinds of

interactive templates for making info graphics, presentations, things like that

but in this tutorial will specifically be looking at gamification.

Throughout this tutorial, we'll look at adding content, adding interactivity

to that content, how to work with animations, finally

duplicating and linking pages.

Adding content to the template

So next, we'll start taking a look at how we can customize the content that's on this template. I like to start with one of their templates because

I can use some of the effects that are already in there, deleting some things and adding others.

So, as you can see we were broght into the pages tab

and this game is comprised of a number of different pages. So we have our title slide ,followed by a page with a question and another

page with an answer and then this carries on for each one of the questions. We'll start by customizing this title slide. The very first thing I'm

going to do is change the background. So by selecting the background tab over here

I'll make sure that I've clicked on the canvas tab. Here, I'll say delete background and you can see it removed that purple

background was here. Just so that you're aware, this gray area which comes out on the outside of the little hatch marks

that's your base. You could add an image in there as well if you'd like. I'll only be adding one to the canvas. So, you can see that you can

choose from libraries, Pixabay, all of these different things, including colors

and I've prepared a background image for ours. So, if I open up my folder files

I have my background here. Once it's loaded up, I'll double click on it and you can see it's added into the canvas area.

Next, I'm going to look at customizing some of the colours. So, this bar here is really hard to see now

and I've already got my hex colour. So, I'm just going to copy it from my document. I'll select the box again, come to colour up here in the toolbar

and then I can paste it in.

You'llsee the colour changes in the background. I'll do the same for the other bar here

and you'll eventually see that the colours end up staying here for you in your pallette so that you can add them easily. Next, let's give it a title.

I'm going to change my font to Lato.

I'll make it white

and I'm going to paste in what I wanted it to say. Keep in mind, you can always change the font

size if it doesn't fit perfectly in that box. Next, we have a subtitle.

And i'llll make the same changes,

white and Lato for the font and you can see everything still fits there. OK, and and now I'd like to change this arrow element to be white as

well. You can see that if it's selected you're able to change the colour. I think I'm also going to make

this box a little bit narrower just by pulling on the handles

and I could slide the arrow around if I wanted to. The final step for this slide, will be to replace some of the images that they have.

Currently, they have quite a few and were only going to be using five so some of them I'll click on and delete.

Make sure you leave yourself the number that you need. These are already programmed with some interactivity and animations

sidelight to maintain those. To do that, I'll just click on the image

and I can say replace. And now I can replace it with one of my own. I've got cutouts of my

five hockey players that I'm going to be asking questions for, so I'm going to replace each of these.

I can choose where to select my image from

and I'm going to drag in all of the images I've prepared.

So, I'll selected my first one and say replace. I think I want to make these a little bit bigger so I'm just going to move around some of my elements

just to give myself a bit more room. And again, you can change the size by dragging on the handles for any one of your elements.

Next, I';l just go ahead and finish replacing the rest of the images.

OK, and once you're happy with this you can come back to our pages tab and we'll start working on our second page.

So, you'll start by making the same changes. We'll change the background

as well as the colour of the box, the fonts and the colours of the buttons. So, I'm going to go ahead and do that now.

OK, so now let's go ahead and paste that question in

and you can see that the question's a little big for the box. We're going to change some of the formatting,

make the text box a little bit longer

and I think we'll still go a little bit smaller with the font.

OK, and now we're going to expand the gray box as well just to give us a bit more room.

OK, so you can see that we've got a lot more of these pumpkin animations then we actually need. I'm only going to be using five total,

one for each my players. So, I'm going to delete all the ones that I don't need

and we'll leave five sitting there. So again, you'll need to replace each of these images with the images that you're using.

OK, now I would make them all the size that you want

and just reposition.

OK, one of the final elements on this page is this circle here that was used in the game to show the difference between the different images.

I'm going to use this to show which was the right hockey player when selected.

So, this circle actually isn't going to work for me,

so I need to find a shape that will work for us.

To do that, I can use one of these other tools here and I happen to know what I'm looking for is in resources.

So, I want a shape. I'll say show more.

Then I'm going to look for the one that's an outline.

So, I think this one here will work best for me.

When I click, you can see it appears here on the timeline

and I can delete the one that I don't need

and now I can drag the square around. So, I happen to know the answer to this first one here is Wayne Gretzky

So, I'm just gonna put it into the correct place now. You can also customize the colour of your shape by coming up here to the top

and selecting the appropriate colour. The final step for this slide will be to add the names of each of the players. So, I will come over here to the text tab

and I'm gonna start by using Title 2. Clicking on that will put the title right onto the canvas

for me and I can customize it from here. So, I'm going to make this white so it's easier to read

and Lato is fine and we're going to make it quite a bit smaller.

So, I'll type in the name

and now I can just copy and paste this element so I get the same formatting for each player.

So, if I'm happy with this the next step will be to customize the answer page.

I'll click on the answer and I'll customize this page to match in terms of the elements and colours and add just a little bit of information on.

I'll do that now and then we can come back and take a look.

So, you can see that I finished reading my content to my answers slide

and I'll come back to pages. In the next step of this tutorial we'll look at

how we can add interactivity between the pages as well as with the elements.

Adding Interactivity

In this next step let's take a look at how we add interactivity to our game.

So, the first slide is already set up here for us and we'll come to the page that has our players and our first question. In this slide, we ask

which player made his debut outside of the NHL. We want to have a little bit of interactivity on each of the players as well as on

this button that can take this into the next page. So, to begin, let's look at the interactivity on the

players. One of the players holds the right answer while the rest are incorrect.

So, let's take a look at what happens when somebody clicks on a player. Because this is the

first time I'm moving away from my project, it's asking me to give it a name.

So, we're going to call it NHL Game.

So, let's say I click on one of the players that's the incorrect answer.

You'll see a little box pops up with some information.

Now we want to add our own information in there.So, let's start by clicking on Gordie Howe who is

the wrong answer and we'll click on this little icon for adding interactivity.

Clicking on that will bring up the interactivity window and you have some choices in terms of what you want to add.

By default, this one's already set up to be a window and that's the function we're going to use.

So, I'm just gonna change the text

and click save. And we'll do that for each of the remaining players

and you could copy and paste this text if you wanted to.

OK, now Wayne Gretzky happens to be the right answer here so I need to get to the interactivity for his character.

I'm just going to drag this box away so that I can click on the Gretzky icon.

Clicking here

and I'll click save.

I'm just going to move this box back into position.

The next element I want to add interactivity to is this arrow here which would take us to our next slide. So, I'm going to click on that

and click on interactivity. This time it's set up to the "go to page". So if you have multiple pages in your project and you can link between

them and this is how you would do it. So, we had selected "go to page"

and we want it to go to the answer page which is this one right here. I'll click on that and say save. So, now if we preview this

we can click on answers and if we get the wrong answer, it comes up with "Nope, sorry!"

and in a few seconds here we get our arrow that we can click on

to take us to the slide with the right answer.

So, just quickly to take a look back at that interactivity window,

I'm just going to quickly show you some of the other options.

You can also create a tooltip which is a box that will appear when someone hovers over an element that has that interactivity.

Again, you get this editor window where you can format all different types of text, you also have the ability to insert links, images videos or

even code if you want to. So, let's say you wanted to have any info graphic from Infogr.am appear. So, if you grab the embed code from Infogr.am

you could insert it by clicking on code and then pasting that code in this window. We've already taken a look at the window option.

In comparison to the tooltip, a window is something that appears when a visitor clicks

but you get all the same editing tools to choose from here. We also had a look at "go to page"

and finally you have link which allows you to enter a link that can open a new tab

or open in the Genial.ly tab when a visitor clicks on any one of the elements.

Now that we've had a look at adding interactivity to our elements, the next step will be to look at how we animate pages and our elements.

Adding animations

In this section of the tutorial, we'll take a look at how to animate our elements. So let's begin by looking at this first question page and all

of our players and text. So starting with the text, we don't want this text to appear right away so we need to add some animation to it.

I'm going to click on it and clicking on the animation icon will bring up the animation panel. Here,

we're going to say we want an entrance effect and in this case we want it to fade in

and we want it to fade in at 1.1 seconds.

You may need to play around with the timing of some of these things just to get it exactly the way you want.

We're also going to have the text exit at some point so now we'll click on the exit tab.

We'll choose fade out and we're going to have it fade out at 5.5 seconds.

Next, looking at the player, Gordie Howe was not the correct answer to this questions so at some point we want his image to disappear.

Again, looking at the animation panel here, it has an exit effect on it. We're going to have it swirl out and if you notice there,

by hovering over any of the animations it'll give you a preview of what that would look like. So, as I mentioned, we're

gonna stay with the swirl and it's already set to exit at 6.5 which is what we want.

You can also see that the players have a mouse hover on them which means any time somebody hovers over the character

it will float a little bit to indicate that's the player floating over.

Now, in our case, Wayne Gretzky is the right answer to this question

so we don't want his image to exit at all. So, I'm going to come to exit and we'll say none for effect.

And then we'll have to go through and repeat the steps for each of the images.

OK, so now that I have all of me animation on my players and my text, I need to animate this frame that I want to appear

around the correct answer so I'm just going drag it back into place,

here over Wayne Gretzky, which is the correct answer and I'll click on the animation button.

Here I'm going to have it make an entrance and I wanted to fade in. And I'm going to have it fade in at

6.5 seconds.

You can also double click on the bar and the arrow here at the side and just double check on

the animation that they have set. So, they enter at 6.7 seconds which is just fine for us.

Let's take a quick look and preview this slide. So, you can see our players come onto the screen

their names animate on and when the 3-2-1 countdown is done, the incorrect answers fade

away and the correct answer remains on the screen. Next, the visitor would click on the button

which will take them to the next page

which will show them the correct answer with a little bit of information.

Clicking off of this, you'll notice that there's this little magic wand next each of the slides as well.

Clicking on that will bring up an animation panel that is the transition between

the slides. I've left mine set to the default that were set with this template

so I'm just going to leave those as is.

Next, let's take a look at how we create the remaining pages for a game.

Duplicating and linking pages

So I'm planning on having a total of five questions in this game so I'll need to create the pages for each of those.

so I could go ahead, scroll down and continued to edit the ones that came as part of the template

but to save myself a bit of time, what I'm going to do, s duplicate the pages that we've already created. So, now one of a second question that's very similar

to the first. I'll hover over it and click the duplicate button.

You'll see a second copy of my slide come up

and I'm just gonna drag it into the correct order for my pages.

Here, I'll click on this page and now we have to change our animations to match the correct answer for this one.

So, let's drag our right answer frame out of the way.

We need to click on the interactivity and this time "He shoots, he scores!" is not the right answer.

We want this to say, "Nope,

sorry!".

I'll say save and this time Chara is actually the right answers, so will click into the interactivity

and here we'll say

"He shoots,

he scores!".

Click save again and now I need to change the animations for these players.

So, because Chara is the right answer we want him to remain on the screen.

I'll click on the animation tab

and for his exit, we're going to say none and if you remember, Wayne Gretzky was the one

who remained on the screen last time. This time we want his exit to be a swirl

and it's gonna happen at 6.5 seconds.

Now, we'll drag the frame around Chara

and because the animation was already correct we don't have to change anything on that one.

So, let's preview it quickly.

So, all the players scroll onto the page,

the incorrect answers will disappear

and the correct answer remains on the screen.

Now, we need to duplicate the answer page.

So, I'll duplicate that

and I'll click to drag it below the question

and we'll update this as well.

We'll add the correct text.

We're going to need to make that a bit smaller just because this is long

and we need to replace the image.

So, I'm going to click on replace,

I'll come to my computer

and let's open up the images that I have.

I'm going to drag Chara in,

select and say replace.

It'll drop in the image

and you can drag it around until you get in the place you want it. And then we need to come back to our question page and attach these two pages together.

I'll do that by clicking on the arrow and here in the interactivity we need to stay connected the Chara answer.

Click save

and from our players page let's preview this and just make sure all works.

OK, Chara remains on the page

and if we click on the arrow now Chara's answer page comes up.

I'm gonna go ahead and finish creating my remaining pages and also come into the pages panel

to delete all of the pages from the previous game.

And those are the steps I used to create this interactive game.

Please have a look around In Session for more tutorials on working with the Genial.ly app.Thanks for watching!

Please have a look around In Session for more tutorials on working with the Genial.ly app.Thanks for watching!