Update index.html
Browse files- 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>
|