SBTI Personality Test: A 15-Dimension Character Analysis Beyond MBTI

Self Model

├─ S1: Self-esteem — confidence level

├─ S2: Self-clarity — how clearly you know yourself

└─ S3: Core values — what you pursue in life

Emotional Model

├─ E1: Attachment security — sense of safety in relationships

├─ E2: Emotional investment — depth of emotional commitment

└─ E3: Boundaries vs. dependency — balance of personal space and closeness

Attitude Model

├─ A1: Worldview — fundamental view of the world

├─ A2: Rule compliance — how strictly you follow rules

└─ A3: Sense of purpose — pursuit of life meaning

Action Model

├─ Ac1: Motivation — approach vs. avoidance orientation

├─ Ac2: Decision style — decisiveness

└─ Ac3: Execution style — planning vs. spontaneous action

Social Model

├─ So1: Social initiative — how proactively you engage socially

├─ So2: Interpersonal boundaries — personal distance with others

└─ So3: Authentic expression — how genuinely you express yourself

Each dimension is assessed by 2 questions, scored 2–6, then converted to L (Low), M (Medium), or H (High).

II. Technical Architecture

2.1 Overall Structure

SBTI uses a frontend-only architecture built with Vue 3 + Tailwind CSS:

src/

├── views/tools/

│ ├── SbtiView.vue # Main test page

│ └── SbtiGalleryView.vue # Personality gallery

├── data/

│ └── sbtiData.js # Test data (688 lines)

└── router/

└── index.js # Route config

2.2 Data Structures

{

id: 'q1',

dim: 'S1',

text: 'I feel inferior; people around me seem more capable.',

options: [

{ label: 'Definitely', value: 1 },

{ label: 'Sometimes', value: 2 },

{ label: 'Not really', value: 3 }

]

}

{

code: 'CTRL',

cn: 'The Controller',

intro: 'Got you under control, didn't I?',

pattern: 'HHH-HMH-MHH-HHH-MHM',

desc: 'Full personality description...'

}

2.3 Core Algorithms

#### Scoring

function sumToLevel(score) {

if (score <= 3) return 'L';

if (score === 4) return 'M';

return 'H';

}

#### Matching (Euclidean Distance)

function computeResult() {

// 1. Calculate per-dimension scores

const rawScores = {};

questions.forEach(q => {

rawScores[q.dim] += Number(answers[q.id] || 0);

});

// 2. Convert to L/M/H levels

const levels = {};

Object.entries(rawScores).forEach(([dim, score]) => {

levels[dim] = sumToLevel(score);

});

// 3. Build numeric vector

const userVector = dimensionOrder.map(dim => levelNum(levels[dim]));

// 4. Compute distance to each type

const ranked = NORMAL_TYPES.map(type => {

const vector = parsePattern(type.pattern).map(levelNum);

let distance = 0, exact = 0;

for (let i = 0; i < vector.length; i++) {

const diff = Math.abs(userVector[i] - vector[i]);

distance += diff;

if (diff === 0) exact++;

}

const similarity = Math.max(0, Math.round((1 - distance / 30) * 100));

return { ...type, distance, exact, similarity };

});

// 5. Sort: smallest distance → most exact hits → highest similarity

ranked.sort((a, b) => {

if (a.distance !== b.distance) return a.distance - b.distance;

if (b.exact !== a.exact) return b.exact - a.exact;

return b.similarity - a.similarity;

});

return ranked[0];

}

III. Frontend Implementation

3.1 Responsive Design

Mobile-first responsive approach using Tailwind breakpoints.

3.2 State Management

Vue 3 Composition API for all state:

const currentScreen = ref('intro'); // intro/test/result

const answers = ref({});

const shuffledQuestions = ref([]);

const result = ref(null);