| | <!DOCTYPE html> |
| | <html lang="ko"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>MBTI 성격 유형 테스트</title> |
| | <link rel="stylesheet" href="style.css"> |
| | |
| | <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet"> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <h1>MBTI 성격 유형 테스트</h1> |
| | <form id="mbti-form"> |
| | |
| | <div class="page" id="page-1"> |
| | <h2>1-5번 질문</h2> |
| | <div class="question"> |
| | <p>1. 당신은 혼자 있을 때 에너지를 얻나요?</p> |
| | <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 class="question"> |
| | <p>2. 당신은 계획을 세우는 것을 좋아하나요?</p> |
| | <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 class="question"> |
| | <p>3. 당신은 새로운 상황에 쉽게 적응하나요?</p> |
| | <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 class="question"> |
| | <p>4. 당신은 감정보다는 논리에 더 의존하나요?</p> |
| | <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 class="question"> |
| | <p>5. 당신은 다른 사람을 돕는 것을 좋아하나요?</p> |
| | <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 class="buttons clearfix"> |
| | <button type="button" class="next-button" onclick="nextPage(1)">다음</button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="page" id="page-2" style="display: none;"> |
| | <h2>6-10번 질문</h2> |
| | <div class="question"> |
| | <p>6. 당신은 사교적인 성격을 가지고 있나요?</p> |
| | <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 class="question"> |
| | <p>7. 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p> |
| | <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 class="question"> |
| | <p>8. 당신은 사실과 데이터를 중시하나요?</p> |
| | <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 class="question"> |
| | <p>9. 당신은 감정 표현을 잘 하나요?</p> |
| | <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 class="question"> |
| | <p>10. 당신은 문제를 해결할 때 창의적인 방법을 사용하나요?</p> |
| | <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 class="buttons clearfix"> |
| | <button type="button" class="prev-button" onclick="prevPage(2)">이전</button> |
| | <button type="button" class="next-button" onclick="nextPage(2)">다음</button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="page" id="page-3" style="display: none;"> |
| | <h2>11-15번 질문</h2> |
| | <div class="question"> |
| | <p>11. 당신은 다른 사람들과의 협업을 선호하나요?</p> |
| | <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 class="question"> |
| | <p>12. 당신은 결정을 내릴 때 직감을 신뢰하나요?</p> |
| | <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 class="question"> |
| | <p>13. 당신은 규칙과 절차를 따르는 것을 좋아하나요?</p> |
| | <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 class="question"> |
| | <p>14. 당신은 주변 환경에 민감하게 반응하나요?</p> |
| | <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 class="question"> |
| | <p>15. 당신은 일을 처리할 때 효율성을 중시하나요?</p> |
| | <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 class="buttons clearfix"> |
| | <button type="button" class="prev-button" onclick="prevPage(3)">이전</button> |
| | <button type="button" class="next-button" onclick="nextPage(3)">다음</button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="page" id="page-4" style="display: none;"> |
| | <h2>16-20번 질문</h2> |
| | <div class="question"> |
| | <p>16. 당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?</p> |
| | <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 class="question"> |
| | <p>17. 당신은 자연스럽게 리더 역할을 맡게 되나요?</p> |
| | <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 class="question"> |
| | <p>18. 당신은 새로운 아이디어를 제안하는 것을 좋아하나요?</p> |
| | <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 class="question"> |
| | <p>19. 당신은 대인 관계에서 갈등을 피하려 하나요?</p> |
| | <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 class="question"> |
| | <p>20. 당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?</p> |
| | <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 class="buttons clearfix"> |
| | <button type="button" class="prev-button" onclick="prevPage(4)">이전</button> |
| | <button type="submit" class="submit-button">결과 보기</button> |
| | </div> |
| | </div> |
| | </form> |
| | </div> |
| |
|
| | |
| | <div class="container" id="result-page" style="display: none;"> |
| | <h1>MBTI 결과</h1> |
| | <div id="result-text"></div> |
| | <img id="result-image" src="" alt="MBTI 이미지"> |
| | <button onclick="restart()">다시 테스트하기</button> |
| | </div> |
| |
|
| | <script> |
| | const mbtiTypes = { |
| | "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 nextPage(currentPage) { |
| | const current = document.getElementById(`page-${currentPage}`); |
| | const next = document.getElementById(`page-${currentPage + 1}`); |
| | if (validatePage(currentPage)) { |
| | current.style.display = 'none'; |
| | next.style.display = 'block'; |
| | window.scrollTo(0, 0); |
| | } |
| | } |
| | |
| | function prevPage(currentPage) { |
| | const current = document.getElementById(`page-${currentPage}`); |
| | const prev = document.getElementById(`page-${currentPage - 1}`); |
| | current.style.display = 'none'; |
| | prev.style.display = 'block'; |
| | window.scrollTo(0, 0); |
| | } |
| | |
| | function validatePage(page) { |
| | const pageDiv = document.getElementById(`page-${page}`); |
| | const inputs = pageDiv.querySelectorAll('input[type="radio"]'); |
| | const names = new Set(); |
| | inputs.forEach(input => names.add(input.name)); |
| | for (let name of names) { |
| | const checked = pageDiv.querySelector(`input[name="${name}"]:checked`); |
| | if (!checked) { |
| | alert('모든 질문에 답변해주세요.'); |
| | return false; |
| | } |
| | } |
| | return true; |
| | } |
| | |
| | document.getElementById('mbti-form').addEventListener('submit', function(e) { |
| | e.preventDefault(); |
| | const responses = []; |
| | for (let i = 1; i <= 20; i++) { |
| | const answer = document.querySelector(`input[name="q${i}"]:checked`).value; |
| | responses.push(answer); |
| | } |
| | const [mbtiType, percentage] = calculateMbtiResponses(responses); |
| | displayResult(mbtiType, percentage); |
| | }); |
| | |
| | function calculateMbtiResponses(responses) { |
| | let scores = {}; |
| | for (let type in mbtiTypes) { |
| | scores[type] = 0; |
| | } |
| | |
| | responses.forEach(response => { |
| | const mbtiTypesKeys = Object.keys(mbtiTypes); |
| | mbtiTypesKeys.forEach(type => { |
| | if (response === "매우 그렇다") { |
| | scores[type] += getRandomInt(5, 10); |
| | } else if (response === "그렇다") { |
| | scores[type] += getRandomInt(2, 5); |
| | } else if (response === "보통이다") { |
| | scores[type] += getRandomInt(0, 2); |
| | } else if (response === "아니다") { |
| | scores[type] -= getRandomInt(2, 5); |
| | } else if (response === "매우 아니다") { |
| | scores[type] -= getRandomInt(5, 10); |
| | } |
| | }); |
| | }); |
| | |
| | const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]); |
| | const bestMatch = sorted[0][0]; |
| | const secondMatch = sorted[1][0]; |
| | const scoreDifference = sorted[0][1] - sorted[1][1]; |
| | let percentage = 60; |
| | |
| | if (scoreDifference > 15) { |
| | percentage = 95 + getRandomInt(0, 5); |
| | } else if (scoreDifference > 10) { |
| | percentage = 85 + getRandomInt(0, 10); |
| | } else if (scoreDifference > 5) { |
| | percentage = 75 + getRandomInt(0, 10); |
| | } else { |
| | percentage = 60 + getRandomInt(0, 15); |
| | } |
| | |
| | return [bestMatch, percentage]; |
| | } |
| | |
| | function getRandomInt(min, max) { |
| | return Math.floor(Math.random() * (max - min)) + min; |
| | } |
| | |
| | function displayResult(mbtiType, percentage) { |
| | const form = document.querySelector('.container'); |
| | const resultPage = document.getElementById('result-page'); |
| | const resultText = document.getElementById('result-text'); |
| | const resultImage = document.getElementById('result-image'); |
| | |
| | let result = `<p>당신의 MBTI 유형은 <strong>${mbtiType}</strong>입니다. 신뢰도: <strong>${percentage}%</strong></p>`; |
| | result += `<h3>성격 설명</h3><p>${mbtiTypes[mbtiType]['성격']}</p>`; |
| | result += `<h3>추천 직업</h3><p>${mbtiTypes[mbtiType]['직업']}</p>`; |
| | |
| | |
| | result += `<h3>좋은 궁합</h3>`; |
| | mbtiTypes[mbtiType]['궁합'].forEach(match => { |
| | result += `<p><strong>${match}:</strong> ${mbtiTypes[mbtiType]['궁합 설명'][match]}</p>`; |
| | }); |
| | |
| | |
| | result += `<h3>나쁜 궁합</h3>`; |
| | mbtiTypes[mbtiType]['나쁜 궁합'].forEach(match => { |
| | result += `<p><strong>${match}:</strong> ${mbtiTypes[mbtiType]['나쁜 궁합 설명'][match]}</p>`; |
| | }); |
| | |
| | resultText.innerHTML = result; |
| | resultImage.src = `${mbtiType}.webp`; |
| | resultImage.alt = `${mbtiType} 이미지`; |
| | form.style.display = 'none'; |
| | resultPage.style.display = 'block'; |
| | window.scrollTo(0, 0); |
| | } |
| | |
| | function restart() { |
| | const form = document.querySelector('.container'); |
| | const resultPage = document.getElementById('result-page'); |
| | form.style.display = 'block'; |
| | resultPage.style.display = 'none'; |
| | document.getElementById('mbti-form').reset(); |
| | |
| | for (let i = 1; i <=4; i++) { |
| | document.getElementById(`page-${i}`).style.display = 'none'; |
| | } |
| | document.getElementById('page-1').style.display = 'block'; |
| | window.scrollTo(0, 0); |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
