|
<!DOCTYPE html> |
|
<html lang="ko"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<title>MBTI 성격 유형 테스트</title> |
|
<link rel="stylesheet" href="style.css" /> |
|
</head> |
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container"> |
|
<h1>MBTI 성격 유형 테스트</h1> |
|
<p class="desc"> |
|
아래 질문에 답변해주세요. 각 단계마다 5개 문항씩 있습니다. |
|
</p> |
|
|
|
|
|
<form id="quizForm"> |
|
|
|
<div class="question-page" data-page="1"> |
|
<h2>1단계 (문항 1~5)</h2> |
|
<div class="question"> |
|
<p>1) 당신은 혼자 있을 때 에너지를 얻나요?</p> |
|
<div> |
|
<label><input type="radio" name="q1" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q1" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q1" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q1" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q1" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>2) 당신은 계획을 세우는 것을 좋아하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q2" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q2" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q2" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q2" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q2" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>3) 당신은 새로운 상황에 쉽게 적응하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q3" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q3" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q3" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q3" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q3" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>4) 당신은 감정보다는 논리에 더 의존하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q4" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q4" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q4" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q4" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q4" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>5) 당신은 다른 사람을 돕는 것을 좋아하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q5" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q5" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q5" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q5" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q5" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<button type="button" class="next-btn" data-next="2">다음 단계</button> |
|
</div> |
|
|
|
|
|
<div class="question-page" data-page="2" style="display:none;"> |
|
<h2>2단계 (문항 6~10)</h2> |
|
<div class="question"> |
|
<p>6) 당신은 사교적인 성격을 가지고 있나요?</p> |
|
<div> |
|
<label><input type="radio" name="q6" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q6" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q6" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q6" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q6" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>7) 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p> |
|
<div> |
|
<label><input type="radio" name="q7" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q7" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q7" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q7" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q7" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>8) 당신은 사실과 데이터를 중시하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q8" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q8" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q8" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q8" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q8" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>9) 당신은 감정 표현을 잘 하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q9" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q9" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q9" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q9" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q9" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>10) 당신은 문제를 해결할 때 창의적인 방법을 사용하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q10" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q10" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q10" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q10" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q10" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<button type="button" class="prev-btn" data-prev="1">이전 단계</button> |
|
<button type="button" class="next-btn" data-next="3">다음 단계</button> |
|
</div> |
|
|
|
|
|
<div class="question-page" data-page="3" style="display:none;"> |
|
<h2>3단계 (문항 11~15)</h2> |
|
<div class="question"> |
|
<p>11) 당신은 다른 사람들과의 협업을 선호하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q11" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q11" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q11" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q11" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q11" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>12) 당신은 결정을 내릴 때 직감을 신뢰하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q12" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q12" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q12" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q12" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q12" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>13) 당신은 규칙과 절차를 따르는 것을 좋아하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q13" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q13" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q13" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q13" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q13" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>14) 당신은 주변 환경에 민감하게 반응하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q14" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q14" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q14" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q14" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q14" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>15) 당신은 일을 처리할 때 효율성을 중시하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q15" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q15" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q15" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q15" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q15" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<button type="button" class="prev-btn" data-prev="2">이전 단계</button> |
|
<button type="button" class="next-btn" data-next="4">다음 단계</button> |
|
</div> |
|
|
|
|
|
<div class="question-page" data-page="4" style="display:none;"> |
|
<h2>4단계 (문항 16~20)</h2> |
|
<div class="question"> |
|
<p>16) 당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?</p> |
|
<div> |
|
<label><input type="radio" name="q16" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q16" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q16" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q16" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q16" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>17) 당신은 자연스럽게 리더 역할을 맡게 되나요?</p> |
|
<div> |
|
<label><input type="radio" name="q17" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q17" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q17" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q17" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q17" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>18) 당신은 새로운 아이디어를 제안하는 것을 좋아하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q18" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q18" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q18" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q18" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q18" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>19) 당신은 대인 관계에서 갈등을 피하려 하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q19" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q19" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q19" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q19" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q19" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<div class="question"> |
|
<p>20) 당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?</p> |
|
<div> |
|
<label><input type="radio" name="q20" value="매우 그렇다" required> 매우 그렇다</label> |
|
<label><input type="radio" name="q20" value="그렇다"> 그렇다</label> |
|
<label><input type="radio" name="q20" value="보통이다"> 보통이다</label> |
|
<label><input type="radio" name="q20" value="아니다"> 아니다</label> |
|
<label><input type="radio" name="q20" value="매우 아니다"> 매우 아니다</label> |
|
</div> |
|
</div> |
|
<button type="button" class="prev-btn" data-prev="3">이전 단계</button> |
|
<button type="submit" class="submit-btn">결과 확인</button> |
|
</div> |
|
</form> |
|
|
|
|
|
<div class="result-page" style="display: none;"> |
|
<h2>결과</h2> |
|
<p class="final-result"></p> |
|
<img class="final-image" src="" alt="MBTI 이미지" style="max-width: 300px; display:none;" /> |
|
<button type="button" class="restart-btn">다시하기</button> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const questions = [ |
|
"당신은 혼자 있을 때 에너지를 얻나요?", |
|
"당신은 계획을 세우는 것을 좋아하나요?", |
|
"당신은 새로운 상황에 쉽게 적응하나요?", |
|
"당신은 감정보다는 논리에 더 의존하나요?", |
|
"당신은 다른 사람을 돕는 것을 좋아하나요?", |
|
"당신은 사교적인 성격을 가지고 있나요?", |
|
"당신은 일을 끝내기 전에 계획을 세우는 편인가요?", |
|
"당신은 사실과 데이터를 중시하나요?", |
|
"당신은 감정 표현을 잘 하나요?", |
|
"당신은 문제를 해결할 때 창의적인 방법을 사용하나요?", |
|
"당신은 다른 사람들과의 협업을 선호하나요?", |
|
"당신은 결정을 내릴 때 직감을 신뢰하나요?", |
|
"당신은 규칙과 절차를 따르는 것을 좋아하나요?", |
|
"당신은 주변 환경에 민감하게 반응하나요?", |
|
"당신은 일을 처리할 때 효율성을 중시하나요?", |
|
"당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?", |
|
"당신은 자연스럽게 리더 역할을 맡게 되나요?", |
|
"당신은 새로운 아이디어를 제안하는 것을 좋아하나요?", |
|
"당신은 대인 관계에서 갈등을 피하려 하나요?", |
|
"당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?" |
|
]; |
|
|
|
|
|
const mbti_types = { |
|
"INTJ": { |
|
"성격": "독창적이고 전략적인 사고를 가진 조용한 리더", |
|
"직업": "과학자, 엔지니어, 데이터 분석가", |
|
"궁합": ["ENFP", "ENTP"], |
|
"나쁜 궁합": ["ESFP", "ESTP"], |
|
"궁합 설명": { |
|
"ENFP": "ENFP는 INTJ의 이상주의를 자극하고, 서로의 강점과 약점을 보완합니다.", |
|
"ENTP": "ENTP는 INTJ의 창의성과 전략적 사고를 자극하여 생산적인 파트너십을 형성합니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ESFP": "ESFP는 INTJ와 정반대의 성향을 가지고 있어 갈등이 잦을 수 있습니다.", |
|
"ESTP": "ESTP는 실용적인 접근을 선호하는 반면, INTJ는 장기적인 계획을 중시합니다." |
|
} |
|
}, |
|
"INTP": { |
|
"성격": "논리적이고 분석적인 사고를 가진 혁신가", |
|
"직업": "연구원, 프로그래머, 철학자", |
|
"궁합": ["ENTJ", "ESTJ"], |
|
"나쁜 궁합": ["ESFJ", "ESTP"], |
|
"궁합 설명": { |
|
"ENTJ": "ENTJ는 INTP의 분석적 사고를 촉진하고 함께 전략적인 목표를 달성할 수 있습니다.", |
|
"ESTJ": "ESTJ는 INTP의 논리적 접근을 존중하며 실용적인 해결책을 찾는 데 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ESFJ": "ESFJ는 감정적인 결정을 중시하는 반면, INTP는 논리를 중시하여 갈등이 생길 수 있습니다.", |
|
"ESTP": "ESTP는 즉각적인 행동을 선호하며, INTP의 깊은 사고와는 충돌할 수 있습니다." |
|
} |
|
}, |
|
"ENTJ": { |
|
"성격": "대담하고 결단력 있는 리더", |
|
"직업": "기업가, 경영자, 변호사", |
|
"궁합": ["INTP", "INTJ"], |
|
"나쁜 궁합": ["INFP", "ISFP"], |
|
"궁합 설명": { |
|
"INTP": "INTP는 ENTJ의 전략적 사고를 보완하며, 논리적 접근을 통해 문제 해결에 도움을 줍니다.", |
|
"INTJ": "INTJ는 ENTJ와 함께 장기적인 목표를 설정하고, 실행할 수 있는 강력한 파트너가 됩니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"INFP": "INFP는 감정적 접근을 선호하며, ENTJ의 냉정한 논리적 접근과 충돌할 수 있습니다.", |
|
"ISFP": "ISFP는 즉흥적이고 감정적인 경향이 있어, ENTJ의 체계적이고 논리적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ENTP": { |
|
"성격": "창의적이고 논쟁을 즐기는 비평가", |
|
"직업": "마케터, 변호사, 기자", |
|
"궁합": ["INFJ", "INTJ"], |
|
"나쁜 궁합": ["ISFJ", "ISTJ"], |
|
"궁합 설명": { |
|
"INFJ": "INFJ는 ENTP의 창의적 사고를 이해하며, 이상적인 목표 설정을 도와줍니다.", |
|
"INTJ": "INTJ는 ENTP와 함께 혁신적인 아이디어를 실현하는 데 강력한 파트너가 됩니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ISFJ": "ISFJ는 전통적이고 보수적인 성향이 강해, ENTP의 혁신적이고 비판적인 사고와 충돌할 수 있습니다.", |
|
"ISTJ": "ISTJ는 실용적인 접근을 선호하며, ENTP의 실험적이고 모험적인 성향과 갈등이 있을 수 있습니다." |
|
} |
|
}, |
|
"INFJ": { |
|
"성격": "통찰력 있고 헌신적인 이상주의자", |
|
"직업": "상담사, 심리학자, 작가", |
|
"궁합": ["ENFP", "ENTP"], |
|
"나쁜 궁합": ["ESTP", "ESFP"], |
|
"궁합 설명": { |
|
"ENFP": "ENFP는 INFJ의 이상주의와 깊은 감정을 이해하고 이를 격려합니다.", |
|
"ENTP": "ENTP는 INFJ의 창의성을 자극하고, 혁신적인 아이디어를 실현하는 데 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ESTP": "ESTP는 즉각적인 행동을 선호하며, INFJ의 깊은 사고와 감정적 접근과 충돌할 수 있습니다.", |
|
"ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, INFJ의 내성적이고 계획적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"INFP": { |
|
"성격": "이상적이고 충실한 중재자", |
|
"직업": "예술가, 작가, 상담사", |
|
"궁합": ["ENFJ", "ENTJ"], |
|
"나쁜 궁합": ["ESTJ", "ESFJ"], |
|
"궁합 설명": { |
|
"ENFJ": "ENFJ는 INFP의 이상주의를 격려하고, 함께 더 나은 세상을 만들기 위해 노력합니다.", |
|
"ENTJ": "ENTJ는 INFP의 이상을 현실로 만들기 위해 논리적이고 전략적인 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ESTJ": "ESTJ는 실용적이고 조직적인 성향이 강해, INFP의 이상적이고 감정적인 성향과 충돌할 수 있습니다.", |
|
"ESFJ": "ESFJ는 사회적 규범을 중시하며, INFP의 개성과 독립성을 존중하지 않을 수 있습니다." |
|
} |
|
}, |
|
"ENFJ": { |
|
"성격": "카리스마 있고 사교적인 리더", |
|
"직업": "교사, 정치인, 사회운동가", |
|
"궁합": ["INFP", "INFJ"], |
|
"나쁜 궁합": ["ISTP", "INTP"], |
|
"궁합 설명": { |
|
"INFP": "INFP는 ENFJ의 감정적 깊이와 이상주의를 이해하며, 함께 의미 있는 목표를 추구합니다.", |
|
"INFJ": "INFJ는 ENFJ와 함께 사람들을 돕고, 세상을 더 나은 곳으로 만드는 데 협력할 수 있습니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.", |
|
"INTP": "INTP는 논리적이고 분석적인 성향이 강해, ENFJ의 감정적이고 사교적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ENFP": { |
|
"성격": "열정적이고 창의적인 사고를 가진 사람", |
|
"직업": "예술가, 작가, 마케터", |
|
"궁합": ["INTJ", "INFJ"], |
|
"나쁜 궁합": ["ISTJ", "ISFJ"], |
|
"궁합 설명": { |
|
"INTJ": "INTJ는 ENFP의 창의적인 아이디어를 현실로 실현하는 데 도움을 줍니다.", |
|
"INFJ": "INFJ는 ENFP의 열정을 이해하며, 함께 이상적인 목표를 추구할 수 있습니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ISTJ": "ISTJ는 전통적이고 실용적인 성향이 강해, ENFP의 창의적이고 모험적인 성향과 충돌할 수 있습니다.", |
|
"ISFJ": "ISFJ는 사회적 규범을 중시하며, ENFP의 자유롭고 개방적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ISTJ": { |
|
"성격": "실용적이고 신뢰할 수 있는 관리인", |
|
"직업": "회계사, 관리자, 공무원", |
|
"궁합": ["ESFP", "ESTP"], |
|
"나쁜 궁합": ["ENFP", "ENTP"], |
|
"궁합 설명": { |
|
"ESFP": "ESFP는 ISTJ의 실용적인 성향을 존중하며, 함께 현실적인 목표를 달성할 수 있습니다.", |
|
"ESTP": "ESTP는 ISTJ의 조직적이고 계획적인 성향을 보완하며, 빠른 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ENFP": "ENFP는 창의적이고 자유로운 성향이 강해, ISTJ의 전통적이고 보수적인 성향과 충돌할 수 있습니다.", |
|
"ENTP": "ENTP는 실험적이고 모험적인 성향이 강해, ISTJ의 실용적이고 신중한 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ISFJ": { |
|
"성격": "성실하고 배려심 깊은 보호자", |
|
"직업": "간호사, 교사, 사회복지사", |
|
"궁합": ["ESFP", "ESTP"], |
|
"나쁜 궁합": ["ENTP", "ENFP"], |
|
"궁합 설명": { |
|
"ESFP": "ESFP는 ISFJ의 배려심과 성실함을 존중하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.", |
|
"ESTP": "ESTP는 ISFJ의 세심한 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ENTP": "ENTP는 실험적이고 비판적인 성향이 강해, ISFJ의 전통적이고 보호적인 성향과 충돌할 수 있습니다.", |
|
"ENFP": "ENFP는 자유롭고 창의적인 성향이 강해, ISFJ의 조직적이고 보수적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ESTJ": { |
|
"성격": "실용적이고 조직적인 관리자", |
|
"직업": "경영자, 군인, 공무원", |
|
"궁합": ["ISTP", "INTP"], |
|
"나쁜 궁합": ["INFP", "INFJ"], |
|
"궁합 설명": { |
|
"ISTP": "ISTP는 ESTJ의 조직적이고 실용적인 성향을 보완하며, 함께 효율적인 문제 해결을 도모할 수 있습니다.", |
|
"INTP": "INTP는 ESTJ의 논리적 사고를 보완하며, 전략적인 목표 달성에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"INFP": "INFP는 이상적이고 감정적인 성향이 강해, ESTJ의 실용적이고 논리적인 성향과 충돌할 수 있습니다.", |
|
"INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTJ의 외향적이고 실용적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ESFJ": { |
|
"성격": "사교적이고 협력적인 지원자", |
|
"직업": "교사, 간호사, 이벤트 플래너", |
|
"궁합": ["ISFP", "ISTP"], |
|
"나쁜 궁합": ["INTP", "INTJ"], |
|
"궁합 설명": { |
|
"ISFP": "ISFP는 ESFJ의 배려심을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.", |
|
"ISTP": "ISTP는 ESFJ의 세심함을 보완하며, 현실적인 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"INTP": "INTP는 논리적이고 분석적인 성향이 강해, ESFJ의 감정적이고 사교적인 성향과 충돌할 수 있습니다.", |
|
"INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESFJ의 즉각적인 행동과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ISTP": { |
|
"성격": "유연하고 창의적인 문제 해결사", |
|
"직업": "엔지니어, 기술자, 파일럿", |
|
"궁합": ["ESFJ", "ESTJ"], |
|
"나쁜 궁합": ["ENFJ", "ESFP"], |
|
"궁합 설명": { |
|
"ESFJ": "ESFJ는 ISTP의 창의적인 문제 해결 능력을 존중하며, 함께 실용적인 목표를 달성할 수 있습니다.", |
|
"ESTJ": "ESTJ는 ISTP의 유연함을 보완하며, 체계적인 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ENFJ": "ENFJ는 감정적이고 사교적인 성향이 강해, ISTP의 논리적이고 독립적인 성향과 충돌할 수 있습니다.", |
|
"ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, ISTP의 신중하고 분석적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ISFP": { |
|
"성격": "예술적이고 감각적인 장인", |
|
"직업": "디자이너, 예술가, 음악가", |
|
"궁합": ["ESFJ", "ESTJ"], |
|
"나쁜 궁합": ["ENTJ", "ENTP"], |
|
"궁합 설명": { |
|
"ESFJ": "ESFJ는 ISFP의 감정적이고 예술적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.", |
|
"ESTJ": "ESTJ는 ISFP의 유연함을 보완하며, 실용적인 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"ENTJ": "ENTJ는 논리적이고 계획적인 성향이 강해, ISFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.", |
|
"ENTP": "ENTP는 비판적이고 실험적인 성향이 강해, ISFP의 감정적이고 예술적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ESTP": { |
|
"성격": "모험적이고 즉흥적인 활동가", |
|
"직업": "기업가, 운동선수, 경찰", |
|
"궁합": ["ISFJ", "ISTJ"], |
|
"나쁜 궁합": ["INFJ", "INTJ"], |
|
"궁합 설명": { |
|
"ISFJ": "ISFJ는 ESTP의 활동적이고 모험적인 성향을 이해하며, 함께 현실적인 목표를 달성할 수 있습니다.", |
|
"ISTJ": "ISTJ는 ESTP의 즉흥적인 성향을 보완하며, 체계적인 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTP의 외향적이고 즉흥적인 성향과 충돌할 수 있습니다.", |
|
"INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESTP의 즉각적인 행동과 맞지 않을 수 있습니다." |
|
} |
|
}, |
|
"ESFP": { |
|
"성격": "사교적이고 열정적인 연예인", |
|
"직업": "배우, 연예인, 이벤트 플래너", |
|
"궁합": ["ISFJ", "ISTJ"], |
|
"나쁜 궁합": ["INTJ", "INFJ"], |
|
"궁합 설명": { |
|
"ISFJ": "ISFJ는 ESFP의 활발하고 사교적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.", |
|
"ISTJ": "ISTJ는 ESFP의 즉흥적인 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다." |
|
}, |
|
"나쁜 궁합 설명": { |
|
"INTJ": "INTJ는 논리적이고 계획적인 성향이 강해, ESFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.", |
|
"INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESFP의 외향적이고 활동적인 성향과 맞지 않을 수 있습니다." |
|
} |
|
} |
|
}; |
|
|
|
|
|
|
|
function calculateMBTI(responses) { |
|
|
|
let scores = new Array(16).fill(0); |
|
|
|
const mbtiKeys = Object.keys(mbti_types); |
|
|
|
|
|
|
|
function getRandomInt(min, max) { |
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
|
} |
|
|
|
responses.forEach(ans => { |
|
let deltaArr = new Array(16).fill(0); |
|
if (ans === "매우 그렇다") { |
|
for (let i=0; i<16; i++) { |
|
deltaArr[i] = getRandomInt(5, 9); |
|
} |
|
} else if (ans === "그렇다") { |
|
for (let i=0; i<16; i++) { |
|
deltaArr[i] = getRandomInt(2, 4); |
|
} |
|
} else if (ans === "보통이다") { |
|
for (let i=0; i<16; i++) { |
|
deltaArr[i] = getRandomInt(0, 1); |
|
} |
|
} else if (ans === "아니다") { |
|
for (let i=0; i<16; i++) { |
|
deltaArr[i] = -getRandomInt(2, 4); |
|
} |
|
} else if (ans === "매우 아니다") { |
|
for (let i=0; i<16; i++) { |
|
deltaArr[i] = -getRandomInt(5, 9); |
|
} |
|
} |
|
|
|
for (let i=0; i<16; i++) { |
|
scores[i] += deltaArr[i]; |
|
} |
|
}); |
|
|
|
|
|
let bestMatchIndex = 0; |
|
for (let i=1; i<16; i++) { |
|
if (scores[i] > scores[bestMatchIndex]) { |
|
bestMatchIndex = i; |
|
} |
|
} |
|
|
|
let sortedIndices = [...scores.keys()].sort((a,b) => scores[a] - scores[b]); |
|
let secondBestIndex = sortedIndices[14]; |
|
|
|
let scoreDiff = scores[bestMatchIndex] - scores[secondBestIndex]; |
|
|
|
|
|
let percentage = 0; |
|
if (scoreDiff > 15) { |
|
percentage = 95 + getRandomInt(0, 4); |
|
} else if (scoreDiff > 10) { |
|
percentage = 85 + getRandomInt(0, 9); |
|
} else if (scoreDiff > 5) { |
|
percentage = 75 + getRandomInt(0, 9); |
|
} else { |
|
percentage = 60 + getRandomInt(0, 14); |
|
} |
|
|
|
let bestType = mbtiKeys[bestMatchIndex]; |
|
return [bestType, percentage]; |
|
} |
|
|
|
|
|
const quizForm = document.getElementById('quizForm'); |
|
const questionPages = document.querySelectorAll('.question-page'); |
|
const resultPage = document.querySelector('.result-page'); |
|
const finalResultElem = document.querySelector('.final-result'); |
|
const finalImageElem = document.querySelector('.final-image'); |
|
|
|
|
|
const nextButtons = document.querySelectorAll('.next-btn'); |
|
const prevButtons = document.querySelectorAll('.prev-btn'); |
|
|
|
nextButtons.forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
const nextPage = btn.dataset.next; |
|
showPage(nextPage); |
|
}); |
|
}); |
|
prevButtons.forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
const prevPage = btn.dataset.prev; |
|
showPage(prevPage); |
|
}); |
|
}); |
|
|
|
function showPage(pageNum) { |
|
questionPages.forEach(p => { |
|
p.style.display = (p.dataset.page === pageNum) ? 'block' : 'none'; |
|
}); |
|
resultPage.style.display = 'none'; |
|
} |
|
|
|
|
|
quizForm.addEventListener('submit', (e) => { |
|
e.preventDefault(); |
|
|
|
let answers = []; |
|
for (let i=1; i<=20; i++){ |
|
const val = quizForm[`q${i}`].value; |
|
answers.push(val); |
|
} |
|
|
|
const [mbtiType, percentage] = calculateMBTI(answers); |
|
const typeData = mbti_types[mbtiType]; |
|
|
|
let outputText = `당신의 MBTI 유형은 ${mbtiType}입니다. 신뢰도: ${percentage.toFixed(2)}%\n\n`; |
|
outputText += `성격 설명: ${typeData["성격"]}\n`; |
|
outputText += `추천 직업: ${typeData["직업"]}\n\n`; |
|
outputText += `좋은 궁합:\n`; |
|
typeData["궁합"].forEach(g=>{ |
|
outputText += `- ${g}: ${typeData["궁합 설명"][g]}\n`; |
|
}); |
|
outputText += `\n나쁜 궁합:\n`; |
|
typeData["나쁜 궁합"].forEach(b=>{ |
|
outputText += `- ${b}: ${typeData["나쁜 궁합 설명"][b]}\n`; |
|
}); |
|
|
|
finalResultElem.textContent = outputText; |
|
finalImageElem.style.display = 'none'; |
|
finalImageElem.src = `./${mbtiType}.webp`; |
|
|
|
|
|
|
|
finalImageElem.onerror = () => { |
|
|
|
finalImageElem.style.display = 'none'; |
|
}; |
|
finalImageElem.onload = () => { |
|
finalImageElem.style.display = 'block'; |
|
}; |
|
|
|
|
|
questionPages.forEach(p => p.style.display = 'none'); |
|
resultPage.style.display = 'block'; |
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
}); |
|
|
|
|
|
const restartBtn = document.querySelector('.restart-btn'); |
|
restartBtn.addEventListener('click', () => { |
|
quizForm.reset(); |
|
showPage('1'); |
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
