Book Your Free Call

Quizzes (Library)

Tim Mouskhelichvili
Tim Mouskhelichvili
2 minutes to read

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

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

A question screen:

quiz screen

An email lead capture screen:

quiz screen

A results screen:

quiz screen

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]

TypeScript
NPM Library