# sf-featurepriority [![npm version](https://img.shields.io/npm/v/@sensefolks/featurepriority.svg)](https://www.npmjs.com/package/@sensefolks/featurepriority) [![npm downloads](https://img.shields.io/npm/dm/@sensefolks/featurepriority.svg)](https://www.npmjs.com/package/@sensefolks/featurepriority) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) > Identify high-impact features using a funneled Kano → MaxDiff → Pairwise methodology that progressively narrows the feature set per respondent in real time. ## Features - 🔬 Funneled three-step prioritization: Kano classification → MaxDiff scoring → Pairwise comparison - 🎯 Per-respondent real-time filtering — only features that matter advance to the next step - 📊 Client-side scoring: Kano classification, MaxDiff utility scores, Bradley-Terry rankings - 🔄 Sessionless progress — every page reload starts the survey from the beginning - ⌨️ Keyboard-accessible throughout - ♿ Screen reader optimized with ARIA live regions - 🎨 Customizable via CSS Parts - 📱 Responsive design - 🌐 Works with any framework ## How It Works The survey chains three research methods in a fixed sequence with automatic per-respondent filtering between steps: ``` All Features (4–7 items) │ ▼ ┌─────────────┐ │ Kano Step │ Respondent rates each feature (functional + dysfunctional) │ │ → Must-Be, One-Dimensional, Attractive features advance │ │ → Indifferent, Reverse, Questionable features filtered out └──────┬──────┘ │ survivors ▼ ┌─────────────┐ │ MaxDiff Step│ Best/Worst selections across balanced trials │ │ → Top-N features by utility score advance └──────┬──────┘ │ top-N features ▼ ┌─────────────┐ │Pairwise Step│ Head-to-head matchups → Bradley-Terry final ranking └──────┬──────┘ │ ▼ Final Ranking ``` **Adaptive step skipping:** - If fewer than 4 features survive Kano → MaxDiff is skipped, survivors go directly to Pairwise - If fewer than 3 features survive Kano → survey ends with Kano-only results Required respondent fields are indicated and keep Submit disabled until valid without showing required-field errors. Email format feedback starts only after `@` is entered and the respondent pauses typing for 1.5 seconds. ## Configuration ```json { "question": "Which features matter most to you?", "itemsPerTrial": 4, "topNThreshold": 3, "items": [ { "title": "Dark mode", "description": "Switch to a dark color scheme", "value": "dark-mode" }, { "title": "Offline support", "value": "offline" }, { "title": "Collaboration", "value": "collab" }, { "title": "API access", "value": "api" } ] } ``` | Field | Type | Range | Default | Description | | --------------- | -------- | -------- | ------- | ---------------------------------------------------------------------------- | | `question` | `string` | — | — | Survey question text (required) | | `items` | `array` | 4–7 | — | Priority items, each with `title`, `value`, optional `description` | | `itemsPerTrial` | `number` | 3–5 | `4` | Features shown per MaxDiff trial | | `topNThreshold` | `number` | 2..(N-1) | — | Features advancing from MaxDiff to Pairwise (required, must be < item count) | ## Installation ### NPM ```bash npm install @sensefolks/featurepriority ``` ### CDN ```html ``` jsDelivr: ```html ``` ## Usage ### HTML ```html ``` ### React ```jsx import '@sensefolks/featurepriority'; function App() { return ; } ``` ### Vue ```vue ``` ### Angular ```typescript // app.module.ts import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import '@sensefolks/featurepriority'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] }) ``` ```html ``` ## Framework Notes - React + Next.js: use the React snippet above. In Next.js, render surveys inside a `'use client'` component. - Vue + Nuxt: use the Vue snippet above. In Nuxt pages that SSR, wrap the survey with ``. - Svelte: load the package inside `onMount` and render the same `sf-*` tag. - Astro: keep the `sf-*` tag in markup and load the package with a client-side module import. - Vanilla JS: use the HTML/CDN snippet or a module import in a `