Perseus is an open-source framework developed by Khan Academy for building interactive exercises and assessments. It provides a set of tools and components to create engaging educational content, including multiple-choice questions, interactive graphs, and more complex problem types.

Pros

• Highly customizable and extensible for creating various types of educational content
• Integrates well with React and other modern web technologies
• Supports a wide range of question types and interactive elements
• Actively maintained by Khan Academy and the open-source community

Cons

• Steep learning curve for developers new to the framework
• Documentation can be sparse or outdated in some areas
• May be overkill for simple quiz or assessment needs
• Requires a good understanding of React and modern JavaScript

Code Examples

1. Creating a simple multiple-choice question:

import { Perseus } from "@khanacademy/perseus";

const question = {
    question: {
        content: "What is the capital of France?",
        widgets: {},
    },
    answerArea: {
        type: "multiple-choice",
        options: {
            choices: [
                { content: "London" },
                { content: "Paris", correct: true },
                { content: "Berlin" },
                { content: "Madrid" },
            ],
        },
    },
};

const PerseusQuestion = () => (
    <Perseus
        question={question}
        onScore={(score) => console.log("Score:", score)}
    />
);

2. Creating an interactive graph:

import { Perseus } from "@khanacademy/perseus";

const graphQuestion = {
    question: {
        content: "Plot the point (3, 2) on the graph.",
        widgets: {
            "graph1": {
                type: "interactive-graph",
                options: {
                    range: [[-5, 5], [-5, 5]],
                    labels: ["x", "y"],
                    step: [1, 1],
                    correct: { type: "point", coords: [3, 2] },
                },
            },
        },
    },
};

const GraphQuestion = () => (
    <Perseus
        question={graphQuestion}
        onScore={(score) => console.log("Score:", score)}
    />
);

3. Creating a numeric input question:

import { Perseus } from "@khanacademy/perseus";

const numericQuestion = {
    question: {
        content: "What is 2 + 2?",
        widgets: {},
    },
    answerArea: {
        type: "input-number",
        options: {
            value: "4",
            simplify: "required",
            size: "small",
        },
    },
};

const NumericQuestion = () => (
    <Perseus
        question={numericQuestion}
        onScore={(score) => console.log("Score:", score)}
    />
);

Getting Started

To get started with Perseus:

1. Install the package:

   npm install @khanacademy/perseus
   

2. Import and use Perseus in your React application:

   import { Perseus } from "@khanacademy/perseus";
   import "@khanacademy/perseus/styles/perseus-renderer.css";
   
   function App() {
     return (
       <Perseus
         question={yourQuestionObject}
         onScore={(score) => handleScore(score)}
       />
     );
   }
   

3. Create question objects as shown in the examples above and pass them to the Perseus component.

4. Customize and extend Perseus as needed for your specific educational content requirements.