DISC Personality Test

A simple DISC personality assessment built with Next.js (App Router) and TypeScript. Users enter their name and email, answer 30 forced-choice questions, and get an instant profile with a breakdown of their D, I, S, and C scores.

The DISC model

Each result maps to one of four dominant styles:

Type	Style	In short
D	Dominance	Direct, decisive, results-driven
I	Influence	Outgoing, enthusiastic, persuasive
S	Steadiness	Patient, dependable, supportive
C	Conscientiousness	Analytical, precise, systematic

How it works

1. Intro — the user enters their name and email (both required to start).
2. Test — 30 questions, each with 4 options. Every option maps to one DISC type; picking an option advances to the next question. A progress bar and a Back button are available.
3. Result — computed instantly on-device and shown on screen:
   • Dominant style with a short profile, strengths, and watch-outs.
   • A visual breakdown bar for each type.
   • A totals grid: total D, total I, total S, and total C.

The app is fully client-side and static — there is no backend, database, or email step. Scores are tallied in the browser from the answers.

Getting started

Requirements: Node.js 18.18+ (developed on Node 22).

npm install
npm run dev

Open http://localhost:3000.

Other scripts

npm run build   # production build
npm run start   # serve the production build
npm run lint    # lint

Project structure

app/
  layout.tsx        # root layout + metadata
  page.tsx          # the whole flow: intro → quiz → result (client component)
  globals.css       # styling
lib/
  disc.ts           # questions, type profiles, and scoring logic

Customizing

• Questions & options — edit the QUESTIONS array in lib/disc.ts. Each option carries a type ("D" | "I" | "S" | "C") that determines which score it adds to.
• Type descriptions — edit TYPE_PROFILES in the same file (tagline, summary, strengths, watch-outs).
• Scoring — computeScores tallies how many times each type was chosen; dominantType returns the highest. Both live in lib/disc.ts.
• Styling — colors and layout are in app/globals.css (DISC colors are the --d, --i, --s, --c CSS variables).

Notes

This is a lightweight, self-contained assessment for demonstration and fun. It is not a validated psychometric instrument and should not be used for clinical, hiring, or diagnostic decisions.