Documentation

Exauge Widget

An AI-powered quiz generator that helps your users test their knowledge on your content

View on npm
Installation
How to install the Exauge Widget in your Next.js project
npm install exauge-widget
Usage
How to use the Exauge Widget in your Next.js application

After installation, you can import and use the QuizWidget component in your Next.js application:

import { QuizWidget } from 'exauge-widget'

export default function Page() {
  return (
    <div>
      <div id="content-for-quiz">
        {/* Your content here that will be used to generate quiz questions */}
        <h1>Understanding Climate Change</h1>
        <p>Climate change refers to long-term shifts in temperatures and weather patterns...</p>
        {/* More content... */}
      </div>

      <QuizWidget 
        position="bottom-right"
        userId={3}
        htmlId="content-for-quiz"
      />
    </div>
  )
}

Important

Make sure to wrap your content in an HTML element with the ID that matches the htmlId prop you pass to the QuizWidget.

Props
Configuration options for the QuizWidget component
PropTypeRequiredDescription
positionstringYesPosition of the widget on the page. Options: "bottom-right", "bottom-left", "top-right", "top-left"
userIdnumberYesYour client user ID provided by Exauge
htmlIdstringYesID of the HTML element containing the content to generate quizzes from
Examples
Example implementations of the Exauge Widget
import { QuizWidget } from 'exauge-widget'

export default function BlogPost() {
  return (
    <article>
      <div id="blog-content">
        <h1>Introduction to JavaScript</h1>
        <p>JavaScript is a programming language that enables interactive web pages...</p>
        <h2>Variables in JavaScript</h2>
        <p>Variables are containers for storing data values...</p>
        {/* More content... */}
      </div>

      <QuizWidget 
        position="bottom-right"
        userId={3}
        htmlId="blog-content"
      />
    </article>
  )
}