MBTI Test plugin

Plugin builders
1

Hey guys! I have a strong desire to start building plugins. Watched a couple of youtube videos already. But i am still super newbie to this topic. My current idea is to build MBTI test plugin for my app so my users will be able to get MBTI result without leaving the app + save result to their profile. I found this code for plugin with HTML , CSS and JS code already written.

Can you guys give me some tips where and how to start moving twards my goal?

2

P.S. It is possible to create this with bubble database itself. But I just want to save some time for me and reuse that is already there. Plus share my craft with others (MBTI tests can be useful in different scenarios)

3

Building a plugin starts with knowing how you’d want the user (Bubble developer) to be able to use it and also how you want to let them design their app’s users experience.

That translates to whether you want it to be operate client-side or server-side
AND
what kinds of inputs and outputs you want a bubble developer to be able to make use of.

What I mean is this:

One way the plugin could function is by exposing a list of questions and a single action that takes in a list of all the answers and outputs a resulting MBTI type.

So how do you visualize someone using this plugin?

1 Like
4

Thanks for your detailed explanation. What I was thinking about is to take code from my example from codepen and give users the possibility to embed this code (survey to their page), set width/height + calculate the result and save MBTI type to a field in Bubble database

5

I don’t know if a plugin is necessary for this. You can create this using bubble interface.

1 Like
6

You could create an element on the plugin that displays this HTML and processes the answers, returning the result on the plugin element’s state.

A couple of things to keep in mind:

  • you’ll have to generate this html via JS in the element’s preview section on the plugin editor
function(instance, properties) {

let box = $(ALL YOUR HTML HERE);
instance.canvas.append(box);
}

  • You could then insert the JS in the initialize section of the plugin editor

There are some nuances to converting a codepen example to a plugin, because of Bubble’s plugin wrappers. Maybe a crash course like this helps: https://www.youtube.com/watch?v=at1LNlLjbIk

1 Like
7

Wow! Thank you for your first and second answer. Very detailed and complete. Appreciate it!

8

Hey! @moabe.leite I know, I was thinking that with plugin I can save some time and also keep my database cleaner. Also with plugin I can share this technology with other pople.

9

Did you ever build this? Because it’s exactly what I’m looking for.

10

hi artem hope all is well, i noticed two problems with the code firstly is when you click on submit without choosing options, it gives you a random answer, secondly after i finish the test, and try to redo it, it doesnt give me a result.