Quiz implementation

[iliakan]

Sometimes, a quiz is needed, rather than a code task. That is: a question + a list of options with "choose one" / "choose many". When a visitor selects the correct answer, then show ✅ ; otherwise ❌ with the feedback text explaining why it's wrong.

How should I implement it?

Astro component, perhaps?

I'd like to try, please sketch out a correct way ;)

[AriPerkkio]

Lessons without coding tasks can hide the file tree and editor by specifying editor: false in frontmatter: https://tutorialkit.dev/reference/configuration/#editor.

---
type: tutorial
editor: false
---

To build a list of options with logic for showing correct answer and description for incorrect answers, you could create a Vite application in the template for this.

[iliakan]

Yes, I do need the logic for showing the answer/description.

"Vite application" - any docs or a similar example in the tutorial?

P.S. I've never built Vite apps, but surely can google up and read. So the question is mainly about how to integrate this into tutorialkit without patching.

[AriPerkkio]

Where would you like to show the feedback for correct and incorrect answers? If in the preview tab is enough, you could have something like https://stackblitz.com/~/edit/vitejs-vite-zwwnxg?file=src%2Ftemplates%2Fdefault%2Findex.html&terminal=dev.

It's running the quiz application in preview and hiding the code editor. The quiz application itself doesn't have to be built with Vite - any web application works.