How to Build an AI Powered Quiz in Bubble.io

Ever wondered how top businesses create those addictive quizzes that convert visitors into customers? In this video, I'm going to show you how to build an AI powered quiz in Bubble that will triple your lead generation overnight. I'm not just giving you some basic tutorial. I'm revealing my exact system for creating unlimited quizzes that convert at 47% when the industry average is more like 3%. But first, if you're keen on upping your Bubble game, you really should get free access to our resource center. It's updated weekly with vetted plugins, how to videos, tools, and there's a cool link in the description below. Most people think creating a professional quiz Requires an expensive SaaS solution or custom coding. And the truth is that Bubble's no code platform. And the strategy I'm about to show you can build quizzes that are more powerful, more customizable, and they'll generate more leads than even these really expensive $10,000 a month enterprise solutions. I've used this exact system to help our clients@ratio.dev generate thousands of qualified leads in just 90 days. And today I'm showing you exactly how we did it. So here's everything that we're going to cover in this video. I'm going to show you how to set up your database. I'm going to show you how to set up your quiz admin page, how to handle updates, how to build a reusable quiz wizard so that you can put it in any place you want in your Bubble application, how to make an AI powered quiz evaluator, cool features like voice questions, automated PDFs and customized diploma images. And for those of you who stay till the very end, I'll share with you how you can get access to the complete template that you can copy directly into your Bubble app. And that will save you over 20 hours of development time. Let's jump in straight to the database center. Before we touch a single design element, we really need to build a rock solid database foundation. This is where 90% of bubble applications and bubble developers go wrong. They start designing without planning their database correctly. So let's first look at our core data types. Let's just start off with the very first one, which is just the quiz table. And here we've built this in a way that it can handle all sorts of quizzes in your application without having to rebuild the reusable element that we're going to see later on. So it includes the button text, the call to action text description. It includes what page number in the quiz you want the email to be asked for, how that email is required, the headline.

And then it has a list of questions that are associated to it has a name, whether it requires the opt in or not, a status type and workflow id. Now, Workflow ID is important to understand. We want to be able to launch specific backend workflows related to specific quizzes. It gets complicated to actually identify which quiz needs to do which workflow. So what we've done, and we'll see in just a minute in the option sets, is we're using a workflow ID associated to the quiz so that it just becomes really trivial. Also, we need a participant data type, which is the name and the email, which quizzes they've completed, which ones they've started, and what user this participant is associated with. This is important because remember, you will have people taking your quiz that aren't logged into your bubble application because it's just publicly available. So you do want to have a place to store the name and the email that you get from them without having to go through the entire login process.

Questions are the centerpiece of your quiz. And the way we've structured this is that they live in their own data type and you can just have a thousand questions in there created. And that allows you to be really versatile because you can have different versions of a quiz based on just if you want an AB test or something like that. So questions are simple. They have a list of answers. They've got a question which is the text. If the question is, what kind of a development project do you want to start? The answers might be B2C, B2B, which could be another type of answer. So questions have answers associated to them. We also have a place to flag if the answer is the correct answer, because we are going to see that we're going to have quizzes that can have different methodologies behind them to score them and to evaluate them. So you may want to be able to mark the correct answer, because a lot of times we want our quiz to categorize the person's results based on the number of points they've gotten based on their answers. Okay, so that's what we'd call a scored quiz in opposition to a graded quiz, which would be more focused on whether or not they got the answers right or wrong. So it depends on your use case, which one you're going to be doing. Let's continue. We have a secondary data type which is where we keep the structure of the quiz with its associated questions, because we have the Bag of questions. And we have a quiz which is the header. And we need to store a structure where we organize which questions are in this quiz and that we've called here quiz questions. And if I go there, you'll see that it has a page number, it has an order number, it's associated to a specific question and to a quiz. So this has rows for each question in any specific quiz and they're ordered by pages and by a numeric ordering. Let's talk about results. Results are the top level of when somebody finishes a quiz, we store that quiz's results and it may have a link to the summary that we've gotten from the AI evaluator that we've created. It could have the image for the certificate we've generated the number of correct answers, the number of questions that they answered. It is linked obviously to the participant. If we've generated a PDF result for them, then that's where we would store the link which quiz it is. And then it has a list of responses. And responses are the individual answers that they gave to each quiz question. So response corresponds to the answers that they've chosen. And here we have stored not only a link to the answer, but we've also stored the text to the answer. This is going to make our life easier down the road. We also store if it was the correct answer, how many points they got for that answer, which question it was, and which result.

