Quizzes (Library)
In 2022, I created a TypeScript library that allows users to answer quiz questions and capture their email.
This library allows for great customization and can be easily embedded on any website.
![quiz quiz](https://timmousk.com/wp-content/uploads/2023/01/cover-2.png)
This library, called lead-generation-library, is made using the following technologies:
- TypeScript
- WebPack
- zustand (state management)
- jsonschema (schema validation)
- styled-components
Here you can see the library in action.
Requirements
I needed a library that lets a user answer pre-defined quiz questions AND captures their email (by sending it to an API).
Also, the library needed to:
- Be small
- Be easy to embed
- Support mobile
- Be easy to customize
- Support dark/light modes
- Support multiple locales
Development
The development of this library took a little over a month and was smooth.
For state management, I chose zustand, my go-to state management solution for all libraries.
Also, I needed a way to validate large configuration files with many properties. That's why I chose jsonschema, a fast and easy way to validate JSON schema.
Then, to style all my components, I chose styled-components to be able to write my CSS easily.
Finally, I needed some icons, and what's better than font-awesome for this task?
Here is a code portion from the project:
typescriptexport class LeadGenerationLibrary {
public init (element: HTMLElement, config: IConfig): void {
validateConfig(config);
const root = createRoot(element);
root.render(<App config={config} />);
}
public getVersion (): string {
return __VERSION__;
}
}
Some screenshots
Here are some example screenshots of the library in action.
A main screen:
![quiz screen quiz screen](https://timmousk.com/wp-content/uploads/2023/01/screen2.png)
A question screen:
![quiz screen quiz screen](https://timmousk.com/wp-content/uploads/2023/01/screen1.png)
An email lead capture screen:
![quiz screen quiz screen](https://timmousk.com/wp-content/uploads/2023/01/screen3.png)
A results screen:
![quiz screen quiz screen](https://timmousk.com/wp-content/uploads/2023/01/screen4.png)
Final thoughts
Overall, I really liked working on this project.
It was also my first time working with JSON schema on the front end, which I also enjoyed.
Try this library for yourself and embed it on your website.
Links: [View Code]