Question Type Components

A reusable npm package containing dummy components for question types such as Match the Following, Fill in the Blanks, and Multiple Choice Questions.

Goals

• Provide ready-to-use question type components.
• Seamless integration with React, SvelteKit, and Next.js projects.
• Written in Svelte 5 for modern web compatibility.

Usage Overview

1. Install the package (instructions will be added after publishing).
2. Import the components into your React, SvelteKit, or Next.js project.
3. Use the components as needed in your application.

Usage Examples

SvelteKit

<script>
  import MatchTheFollowing from 'questiontype/src/components/MatchTheFollowing.svelte';
</script>
<MatchTheFollowing leftItems={["Apple", "Banana"]} rightItems={["Fruit", "Fruit"]} />

React (using Web Components)

import 'questiontype/dist/question-type-components.web.umd.js';

function App() {
  return (
    <question-type-components-match-the-following left-items='["Apple","Banana"]' right-items='["Fruit","Fruit"]'></question-type-components-match-the-following>
  );
}

Next.js (using Web Components)

import dynamic from 'next/dynamic';
import 'questiontype/dist/question-type-components.web.umd.js';

const NoSSR = dynamic(() => Promise.resolve(() => (
  <question-type-components-match-the-following left-items='["Apple","Banana"]' right-items='["Fruit","Fruit"]'></question-type-components-match-the-following>
)), { ssr: false });

export default function Page() {
  return <NoSSR />;
}

Component API

MatchTheFollowing

• leftItems: string[] — Items to match from the left column
• rightItems: string[] — Items to match from the right column
• value?: Array<{ left: string; right: string }> — Current matches (optional)
• onChange?: (matches: Array<{ left: string; right: string }>) => void — Callback when matches change (optional)
• disabled?: boolean — Disable interaction (optional)
• Events: change — Fired when the user updates the matches

FillInTheBlanks

• text: string — The text with blanks (e.g., 'The capital of France is ___')
• answers?: string[] — The current answers for the blanks (optional)
• onChange?: (answers: string[]) => void — Callback when answers change (optional)
• disabled?: boolean — Disable input (optional)
• Events: change — Fired when the user updates the answers

MultipleChoiceQuestion

• question: string — The question text
• options: string[] — The list of options
• value?: string | string[] — The selected answer(s) (optional)
• multiple?: boolean — Allow multiple selections (optional)
• onChange?: (value: string | string[]) => void — Callback when selection changes (optional)
• disabled?: boolean — Disable input (optional)
• Events: change — Fired when the user updates the selection

Contributing & Local Development

1. Clone the repository and install dependencies:

   nvm use 18
   npm install

2. Run Storybook for local component development:

   npm run storybook

3. Run tests:

   npx vitest

4. Build the library:

   npm run build
   npm run build:web
   npm run build:types