Instance we are associating this response to. And then the last table that we need to talk about are the score groups. These are just where you can say from.

The minimum number of points for each group from 0 to 8 is this group, from 10 to 20 is this one, and so on and so forth. Notice what I'm doing here. I'm not just creating a quiz table, I'm building a system that can handle any type of quiz you might want to create in the future. This is the secret to building applications that grow with your business. Instead of becoming technical debt, now let's create our option sets. We have a question type. This determines what type each question is. So for now we've set up multiple choice. We've set up a scale question which has five points on a scale, an open ended question where the user can put any input they want in, and a true false question. As we go through this video, you'll discover that you can create new types of questions and it's not going to be difficult at all to adapt the structure that we have created here to handle any type of question that you need in your quiz. You can also create a version field in your quizzes if you want to be able to automatically do split testing. So you could have version A and version B and then they could have different structures so that you could easily compare version A and version B of a specific quiz. Quiz status is as simple as draft, live or archived. Quiz type is whether it is scored or it's graded. Scored being that it is grouping them based on the points for each answer, and graded is that it is grouping them based on the number of correct answers that they got as they answered the quiz Workflow we already talked about. So this is just to identify which workflow we want to have executed for a specific quiz. Whether this is the quiz required is for opt ins, so it could either be show hide the opt in completely, which often is important. If you're doing quizzes for users that are already logged in, you don't want to be asking them their name and their email over and over again. Required if logged out is exactly what that means that if they're logged in they don't have to do the login process, but if they're logged out then it is required. So we use that option set to make determinations inside of our reusable widget. Before we jump into the admin panel of the quiz builder, let's just look at a simple quiz with no formatting. It's not fancy, it's not been polished, but just to give you an idea of what this database structure and the infrastructure actually looks like, how it functions. So here we have this simple sample quiz about Are you having problems with your bubble application? I'm just going to click on Take the quiz. What best describes your level of satisfaction? I feel tired of encountering roadblocks and difficulties with my application sometimes. I've noticed that making changes to my application are harder than they used to be. Often yes. Big problem for a lot of bubblers out there. I've noticed errors and unexpected results for my applications workflows. Sometimes.

I struggle to find my application when I search for related keywords. How well does it rank in the search engines? Always. That is such a big problem for so many applications.

I've noticed slower than average page load speeds from my application. Let's say really it's pretty well optimized. Have you noticed any other problems that you're worried about? I'm going to click here on the microphone.

