I made an HTML quiz maker!
Heya!
So, James recently made a blogpost opensourcing the python script he used to generate his various personality quizzes! (Blogger Archetype quiz, what microformat are you, etc.)
At the end of the post, he says this:
And if you feel inspired to make a better generator that gives someone HTML they can use on their own site (rather than being an embedded service), please bring the idea to life.
And, yeah, I did feel pretty inspired!
I had actually wanted to make a personality quiz like the ones James did for a while myself, ever since he published the first one. At the time his blogpost came out though, I didn't have access to my laptop, or any other computer I could run the script on. So, I really wanted a quiz generator website at the time as well.
Long story short, that's what I made. You can go and check out the quiz maker over here.
Had a look at it? Great!
Alrighty, time to talk about it for a bit.
So, I actually ended up using alpineJs for this project, which is a bit unusual for me because I'm not the biggest fan of javascript. In this case however, it was pretty much a perfect fit.
James quiz generator works by taking a bunch of JSON and then using that to generate the script. And alpine JS with its x-data directive is pretty dang good at creating a responsive UI from JSON. I can just do whatever operations I want on the big stupid JSON object that James' quiz script needs anyways, and it'll just work™ and update the UI correctly without me really needing to care much about state or whatever. It is so nice.
I didn't exactly write amazing alpine code or anything, due to it being my first time using the framework, but even then, the speed at which i could get this done was so, so much faster than if i just did all this stuff by hand - and like a billion times faster than if i used something like react.
Anyways, there's not much here left to say. I might go a bit more in-depth into the code behind this in another blogpost, but in all honesty, parts of it are fairly clunky due to this being the first thing I've actually made in alpine. Still, it works, and it works well, so that's nice. I could also explain how to use the quiz maker, but I feel like that's fairly intuitive. Go and mess around with it for a bit, have some fun. If you wanna copy the code for your finished quiz, go click the "Show code" button in the corner. Also everything auto-saves, so you don't have to worry about accidentally refreshing.
So, that's it for now! I might make another blogpost about this at some point, but for now, have fun! Go forth and make some quizzes. Also, again, thank you to James for taking care of most of the CSS for me. It looks really good.
Cya next post!