taeyeol commited on
Commit
8c08e94
·
verified ·
1 Parent(s): a7a1d46

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +865 -1
index.html CHANGED
@@ -134,4 +134,868 @@ mbti_types = {
134
  },
135
  "나쁜 궁합 설명": {
136
  "ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.",
137
- "INTP
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  },
135
  "나쁜 궁합 설명": {
136
  "ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.",
137
+ "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ENFJ의 감정적이고 사교적인 성향과 맞지 않을 수 있습니다."
138
+ }
139
+ },
140
+ "ENFP": {
141
+ "성격": "열정적이고 창의적인 사고를 가진 사람",
142
+ "직업": "예술가, 작가, 마케터",
143
+ "궁합": ["INTJ", "INFJ"],
144
+ "나쁜 궁합": ["ISTJ", "ISFJ"],
145
+ "궁합 설명": {
146
+ "INTJ": "INTJ는 ENFP의 창의적인 아이디어를 현실로 실현하는 데 도움을 줍니다.",
147
+ "INFJ": "INFJ는 ENFP의 열정을 이해하며, 함께 이상적인 목표를 추구할 수 있습니다."
148
+ },
149
+ "나쁜 궁합 설명": {
150
+ "ISTJ": "ISTJ는 전통적이고 실용적인 성향이 강해, ENFP의 창의적이고 모험적인 성향과 충돌할 수 있습니다.",
151
+ "ISFJ": "ISFJ는 사회적 규범을 중시하며, ENFP의 자유롭고 개방적인 성향과 맞지 않을 수 있습니다."
152
+ }
153
+ },
154
+ "ISTJ": {
155
+ "성격": "실용적이고 신뢰할 수 있는 관리인",
156
+ "직업": "회계사, 관리자, 공무원",
157
+ "궁합": ["ESFP", "ESTP"],
158
+ "나쁜 궁합": ["ENFP", "ENTP"],
159
+ "궁합 설명": {
160
+ "ESFP": "ESFP는 ISTJ의 실용적인 성향을 존중하며, 함께 현실적인 목표를 달성할 수 있습니다.",
161
+ "ESTP": "ESTP는 ISTJ의 조직적이고 계획적인 성향을 보완하며, 빠른 문제 해결에 도움을 줍니다."
162
+ },
163
+ "나쁜 궁합 설명": {
164
+ "ENFP": "ENFP는 창의적이고 자유로운 성향이 강해, ISTJ의 전통적이고 보수적인 성향과 충돌할 수 있습니다.",
165
+ "ENTP": "ENTP는 실험적이고 모험적인 성향이 강해, ISTJ의 실용적이고 신중한 성향과 맞지 않을 수 있습니다."
166
+ }
167
+ },
168
+ "ISFJ": {
169
+ "성격": "성실하고 배려심 깊은 보호자",
170
+ "직업": "간호사, 교사, 사회복지사",
171
+ "궁합": ["ESFP", "ESTP"],
172
+ "나쁜 궁합": ["ENTP", "ENFP"],
173
+ "궁합 설명": {
174
+ "ESFP": "ESFP는 ISFJ의 배려심과 성실함을 존중하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
175
+ "ESTP": "ESTP는 ISFJ의 세심한 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
176
+ },
177
+ "나쁜 궁합 설명": {
178
+ "ENTP": "ENTP는 실험적이고 비판적인 성향이 강해, ISFJ의 전통적이고 보호적인 성향과 충돌할 수 있습니다.",
179
+ "ENFP": "ENFP는 자유롭고 창의적인 성향이 강해, ISFJ의 조직적이고 보수적인 성향과 맞지 않을 수 있습니다."
180
+ }
181
+ },
182
+ "ESTJ": {
183
+ "성격": "실용적이고 조직적인 관리자",
184
+ "직업": "경영자, 군인, 공무원",
185
+ "궁합": ["ISTP", "INTP"],
186
+ "나쁜 궁합": ["INFP", "INFJ"],
187
+ "궁합 설명": {
188
+ "ISTP": "ISTP는 ESTJ의 조직적이고 실용적인 성향을 보완하며, 함께 효율적인 문제 해결을 도모할 수 있습니다.",
189
+ "INTP": "INTP는 ESTJ의 논리적 사고를 보완하며, 전략적인 목표 달성에 도움을 줍니다."
190
+ },
191
+ "나쁜 궁합 설명": {
192
+ "INFP": "INFP는 이상적이고 감정적인 성향이 강해, ESTJ의 실용적이고 논리적인 성향과 충돌할 수 있습니다.",
193
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTJ의 외향적이고 실용적인 성향과 맞지 않을 수 있습니다."
194
+ }
195
+ },
196
+ "ESFJ": {
197
+ "성격": "사교적이고 협력적인 지원자",
198
+ "직업": "교사, 간호사, 이벤트 플래너",
199
+ "궁합": ["ISFP", "ISTP"],
200
+ "나쁜 궁합": ["INTP", "INTJ"],
201
+ "궁합 설명": {
202
+ "ISFP": "ISFP는 ESFJ의 배려심을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
203
+ "ISTP": "ISTP는 ESFJ의 세심함을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
204
+ },
205
+ "나쁜 궁합 설명": {
206
+ "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ESFJ의 감정적이고 사교적인 성향과 충돌할 수 있습니다.",
207
+ "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESFJ의 즉각적인 행동과 맞지 않을 수 있습니다."
208
+ }
209
+ },
210
+ "ISTP": {
211
+ "성격": "유연하고 창의적인 문제 해결사",
212
+ "직업": "엔지니어, 기술자, 파일럿",
213
+ "궁합": ["ESFJ", "ESTJ"],
214
+ "나쁜 궁합": ["ENFJ", "ESFP"],
215
+ "궁합 설명": {
216
+ "ESFJ": "ESFJ는 ISTP의 창의적인 문제 해결 능력을 존중하며, 함께 실용적인 목표를 달성할 수 있습니다.",
217
+ "ESTJ": "ESTJ는 ISTP의 유연함을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
218
+ },
219
+ "나쁜 궁합 설명": {
220
+ "ENFJ": "ENFJ는 감정적이고 사교적인 성향이 강해, ISTP의 논리적이고 독립적인 성향과 충돌할 수 있습니다.",
221
+ "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, ISTP의 신중하고 분석적인 성향과 맞지 않을 수 있습니다."
222
+ }
223
+ },
224
+ "ISFP": {
225
+ "성격": "예술적이고 감각적인 장인",
226
+ "직업": "디자이너, 예술가, 음악가",
227
+ "궁합": ["ESFJ", "ESTJ"],
228
+ "나쁜 궁합": ["ENTJ", "ENTP"],
229
+ "궁합 설명": {
230
+ "ESFJ": "ESFJ는 ISFP의 감정적이고 예술적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
231
+ "ESTJ": "ESTJ는 ISFP의 유연함을 보완하며, 실용적인 문제 해결에 도움을 줍니다."
232
+ },
233
+ "나쁜 궁합 설명": {
234
+ "ENTJ": "ENTJ는 논리적이고 계획적인 성향이 강해, ISFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
235
+ "ENTP": "ENTP는 비판적이고 실험적인 성향이 강해, ISFP의 감정적이고 예술적인 성향과 맞지 않을 수 있습니다."
236
+ }
237
+ },
238
+ "ESTP": {
239
+ "성격": "모험적이고 즉흥적인 활동가",
240
+ "직업": "기업가, 운동선수, 경찰",
241
+ "궁합": ["ISFJ", "ISTJ"],
242
+ "나쁜 궁합": ["INFJ", "INTJ"],
243
+ "궁합 설명": {
244
+ "ISFJ": "ISFJ는 ESTP의 활동적이고 모험적인 성향을 이해하며, 함께 현실적인 목표를 달성할 수 있습니다.",
245
+ "ISTJ": "ISTJ는 ESTP의 즉흥적인 성향을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
246
+ },
247
+ "나쁜 궁합 설명": {
248
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTP의 외향적이고 즉흥적인 성향과 충돌할 수 있습니다.",
249
+ "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESTP의 즉각적인 행동과 맞지 않을 수 있습니다."
250
+ }
251
+ },
252
+ "ESFP": {
253
+ "성격": "사교적이고 열정적인 연예인",
254
+ "직업": "배우, 연예인, 이벤트 플래너",
255
+ "궁합": ["ISFJ", "ISTJ"],
256
+ "나쁜 궁합": ["INTJ", "INFJ"],
257
+ "궁합 설명": {
258
+ "ISFJ": "ISFJ는 ESFP의 활발하고 사교적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
259
+ "ISTJ": "ISTJ는 ESFP의 즉흥적인 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
260
+ },
261
+ "나쁜 궁합 설명": {
262
+ "INTJ": "INTJ는 논리적이고 계획적인 성향이 강해, ESFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
263
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESFP의 외향적이고 활동적인 성향과 맞지 않을 수 있습니다."
264
+ }
265
+ }
266
+ }
267
+
268
+ def calculate_mbti_responses(responses):
269
+ scores = np.zeros(16) # 16가지 MBTI 유형에 대한 점수
270
+ for i, response in enumerate(responses):
271
+ if response == "매우 그렇다":
272
+ scores += np.random.randint(5, 10, size=16)
273
+ elif response == "그렇다":
274
+ scores += np.random.randint(2, 5, size=16)
275
+ elif response == "보통이다":
276
+ scores += np.random.randint(0, 2, size=16)
277
+ elif response == "아니다":
278
+ scores -= np.random.randint(2, 5, size=16)
279
+ elif response == "매우 아니다":
280
+ scores -= np.random.randint(5, 10, size=16)
281
+
282
+ best_match_index = np.argmax(scores)
283
+ second_best_match_index = np.argsort(scores)[-2] # 두 번째로 높은 점수의 인덱스
284
+
285
+ score_difference = scores[best_match_index] - scores[second_best_match_index]
286
+
287
+ # 신뢰도 계산
288
+ if score_difference > 15:
289
+ percentage = 95 + np.random.randint(0, 5)
290
+ elif score_difference > 10:
291
+ percentage = 85 + np.random.randint(0, 10)
292
+ elif score_difference > 5:
293
+ percentage = 75 + np.random.randint(0, 10)
294
+ else:
295
+ percentage = 60 + np.random.randint(0, 15)
296
+
297
+ best_match_type = list(mbti_types.keys())[best_match_index]
298
+ return best_match_type, percentage
299
+
300
+
301
+ def mbti_quiz(*responses):
302
+ mbti_type, percentage = calculate_mbti_responses(responses)
303
+ result = f"당신의 MBTI 유형은 {mbti_type}입니다. 신뢰도: {percentage:.2f}%"
304
+ details = mbti_types[mbti_type]
305
+ result += f"\\n\\n성격 설명: {details['성격']}"
306
+ result += f"\\n추천 직업: {details['직업']}"
307
+
308
+ # 좋은 궁합 설명
309
+ good_matches = details['궁합']
310
+ good_explanations = details['궁합 설명']
311
+ result += f"\\n\\n좋은 궁합:"
312
+ for match in good_matches:
313
+ result += f"\\n- {match}: {good_explanations[match]}"
314
+
315
+ # 나쁜 궁합 설명
316
+ bad_matches = details['나쁜 궁합']
317
+ bad_explanations = details['나쁜 궁합 설명']
318
+ result += f"\\n\\n나쁜 궁합:"
319
+ for match in bad_matches:
320
+ result += f"\\n- {match}: {bad_explanations[match]}"
321
+
322
+ image_path = f"./{mbti_type}.webp"
323
+
324
+ return result, image_path
325
+
326
+
327
+ def display_results(text, image):
328
+ return text, image
329
+
330
+ inputs = [gr.Radio(["매우 그렇다", "그렇다", "보통이다", "아니다", "매우 아니다"], label=question) for question in questions]
331
+ output_text = gr.Textbox(label="MBTI 결과")
332
+ output_image = gr.Image(label="유형 이미지")
333
+
334
+ iface = gr.Interface(
335
+ fn=mbti_quiz,
336
+ inputs=inputs,
337
+ outputs=[output_text, output_image],
338
+ title="MBTI 성격 유형 테스트",
339
+ description="20개 이상의 질문을 통해 MBTI 성격 유형을 분석하세요."
340
+ )
341
+ iface.launch()
342
+ -->
343
+
344
+ <!-- 실제 HTML/JS 구현: 동일 기능(질문 -> 결과)을 5개씩 4단계로 나눈 뒤, 마지막에 결과 페이지를 표시 -->
345
+
346
+ <div class="container">
347
+ <h1>MBTI 성격 유형 테스트</h1>
348
+ <p class="desc">
349
+ 아래 질문에 답변해주세요. 각 단계마다 5개 문항씩 있습니다.
350
+ </p>
351
+
352
+ <!-- 질문 섹션들(5문항씩 4단계) -->
353
+ <form id="quizForm">
354
+ <!-- 1단계 질문 1~5 -->
355
+ <div class="question-page" data-page="1">
356
+ <h2>1단계 (문항 1~5)</h2>
357
+ <div class="question">
358
+ <p>1) 당신은 혼자 있을 때 에너지를 얻나요?</p>
359
+ <div>
360
+ <label><input type="radio" name="q1" value="매우 그렇다" required> 매우 그렇다</label>
361
+ <label><input type="radio" name="q1" value="그렇다"> 그렇다</label>
362
+ <label><input type="radio" name="q1" value="보통이다"> 보통이다</label>
363
+ <label><input type="radio" name="q1" value="아니다"> 아니다</label>
364
+ <label><input type="radio" name="q1" value="매우 아니다"> 매우 아니다</label>
365
+ </div>
366
+ </div>
367
+ <div class="question">
368
+ <p>2) 당신은 계획을 세우는 것을 좋아하나요?</p>
369
+ <div>
370
+ <label><input type="radio" name="q2" value="매우 그렇다" required> 매우 그렇다</label>
371
+ <label><input type="radio" name="q2" value="그렇다"> 그렇다</label>
372
+ <label><input type="radio" name="q2" value="보통이다"> 보통이다</label>
373
+ <label><input type="radio" name="q2" value="아니다"> 아니다</label>
374
+ <label><input type="radio" name="q2" value="매우 아니다"> 매우 아니다</label>
375
+ </div>
376
+ </div>
377
+ <div class="question">
378
+ <p>3) 당신은 새로운 상황에 쉽게 적응하나요?</p>
379
+ <div>
380
+ <label><input type="radio" name="q3" value="매우 그렇다" required> 매우 그렇다</label>
381
+ <label><input type="radio" name="q3" value="그렇다"> 그렇다</label>
382
+ <label><input type="radio" name="q3" value="보통이다"> 보통이다</label>
383
+ <label><input type="radio" name="q3" value="아니다"> 아니다</label>
384
+ <label><input type="radio" name="q3" value="매우 아니다"> 매우 아니다</label>
385
+ </div>
386
+ </div>
387
+ <div class="question">
388
+ <p>4) 당신은 감정보다는 논리에 더 의존하나요?</p>
389
+ <div>
390
+ <label><input type="radio" name="q4" value="매우 그렇다" required> 매우 그렇다</label>
391
+ <label><input type="radio" name="q4" value="그렇다"> 그렇다</label>
392
+ <label><input type="radio" name="q4" value="보통이다"> 보통이다</label>
393
+ <label><input type="radio" name="q4" value="아니다"> 아니다</label>
394
+ <label><input type="radio" name="q4" value="매우 아니다"> 매우 아니다</label>
395
+ </div>
396
+ </div>
397
+ <div class="question">
398
+ <p>5) 당신은 다른 사람을 돕는 것을 좋아하나요?</p>
399
+ <div>
400
+ <label><input type="radio" name="q5" value="매우 그렇다" required> 매우 그렇다</label>
401
+ <label><input type="radio" name="q5" value="그렇다"> 그렇다</label>
402
+ <label><input type="radio" name="q5" value="보통이다"> 보통이다</label>
403
+ <label><input type="radio" name="q5" value="아니다"> 아니다</label>
404
+ <label><input type="radio" name="q5" value="매우 아니다"> 매우 아니다</label>
405
+ </div>
406
+ </div>
407
+ <button type="button" class="next-btn" data-next="2">다음 단계</button>
408
+ </div>
409
+
410
+ <!-- 2단계 질문 6~10 -->
411
+ <div class="question-page" data-page="2" style="display:none;">
412
+ <h2>2단계 (문항 6~10)</h2>
413
+ <div class="question">
414
+ <p>6) 당신은 사교적인 성격을 가지고 있나요?</p>
415
+ <div>
416
+ <label><input type="radio" name="q6" value="매우 그렇다" required> 매우 그렇다</label>
417
+ <label><input type="radio" name="q6" value="그렇다"> 그렇다</label>
418
+ <label><input type="radio" name="q6" value="보통이다"> 보통이다</label>
419
+ <label><input type="radio" name="q6" value="아니다"> 아니다</label>
420
+ <label><input type="radio" name="q6" value="매우 아니다"> 매우 아니다</label>
421
+ </div>
422
+ </div>
423
+ <div class="question">
424
+ <p>7) 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p>
425
+ <div>
426
+ <label><input type="radio" name="q7" value="매우 그렇다" required> 매우 그렇다</label>
427
+ <label><input type="radio" name="q7" value="그렇다"> 그렇다</label>
428
+ <label><input type="radio" name="q7" value="보통이다"> 보통이다</label>
429
+ <label><input type="radio" name="q7" value="아니다"> 아니다</label>
430
+ <label><input type="radio" name="q7" value="매우 아니다"> 매우 아니다</label>
431
+ </div>
432
+ </div>
433
+ <div class="question">
434
+ <p>8) 당신은 사실과 데이터를 중시하나요?</p>
435
+ <div>
436
+ <label><input type="radio" name="q8" value="매우 그렇다" required> 매우 그렇다</label>
437
+ <label><input type="radio" name="q8" value="그렇다"> 그렇다</label>
438
+ <label><input type="radio" name="q8" value="보통이다"> 보통이다</label>
439
+ <label><input type="radio" name="q8" value="아니다"> 아니다</label>
440
+ <label><input type="radio" name="q8" value="매우 아니다"> 매우 아니다</label>
441
+ </div>
442
+ </div>
443
+ <div class="question">
444
+ <p>9) 당신은 감정 표현을 잘 하나요?</p>
445
+ <div>
446
+ <label><input type="radio" name="q9" value="매우 그렇다" required> 매우 그렇다</label>
447
+ <label><input type="radio" name="q9" value="그렇다"> 그렇다</label>
448
+ <label><input type="radio" name="q9" value="보통이다"> 보통이다</label>
449
+ <label><input type="radio" name="q9" value="아니다"> 아니다</label>
450
+ <label><input type="radio" name="q9" value="매우 아니다"> 매우 아니다</label>
451
+ </div>
452
+ </div>
453
+ <div class="question">
454
+ <p>10) 당신은 문제를 해결할 때 창의적인 방법을 사용하나요?</p>
455
+ <div>
456
+ <label><input type="radio" name="q10" value="매우 그렇다" required> 매우 그렇다</label>
457
+ <label><input type="radio" name="q10" value="그렇다"> 그렇다</label>
458
+ <label><input type="radio" name="q10" value="보통이다"> 보통이다</label>
459
+ <label><input type="radio" name="q10" value="아니다"> 아니다</label>
460
+ <label><input type="radio" name="q10" value="매우 아니다"> 매우 아니다</label>
461
+ </div>
462
+ </div>
463
+ <button type="button" class="prev-btn" data-prev="1">이전 단계</button>
464
+ <button type="button" class="next-btn" data-next="3">다음 단계</button>
465
+ </div>
466
+
467
+ <!-- 3단계 질문 11~15 -->
468
+ <div class="question-page" data-page="3" style="display:none;">
469
+ <h2>3단계 (문항 11~15)</h2>
470
+ <div class="question">
471
+ <p>11) 당신은 다른 사람들과의 협업을 선호하나요?</p>
472
+ <div>
473
+ <label><input type="radio" name="q11" value="매우 그렇다" required> 매우 그렇다</label>
474
+ <label><input type="radio" name="q11" value="그렇다"> 그렇다</label>
475
+ <label><input type="radio" name="q11" value="보통이다"> 보통이다</label>
476
+ <label><input type="radio" name="q11" value="아니다"> 아니다</label>
477
+ <label><input type="radio" name="q11" value="매우 아니다"> 매우 아니다</label>
478
+ </div>
479
+ </div>
480
+ <div class="question">
481
+ <p>12) 당신은 결정을 내릴 때 직감을 신뢰하나요?</p>
482
+ <div>
483
+ <label><input type="radio" name="q12" value="매우 그렇다" required> 매우 그렇다</label>
484
+ <label><input type="radio" name="q12" value="그렇다"> 그렇다</label>
485
+ <label><input type="radio" name="q12" value="보통이다"> 보통이다</label>
486
+ <label><input type="radio" name="q12" value="아니다"> 아니다</label>
487
+ <label><input type="radio" name="q12" value="매우 아니다"> 매우 아니다</label>
488
+ </div>
489
+ </div>
490
+ <div class="question">
491
+ <p>13) 당신은 규칙과 절차를 따르는 것을 좋아하나요?</p>
492
+ <div>
493
+ <label><input type="radio" name="q13" value="매우 그렇다" required> 매우 그렇다</label>
494
+ <label><input type="radio" name="q13" value="그렇다"> 그렇다</label>
495
+ <label><input type="radio" name="q13" value="보통이다"> 보통이다</label>
496
+ <label><input type="radio" name="q13" value="아니다"> 아니다</label>
497
+ <label><input type="radio" name="q13" value="매우 아니다"> 매우 아니다</label>
498
+ </div>
499
+ </div>
500
+ <div class="question">
501
+ <p>14) 당신은 주변 환경에 민감하게 반응하나요?</p>
502
+ <div>
503
+ <label><input type="radio" name="q14" value="매우 그렇다" required> 매우 그렇다</label>
504
+ <label><input type="radio" name="q14" value="그렇다"> 그렇다</label>
505
+ <label><input type="radio" name="q14" value="보통이다"> 보통이다</label>
506
+ <label><input type="radio" name="q14" value="아니다"> 아니다</label>
507
+ <label><input type="radio" name="q14" value="매우 아니다"> 매우 아니다</label>
508
+ </div>
509
+ </div>
510
+ <div class="question">
511
+ <p>15) 당신은 일을 처리할 때 효율성을 중시하나요?</p>
512
+ <div>
513
+ <label><input type="radio" name="q15" value="매우 그렇다" required> 매우 그렇다</label>
514
+ <label><input type="radio" name="q15" value="그렇다"> 그렇다</label>
515
+ <label><input type="radio" name="q15" value="보통이다"> 보통이다</label>
516
+ <label><input type="radio" name="q15" value="아니다"> 아니다</label>
517
+ <label><input type="radio" name="q15" value="매우 아니다"> 매우 아니다</label>
518
+ </div>
519
+ </div>
520
+ <button type="button" class="prev-btn" data-prev="2">이전 단계</button>
521
+ <button type="button" class="next-btn" data-next="4">다음 단계</button>
522
+ </div>
523
+
524
+ <!-- 4단계 질문 16~20 -->
525
+ <div class="question-page" data-page="4" style="display:none;">
526
+ <h2>4단계 (문항 16~20)</h2>
527
+ <div class="question">
528
+ <p>16) 당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?</p>
529
+ <div>
530
+ <label><input type="radio" name="q16" value="매우 그렇다" required> 매우 그렇다</label>
531
+ <label><input type="radio" name="q16" value="그렇다"> 그렇다</label>
532
+ <label><input type="radio" name="q16" value="보통이다"> 보통이다</label>
533
+ <label><input type="radio" name="q16" value="아니다"> 아니다</label>
534
+ <label><input type="radio" name="q16" value="매우 아니다"> 매우 아니다</label>
535
+ </div>
536
+ </div>
537
+ <div class="question">
538
+ <p>17) 당신은 자연스럽게 리더 역할을 맡게 되나요?</p>
539
+ <div>
540
+ <label><input type="radio" name="q17" value="매우 그렇다" required> 매우 그렇다</label>
541
+ <label><input type="radio" name="q17" value="그렇다"> 그렇다</label>
542
+ <label><input type="radio" name="q17" value="보통이다"> 보통이다</label>
543
+ <label><input type="radio" name="q17" value="아니다"> 아니다</label>
544
+ <label><input type="radio" name="q17" value="매우 아니다"> 매우 아니다</label>
545
+ </div>
546
+ </div>
547
+ <div class="question">
548
+ <p>18) 당신은 새로운 아이디어를 제안하는 것을 좋아하나요?</p>
549
+ <div>
550
+ <label><input type="radio" name="q18" value="매우 그렇다" required> 매우 그렇다</label>
551
+ <label><input type="radio" name="q18" value="그렇다"> 그렇다</label>
552
+ <label><input type="radio" name="q18" value="보통이다"> 보통이다</label>
553
+ <label><input type="radio" name="q18" value="아니다"> 아니다</label>
554
+ <label><input type="radio" name="q18" value="매우 아니다"> 매우 아니다</label>
555
+ </div>
556
+ </div>
557
+ <div class="question">
558
+ <p>19) 당신은 대인 관계에서 갈등을 피하려 하나요?</p>
559
+ <div>
560
+ <label><input type="radio" name="q19" value="매우 그렇다" required> 매우 그렇다</label>
561
+ <label><input type="radio" name="q19" value="그렇다"> 그렇다</label>
562
+ <label><input type="radio" name="q19" value="보통이다"> 보통이다</label>
563
+ <label><input type="radio" name="q19" value="아니다"> 아니다</label>
564
+ <label><input type="radio" name="q19" value="매우 아니다"> 매우 아니다</label>
565
+ </div>
566
+ </div>
567
+ <div class="question">
568
+ <p>20) 당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?</p>
569
+ <div>
570
+ <label><input type="radio" name="q20" value="매우 그렇다" required> 매우 그렇다</label>
571
+ <label><input type="radio" name="q20" value="그렇다"> 그렇다</label>
572
+ <label><input type="radio" name="q20" value="보통이다"> 보통이다</label>
573
+ <label><input type="radio" name="q20" value="아니다"> 아니다</label>
574
+ <label><input type="radio" name="q20" value="매우 아니다"> 매우 아니다</label>
575
+ </div>
576
+ </div>
577
+ <button type="button" class="prev-btn" data-prev="3">이전 단계</button>
578
+ <button type="submit" class="submit-btn">결과 확인</button>
579
+ </div>
580
+ </form>
581
+
582
+ <!-- 결과 화면 -->
583
+ <div class="result-page" style="display: none;">
584
+ <h2>결과</h2>
585
+ <p class="final-result"></p>
586
+ <img class="final-image" src="" alt="MBTI 이미지" style="max-width: 300px; display:none;" />
587
+ <button type="button" class="restart-btn">다시하��</button>
588
+ </div>
589
+ </div>
590
+
591
+ <script>
592
+ // 질문들 (20개) - 파이썬 코드의 questions 배열과 동일
593
+ const questions = [
594
+ "당신은 혼자 있을 때 에너지를 얻나요?",
595
+ "당신은 계획을 세우는 것을 좋아하나요?",
596
+ "당신은 새로운 상황에 쉽게 적응하나요?",
597
+ "당신은 감정보다는 논리에 더 의존하나요?",
598
+ "당신은 다른 사람을 돕는 것을 좋아하나요?",
599
+ "당신은 사교적인 성격을 가지고 있나요?",
600
+ "당신은 일을 끝내기 전에 계획을 세우는 편인가요?",
601
+ "당신은 사실과 데이터를 중시하나요?",
602
+ "당신은 감정 표현을 잘 하나요?",
603
+ "당신은 문제를 해결할 때 창의적인 방법을 사용하나요?",
604
+ "당신은 다른 사람들과의 협업을 선호하나요?",
605
+ "당신은 결정을 내릴 때 직감을 신뢰하나요?",
606
+ "당신은 규칙과 절차를 따르는 것을 좋아하나요?",
607
+ "당신은 주변 환경에 민감하게 반응하나요?",
608
+ "당신은 일을 처리할 때 효율성을 중시하나요?",
609
+ "당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?",
610
+ "당신은 자연스럽게 리더 역할을 맡게 되나요?",
611
+ "당신은 새로운 아이디어를 제안하는 것을 좋아하나요?",
612
+ "당신은 대인 관계에서 갈등을 피하려 하나요?",
613
+ "당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?"
614
+ ];
615
+
616
+ // MBTI 유형 데이터 - 파이썬 코드의 mbti_types와 동일 구조
617
+ const mbti_types = {
618
+ "INTJ": {
619
+ "성격": "독창적이고 전략적인 사고를 가진 조용한 리더",
620
+ "직업": "과학자, 엔지니어, 데이터 분석가",
621
+ "궁합": ["ENFP", "ENTP"],
622
+ "나쁜 궁합": ["ESFP", "ESTP"],
623
+ "궁합 설명": {
624
+ "ENFP": "ENFP는 INTJ의 이상주의를 자극하고, 서로의 강점과 약점을 보완합니다.",
625
+ "ENTP": "ENTP는 INTJ의 창의성과 전략적 사고를 자극하여 생산적인 파트너십을 형성합니다."
626
+ },
627
+ "나쁜 궁합 설명": {
628
+ "ESFP": "ESFP는 INTJ와 정반대의 성향을 가지고 있어 갈등이 잦을 수 있습니다.",
629
+ "ESTP": "ESTP는 실용적인 접근을 선호하는 반면, INTJ는 장기적인 계획을 중시합니다."
630
+ }
631
+ },
632
+ "INTP": {
633
+ "성격": "논리적이고 분석적인 사고를 가진 혁신가",
634
+ "직업": "연구원, 프로그래머, 철학자",
635
+ "궁합": ["ENTJ", "ESTJ"],
636
+ "나쁜 궁합": ["ESFJ", "ESTP"],
637
+ "궁합 설명": {
638
+ "ENTJ": "ENTJ는 INTP의 분석적 사고를 촉진하고 함께 전략적인 목표를 달성할 수 있습니다.",
639
+ "ESTJ": "ESTJ는 INTP의 논리적 접근을 존중하며 실용적인 해결책을 찾는 데 도움을 줍니다."
640
+ },
641
+ "나쁜 궁합 설명": {
642
+ "ESFJ": "ESFJ는 감정적인 결정을 중시하는 반면, INTP는 논리를 중시하여 갈등이 생길 수 있습니다.",
643
+ "ESTP": "ESTP는 즉각적인 행동을 선호하며, INTP의 깊은 사고와는 충돌할 수 있습니다."
644
+ }
645
+ },
646
+ "ENTJ": {
647
+ "성격": "대담하고 결단력 있는 리더",
648
+ "직업": "기업가, 경영자, 변호사",
649
+ "궁합": ["INTP", "INTJ"],
650
+ "나쁜 궁합": ["INFP", "ISFP"],
651
+ "궁합 설명": {
652
+ "INTP": "INTP는 ENTJ의 전략적 사고를 보완하며, 논리적 접근을 통해 문제 해결에 도움을 줍니다.",
653
+ "INTJ": "INTJ는 ENTJ와 함께 장기적인 목표를 설정하고, 실행할 수 있는 강력한 파트너가 됩니다."
654
+ },
655
+ "나쁜 궁합 설명": {
656
+ "INFP": "INFP는 감정적 접근을 선호하며, ENTJ의 냉정한 논리적 접근과 충돌할 수 있습니다.",
657
+ "ISFP": "ISFP는 즉흥적이고 감정적인 경향이 있어, ENTJ의 체계적이고 논리적인 성향과 맞지 않을 수 있습니다."
658
+ }
659
+ },
660
+ "ENTP": {
661
+ "성격": "창의적이고 논쟁을 즐기는 비평가",
662
+ "직업": "마케터, 변호사, 기자",
663
+ "궁합": ["INFJ", "INTJ"],
664
+ "나쁜 궁합": ["ISFJ", "ISTJ"],
665
+ "궁합 설명": {
666
+ "INFJ": "INFJ는 ENTP의 창의적 사고를 이해하며, 이상적인 목표 설정을 도와줍니다.",
667
+ "INTJ": "INTJ는 ENTP와 함께 혁신적인 아이디어를 실현하는 데 강력한 파트너가 됩니다."
668
+ },
669
+ "나쁜 궁합 설명": {
670
+ "ISFJ": "ISFJ는 전통적이고 보수적인 성향이 강해, ENTP의 혁신적이고 비판적인 사고와 충돌할 수 있습니다.",
671
+ "ISTJ": "ISTJ는 실용적인 접근을 선호하며, ENTP의 실험적이고 모험적인 성향과 갈등이 있을 수 있습니다."
672
+ }
673
+ },
674
+ "INFJ": {
675
+ "성격": "통찰력 있고 헌신적인 이상주의자",
676
+ "직업": "상담사, 심리학자, 작가",
677
+ "궁합": ["ENFP", "ENTP"],
678
+ "나쁜 궁합": ["ESTP", "ESFP"],
679
+ "궁�� 설명": {
680
+ "ENFP": "ENFP는 INFJ의 이상주의와 깊은 감정을 이해하고 이를 격려합니다.",
681
+ "ENTP": "ENTP는 INFJ의 창의성을 자극하고, 혁신적인 아이디어를 실현하는 데 도움을 줍니다."
682
+ },
683
+ "나쁜 궁합 설명": {
684
+ "ESTP": "ESTP는 즉각적인 행동을 선호하며, INFJ의 깊은 사고와 감정적 접근과 충돌할 수 있습니다.",
685
+ "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, INFJ의 내성적이고 계획적인 성향과 맞지 않을 수 있습니다."
686
+ }
687
+ },
688
+ "INFP": {
689
+ "성격": "이상적이고 충실한 중재자",
690
+ "직업": "예술가, 작가, 상담사",
691
+ "궁합": ["ENFJ", "ENTJ"],
692
+ "나쁜 궁합": ["ESTJ", "ESFJ"],
693
+ "궁합 설명": {
694
+ "ENFJ": "ENFJ는 INFP의 이상주의를 격려하고, 함께 더 나은 세상을 만들기 위해 노력합니다.",
695
+ "ENTJ": "ENTJ는 INFP의 이상을 현실로 만들기 위해 논리적이고 전략적인 도움을 줍니다."
696
+ },
697
+ "나쁜 궁합 설명": {
698
+ "ESTJ": "ESTJ는 실용적이고 조직적인 성향이 강해, INFP의 이상적이고 감정적인 성향과 충돌할 수 있습니다.",
699
+ "ESFJ": "ESFJ는 사회적 규범을 중시하며, INFP의 개성과 독립성을 존중하지 않을 수 있습니다."
700
+ }
701
+ },
702
+ "ENFJ": {
703
+ "성격": "카리스마 있고 사교적인 리더",
704
+ "직업": "교사, 정치인, 사회운동가",
705
+ "궁합": ["INFP", "INFJ"],
706
+ "나쁜 궁합": ["ISTP", "INTP"],
707
+ "궁합 설명": {
708
+ "INFP": "INFP는 ENFJ의 감정적 깊이와 이상주의를 이해하며, 함께 의미 있는 목표를 추구합니다.",
709
+ "INFJ": "INFJ는 ENFJ와 함께 사람들을 돕고, 세상을 더 나은 곳으로 만드는 데 협력할 수 있습니다."
710
+ },
711
+ "나쁜 궁합 설명": {
712
+ "ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.",
713
+ "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ENFJ의 감정적이고 사교적인 성향과 맞지 않을 수 있습니다."
714
+ }
715
+ },
716
+ "ENFP": {
717
+ "성격": "열정적이고 창의적인 사고를 가진 사람",
718
+ "직업": "예술가, 작가, 마케터",
719
+ "궁합": ["INTJ", "INFJ"],
720
+ "나쁜 궁합": ["ISTJ", "ISFJ"],
721
+ "궁합 설명": {
722
+ "INTJ": "INTJ는 ENFP의 창의적인 아이디어를 현실로 실현하는 데 도움을 줍니다.",
723
+ "INFJ": "INFJ는 ENFP의 열정을 이해하며, 함께 이상적인 목표를 추구할 수 있습니다."
724
+ },
725
+ "나쁜 궁합 설명": {
726
+ "ISTJ": "ISTJ는 전통적이고 실용적인 성향이 강해, ENFP의 창의적이고 모험적인 성향과 충돌할 수 있습니다.",
727
+ "ISFJ": "ISFJ는 사회적 규범을 중시하며, ENFP의 자유롭고 개방적인 성향과 맞지 않을 수 있습니다."
728
+ }
729
+ },
730
+ "ISTJ": {
731
+ "성격": "실용적이고 신뢰할 수 있는 관리인",
732
+ "직업": "회계사, 관리자, 공무원",
733
+ "궁합": ["ESFP", "ESTP"],
734
+ "나쁜 궁합": ["ENFP", "ENTP"],
735
+ "궁합 설명": {
736
+ "ESFP": "ESFP는 ISTJ의 실용적인 성향을 존중하며, 함께 현실적인 목표를 달성할 수 있습니다.",
737
+ "ESTP": "ESTP는 ISTJ의 조직적이고 계획적인 성향을 보완하며, 빠른 문제 해결에 도움을 줍니다."
738
+ },
739
+ "나쁜 궁합 설명": {
740
+ "ENFP": "ENFP는 창의적이고 자유로운 성향이 강해, ISTJ의 전통적이고 보수적인 성향과 충돌할 수 있습니다.",
741
+ "ENTP": "ENTP는 실험적이고 모험적인 성향이 강해, ISTJ의 실용적이고 신중한 성향과 맞지 않을 수 있습니다."
742
+ }
743
+ },
744
+ "ISFJ": {
745
+ "성격": "성실하고 배려심 깊은 보호자",
746
+ "직업": "간호사, 교사, 사회복지사",
747
+ "궁합": ["ESFP", "ESTP"],
748
+ "나쁜 궁합": ["ENTP", "ENFP"],
749
+ "궁합 설명": {
750
+ "ESFP": "ESFP는 ISFJ의 배려심과 성실함을 존중하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
751
+ "ESTP": "ESTP는 ISFJ의 세심한 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
752
+ },
753
+ "나쁜 궁합 설명": {
754
+ "ENTP": "ENTP는 실험적이고 비판적인 성향이 강해, ISFJ의 전통적이고 보호적인 성향과 충돌할 수 있습니다.",
755
+ "ENFP": "ENFP는 자유롭고 창의적인 성향이 강해, ISFJ의 조직적이고 보수적인 성향과 맞지 않을 수 있습니다."
756
+ }
757
+ },
758
+ "ESTJ": {
759
+ "성격": "실용적이고 조직적인 관리자",
760
+ "직업": "경영자, 군인, 공무원",
761
+ "궁합": ["ISTP", "INTP"],
762
+ "나쁜 궁합": ["INFP", "INFJ"],
763
+ "궁합 설명": {
764
+ "ISTP": "ISTP는 ESTJ의 조직적이고 실용적인 성향을 보완하며, ���께 효율적인 문제 해결을 도모할 수 있습니다.",
765
+ "INTP": "INTP는 ESTJ의 논리적 사고를 보완하며, 전략적인 목표 달성에 도움을 줍니다."
766
+ },
767
+ "나쁜 궁합 설명": {
768
+ "INFP": "INFP는 이상적이고 감정적인 성향이 강해, ESTJ의 실용적이고 논리적인 성향과 충돌할 수 있습니다.",
769
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTJ의 외향적이고 실용적인 성향과 맞지 않을 수 있습니다."
770
+ }
771
+ },
772
+ "ESFJ": {
773
+ "성격": "사교적이고 협력적인 지원자",
774
+ "직업": "교사, 간호사, 이벤트 플래너",
775
+ "궁합": ["ISFP", "ISTP"],
776
+ "나쁜 궁합": ["INTP", "INTJ"],
777
+ "궁합 설명": {
778
+ "ISFP": "ISFP는 ESFJ의 배려심을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
779
+ "ISTP": "ISTP는 ESFJ의 세심함을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
780
+ },
781
+ "나쁜 궁합 설명": {
782
+ "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ESFJ의 감정적이고 사교적인 성향과 충돌할 수 있습니다.",
783
+ "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESFJ의 즉각적인 행동과 맞지 않을 수 있습니다."
784
+ }
785
+ },
786
+ "ISTP": {
787
+ "성격": "유연하고 창의적인 문제 해결사",
788
+ "직업": "엔지니어, 기술자, 파일럿",
789
+ "궁합": ["ESFJ", "ESTJ"],
790
+ "나쁜 궁합": ["ENFJ", "ESFP"],
791
+ "궁합 설명": {
792
+ "ESFJ": "ESFJ는 ISTP의 창의적인 문제 해결 능력을 존중하며, 함께 실용적인 목표를 달성할 수 있습니다.",
793
+ "ESTJ": "ESTJ는 ISTP의 유연함을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
794
+ },
795
+ "나쁜 궁합 설명": {
796
+ "ENFJ": "ENFJ는 감정적이고 사교적인 성향이 강해, ISTP의 논리적이고 독립적인 성향과 충돌할 수 있습니다.",
797
+ "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, ISTP의 신중하고 분석적인 성향과 맞지 않을 수 있습니다."
798
+ }
799
+ },
800
+ "ISFP": {
801
+ "성격": "예술적이고 감각적인 장인",
802
+ "직업": "디자이너, 예술가, 음악가",
803
+ "궁합": ["ESFJ", "ESTJ"],
804
+ "나쁜 궁합": ["ENTJ", "ENTP"],
805
+ "궁합 설명": {
806
+ "ESFJ": "ESFJ는 ISFP의 감정적이고 예술적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
807
+ "ESTJ": "ESTJ는 ISFP의 유연함을 보완하며, 실용적인 문제 해결에 도움을 줍니다."
808
+ },
809
+ "나쁜 궁합 설명": {
810
+ "ENTJ": "ENTJ는 논리적이고 계획적인 성향이 강해, ISFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
811
+ "ENTP": "ENTP는 비판적이고 실험적인 성향이 강해, ISFP의 감정적이고 예술적인 성향과 맞지 않을 수 있습니다."
812
+ }
813
+ },
814
+ "ESTP": {
815
+ "성격": "모험적이고 즉흥적인 활동가",
816
+ "직업": "기업가, 운동선수, 경찰",
817
+ "궁합": ["ISFJ", "ISTJ"],
818
+ "나쁜 궁합": ["INFJ", "INTJ"],
819
+ "궁합 설명": {
820
+ "ISFJ": "ISFJ는 ESTP의 활동적이고 모험적인 성향을 이해하며, 함께 현실적인 목표를 달성할 수 있습니다.",
821
+ "ISTJ": "ISTJ는 ESTP의 즉흥적인 성향을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
822
+ },
823
+ "나쁜 궁합 설명": {
824
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTP의 외향적이고 즉흥적인 성향과 충돌할 수 있습니다.",
825
+ "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESTP의 즉각적인 행동과 맞지 않을 수 있습니다."
826
+ }
827
+ },
828
+ "ESFP": {
829
+ "성격": "사교적이고 열정적인 연예인",
830
+ "직업": "배우, 연예인, 이벤트 플래너",
831
+ "궁합": ["ISFJ", "ISTJ"],
832
+ "나쁜 궁합": ["INTJ", "INFJ"],
833
+ "궁합 설명": {
834
+ "ISFJ": "ISFJ는 ESFP의 활발하고 사교적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
835
+ "ISTJ": "ISTJ는 ESFP의 즉흥적인 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
836
+ },
837
+ "나쁜 궁합 설명": {
838
+ "INTJ": "INTJ는 논리적이고 계획적인 성향이 강해, ESFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
839
+ "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESFP의 외향적이고 활동적인 성향과 맞지 않을 수 있습니다."
840
+ }
841
+ }
842
+ };
843
+
844
+ // (Python) calculate_mbti_responses의 로직을 JS로 흉내냄
845
+ // 실제로는 난수 발생 범위가 동일하게 되도록 임의로 구현
846
+ function calculateMBTI(responses) {
847
+ // 16가지 유형 스코어(0으로 초기화)
848
+ let scores = new Array(16).fill(0);
849
+ // MBTI 키 배열 (고정된 순서)
850
+ const mbtiKeys = Object.keys(mbti_types);
851
+
852
+ // "매우 그렇다" -> +[5..9] (랜덤), "그렇다" -> +[2..4], etc.
853
+ // 파이썬 난수 로직과 유사하게 구현
854
+ function getRandomInt(min, max) {
855
+ return Math.floor(Math.random() * (max - min + 1)) + min;
856
+ }
857
+
858
+ responses.forEach(ans => {
859
+ let deltaArr = new Array(16).fill(0);
860
+ if (ans === "매우 그렇다") {
861
+ for (let i=0; i<16; i++) {
862
+ deltaArr[i] = getRandomInt(5, 9);
863
+ }
864
+ } else if (ans === "그렇다") {
865
+ for (let i=0; i<16; i++) {
866
+ deltaArr[i] = getRandomInt(2, 4);
867
+ }
868
+ } else if (ans === "보통이다") {
869
+ for (let i=0; i<16; i++) {
870
+ deltaArr[i] = getRandomInt(0, 1);
871
+ }
872
+ } else if (ans === "아니다") {
873
+ for (let i=0; i<16; i++) {
874
+ deltaArr[i] = -getRandomInt(2, 4);
875
+ }
876
+ } else if (ans === "매우 아니다") {
877
+ for (let i=0; i<16; i++) {
878
+ deltaArr[i] = -getRandomInt(5, 9);
879
+ }
880
+ }
881
+ // 합산
882
+ for (let i=0; i<16; i++) {
883
+ scores[i] += deltaArr[i];
884
+ }
885
+ });
886
+
887
+ // 최댓값 인덱스 찾기
888
+ let bestMatchIndex = 0;
889
+ for (let i=1; i<16; i++) {
890
+ if (scores[i] > scores[bestMatchIndex]) {
891
+ bestMatchIndex = i;
892
+ }
893
+ }
894
+ // 두 번째로 높은 점수
895
+ let sortedIndices = [...scores.keys()].sort((a,b) => scores[a] - scores[b]);
896
+ let secondBestIndex = sortedIndices[14]; // 마지막이 best, 그 이전이 second best
897
+
898
+ let scoreDiff = scores[bestMatchIndex] - scores[secondBestIndex];
899
+
900
+ // 신뢰도 계산
901
+ let percentage = 0;
902
+ if (scoreDiff > 15) {
903
+ percentage = 95 + getRandomInt(0, 4);
904
+ } else if (scoreDiff > 10) {
905
+ percentage = 85 + getRandomInt(0, 9);
906
+ } else if (scoreDiff > 5) {
907
+ percentage = 75 + getRandomInt(0, 9);
908
+ } else {
909
+ percentage = 60 + getRandomInt(0, 14);
910
+ }
911
+
912
+ let bestType = mbtiKeys[bestMatchIndex];
913
+ return [bestType, percentage];
914
+ }
915
+
916
+ // 폼 전송 시 결과 계산
917
+ const quizForm = document.getElementById('quizForm');
918
+ const questionPages = document.querySelectorAll('.question-page');
919
+ const resultPage = document.querySelector('.result-page');
920
+ const finalResultElem = document.querySelector('.final-result');
921
+ const finalImageElem = document.querySelector('.final-image');
922
+
923
+ // 페이지 이동 버튼들
924
+ const nextButtons = document.querySelectorAll('.next-btn');
925
+ const prevButtons = document.querySelectorAll('.prev-btn');
926
+
927
+ nextButtons.forEach(btn => {
928
+ btn.addEventListener('click', () => {
929
+ const nextPage = btn.dataset.next;
930
+ showPage(nextPage);
931
+ });
932
+ });
933
+ prevButtons.forEach(btn => {
934
+ btn.addEventListener('click', () => {
935
+ const prevPage = btn.dataset.prev;
936
+ showPage(prevPage);
937
+ });
938
+ });
939
+
940
+ function showPage(pageNum) {
941
+ questionPages.forEach(p => {
942
+ p.style.display = (p.dataset.page === pageNum) ? 'block' : 'none';
943
+ });
944
+ resultPage.style.display = 'none';
945
+ }
946
+
947
+ // 폼 submit -> 결과 계산
948
+ quizForm.addEventListener('submit', (e) => {
949
+ e.preventDefault();
950
+ // 각 문항의 값 수집
951
+ let answers = [];
952
+ for (let i=1; i<=20; i++){
953
+ const val = quizForm[`q${i}`].value;
954
+ answers.push(val);
955
+ }
956
+ // MBTI 계산
957
+ const [mbtiType, percentage] = calculateMBTI(answers);
958
+ const typeData = mbti_types[mbtiType];
959
+
960
+ let outputText = `당신의 MBTI 유형은 ${mbtiType}입니다. 신뢰도: ${percentage.toFixed(2)}%\n\n`;
961
+ outputText += `성격 설명: ${typeData["성격"]}\n`;
962
+ outputText += `추천 직업: ${typeData["직업"]}\n\n`;
963
+ outputText += `좋은 궁합:\n`;
964
+ typeData["궁합"].forEach(g=>{
965
+ outputText += `- ${g}: ${typeData["궁합 설명"][g]}\n`;
966
+ });
967
+ outputText += `\n나쁜 궁합:\n`;
968
+ typeData["나쁜 궁합"].forEach(b=>{
969
+ outputText += `- ${b}: ${typeData["나쁜 궁합 설명"][b]}\n`;
970
+ });
971
+
972
+ finalResultElem.textContent = outputText;
973
+ finalImageElem.style.display = 'none';
974
+ finalImageElem.src = `./${mbtiType}.webp`;
975
+
976
+ // 혹시 해당 MBTI 유형의 웹프 이미지가 있다면 아래처럼 표시
977
+ // 이미지가 실제로 있는 환경이라면 로드 후 display:block
978
+ finalImageElem.onerror = () => {
979
+ // 이미지가 없으면 숨김
980
+ finalImageElem.style.display = 'none';
981
+ };
982
+ finalImageElem.onload = () => {
983
+ finalImageElem.style.display = 'block';
984
+ };
985
+
986
+ // 결과 화면 표시
987
+ questionPages.forEach(p => p.style.display = 'none');
988
+ resultPage.style.display = 'block';
989
+ window.scrollTo({ top: 0, behavior: 'smooth' });
990
+ });
991
+
992
+ // 다시하기
993
+ const restartBtn = document.querySelector('.restart-btn');
994
+ restartBtn.addEventListener('click', () => {
995
+ quizForm.reset();
996
+ showPage('1');
997
+ window.scrollTo({ top: 0, behavior: 'smooth' });
998
+ });
999
+ </script>
1000
+ </body>
1001
+ </html>