I'm a little bit worried about how my bubble application integrates with third party applications. I'm having trouble getting it integrated with some of the other applications in my marketplace. That's an open ended question. Let's click next. Here I am, it's asking me for my opt in since I already tested this, it already has my data and I'm just going to say see the results and based on your answers you have a moderate likelihood of needing significant Bubble application upgrades. And now our AI tool in the background has analyzed all of those results and and it's come back and created this problem. Evaluation summary talks about difficulty with search engine visibility, increasing difficulty making changes concerned with third party integration. You can scroll down and if you want book an appointment. So I think that gives you a pretty clear vision of what the functionality of having this quiz system built for you regardless of the design issues here that this is just a skeleton. So now let's go and let's look at the backend portal for the quiz builder. Now that our database is set up we need to build an admin interface that even your non technical team members can use. You might be thinking can't I just edit directly in the bubbles database and sure you can, but that's like doing surgery with a sledgehammer. Things aren't going to be hooked up. Let me show you how to build an editor admin interface that looks like what we have here. And so what you're seeing here, we have all of our questions, we have a list of the quizzes that we've created. We have the structure of the quizzes. Let's pull up Bubble application one and you can see these are the order of the questions by pages and you could add questions in if you wanted to put them in a different place. These are the scoring groups. So we'll go to the same location and we'll say low likelihood is from 0 to the 7, moderate likelihood is from 8 to 16 and high likelihood is from 16 to 24. So those are the groups for the scoring. Here we can see the people who have taken quizzes. I'm going to click here and I can see this was the one that we just did. These are the participants. And then I can go and look at the actual results of the quizzes that were taken and I can look down here and see the responses that were given and I can also see the AI report that was generated from that quiz. So this gives you a pretty clear idea of how to structure the portal. If you're interested, leave a comment and we can talk about getting you access to the template. We'll talk about that at the end. End of the Video. Now let's jump into the bubble builder and actually look at the reusable quiz element that we've created that allows you to present your quizzes just by dropping them anywhere you want on a page in your bubble application. This reusable element has a type of content quiz. That's all it needs to know what it needs to show. And then it's structured internally in three pages. The first page is page zero, which is the start screen. This is going to be the first screen that somebody's going to see when the reusable element is visible. It has the headline, it has the description, it has the button that lets them start. Then there's a second page which is numbered from 1 to 98, which are all of the pages that you've set up in the structure of your quiz. And it will just go through page by page. So each page could have one question, it could have 10 questions. That's up to you. But it's going to show, if we open this page up, we can see that what it is. It's a repeating group of questions that are taking from the quizzes questions and it's just showing the ones that are to be shown on the current page. And then there's a next button at the bottom. And then inside this reusable element, what we have is another reusable element called a question card. And that's where we have set up how we format based on the type of question it is. So the format of a true false question will be different than a multiple choice or a scale or an open ended question. And so since those are programmed into the question card, I don't have to do anything here in my reusable quiz other than just show the one that it's supposed to be showing. So here, this question card is just taking as an input the current question that's being shown. And that makes it a lot easier to set. You can see here if we have, I'm seeing one for a scale here. This one's going to be true or false. This one is going to be multiple choice. Here's the open ended. And if you create a new type of question, all you have to do is go in and adjust the question card so that it shows for that type of question. So one of the cool things is this allows you to embed quizzes in blog posts, add them to landing pages, put them anywhere in your application that it makes sense for your users. You could take a quiz that you've set up and just pop it in and you're good to go. At the final page, it will show first of all here there's some conditionals. So it will show if it's on the page that should be showing the opt in, then it will show the Please enter your your opt in details. It'll show the name. If you've set it up to require a name. It'll show the email. If you set it up to require an email. So it handles all of that all by itself and saying I want the name on page two and I want the email on page five. You can do it that way. You can put them all on the last page. It's up to you. And then when it's done, the button at the bottom, which is See Results, will take it and change it to page 99, which is the results page where it shows the results. And it also has in here the markdown results from the AI tool if it's not empty. So we handle that in a backend workload. So let's go into the workflows here and see that when somebody clicks on the See Results button, it will schedule in the back end all of the processing of this quiz. So that doesn't happen in the user interface, that happens in the background, so it doesn't slow things down. And then it will just go to the results page. And then what this does in the background. Let's go and look at the cross sense quiz. It is going to check and see if it is a scored quiz. If it is a graded quiz, it will do another workflow because they have different algorithms for how they calculate. If you look at this custom event for score, you can see that it makes changes here based on the sum of the points from each of the questions that were answered. And it also sets the total score for the results of that quiz. If it is graded, then it's going to be a little bit different. It's going to actually calculate the number of questions that were correct and then it's going to take that percentage and find the grade. The next thing that this will do is process the AI based on the quiz's workflow id. So in our case it is a bubble quiz. So it's going to execute this process with AI bubble. And we can see here that it's going to call relevantai, send it all of the answers that the user put into the quiz and the AI is going to evaluate the results and it's going to return a markdown text for the results, which we store in the results table of the quiz. We Also will generate a certificate for the user saying that you've completed this quiz. So we will create a dynamic image. Let's go actually and look at one of the certificate that this last quiz.

