[Typeform] Building the Quiz

Oops! Something went wrong while submitting the form.
  • Okay, welcome back. We're now ready to jump into module four, which is really getting our hands dirty and building out our quiz, our sample happiness quiz. So if I switch over, I do have the Google doc open. Again. This is linked below and the templates, little tab, the resources tab. Um, and this is basically our, uh, Yeah, template.
  • I don't know what the word is like our guide. I guess it's easier to create things and edit and adjust and share and get feedback on a Google doc than it is a type form. So that's why I always start off again with that blank canvas. Um, and just writing out everything I want to do. So we are going to build out this.
  • Uh, quiz. So how exciting. So this is where I left you. Weren't going to click a new type form and, uh, again, you can see all of the templates that they have. Um, definitely explore those on your own time, but we are going to start completely from scratch. First thing to do is to give our type from a name I'm just going to call it the happiness quiz.
  • And what are you creating a quiz? So it looks like it gives you, um, a question to start out with, which is okay. But what we're going to actually start with is start by adding a new question. And it's a welcome screen. This is what people see right off the bat. And you can see on our Google doc that I named these sort of sections in brackets with the.
  • Uh, question type. Not that the, um, welcome page is a question type, but that's what this is, is a question group, which we'll obviously get to when we get to that. So I'm just keeping things easy. I am copying this. And pasting it. Now, there is a few things we can set up and you can see all the options by clicking up here.
  • And I'm just so you know, I happen to have created a welcome screen from this button, but if I wanted to change it to a different question type, I could do that over here. Um, but obviously we do want this time to complete as optional. I really like it. It takes the real. Time, uh, on average for people to complete it, I suppose I would hide it.
  • If the type form was took a long time to complete our mindset quiz takes three minutes. So to me, I like to show that off because it lets people know at the start, you know, this isn't some, I dunno, you know, huge, long process. So I like that on, I think it's cool feature. I also, uh, instead of just start, um, let's do something a little bit more fun.
  • Let's do this. Um, I don't get into a whole bunch of styling with this, but I do want to show you at least some things, how to make things nice. So if you highlight texts, you have these bold italic and the ability to link. We'll get to this link later and it's use case, but I'm just, you might want to bold certain elements.
  • Um, I have a handy extension that gives me grammar insights. So there's that? So this is okay, but it's kind of plain, obviously with just the white, this isn't meant to be a comprehensive guide of how to style a type form, but I'm not going to leave you hanging and do nothing. So on every one of your questions, regardless of its type, you can click this layout and then you have these various options and the gray boxes, um, represent either a image or a video it's up to you.
  • Um, so if I do this, you can see an image, you know, it does that, or it goes over here. I tend to like this one over here, but be sure to just explore it and ultimately have fun with this, but we are having a happiness quiz. So what we can do is we can add images, something, if you don't know. One of my favorite websites is unsplash.com and if you've never heard of it, it is a.
  • Royalty-free image sites. So you can see it here. unsplash.com. They have a great search. Um, but these are royalty free. You can use these, um, without having to worry about anything. They're really beautiful, extremely high quality. Uh, just a crazy great resource. Um, but one thing that's cool is we don't actually even have to go there.
  • You might want this for other reasons, you know, create slides or something. So unsplash.com is something to remember, but something that's cool with type form is it's built in. So you can see, you can search Unsplash right, without even having to leave type form. So we're doing a happiness quiz, so maybe we'll just search happiness.
  • And what one do we like?
  • I don't think that one would work. Maybe little try, just happy. This one's kind of nice. So we select it. We just continue. And then from there, it's going to give us the ability if we want it to edit and crop it or apply a filter or something, uh, you could do that. We're not going to go that in-depth here, so we'll just click save, and then you'll see that it will populate it over here.
  • So that's a good start. That is our welcome screen. The next question that was actually pre-populated because it, I guess obviously they want you to have one question. Um, so what I'm actually going to do is I am going to hit the plus button and hit the multiple choice option. Cause that's the, uh, question type we're going to use.
  • Okay. Um, and then I am just going to delete this, but I'm actually going to sort of change my mind with this. So all of our questions, you can see, these are multiple choice, but as I said here, we're going to use a question group. So I'm unsure if I can. Yeah, I can't change it over here to a question group.
  • so what I'm going to do actually instead is I'm going to click the plus button again. And we're going to select question grouping. Um, and with that, I can just delete that multiple choice question that I made. So question grouping, um, I guess it sounds like what it is. It's a, just a group of related questions and I'll show you what, what this does.
  • Um, but to start with, we do have this question group, and then I have text that I want to add. So. Um, paste that here and then this line is meant to be the description. So like that, um, we may as well continue with our styling. Maybe we'll do time
  • like this.
  • Okay, so there's that. And in this first question that it pre-populated, you can see this floating bar up here and I'll get to that in a second. Um, but this pre-populated question that it put it in the group is a short text field, but we actually want multiple choice so we can change the question type by clicking up here.
  • Clicking there and then changing it to multiple choice. You could change it to anything, but we are going to use multiple choice. So there's that, um, another thing we do you want is there's a bunch of options here. Probably self-explanatory multi selection. If you want it to allow that you can't do that with a quick is because we need, um, known quantities, right?
  • So they can only select one. But there's obviously a variety of other use cases for Typeform. That multiple selection is a very valuable randomize as it sounds. It just randomizes all the choices. I actually don't want to do that because as I said, previously, we are, we're not using numbers, but we are using a Likert scale of, of sorts.
  • And I do think it's a better user experience to have that in that order, even though it's not numbers, but from, in our example, most. Negative two most positive. Um, I do want it to stay in that order, so I'm not going to randomize again. The other option allows someone to type in an option that you might not have provided, but obviously in this scenario with a quiz, we need known quantities.
  • So these are not, um, options. We're going to be able to use. Um, but obviously other use cases, that's great to have one thing we are going to need is required. We're going to make every question required because it's required for us to do the calculation and, um, to make sure we get, uh, we know the result they should get to then get the proper follow-up email.
  • So be sure that you're selected multiple choice and that it's required. And with that, we are going to start copying in our questions.
  • And I do have the scores here because I thought it was easier to sort of see and think about on the, on the thing, on the thing on the Google doc, but we can paste them all at once, but unfortunately it does add the score, which we don't actually want to show. So unfortunately, manually just got to go in and do this.
  • If you're copy pasting like me. Okay.
  • Not too bad. So that is first question. Um, one thing I want to show you, I'm going to duplicate this question and you can see again in this grouping, we're going one, a one B one C. We obviously want four questions. So, um, they're all the same right now. Cause I just duplicated the question rather than creating a new one.
  • Um, you can create a new one if you wanted to. But one thing I wanted to show you is I'm just going to duplicate it one more time, and then I'm going to drag this outside of the question group. And I just want to show you what this, uh, difference looks like. So when you create a question group, let's just click preview.
  • When you click the preview. I, um, up here, just let me put you in a little preview mode. It starts with you in mobile. I prefer to look at it in desktop, but if I click this. This is the beginning of our question group. You can remember if I click continue, you see this floating bar thinking of the past 30 days.
  • So all these questions are the same. I'm just going to click through them all to get through this question group. Again, we had four questions, right? So we're up to D so this is now the end. So now you see that bar went away. Because that was part of the question grouping. Um, so I asked the same multiple choice question here.
  • It's just outside of the question group. So I just wanted to show you what that question group does is it basically makes this top line right here, um, that be that floating bar as they go through the questions. So in my case, I wanted people to think of the past 30 days. So it makes sense to kind of remind them of that, but you can't have it be too long or else it probably be distracting.
  • So it's totally up to you. If you want to actually have all of the questions are for questions inside a question group, um, or not. It doesn't matter either way. It doesn't really change anything. Um, but in my, uh, example, if you're following along exactly, I am going to use a question group. So I will just delete this extra question that I had to show you.
  • But like, if you remember, we duplicated these four things. So I do have to go back and actually update them to the proper questions. Just delete all these options. I don't necessarily know if duplicating actually makes it faster when you have to delete all the options, but in any case, same thing here, and we're got to delete this school.
  • Okay.
  • We get these questions actually kind of on the board here. I'm going to go back and we'll select pictures for each to make our, um, Quiz, just look a little bit more engaging.
  • I do think with tutorial sort of questions, it's important to not make edits. So it's, they can be a little bit longer, uh, videos, but I think it's important. You just see how I click around in real time.
  • Just easier to follow, I think ultimately,
  • so again, just cleaning up all these scores and the last one.
  • Okay close.
  • okay. So those are our questions loaded up into our question grouping. Um, I think the next thing to do is to just add a little bit of, uh, I don't know, Interesting stuff, I guess, to our quiz by just adding images. So I'm going to stick with this right-hand side because I liked the way it looks. You could try other ones if you want it to, but let's try and pick a contextual, uh, visual for each.
  • So we selected, um, this is our first question about work. So I just searched work here and let's just go with that one. Click save. So does that for our work question and we'll do it for our relationships. Um, although obviously relationships isn't just romantic, um, just for the sake of simplicity, something like this is probably easier.
  • So I'm going with that. Save.
  • And money
  • money
  • go with this one
  • that, and then last one health
  • health. Kind of like this one and I think it gives me an opportunity to show you this because the images on the right side, I'm just going to mere it and I'm also going to crop. So I just dragged it. Basically I'll click save and then it'll apply that picture like that. Um,
  • If you want to change your mind, I just might want to change the crop.
  • So I do think the mirror is good. And then maybe just like that, save, there we go. Okay. So again, the main thing to make sure, because I duplicate it. If you happen to have not, or maybe you didn't select required before you duplicated that's important. So just make sure for each of the questions that it is marked as required, and you can tell quickly if there's a star on it.
  • So you can see, I have stars for all of my questions because we need them all to be required. Okay. So that is our question grouping. If we go back to our Google doc, um, you can see my important note here. Is, you should always ask the personal question. So the name and email is what we're asking in this case.
  • You always want to ask at the end of the, um, quiz, because that's when the FOMO, the fear of missing out the interest has been peaked. So if you ask it at the beginning, people aren't that. Bought in, they don't quite care yet. So your conversions will actually be way lower if you ask for name and email first compared to at the end.
  • So that's an important note that I made. Um, but again, we're copying this and this is going to be a new type of question type, which is a short text, um, for names. Cause it, yeah, it makes sense.
  • um, because I kind of wrote a lot here. I'm just going to bold the actual, like main questions, so they pay attention to it. Um, and then we do want this to be required. And just to avoid any funny business, maybe you we'll put a max character limit of like 50. I can't imagine first name being that long. So, I don't know.
  • That's not optional. You don't have to put max characters, but I don't want anybody to be able to write like a paragraph. I just want their first name. So I'm going to put a limit of 50. Um, okay, so first name. Cool. Oh, and it looks like it added it to the question group. I didn't notice. So that's my bad, but you can just drag it out.
  • Or maybe I have to drag it yeah. Outside of it. And then, but we do want the questions first and then this here. So these are easy to drag around and you can also change the order inside a grouping if you needed to. So, pretty easy to just move things around and I moved it outside. Okay. We're back. All right.
  • And the next question is email and you see this little red I'll show you how to do that. But basically what it's doing is we want to show the first name that they gave us in the last question, just to make it a little bit more personal. I think it's cool. And a nice feature and I'll show you how to do that.
  • So, um, You might think for email, you'd use short texts, but there's actually a dedicated email option, which is important because then it makes sure that it's a real email. It has an app symbol, a.com and that sort of thing. Um, so be sure when you're asking for email to use the actual email specific question.
  • So with this first name, I made these funny brackets, just so it stood out. So you remembered to replace it. So we were going to delete it and to add the actual question, the answer that they gave, if you type the at symbol, all of these, uh, recall information is what type from calls it comes up. And this is where you can input.
  • Quest gins that they've answered the answers that they gave it in future questions. So I don't know the use case, but you could, you know, refer to which multiple choice option they made. That's our one, a, B, C, and D, and our question group, but we obviously want to do question two, which is when we ask them their name.
  • So just add, pop, proper punctuation, but this will now change this value to whatever they typed. In the name question, which is pretty cool. Um, and then I'm just going to email this or email. I'm going to bold that, cause that's the main question. Fix that grammar. And then we do need this to be required.
  • Obviously this is a lead magnet, so we want that to be required. Okay. Next is the legal. Now this is. Not legal advice. It's outside the scope of LIS launching lab and quiz launching lab and all of that. But, um, you should have a terms and conditions for your website and in general. So, um, Again, we can't necessarily help you with doing that, but it's something you should just Google.
  • It's not too difficult to find a template, but again, type form with, to the rescue has a perfect legal, um, question type, which is about accepting or not accepting terms. And yes, so one thing we want to do right away is we do need this to be required. So this means they have to actually say yes, I'm okay to be contacted.
  • Um, just important part of consciousness building and just overall internet. Ethicacy, I guess. So we have this link to terms and conditions, filler thing, but we're actually not going to just paste the link. Um, you might've seen before when we highlight texts, we get bold italic and link option. So for this, what we're going to do is we're actually going to link to, uh, Kathleen's terms.
  • And obviously you would link to your terms, but I have the terms here, if you're wondering. Um, so that's that, but I'm just going to copy this link. And then when I highlight this, I'll click the link button paste that link in and press enter. So this will give the ability to, for people to actually click and go read the terms if they want to, um, before they accept.
  • So I'll show you that in a preview in a moment, but I believe until we get to the success page. That is the sort of meat of our quiz. So maybe it's a good time to just preview and just to see it in action. So again, you can preview on mobile, um, just easier to see on desktop. So continue can select our options, which is great.
  • All of our pictures are looking good. And then it asks for our first name. So this is a test to make sure it works. So if we clicked type in Carson and we go to next, you can see Carson was put right here. This is, if you remember where we typed that at symbol and use that recall information, which is working great.
  • If I click this up arrow to go back and I change this to Frank, you can see that it always shows whatever. Um, Whatever was typed in that given question. So pretty cool feature. Um, if I enter my email, um, or actually just to show you if I didn't have this, this is why we want to use this specific field rather than a text input, because it knows to check for certain things.
  • So it knows that's not a valid email, so great feature. Okay. And if I wanted to click to see the terms, this. We'll open a new window. You see, which is important. And if I don't accept, you can see, you have to agree. So I can't do anything, but if I did click accept, it would allow me to submit. So that is the core sort of creation of the, I guess, meat of the, um, Of the quiz, the questions itself.
  • And now we're going to look at the ending so you can see endings are not a question type. They're actually their own section. You can have multiple endings, I'll get to that, um, in due time. Um, but with this ending, one thing I want to show you is we. Um, I'm just going to close these terms windows, but I do have a successful submission page thing for you to copy.
  • So we're copying pasting. Um, I just put a name place for your name, but we'll just change it to mine. And then we do have these recall information markers. So I'm going to delete that type the at symbol. And you can see, obviously you can only recall information if the question's been asked. So, um, I think that makes logical sense.
  • Uh, you wouldn't be able to refer to the first name in this first question because they haven't given it yet. So I'm sure that makes logical sense to you, but so we're entering the name here and then I like to just. Remind people what email they provided. So again, I'm just deleting that placeholder typing out and then selecting this email, uh, question.
  • Okay. So there's a few things here. Like I told you before to actually create and preview the type form yourself. You don't have to upgrade your account to that first level, that $35, but we do have to use the calculator feature of type form. So you will eventually have to update, upgrade. Um, I will get to that, but, um, in the meantime, With these buttons.
  • Um, first of all, with these share icons, I don't like to have them because I don't like to divert away from the mat matter at hand and how we're setting up our quiz. Um, You know, they don't see their results on the type form. Right? You could theoretically show their quiz results based on their answers selected.
  • You could show it in the ending, but we don't want to do that because we want to make people go check their email. That's good for sender reputation. It's good for. Just overall training people to go, you know, look for your emails in their inbox. So that's a important thing in my opinion, to not show the quiz results on the page itself, but have them actually have to go check their email.
  • So with that, we don't want to add, I don't like to have this social share icons. Cause I think it just, um, shiny things, right? People might lose track of what they're doing, what we want them to do. So with the button by default, Basically, it would just, it starts the type form over against. They would just go back to the beginning.
  • Um, obviously, maybe there's a use case for that, but I can't think of a good one. Um, but something that you could do is you could just have a little micro call to action here. Like, uh, come say hi on Instagram. Um, Instagram. Um, So again, while they're waiting, as we say, your email should arrive in 10 minutes and to check your promotions tab, this I think is very important to add because it can take time and you do want, um, tell them, like, if it's not in your inbox in 10 minutes to go check here, which is important because if they actually did go to spam and then they go to the spam folder and see it, and then Mark it, not as spam, you will no longer go into their spam folder.
  • So this is just an important piece of, uh, Copy that I always liked to have. Um, but back to this, come say hi on Instagram. Actually we could even for a little bit more fun rather than just saying, come say hi, we could use a emoji. Uh, this is emojipedia.org place. I used to find, um, emojis, but I'm going to copy this waving hand.
  • Come back here. And then rather than hi, maybe I'll just put this little waving hand. So that's kind of cool. Now what I was getting to with the paid feature, if, um, I wanted to go link to our Instagram account so people could go drop a follow while they're waiting for their results to come via email. Um, if I do this, you will see.
  • That type form is going to give me, uh, give you, excuse me, a warning. I have a paid account already, so I don't get the warning, but you, if you're on a free account, it will warn you that it's now in trial mode because you've activated a feature, um, that I believe they call a redirect, uh, on the welcome screen.
  • Um, so yeah. Just if you're just testing and whatever, don't obviously this isn't enough to worth upgrading right now. So you can just turn this off for now, um, until you're ready to actually upgrade and move it to allow other people to do it. Um, so just a warning that this button, um, so I didn't know it, I took that away, so I'm, I'm having it do a, this, but just a warning that.
  • Um, like I said, it is a paid thing, so you will get a warning if you're on a paid account,
  • but for me, and eventually you will need to upgrade. So I'm going to build it as such now. Um,
  • so I'm just putting it back to the way I had it. So it comes out on Instagram and the button links to Instagram. Uh, there we go. All right. Now, one more time with the layout we're on the success page. So maybe we can find this. Yes. So looks nice.
  • Save
  • and there we go. So that is where I'm just going to end for now. And the next stage, I'm going to show you how to connect the sort of math behind the scenes. And for that again, you got that warning for the Instagram link about you're in trial mode, blah, blah, blah. You have to upgrade to actually allow other people to use it.
  • Um, You also will need to upgrade in order to use the calculation function, but I will get into that in the next video. And I just a reminder that you don't have to upgrade to build it out. You just would have to upgrade to actually make it function. Um, so it's just important to be clear. You don't have to upgrade this exact moment.
  • Um, But you will obviously when you're ready. So, okay. That's the end of this video. We got our type form quiz loaded up with all of our questions. Um, we have our success page. We'll continue to build this out, to make it work with our convert kit account to send those personalized results emails, but that's down the line.
  • Um, so I will see you in the next video where we connect the mathematics behind the scenes.

Up next

[Typeform] Results Email: Simple or Hard(er)

Download Workbook
Why Quizzes?
Why Quizzes?
Planning & Validating
Planning & Validating
Let's Talk Tech
Let's Talk Tech
Using Typeform
Using Typeform
[Typeform] Create Your Account
[Typeform] Create Your Account
[Typeform] Building the Quiz
[Typeform] Building the Quiz
[Typeform] Results Email: Simple or Hard(er)
[Typeform] Results Email: Simple or Hard(er)
[Typeform] Results Email: Simple
[Typeform] Results Email: Simple
[Typeform] Results Email: Hard(er)
[Typeform] Results Email: Hard(er)
Using Interact
Using Interact
[Interact] Create Your Account
[Interact] Create Your Account
[Interact] Building the Quiz
[Interact] Building the Quiz
[Interact] Results Emails
[Interact] Results Emails
Creating Your Quiz
Creating Your Quiz