Hugging Face's logo

Spaces:
Kims12
/
MBTI_HTML
Running

App Files Community
Kims12 commited on
Commit
c37e003
·
verified ·
1 Parent(s): 5160573

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +571 -18
index.html CHANGED
@@ -1,19 +1,572 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MBTI 성격 유형 테스트</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <h1>MBTI 성격 유형 테스트</h1>
12
+ <form id="mbti-form">
13
+ <div class="page" id="page-1">
14
+ <h2>1-5번 질문</h2>
15
+ <div class="question">
16
+ <p>1. 당신은 혼자 있을 때 에너지를 얻나요?</p>
17
+ <label><input type="radio" name="q1" value="매우 그렇다" required> 매우 그렇다</label>
18
+ <label><input type="radio" name="q1" value="그렇다"> 그렇다</label>
19
+ <label><input type="radio" name="q1" value="보통이다"> 보통이다</label>
20
+ <label><input type="radio" name="q1" value="아니다"> 아니다</label>
21
+ <label><input type="radio" name="q1" value="매우 아니다"> 매우 아니다</label>
22
+ </div>
23
+ <!-- 질문 2부터 5까지 동일한 형식으로 추가 -->
24
+ <div class="question">
25
+ <p>2. 당신은 계획을 세우는 것을 좋아하나요?</p>
26
+ <label><input type="radio" name="q2" value="매우 그렇다" required> 매우 그렇다</label>
27
+ <label><input type="radio" name="q2" value="그렇다"> 그렇다</label>
28
+ <label><input type="radio" name="q2" value="보통이다"> 보통이다</label>
29
+ <label><input type="radio" name="q2" value="아니다"> 아니다</label>
30
+ <label><input type="radio" name="q2" value="매우 아니다"> 매우 아니다</label>
31
+ </div>
32
+ <div class="question">
33
+ <p>3. 당신은 새로운 상황에 쉽게 적응하나요?</p>
34
+ <label><input type="radio" name="q3" value="매우 그렇다" required> 매우 그렇다</label>
35
+ <label><input type="radio" name="q3" value="그렇다"> 그렇다</label>
36
+ <label><input type="radio" name="q3" value="보통이다"> 보통이다</label>
37
+ <label><input type="radio" name="q3" value="아니다"> 아니다</label>
38
+ <label><input type="radio" name="q3" value="매우 아니다"> 매우 아니다</label>
39
+ </div>
40
+ <div class="question">
41
+ <p>4. 당신은 감정보다는 논리에 더 의존하나요?</p>
42
+ <label><input type="radio" name="q4" value="매우 그렇다" required> 매우 그렇다</label>
43
+ <label><input type="radio" name="q4" value="그렇다"> 그렇다</label>
44
+ <label><input type="radio" name="q4" value="보통이다"> 보통이다</label>
45
+ <label><input type="radio" name="q4" value="아니다"> 아니다</label>
46
+ <label><input type="radio" name="q4" value="매우 아니다"> 매우 아니다</label>
47
+ </div>
48
+ <div class="question">
49
+ <p>5. 당신은 다른 사람을 돕는 것을 좋아하나요?</p>
50
+ <label><input type="radio" name="q5" value="매우 그렇다" required> 매우 그렇다</label>
51
+ <label><input type="radio" name="q5" value="그렇다"> 그렇다</label>
52
+ <label><input type="radio" name="q5" value="보통이다"> 보통이다</label>
53
+ <label><input type="radio" name="q5" value="아니다"> 아니다</label>
54
+ <label><input type="radio" name="q5" value="매우 아니다"> 매우 아니다</label>
55
+ </div>
56
+ <button type="button" class="next-button" onclick="nextPage(1)">다음</button>
57
+ </div>
58
+
59
+ <div class="page" id="page-2" style="display: none;">
60
+ <h2>6-10번 질문</h2>
61
+ <div class="question">
62
+ <p>6. 당신은 사교적인 성격을 가지고 있나요?</p>
63
+ <label><input type="radio" name="q6" value="매우 그렇다" required> 매우 그렇다</label>
64
+ <label><input type="radio" name="q6" value="그렇다"> 그렇다</label>
65
+ <label><input type="radio" name="q6" value="보통이다"> 보통이다</label>
66
+ <label><input type="radio" name="q6" value="아니다"> 아니다</label>
67
+ <label><input type="radio" name="q6" value="매우 아니다"> 매우 아니다</label>
68
+ </div>
69
+ <!-- 질문 7부터 10까지 동일한 형식으로 추가 -->
70
+ <div class="question">
71
+ <p>7. 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p>
72
+ <label><input type="radio" name="q7" value="매우 그렇다" required> 매우 그렇다</label>
73
+ <label><input type="radio" name="q7" value="그렇다"> 그렇다</label>
74
+ <label><input type="radio" name="q7" value="보통이다"> 보통이다</label>
75
+ <label><input type="radio" name="q7" value="아니다"> 아니다</label>
76
+ <label><input type="radio" name="q7" value="매우 아니다"> 매우 아니다</label>
77
+ </div>
78
+ <div class="question">
79
+ <p>8. 당신은 사실과 데이터를 중시하나요?</p>
80
+ <label><input type="radio" name="q8" value="매우 그렇다" required> 매우 그렇다</label>
81
+ <label><input type="radio" name="q8" value="그렇다"> 그렇다</label>
82
+ <label><input type="radio" name="q8" value="보통이다"> 보통이다</label>
83
+ <label><input type="radio" name="q8" value="아니다"> 아니다</label>
84
+ <label><input type="radio" name="q8" value="매우 아니다"> 매우 아니다</label>
85
+ </div>
86
+ <div class="question">
87
+ <p>9. 당신은 감정 표현을 잘 하나요?</p>
88
+ <label><input type="radio" name="q9" value="매우 그렇다" required> 매우 그렇다</label>
89
+ <label><input type="radio" name="q9" value="그렇다"> 그렇다</label>
90
+ <label><input type="radio" name="q9" value="보통이다"> 보통이다</label>
91
+ <label><input type="radio" name="q9" value="아니다"> 아니다</label>
92
+ <label><input type="radio" name="q9" value="매우 아니다"> 매우 아니다</label>
93
+ </div>
94
+ <div class="question">
95
+ <p>10. 당신은 문제를 해결할 때 창의적인 방법을 사용하나요?</p>
96
+ <label><input type="radio" name="q10" value="매우 그렇다" required> 매우 그렇다</label>
97
+ <label><input type="radio" name="q10" value="그렇다"> 그렇다</label>
98
+ <label><input type="radio" name="q10" value="보통이다"> 보통이다</label>
99
+ <label><input type="radio" name="q10" value="아니다"> 아니다</label>
100
+ <label><input type="radio" name="q10" value="매우 아니다"> 매우 아니다</label>
101
+ </div>
102
+ <button type="button" class="prev-button" onclick="prevPage(2)">이전</button>
103
+ <button type="button" class="next-button" onclick="nextPage(2)">다음</button>
104
+ </div>
105
+
106
+ <div class="page" id="page-3" style="display: none;">
107
+ <h2>11-15번 질문</h2>
108
+ <div class="question">
109
+ <p>11. 당신은 다른 사람들과의 협업을 선호하나요?</p>
110
+ <label><input type="radio" name="q11" value="매우 그렇다" required> 매우 그렇다</label>
111
+ <label><input type="radio" name="q11" value="그렇다"> 그렇다</label>
112
+ <label><input type="radio" name="q11" value="보통이다"> 보통이다</label>
113
+ <label><input type="radio" name="q11" value="아니다"> 아니다</label>
114
+ <label><input type="radio" name="q11" value="매우 아니다"> 매우 아니다</label>
115
+ </div>
116
+ <!-- 질문 12부터 15까지 동일한 형식으로 추가 -->
117
+ <div class="question">
118
+ <p>12. 당신은 결정을 내릴 때 직감을 신뢰하나요?</p>
119
+ <label><input type="radio" name="q12" value="매우 그렇다" required> 매우 그렇다</label>
120
+ <label><input type="radio" name="q12" value="그렇다"> 그렇다</label>
121
+ <label><input type="radio" name="q12" value="보통이다"> 보통이다</label>
122
+ <label><input type="radio" name="q12" value="아니다"> 아니다</label>
123
+ <label><input type="radio" name="q12" value="매우 아니다"> 매우 아니다</label>
124
+ </div>
125
+ <div class="question">
126
+ <p>13. 당신은 규칙과 절차를 따르는 것을 좋아하나요?</p>
127
+ <label><input type="radio" name="q13" value="매우 그렇다" required> 매우 그렇다</label>
128
+ <label><input type="radio" name="q13" value="그렇다"> 그렇다</label>
129
+ <label><input type="radio" name="q13" value="보통이다"> 보통이다</label>
130
+ <label><input type="radio" name="q13" value="아니다"> 아니다</label>
131
+ <label><input type="radio" name="q13" value="매우 아니다"> 매우 아니다</label>
132
+ </div>
133
+ <div class="question">
134
+ <p>14. 당신은 주변 환경에 민감하게 반응하나요?</p>
135
+ <label><input type="radio" name="q14" value="매우 그렇다" required> 매우 그렇다</label>
136
+ <label><input type="radio" name="q14" value="그렇다"> 그렇다</label>
137
+ <label><input type="radio" name="q14" value="보통이다"> 보통이다</label>
138
+ <label><input type="radio" name="q14" value="아니다"> 아니다</label>
139
+ <label><input type="radio" name="q14" value="매우 아니다"> 매우 아니다</label>
140
+ </div>
141
+ <div class="question">
142
+ <p>15. 당신은 일을 처리할 때 효율성을 중시하나요?</p>
143
+ <label><input type="radio" name="q15" value="매우 그렇다" required> 매우 그렇다</label>
144
+ <label><input type="radio" name="q15" value="그렇다"> 그렇다</label>
145
+ <label><input type="radio" name="q15" value="보통이다"> 보통이다</label>
146
+ <label><input type="radio" name="q15" value="아니다"> 아니다</label>
147
+ <label><input type="radio" name="q15" value="매우 아니다"> 매우 아니다</label>
148
+ </div>
149
+ <button type="button" class="prev-button" onclick="prevPage(3)">이전</button>
150
+ <button type="button" class="next-button" onclick="nextPage(3)">다음</button>
151
+ </div>
152
+
153
+ <div class="page" id="page-4" style="display: none;">
154
+ <h2>16-20번 질문</h2>
155
+ <div class="question">
156
+ <p>16. 당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?</p>
157
+ <label><input type="radio" name="q16" value="매우 그렇다" required> 매우 그렇다</label>
158
+ <label><input type="radio" name="q16" value="그렇다"> 그렇다</label>
159
+ <label><input type="radio" name="q16" value="보통이다"> 보통이다</label>
160
+ <label><input type="radio" name="q16" value="아니다"> 아니다</label>
161
+ <label><input type="radio" name="q16" value="매우 아니다"> 매우 아니다</label>
162
+ </div>
163
+ <!-- 질문 17부터 20까지 동일한 형식으로 추가 -->
164
+ <div class="question">
165
+ <p>17. 당신은 자연스럽게 리더 역할을 맡게 되나요?</p>
166
+ <label><input type="radio" name="q17" value="매우 그렇다" required> 매우 그렇다</label>
167
+ <label><input type="radio" name="q17" value="그렇다"> 그렇다</label>
168
+ <label><input type="radio" name="q17" value="보통이다"> 보통이다</label>
169
+ <label><input type="radio" name="q17" value="아니다"> 아니다</label>
170
+ <label><input type="radio" name="q17" value="매우 아니다"> 매우 아니다</label>
171
+ </div>
172
+ <div class="question">
173
+ <p>18. 당신은 새로운 아이디어를 제안하는 것을 좋아하나요?</p>
174
+ <label><input type="radio" name="q18" value="매우 그렇다" required> 매우 그렇다</label>
175
+ <label><input type="radio" name="q18" value="그렇다"> 그렇다</label>
176
+ <label><input type="radio" name="q18" value="보통이다"> 보통이다</label>
177
+ <label><input type="radio" name="q18" value="아니다"> 아니다</label>
178
+ <label><input type="radio" name="q18" value="매우 아니다"> 매우 아니다</label>
179
+ </div>
180
+ <div class="question">
181
+ <p>19. 당신은 대인 관계에서 갈등을 피하려 하나요?</p>
182
+ <label><input type="radio" name="q19" value="매우 그렇다" required> 매우 그렇다</label>
183
+ <label><input type="radio" name="q19" value="그렇다"> 그렇다</label>
184
+ <label><input type="radio" name="q19" value="보통이다"> 보통이다</label>
185
+ <label><input type="radio" name="q19" value="아니다"> 아니다</label>
186
+ <label><input type="radio" name="q19" value="매우 아니다"> 매우 아니다</label>
187
+ </div>
188
+ <div class="question">
189
+ <p>20. 당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?</p>
190
+ <label><input type="radio" name="q20" value="매우 그렇다" required> 매우 그렇다</label>
191
+ <label><input type="radio" name="q20" value="그렇다"> 그렇다</label>
192
+ <label><input type="radio" name="q20" value="보통이다"> 보통이다</label>
193
+ <label><input type="radio" name="q20" value="아니다"> 아니다</label>
194
+ <label><input type="radio" name="q20" value="매우 아니다"> 매우 아니다</label>
195
+ </div>
196
+ <button type="button" class="prev-button" onclick="prevPage(4)">이전</button>
197
+ <button type="submit" class="submit-button">결과 보기</button>
198
+ </div>
199
+ </form>
200
+ </div>
201
+
202
+ <!-- 결과 페이지 -->
203
+ <div class="container" id="result-page" style="display: none;">
204
+ <h1>MBTI 결과</h1>
205
+ <div id="result-text"></div>
206
+ <img id="result-image" src="" alt="MBTI 이미지">
207
+ <button onclick="restart()">다시 테스트하기</button>
208
+ </div>
209
+
210
+ <script>
211
+ const mbtiTypes = {
212
+ "INTJ": {
213
+ "성격": "독창적이고 전략적인 사고를 가진 조용한 리더",
214
+ "직업": "과학자, 엔지니어, 데이터 분석가",
215
+ "궁합": ["ENFP", "ENTP"],
216
+ "나쁜 궁합": ["ESFP", "ESTP"],
217
+ "궁합 설명": {
218
+ "ENFP": "ENFP는 INTJ의 이상주의를 자극하고, 서로의 강점과 약점을 보완합니다.",
219
+ "ENTP": "ENTP는 INTJ의 창의성과 전략적 사고를 자극하여 생산적인 파트너십을 형성합니다."
220
+ },
221
+ "나쁜 궁합 설명": {
222
+ "ESFP": "ESFP는 INTJ와 정반대의 성향을 가지고 있어 갈등이 잦을 수 있습니다.",
223
+ "ESTP": "ESTP는 실용적인 접근을 선호하는 반면, INTJ는 장기적인 계획을 중시합니다."
224
+ }
225
+ },
226
+ "INTP": {
227
+ "성격": "논리적이고 분석적인 사고를 가진 혁신가",
228
+ "직업": "연구원, 프로그래머, 철학자",
229
+ "궁합": ["ENTJ", "ESTJ"],
230
+ "나쁜 궁합": ["ESFJ", "ESTP"],
231
+ "궁합 설명": {
232
+ "ENTJ": "ENTJ는 INTP의 분석적 사고를 촉진하고 함께 전략적인 목표를 달성할 수 있습니다.",
233
+ "ESTJ": "ESTJ는 INTP의 논리적 접근을 존중하며 실용적인 해결책을 찾는 데 도움을 줍니다."
234
+ },
235
+ "나쁜 궁합 설명": {
236
+ "ESFJ": "ESFJ는 감정적인 결정을 중시하는 반면, INTP는 논리를 중시하여 갈등이 생길 수 있습니다.",
237
+ "ESTP": "ESTP는 즉각적인 행동을 선호하며, INTP의 깊은 사고와는 충돌할 수 있습니다."
238
+ }
239
+ },
240
+ "ENTJ": {
241
+ "성격": "대담하고 결단력 있는 리더",
242
+ "직업": "기업가, 경영자, 변호사",
243
+ "궁합": ["INTP", "INTJ"],
244
+ "나쁜 궁합": ["INFP", "ISFP"],
245
+ "궁합 설명": {
246
+ "INTP": "INTP는 ENTJ의 전략적 사고를 보완하며, 논리적 접근을 통해 문제 해결에 도움을 줍니다.",
247
+ "INTJ": "INTJ는 ENTJ와 함께 장기적인 목표를 설정하고, 실행할 수 있는 강력한 파트너가 됩니다."
248
+ },
249
+ "나쁜 궁합 설명": {
250
+ "INFP": "INFP는 감정적 접근을 선호하며, ENTJ의 냉정한 논리적 접근과 충돌할 수 있습니다.",
251
+ "ISFP": "ISFP는 즉흥적이고 감정적인 경향이 있어, ENTJ의 체계적이고 논리적인 성향과 맞지 않을 수 있습니다."
252
+ }
253
+ },
254
+ "ENTP": {
255
+ "성격": "창의적이고 논쟁을 즐기는 비평가",
256
+ "직업": "마케터, 변호사, 기자",
257
+ "궁합": ["INFJ", "INTJ"],
258
+ "나쁜 궁합": ["ISFJ", "ISTJ"],
259
+ "궁합 설명": {
260
+ "INFJ": "INFJ는 ENTP의 창의적 사고를 이해하며, 이상적인 목표 설정을 도와줍니다.",
261
+ "INTJ": "INTJ는 ENTP와 함께 혁신적인 아이디어를 실현하는 데 강력한 파트너가 됩니다."
262
+ },
263
+ "나쁜 궁합 설명": {
264
+ "ISFJ": "ISFJ는 전통적이고 보수적인 성향이 강해, ENTP의 혁신적이고 비판적인 사고와 충돌할 수 있습니다.",
265
+ "ISTJ": "ISTJ는 실용적인 접근을 선호하며, ENTP의 실험적이고 모험적인 성향과 갈등이 있을 수 있습니다."
266
+ }
267
+ },
268
+ "INFJ": {
269
+ "성격": "통찰력 있고 헌신적인 이상주의자",
270
+ "직업": "상담사, 심리학자, 작가",
271
+ "궁합": ["ENFP", "ENTP"],
272
+ "나쁜 궁합": ["ESTP", "ESFP"],
273
+ "���합 설명": {
274
+ "ENFP": "ENFP는 INFJ의 이상주의와 깊은 감정을 이해하고 이를 격려합니다.",
275
+ "ENTP": "ENTP는 INFJ의 창의성을 자극하고, 혁신적인 아이디어를 실현하는 데 도움을 줍니다."
276
+ },
277
+ "나쁜 궁합 설명": {
278
+ "ESTP": "ESTP는 즉각적인 행동을 선호하며, INFJ의 깊은 사고와 감정적 접근과 충돌할 수 있습니다.",
279
+ "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, INFJ의 내성적이고 계획적인 성향과 맞지 않을 수 있습니다."
280
+ }
281
+ },
282
+ "INFP": {
283
+ "성격": "이상적이고 충실한 중재자",
284
+ "직업": "예술가, 작가, 상담사",
285
+ "궁합": ["ENFJ", "ENTJ"],
286
+ "나쁜 궁합": ["ESTJ", "ESFJ"],
287
+ "궁합 설명": {
288
+ "ENFJ": "ENFJ는 INFP의 이상주의를 격려하고, 함께 더 나은 세상을 만들기 위해 노력합니다.",
289
+ "ENTJ": "ENTJ는 INFP의 이상을 현실로 만들기 위해 논리적이고 전략적인 도움을 줍니다."
290
+ },
291
+ "나쁜 궁합 설명": {
292
+ "ESTJ": "ESTJ는 실용적이고 조직적인 성향이 강해, INFP의 이상적이고 감정적인 성향과 충돌할 수 있습니다.",
293
+ "ESFJ": "ESFJ는 사회적 규범을 중시하며, INFP의 개성과 독립성을 존중하지 않을 수 있습니다."
294
+ }
295
+ },
296
+ "ENFJ": {
297
+ "성격": "카리스마 있고 사교적인 리더",
298
+ "직업": "교사, 정치인, 사회운동가",
299
+ "궁합": ["INFP", "INFJ"],
300
+ "나쁜 궁합": ["ISTP", "INTP"],
301
+ "궁합 설명": {
302
+ "INFP": "INFP는 ENFJ의 감정적 깊이와 이상주의를 이해하며, 함께 의미 있는 목표를 추구합니다.",
303
+ "INFJ": "INFJ는 ENFJ와 함께 사람들을 돕고, 세상을 더 나은 곳으로 만드는 데 협력할 수 있습니다."
304
+ },
305
+ "나쁜 궁합 설명": {
306
+ "ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.",
307
+ "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ENFJ의 감정적이고 사교적인 성향과 맞지 않을 수 있습니다."
308
+ }
309
+ },
310
+ "ENFP": {
311
+ "성격": "열정적이고 창의적인 사고를 가진 사람",
312
+ "직업": "예술가, 작가, 마케터",
313
+ "궁합": ["INTJ", "INFJ"],
314
+ "나쁜 궁합": ["ISTJ", "ISFJ"],
315
+ "궁합 설명": {
316
+ "INTJ": "INTJ는 ENFP의 창의적인 아이디어를 현실로 실현하는 데 도움을 줍니다.",
317
+ "INFJ": "INFJ는 ENFP의 열정을 이해하며, 함께 이상적인 목표를 추구할 수 있습니다."
318
+ },
319
+ "나쁜 궁합 설명": {
320
+ "ISTJ": "ISTJ는 전통적이고 실용적인 성향이 강해, ENFP의 창의적이고 모험적인 성향과 충돌할 수 있습니다.",
321
+ "ISFJ": "ISFJ는 사회적 규범을 중시하며, ENFP의 자유롭고 개방적인 성향과 맞지 않을 수 있습니다."
322
+ }
323
+ },
324
+ "ISTJ": {
325
+ "성격": "실용적이고 신뢰할 수 있는 관리인",
326
+ "직업": "회계사, 관리자, 공무원",
327
+ "궁합": ["ESFP", "ESTP"],
328
+ "나쁜 궁합": ["ENFP", "ENTP"],
329
+ "궁합 설명": {
330
+ "ESFP": "ESFP는 ISTJ의 실용적인 성향을 존중하며, 함께 현실적인 목표를 달성할 수 있습니다.",
331
+ "ESTP": "ESTP는 ISTJ의 조직적이고 계획적인 성향을 보완하며, 빠른 문제 해결에 도움을 줍니다."
332
+ },
333
+ "나쁜 궁합 설명": {
334
+ "ENFP": "ENFP는 창의적이고 자유로운 성향이 강해, ISTJ의 전통적이고 보수적인 성향과 충돌할 수 있습니다.",
335
+ "ENTP": "ENTP는 실험적이고 모험적인 성향이 강해, ISTJ의 실용적이고 신중한 성향과 맞지 않을 수 있습니다."
336
+ }
337
+ },
338
+ "ISFJ": {
339
+ "성격": "성실하고 배려심 깊은 보호자",
340
+ "직업": "간호사, 교사, 사회복지사",
341
+ "궁합": ["ESFP", "ESTP"],
342
+ "나쁜 궁합": ["ENTP", "ENFP"],
343
+ "궁합 설명": {
344
+ "ESFP": "ESFP는 ISFJ의 배려심과 성실함을 존중하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
345
+ "ESTP": "ESTP는 ISFJ의 세심한 ��향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
346
+ },
347
+ "나쁜 궁합 설명": {
348
+ "ENTP": "ENTP는 실험적이고 비판적인 성향이 강해, ISFJ의 전통적이고 보호적인 성향과 충돌할 수 있습니다.",
349
+ "ENFP": "ENFP는 자유롭고 창의적인 성향이 강해, ISFJ의 조직적이고 보수적인 성향과 맞지 않을 수 있습니다."
350
+ }
351
+ },
352
+ "ESTJ": {
353
+ "성격": "실용적이고 조직적인 관리자",
354
+ "직업": "경영자, 군인, 공무원",
355
+ "궁합": ["ISTP", "INTP"],
356
+ "나쁜 궁합": ["INFP", "INFJ"],
357
+ "궁합 설명": {
358
+ "ISTP": "ISTP는 ESTJ의 조직적이고 실용적인 성향을 보완하며, 함께 효율적인 문제 해결을 도모할 수 있습니다.",
359
+ "INTP": "INTP는 ESTJ의 논리적 사고를 보완하며, 전략적인 목표 달성에 도움을 줍니다."
360
+ },
361
+ "나쁜 궁합 설명": {
362
+ "INFP": "INFP는 이상적이고 감정적인 성향이 강해, ESTJ의 실용적이고 논리적인 성향과 충돌할 수 있습니다.",
363
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTJ의 외향적이고 실용적인 성향과 맞지 않을 수 있습니다."
364
+ }
365
+ },
366
+ "ESFJ": {
367
+ "성격": "사교적이고 협력적인 지원자",
368
+ "직업": "교사, 간호사, 이벤트 플래너",
369
+ "궁합": ["ISFP", "ISTP"],
370
+ "나쁜 궁합": ["INTP", "INTJ"],
371
+ "궁합 설명": {
372
+ "ISFP": "ISFP는 ESFJ의 배려심을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
373
+ "ISTP": "ISTP는 ESFJ의 세심함을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
374
+ },
375
+ "나쁜 궁합 설명": {
376
+ "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ESFJ의 감정적이고 사교적인 성향과 충돌할 수 있습니다.",
377
+ "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESFJ의 즉각적인 행동과 맞지 않을 수 있습니다."
378
+ }
379
+ },
380
+ "ISTP": {
381
+ "성격": "유연하고 창의적인 문제 해결사",
382
+ "직업": "엔지니어, 기술자, 파일럿",
383
+ "궁합": ["ESFJ", "ESTJ"],
384
+ "나쁜 궁합": ["ENFJ", "ESFP"],
385
+ "궁합 설명": {
386
+ "ESFJ": "ESFJ는 ISTP의 창의적인 문제 해결 능력을 존중하며, 함께 실용적인 목표를 달성할 수 있습니다.",
387
+ "ESTJ": "ESTJ는 ISTP의 유연함을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
388
+ },
389
+ "나쁜 궁합 설명": {
390
+ "ENFJ": "ENFJ는 감정적이고 사교적인 성향이 강해, ISTP의 논리적이고 독립적인 성향과 충돌할 수 있습니다.",
391
+ "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, ISTP의 신중하고 분석적인 성향과 맞지 않을 수 있습니다."
392
+ }
393
+ },
394
+ "ISFP": {
395
+ "성격": "예술적이고 감각적인 장인",
396
+ "직업": "디자이너, 예술가, 음악가",
397
+ "궁합": ["ESFJ", "ESTJ"],
398
+ "나쁜 궁합": ["ENTJ", "ENTP"],
399
+ "궁합 설명": {
400
+ "ESFJ": "ESFJ는 ISFP의 감정적이고 예술적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
401
+ "ESTJ": "ESTJ는 ISFP의 유연함을 보완하며, 실용적인 문제 해결에 도움을 줍니다."
402
+ },
403
+ "나쁜 궁합 설명": {
404
+ "ENTJ": "ENTJ는 논리적이고 계획적인 성향이 강해, ISFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
405
+ "ENTP": "ENTP는 비판적이고 실험적인 성향이 강해, ISFP의 감정적이고 예술적인 성향과 맞지 않을 수 있습니다."
406
+ }
407
+ },
408
+ "ESTP": {
409
+ "성격": "모험적이고 즉흥적인 활동가",
410
+ "직업": "기업가, 운동선수, 경찰",
411
+ "궁합": ["ISFJ", "ISTJ"],
412
+ "나쁜 궁합": ["INFJ", "INTJ"],
413
+ "궁합 설명": {
414
+ "ISFJ": "ISFJ는 ESTP의 활동적이고 모험적인 성향을 이해하며, 함께 현실적인 목표를 달성할 수 있습니다.",
415
+ "ISTJ": "ISTJ는 ESTP의 즉흥적인 성향을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
416
+ },
417
+ "나쁜 궁합 설명": {
418
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTP의 외향적이고 즉흥적인 성향과 충돌할 수 있습니다.",
419
+ "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESTP의 즉각적인 행동과 맞지 않을 수 있습니다."
420
+ }
421
+ },
422
+ "ESFP": {
423
+ "성격": "사교적이고 열정적인 연예인",
424
+ "직업": "배우, 연예인, 이벤트 플래너",
425
+ "궁합": ["ISFJ", "ISTJ"],
426
+ "나쁜 궁합": ["INTJ", "INFJ"],
427
+ "궁합 설명": {
428
+ "ISFJ": "ISFJ는 ESFP의 활발하고 사교적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
429
+ "ISTJ": "ISTJ는 ESFP의 즉흥적인 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
430
+ },
431
+ "나쁜 궁합 설명": {
432
+ "INTJ": "INTJ는 논리적이고 계획적인 성향이 강해, ESFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
433
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESFP의 외향적이고 활동적인 성향과 맞지 않을 수 있습니다."
434
+ }
435
+ }
436
+ };
437
+
438
+ function nextPage(currentPage) {
439
+ const current = document.getElementById(`page-${currentPage}`);
440
+ const next = document.getElementById(`page-${currentPage + 1}`);
441
+ if (validatePage(currentPage)) {
442
+ current.style.display = 'none';
443
+ next.style.display = 'block';
444
+ window.scrollTo(0, 0);
445
+ }
446
+ }
447
+
448
+ function prevPage(currentPage) {
449
+ const current = document.getElementById(`page-${currentPage}`);
450
+ const prev = document.getElementById(`page-${currentPage - 1}`);
451
+ current.style.display = 'none';
452
+ prev.style.display = 'block';
453
+ window.scrollTo(0, 0);
454
+ }
455
+
456
+ function validatePage(page) {
457
+ const pageDiv = document.getElementById(`page-${page}`);
458
+ const inputs = pageDiv.querySelectorAll('input[type="radio"]');
459
+ const names = new Set();
460
+ inputs.forEach(input => names.add(input.name));
461
+ for (let name of names) {
462
+ const checked = pageDiv.querySelector(`input[name="${name}"]:checked`);
463
+ if (!checked) {
464
+ alert('모든 질문에 답변해주세요.');
465
+ return false;
466
+ }
467
+ }
468
+ return true;
469
+ }
470
+
471
+ document.getElementById('mbti-form').addEventListener('submit', function(e) {
472
+ e.preventDefault();
473
+ const responses = [];
474
+ for (let i = 1; i <= 20; i++) {
475
+ const answer = document.querySelector(`input[name="q${i}"]:checked`).value;
476
+ responses.push(answer);
477
+ }
478
+ const [mbtiType, percentage] = calculateMbtiResponses(responses);
479
+ displayResult(mbtiType, percentage);
480
+ });
481
+
482
+ function calculateMbtiResponses(responses) {
483
+ let scores = {};
484
+ for (let type in mbtiTypes) {
485
+ scores[type] = 0;
486
+ }
487
+
488
+ responses.forEach(response => {
489
+ mbtiTypesKeys = Object.keys(mbtiTypes);
490
+ mbtiTypesKeys.forEach(type => {
491
+ if (response === "매우 그렇다") {
492
+ scores[type] += getRandomInt(5, 10);
493
+ } else if (response === "그렇다") {
494
+ scores[type] += getRandomInt(2, 5);
495
+ } else if (response === "보통이다") {
496
+ scores[type] += getRandomInt(0, 2);
497
+ } else if (response === "아니다") {
498
+ scores[type] -= getRandomInt(2, 5);
499
+ } else if (response === "매우 아니다") {
500
+ scores[type] -= getRandomInt(5, 10);
501
+ }
502
+ });
503
+ });
504
+
505
+ const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
506
+ const bestMatch = sorted[0][0];
507
+ const secondMatch = sorted[1][0];
508
+ const scoreDifference = sorted[0][1] - sorted[1][1];
509
+ let percentage = 60;
510
+
511
+ if (scoreDifference > 15) {
512
+ percentage = 95 + getRandomInt(0, 5);
513
+ } else if (scoreDifference > 10) {
514
+ percentage = 85 + getRandomInt(0, 10);
515
+ } else if (scoreDifference > 5) {
516
+ percentage = 75 + getRandomInt(0, 10);
517
+ } else {
518
+ percentage = 60 + getRandomInt(0, 15);
519
+ }
520
+
521
+ return [bestMatch, percentage];
522
+ }
523
+
524
+ function getRandomInt(min, max) {
525
+ return Math.floor(Math.random() * (max - min)) + min;
526
+ }
527
+
528
+ function displayResult(mbtiType, percentage) {
529
+ const form = document.querySelector('.container');
530
+ const resultPage = document.getElementById('result-page');
531
+ const resultText = document.getElementById('result-text');
532
+ const resultImage = document.getElementById('result-image');
533
+
534
+ let result = `당신의 MBTI 유형은 <strong>${mbtiType}</strong>입니다. 신뢰도: <strong>${percentage}%</strong><br><br>`;
535
+ result += `성격 설명: ${mbtiTypes[mbtiType]['성격']}<br>`;
536
+ result += `추천 직업: ${mbtiTypes[mbtiType]['직업']}<br><br>`;
537
+
538
+ // 좋은 궁합
539
+ result += `<strong>좋은 궁합:</strong><br>`;
540
+ mbtiTypes[mbtiType]['궁합'].forEach(match => {
541
+ result += `- ${match}: ${mbtiTypes[mbtiType]['궁합 설명'][match]}<br>`;
542
+ });
543
+
544
+ // 나쁜 궁합
545
+ result += `<br><strong>나쁜 궁합:</strong><br>`;
546
+ mbtiTypes[mbtiType]['나쁜 궁합'].forEach(match => {
547
+ result += `- ${match}: ${mbtiTypes[mbtiType]['나쁜 궁합 설명'][match]}<br>`;
548
+ });
549
+
550
+ resultText.innerHTML = result;
551
+ resultImage.src = `${mbtiType}.webp`;
552
+ form.style.display = 'none';
553
+ resultPage.style.display = 'block';
554
+ window.scrollTo(0, 0);
555
+ }
556
+
557
+ function restart() {
558
+ const form = document.querySelector('.container');
559
+ const resultPage = document.getElementById('result-page');
560
+ form.style.display = 'block';
561
+ resultPage.style.display = 'none';
562
+ document.getElementById('mbti-form').reset();
563
+ // Reset to first page
564
+ for (let i = 1; i <=4; i++) {
565
+ document.getElementById(`page-${i}`).style.display = 'none';
566
+ }
567
+ document.getElementById('page-1').style.display = 'block';
568
+ window.scrollTo(0, 0);
569
+ }
570
+ </script>
571
+ </body>
572
  </html>