Generated for us.

So here's an example of a certificate that it created automatically saying that I completed this quiz. I could present this to the user and say, hey, share it on your social media. Another conversion thing that will help drive viral traffic back to your quiz. It will also generate a PDF report using PDF potion, which you can also email to the user at the end saying, here's a PDF of everything that you answered in your report in your quiz. Another tangible thing that the customer gets so that they can look at it and then it will mark the results as completed. So all this process happens in the backend so it doesn't slow down the user and you can literally now have as many quizzes as you want in your bubble application and make them drive engagement with your users.

Now, I believe that this AI functionality will absolutely blow your competition away because it adds an extra value to the work that the customer did by answering the quiz, so they're getting its higher perceived value. The same with the PDF report and the same with the generated diploma. Those are added values that they're receiving and they're saying, wow, this was really awesome. Most quizzes just tally up points and put their users into a bucket and then they say, hey, this is the bucket you have and here's a button to go set a meeting with you that doesn't provide the same level of user experience. So we're using Relevance AI here, but you could just use OpenAI or a Claude or whatever you wanted directly if you wanted to. Finally, we should talk about backend integrations. So a quiz that exists in isolation is like a Ferrari without wheels. Impressive, but not very useful. Thanks to being done in Bubble. You can connect your quiz with anything that has an API in the Internet. So maybe you have your own proprietary backend systems that you've built with Bubble. With other software platforms you can integrate them just by an API call or a webhook. The same goes with third party tools, your CRM system, your email platform. All of this can just be seamlessly integrated in the background inside this workflow that processes in the back end. And suddenly your quiz is now a good neighbor inside your tech stack. It is an integral part of your marketing instead of being just another third party tool that's bolted halfway on. I really believe that the true benefit of all of this that I've shown you today about quizzes in Bubble is that you can tailor the experience for the user. This isn't adapting a generic solution that somebody thought was good for their users. I'm going to give my users a world class quiz experience and I'm going to control every aspect of it. I'm going to control how they interact with it, I'm going to control the colors and the images and the question types and then I'm going to give them as much value back as possible without costing me more so that they really appreciate having done the quiz because that's creating goodwill for you. And I believe that taking it up a notch really is the transformational benefit for building your quizzes in bubble. So let's just recap what we've built, what you've seen here. It generates highly qualified leads, it segments them automatically, it delivers personalized insights at scale, it integrates with your entire business ecosystem and it creates shareable assets that market themselves and help drive others to take the same quiz. But don't just take my word. We have customers that are doing this day by day because it's so powerful for their businesses. One customer, Maria, she's a business coach. Her email opt ins increased. The return on investment is very high for these types of mini projects. And the most remarkable part is that she doesn't have to worry about the technology at all. She doesn't have to learn a new tool. It's already in her Bubble application. Bubble is the platform for developing awesome quizzes. With that in mind, if you want to fast track your implementation, you've seen this template that we've created, this framework for quizzes. If you're interested in saving many hours of development work in your Bubble application copying what I've shown you, just get in touch with us and we will be glad to find a way to get this to you so that you can put it into your Bubble application and save yourself a lot of time and money. And drop a comment down below if you have any questions. Feel free to ask them and I will get back to them. And please remember to sign up for our no Code Resource Center. There's a link in the description. It includes a whole lot more videos, a whole lot more plugins and all of the detailed know how that you need to up your game in bubble. I hope you've enjoyed this video today and I'll see you in the next one.