Transcript
It took me literally 10 minutes to build this app in Softr with the new Vibe-Coding block. I can open any of these quizzes and give a response, see a hint, and submit it.
You can review all the answers, and what happens is that your score is stored in a database. You can also add new quizzes directly through a database.
I managed to simplify the structure because it can be difficult if you want to have one table per question or one table per answer. Instead, I created a database with one row per quiz and store all the questions as a JSON.
One quiz can have several questions in a structured format with all the possible responses, including the correct one. I then added a Vibe-Coding block and connected it to my quiz table.
[.blog-callout]
If a native block doesn't quite fit your advanced needs, you can use the Vibe-Coding block to simply prompt for the exact custom component you want, and it will generate it and connect to your Softr Databases seamlessly.
[.blog-callout]
In the block settings, I specified that we are only showing the quiz that is currently open. I provided the JSON structure to the block so it could detect all questions and display a quiz interface.
The Vibe-Coding block already understood how to deal with that data and created a dedicated interface to display the quiz. To handle the logic, I used a simple workflow that receives a webhook.
This workflow triggers whenever a quiz is finished. It sends the user info, the quiz ID, and the score, then stores that in a results table.
[.blog-callout]
Note from Softr: You can use native Softr Workflows to keep your logic as close to the design as possible, helping to consolidate tools and reduce reliance on third-party automation platforms.
[.blog-callout]
This setup allows us to pull all results for a specific user to display a max score or count the number of attempts. To add a new quiz, it just needs to follow the same format.
You can write the JSON yourself or just ask an AI. For example, I can copy the format and ask an AI to make a quiz about planets.
It is super easy for an AI to understand this format and replicate it. I just paste that into the database and give it a name like planets.
If I go back to the app homepage and type planets, the new quiz is ready to go because it follows the exact same format. This is a great example of combining the Vibe-Coding block with structured databases.
Using native Softr Databases and logged-in user recognition is one of the easiest and most scalable ways to build business apps today. You could build an internal learning platform or e-learning to upskill your team.
[.blog-callout]
Looking to build something similar? Whether it is a team intranet or a training portal, you can get started quickly with our App templates.
[.blog-callout]
From there, you can really build a lot. I hope this was interesting.
