| <!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> |
|
|
