Download index.html from Kims12/MBTI_HTML: direct link, hf CLI and curl.
- Browser
- Download file 37.1 kB
-
https://huggingface.co/spaces/Kims12/MBTI_HTML/resolve/main/index.html
- Command line
-
hf download hf://spaces/Kims12/MBTI_HTML/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Kims12/MBTI_HTML/resolve/main/index.html
37.1 kB
| <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"> | |
| <!-- Google Fonts 추가 --> | |
| <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"> | |
| <!-- 페이지 1 --> | |
| <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> | |
| <!-- 페이지 2 --> | |
| <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> | |
| <!-- 페이지 3 --> | |
| <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> | |
| <!-- 페이지 4 --> | |
| <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(); | |
| // Reset to first page | |
| 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> | |