Update index.html

index.html

@@ -134,4 +134,868 @@ mbti_types = {
         },
         "나쁜 궁합 설명": {
             "ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.",
-            "INTP
+            "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ENFJ의 감정적이고 사교적인 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ENFP": {
+        "성격": "열정적이고 창의적인 사고를 가진 사람",
+        "직업": "예술가, 작가, 마케터",
+        "궁합": ["INTJ", "INFJ"],
+        "나쁜 궁합": ["ISTJ", "ISFJ"],
+        "궁합 설명": {
+            "INTJ": "INTJ는 ENFP의 창의적인 아이디어를 현실로 실현하는 데 도움을 줍니다.",
+            "INFJ": "INFJ는 ENFP의 열정을 이해하며, 함께 이상적인 목표를 추구할 수 있습니다."
+        },
+        "나쁜 궁합 설명": {
+            "ISTJ": "ISTJ는 전통적이고 실용적인 성향이 강해, ENFP의 창의적이고 모험적인 성향과 충돌할 수 있습니다.",
+            "ISFJ": "ISFJ는 사회적 규범을 중시하며, ENFP의 자유롭고 개방적인 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ISTJ": {
+        "성격": "실용적이고 신뢰할 수 있는 관리인",
+        "직업": "회계사, 관리자, 공무원",
+        "궁합": ["ESFP", "ESTP"],
+        "나쁜 궁합": ["ENFP", "ENTP"],
+        "궁합 설명": {
+            "ESFP": "ESFP는 ISTJ의 실용적인 성향을 존중하며, 함께 현실적인 목표를 달성할 수 있습니다.",
+            "ESTP": "ESTP는 ISTJ의 조직적이고 계획적인 성향을 보완하며, 빠른 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "ENFP": "ENFP는 창의적이고 자유로운 성향이 강해, ISTJ의 전통적이고 보수적인 성향과 충돌할 수 있습니다.",
+            "ENTP": "ENTP는 실험적이고 모험적인 성향이 강해, ISTJ의 실용적이고 신중한 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ISFJ": {
+        "성격": "성실하고 배려심 깊은 보호자",
+        "직업": "간호사, 교사, 사회복지사",
+        "궁합": ["ESFP", "ESTP"],
+        "나쁜 궁합": ["ENTP", "ENFP"],
+        "궁합 설명": {
+            "ESFP": "ESFP는 ISFJ의 배려심과 성실함을 존중하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+            "ESTP": "ESTP는 ISFJ의 세심한 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "ENTP": "ENTP는 실험적이고 비판적인 성향이 강해, ISFJ의 전통적이고 보호적인 성향과 충돌할 수 있습니다.",
+            "ENFP": "ENFP는 자유롭고 창의적인 성향이 강해, ISFJ의 조직적이고 보수적인 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ESTJ": {
+        "성격": "실용적이고 조직적인 관리자",
+        "직업": "경영자, 군인, 공무원",
+        "궁합": ["ISTP", "INTP"],
+        "나쁜 궁합": ["INFP", "INFJ"],
+        "궁합 설명": {
+            "ISTP": "ISTP는 ESTJ의 조직적이고 실용적인 성향을 보완하며, 함께 효율적인 문제 해결을 도모할 수 있습니다.",
+            "INTP": "INTP는 ESTJ의 논리적 사고를 보완하며, 전략적인 목표 달성에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "INFP": "INFP는 이상적이고 감정적인 성향이 강해, ESTJ의 실용적이고 논리적인 성향과 충돌할 수 있습니다.",
+            "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTJ의 외향적이고 실용적인 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ESFJ": {
+        "성격": "사교적이고 협력적인 지원자",
+        "직업": "교사, 간호사, 이벤트 플래너",
+        "궁합": ["ISFP", "ISTP"],
+        "나쁜 궁합": ["INTP", "INTJ"],
+        "궁합 설명": {
+            "ISFP": "ISFP는 ESFJ의 배려심을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+            "ISTP": "ISTP는 ESFJ의 세심함을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ESFJ의 감정적이고 사교적인 성향과 충돌할 수 있습니다.",
+            "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESFJ의 즉각적인 행동과 맞지 않을 수 있습니다."
+        }
+    },
+    "ISTP": {
+        "성격": "유연하고 창의적인 문제 해결사",
+        "직업": "엔지니어, 기술자, 파일럿",
+        "궁합": ["ESFJ", "ESTJ"],
+        "나쁜 궁합": ["ENFJ", "ESFP"],
+        "궁합 설명": {
+            "ESFJ": "ESFJ는 ISTP의 창의적인 문제 해결 능력을 존중하며, 함께 실용적인 목표를 달성할 수 있습니다.",
+            "ESTJ": "ESTJ는 ISTP의 유연함을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "ENFJ": "ENFJ는 감정적이고 사교적인 성향이 강해, ISTP의 논리적이고 독립적인 성향과 충돌할 수 있습니다.",
+            "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, ISTP의 신중하고 분석적인 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ISFP": {
+        "성격": "예술적이고 감각적인 장인",
+        "직업": "디자이너, 예술가, 음악가",
+        "궁합": ["ESFJ", "ESTJ"],
+        "나쁜 궁합": ["ENTJ", "ENTP"],
+        "궁합 설명": {
+            "ESFJ": "ESFJ는 ISFP의 감정적이고 예술적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+            "ESTJ": "ESTJ는 ISFP의 유연함을 보완하며, 실용적인 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "ENTJ": "ENTJ는 논리적이고 계획적인 성향이 강해, ISFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
+            "ENTP": "ENTP는 비판적이고 실험적인 성향이 강해, ISFP의 감정적이고 예술적인 성향과 맞지 않을 수 있습니다."
+        }
+    },
+    "ESTP": {
+        "성격": "모험적이고 즉흥적인 활동가",
+        "직업": "기업가, 운동선수, 경찰",
+        "궁합": ["ISFJ", "ISTJ"],
+        "나쁜 궁합": ["INFJ", "INTJ"],
+        "궁합 설명": {
+            "ISFJ": "ISFJ는 ESTP의 활동적이고 모험적인 성향을 이해하며, 함께 현실적인 목표를 달성할 수 있습니다.",
+            "ISTJ": "ISTJ는 ESTP의 즉흥적인 성향을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTP의 외향적이고 즉흥적인 성향과 충돌할 수 있습니다.",
+            "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESTP의 즉각적인 행동과 맞지 않을 수 있습니다."
+        }
+    },
+    "ESFP": {
+        "성격": "사교적이고 열정적인 연예인",
+        "직업": "배우, 연예인, 이벤트 플래너",
+        "궁합": ["ISFJ", "ISTJ"],
+        "나쁜 궁합": ["INTJ", "INFJ"],
+        "궁합 설명": {
+            "ISFJ": "ISFJ는 ESFP의 활발하고 사교적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+            "ISTJ": "ISTJ는 ESFP의 즉흥적인 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
+        },
+        "나쁜 궁합 설명": {
+            "INTJ": "INTJ는 논리적이고 계획적인 성향이 강해, ESFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
+            "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESFP의 외향적이고 활동적인 성향과 맞지 않을 수 있습니다."
+        }
+    }
+}
+
+def calculate_mbti_responses(responses):
+    scores = np.zeros(16)  # 16가지 MBTI 유형에 대한 점수
+    for i, response in enumerate(responses):
+        if response == "매우 그렇다":
+            scores += np.random.randint(5, 10, size=16)
+        elif response == "그렇다":
+            scores += np.random.randint(2, 5, size=16)
+        elif response == "보통이다":
+            scores += np.random.randint(0, 2, size=16)
+        elif response == "아니다":
+            scores -= np.random.randint(2, 5, size=16)
+        elif response == "매우 아니다":
+            scores -= np.random.randint(5, 10, size=16)
+    
+    best_match_index = np.argmax(scores)
+    second_best_match_index = np.argsort(scores)[-2]  # 두 번째로 높은 점수의 인덱스
+    
+    score_difference = scores[best_match_index] - scores[second_best_match_index]
+    
+    # 신뢰도 계산
+    if score_difference > 15:
+        percentage = 95 + np.random.randint(0, 5)
+    elif score_difference > 10:
+        percentage = 85 + np.random.randint(0, 10)
+    elif score_difference > 5:
+        percentage = 75 + np.random.randint(0, 10)
+    else:
+        percentage = 60 + np.random.randint(0, 15)
+
+    best_match_type = list(mbti_types.keys())[best_match_index]
+    return best_match_type, percentage
+
+
+def mbti_quiz(*responses):
+    mbti_type, percentage = calculate_mbti_responses(responses)
+    result = f"당신의 MBTI 유형은 {mbti_type}입니다. 신뢰도: {percentage:.2f}%"
+    details = mbti_types[mbti_type]
+    result += f"\\n\\n성격 설명: {details['성격']}"
+    result += f"\\n추천 직업: {details['직업']}"
+
+    # 좋은 궁합 설명
+    good_matches = details['궁합']
+    good_explanations = details['궁합 설명']
+    result += f"\\n\\n좋은 궁합:"
+    for match in good_matches:
+        result += f"\\n- {match}: {good_explanations[match]}"
+
+    # 나쁜 궁합 설명
+    bad_matches = details['나쁜 궁합']
+    bad_explanations = details['나쁜 궁합 설명']
+    result += f"\\n\\n나쁜 궁합:"
+    for match in bad_matches:
+        result += f"\\n- {match}: {bad_explanations[match]}"
+
+    image_path = f"./{mbti_type}.webp"
+    
+    return result, image_path
+
+
+def display_results(text, image):
+    return text, image
+
+inputs = [gr.Radio(["매우 그렇다", "그렇다", "보통이다", "아니다", "매우 아니다"], label=question) for question in questions]
+output_text = gr.Textbox(label="MBTI 결과")
+output_image = gr.Image(label="유형 이미지")
+
+iface = gr.Interface(
+    fn=mbti_quiz,
+    inputs=inputs,
+    outputs=[output_text, output_image],
+    title="MBTI 성격 유형 테스트",
+    description="20개 이상의 질문을 통해 MBTI 성격 유형을 분석하세요."
+)
+iface.launch()
+-->
+
+<!-- 실제 HTML/JS 구현: 동일 기능(질문 -> 결과)을 5개씩 4단계로 나눈 뒤, 마지막에 결과 페이지를 표시 -->
+
+<div class="container">
+  <h1>MBTI 성격 유형 테스트</h1>
+  <p class="desc">
+    아래 질문에 답변해주세요. 각 단계마다 5개 문항씩 있습니다.
+  </p>
+
+  <!-- 질문 섹션들(5문항씩 4단계) -->
+  <form id="quizForm">
+    <!-- 1단계 질문 1~5 -->
+    <div class="question-page" data-page="1">
+      <h2>1단계 (문항 1~5)</h2>
+      <div class="question">
+        <p>1) 당신은 혼자 있을 때 에너지를 얻나요?</p>
+        <div>
+          <label><input type="radio" name="q1" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q1" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q1" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q1" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q1" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>2) 당신은 계획을 세우는 것을 좋아하나요?</p>
+        <div>
+          <label><input type="radio" name="q2" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q2" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q2" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q2" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q2" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>3) 당신은 새로운 상황에 쉽게 적응하나요?</p>
+        <div>
+          <label><input type="radio" name="q3" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q3" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q3" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q3" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q3" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>4) 당신은 감정보다는 논리에 더 의존하나요?</p>
+        <div>
+          <label><input type="radio" name="q4" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q4" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q4" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q4" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q4" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>5) 당신은 다른 사람을 돕는 것을 좋아하나요?</p>
+        <div>
+          <label><input type="radio" name="q5" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q5" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q5" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q5" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q5" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <button type="button" class="next-btn" data-next="2">다음 단계</button>
+    </div>
+
+    <!-- 2단계 질문 6~10 -->
+    <div class="question-page" data-page="2" style="display:none;">
+      <h2>2단계 (문항 6~10)</h2>
+      <div class="question">
+        <p>6) 당신은 사교적인 성격을 가지고 있나요?</p>
+        <div>
+          <label><input type="radio" name="q6" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q6" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q6" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q6" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q6" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>7) 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p>
+        <div>
+          <label><input type="radio" name="q7" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q7" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q7" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q7" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q7" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>8) 당신은 사실과 데이터를 중시하나요?</p>
+        <div>
+          <label><input type="radio" name="q8" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q8" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q8" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q8" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q8" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>9) 당신은 감정 표현을 잘 하나요?</p>
+        <div>
+          <label><input type="radio" name="q9" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q9" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q9" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q9" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q9" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>10) 당신은 문제를 해결할 때 창의적인 방법을 사용하나요?</p>
+        <div>
+          <label><input type="radio" name="q10" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q10" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q10" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q10" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q10" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <button type="button" class="prev-btn" data-prev="1">이전 단계</button>
+      <button type="button" class="next-btn" data-next="3">다음 단계</button>
+    </div>
+
+    <!-- 3단계 질문 11~15 -->
+    <div class="question-page" data-page="3" style="display:none;">
+      <h2>3단계 (문항 11~15)</h2>
+      <div class="question">
+        <p>11) 당신은 다른 사람들과의 협업을 선호하나요?</p>
+        <div>
+          <label><input type="radio" name="q11" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q11" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q11" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q11" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q11" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>12) 당신은 결정을 내릴 때 직감을 신뢰하나요?</p>
+        <div>
+          <label><input type="radio" name="q12" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q12" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q12" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q12" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q12" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>13) 당신은 규칙과 절차를 따르는 것을 좋아하나요?</p>
+        <div>
+          <label><input type="radio" name="q13" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q13" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q13" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q13" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q13" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>14) 당신은 주변 환경에 민감하게 반응하나요?</p>
+        <div>
+          <label><input type="radio" name="q14" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q14" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q14" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q14" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q14" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>15) 당신은 일을 처리할 때 효율성을 중시하나요?</p>
+        <div>
+          <label><input type="radio" name="q15" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q15" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q15" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q15" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q15" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <button type="button" class="prev-btn" data-prev="2">이전 단계</button>
+      <button type="button" class="next-btn" data-next="4">다음 단계</button>
+    </div>
+
+    <!-- 4단계 질문 16~20 -->
+    <div class="question-page" data-page="4" style="display:none;">
+      <h2>4단계 (문항 16~20)</h2>
+      <div class="question">
+        <p>16) 당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?</p>
+        <div>
+          <label><input type="radio" name="q16" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q16" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q16" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q16" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q16" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>17) 당신은 자연스럽게 리더 역할을 맡게 되나요?</p>
+        <div>
+          <label><input type="radio" name="q17" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q17" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q17" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q17" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q17" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>18) 당신은 새로운 아이디어를 제안하는 것을 좋아하나요?</p>
+        <div>
+          <label><input type="radio" name="q18" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q18" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q18" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q18" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q18" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>19) 당신은 대인 관계에서 갈등을 피하려 하나요?</p>
+        <div>
+          <label><input type="radio" name="q19" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q19" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q19" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q19" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q19" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <div class="question">
+        <p>20) 당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?</p>
+        <div>
+          <label><input type="radio" name="q20" value="매우 그렇다" required> 매우 그렇다</label>
+          <label><input type="radio" name="q20" value="그렇다"> 그렇다</label>
+          <label><input type="radio" name="q20" value="보통이다"> 보통이다</label>
+          <label><input type="radio" name="q20" value="아니다"> 아니다</label>
+          <label><input type="radio" name="q20" value="매우 아니다"> 매우 아니다</label>
+        </div>
+      </div>
+      <button type="button" class="prev-btn" data-prev="3">이전 단계</button>
+      <button type="submit" class="submit-btn">결과 확인</button>
+    </div>
+  </form>
+
+  <!-- 결과 화면 -->
+  <div class="result-page" style="display: none;">
+    <h2>결과</h2>
+    <p class="final-result"></p>
+    <img class="final-image" src="" alt="MBTI 이미지" style="max-width: 300px; display:none;" />
+    <button type="button" class="restart-btn">다시하��</button>
+  </div>
+</div>
+
+<script>
+  // 질문들 (20개) - 파이썬 코드의 questions 배열과 동일
+  const questions = [
+    "당신은 혼자 있을 때 에너지를 얻나요?",
+    "당신은 계획을 세우는 것을 좋아하나요?",
+    "당신은 새로운 상황에 쉽게 적응하나요?",
+    "당신은 감정보다는 논리에 더 의존하나요?",
+    "당신은 다른 사람을 돕는 것을 좋아하나요?",
+    "당신은 사교적인 성격을 가지고 있나요?",
+    "당신은 일을 끝내기 전에 계획을 세우는 편인가요?",
+    "당신은 사실과 데이터를 중시하나요?",
+    "당신은 감정 표현을 잘 하나요?",
+    "당신은 문제를 해결할 때 창의적인 방법을 사용하나요?",
+    "당신은 다른 사람들과의 협업을 선호하나요?",
+    "당신은 결정을 내릴 때 직감을 신뢰하나요?",
+    "당신은 규칙과 절차를 따르는 것을 좋아하나요?",
+    "당신은 주변 환경에 민감하게 반응하나요?",
+    "당신은 일을 처리할 때 효율성을 중시하나요?",
+    "당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?",
+    "당신은 자연스럽게 리더 역할을 맡게 되나요?",
+    "당신은 새로운 아이디어를 제안하는 것을 좋아하나요?",
+    "당신은 대인 관계에서 갈등을 피하려 하나요?",
+    "당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?"
+  ];
+
+  // MBTI 유형 데이터 - 파이썬 코드의 mbti_types와 동일 구조
+  const mbti_types = {
+    "INTJ": {
+      "성격": "독창적이고 전략적인 사고를 가진 조용한 리더",
+      "직업": "과학자, 엔지니어, 데이터 분석가",
+      "궁합": ["ENFP", "ENTP"],
+      "나쁜 궁합": ["ESFP", "ESTP"],
+      "궁합 설명": {
+        "ENFP": "ENFP는 INTJ의 이상주의를 자극하고, 서로의 강점과 약점을 보완합니다.",
+        "ENTP": "ENTP는 INTJ의 창의성과 전략적 사고를 자극하여 생산적인 파트너십을 형성합니다."
+      },
+      "나쁜 궁합 설명": {
+        "ESFP": "ESFP는 INTJ와 정반대의 성향을 가지고 있어 갈등이 잦을 수 있습니다.",
+        "ESTP": "ESTP는 실용적인 접근을 선호하는 반면, INTJ는 장기적인 계획을 중시합니다."
+      }
+    },
+    "INTP": {
+      "성격": "논리적이고 분석적인 사고를 가진 혁신가",
+      "직업": "연구원, 프로그래머, 철학자",
+      "궁합": ["ENTJ", "ESTJ"],
+      "나쁜 궁합": ["ESFJ", "ESTP"],
+      "궁합 설명": {
+        "ENTJ": "ENTJ는 INTP의 분석적 사고를 촉진하고 함께 전략적인 목표를 달성할 수 있습니다.",
+        "ESTJ": "ESTJ는 INTP의 논리적 접근을 존중하며 실용적인 해결책을 찾는 데 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ESFJ": "ESFJ는 감정적인 결정을 중시하는 반면, INTP는 논리를 중시하여 갈등이 생길 수 있습니다.",
+        "ESTP": "ESTP는 즉각적인 행동을 선호하며, INTP의 깊은 사고와는 충돌할 수 있습니다."
+      }
+    },
+    "ENTJ": {
+      "성격": "대담하고 결단력 있는 리더",
+      "직업": "기업가, 경영자, 변호사",
+      "궁합": ["INTP", "INTJ"],
+      "나쁜 궁합": ["INFP", "ISFP"],
+      "궁합 설명": {
+        "INTP": "INTP는 ENTJ의 전략적 사고를 보완하며, 논리적 접근을 통해 문제 해결에 도움을 줍니다.",
+        "INTJ": "INTJ는 ENTJ와 함께 장기적인 목표를 설정하고, 실행할 수 있는 강력한 파트너가 됩니다."
+      },
+      "나쁜 궁합 설명": {
+        "INFP": "INFP는 감정적 접근을 선호하며, ENTJ의 냉정한 논리적 접근과 충돌할 수 있습니다.",
+        "ISFP": "ISFP는 즉흥적이고 감정적인 경향이 있어, ENTJ의 체계적이고 논리적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ENTP": {
+      "성격": "창의적이고 논쟁을 즐기는 비평가",
+      "직업": "마케터, 변호사, 기자",
+      "궁합": ["INFJ", "INTJ"],
+      "나쁜 궁합": ["ISFJ", "ISTJ"],
+      "궁합 설명": {
+        "INFJ": "INFJ는 ENTP의 창의적 사고를 이해하며, 이상적인 목표 설정을 도와줍니다.",
+        "INTJ": "INTJ는 ENTP와 함께 혁신적인 아이디어를 실현하는 데 강력한 파트너가 됩니다."
+      },
+      "나쁜 궁합 설명": {
+        "ISFJ": "ISFJ는 전통적이고 보수적인 성향이 강해, ENTP의 혁신적이고 비판적인 사고와 충돌할 수 있습니다.",
+        "ISTJ": "ISTJ는 실용적인 접근을 선호하며, ENTP의 실험적이고 모험적인 성향과 갈등이 있을 수 있습니다."
+      }
+    },
+    "INFJ": {
+      "성격": "통찰력 있고 헌신적인 이상주의자",
+      "직업": "상담사, 심리학자, 작가",
+      "궁합": ["ENFP", "ENTP"],
+      "나쁜 궁합": ["ESTP", "ESFP"],
+      "궁�� 설명": {
+        "ENFP": "ENFP는 INFJ의 이상주의와 깊은 감정을 이해하고 이를 격려합니다.",
+        "ENTP": "ENTP는 INFJ의 창의성을 자극하고, 혁신적인 아이디어를 실현하는 데 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ESTP": "ESTP는 즉각적인 행동을 선호하며, INFJ의 깊은 사고와 감정적 접근과 충돌할 수 있습니다.",
+        "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, INFJ의 내성적이고 계획적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "INFP": {
+      "성격": "이상적이고 충실한 중재자",
+      "직업": "예술가, 작가, 상담사",
+      "궁합": ["ENFJ", "ENTJ"],
+      "나쁜 궁합": ["ESTJ", "ESFJ"],
+      "궁합 설명": {
+        "ENFJ": "ENFJ는 INFP의 이상주의를 격려하고, 함께 더 나은 세상을 만들기 위해 노력합니다.",
+        "ENTJ": "ENTJ는 INFP의 이상을 현실로 만들기 위해 논리적이고 전략적인 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ESTJ": "ESTJ는 실용적이고 조직적인 성향이 강해, INFP의 이상적이고 감정적인 성향과 충돌할 수 있습니다.",
+        "ESFJ": "ESFJ는 사회적 규범을 중시하며, INFP의 개성과 독립성을 존중하지 않을 수 있습니다."
+      }
+    },
+    "ENFJ": {
+      "성격": "카리스마 있고 사교적인 리더",
+      "직업": "교사, 정치인, 사회운동가",
+      "궁합": ["INFP", "INFJ"],
+      "나쁜 궁합": ["ISTP", "INTP"],
+      "궁합 설명": {
+        "INFP": "INFP는 ENFJ의 감정적 깊이와 이상주의를 이해하며, 함께 의미 있는 목표를 추구합니다.",
+        "INFJ": "INFJ는 ENFJ와 함께 사람들을 돕고, 세상을 더 나은 곳으로 만드는 데 협력할 수 있습니다."
+      },
+      "나쁜 궁합 설명": {
+        "ISTP": "ISTP는 논리적이고 즉흥적인 성향이 강해, ENFJ의 감정적이고 계획적인 성향과 충돌할 수 있습니다.",
+        "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ENFJ의 감정적이고 사교적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ENFP": {
+      "성격": "열정적이고 창의적인 사고를 가진 사람",
+      "직업": "예술가, 작가, 마케터",
+      "궁합": ["INTJ", "INFJ"],
+      "나쁜 궁합": ["ISTJ", "ISFJ"],
+      "궁합 설명": {
+        "INTJ": "INTJ는 ENFP의 창의적인 아이디어를 현실로 실현하는 데 도움을 줍니다.",
+        "INFJ": "INFJ는 ENFP의 열정을 이해하며, 함께 이상적인 목표를 추구할 수 있습니다."
+      },
+      "나쁜 궁합 설명": {
+        "ISTJ": "ISTJ는 전통적이고 실용적인 성향이 강해, ENFP의 창의적이고 모험적인 성향과 충돌할 수 있습니다.",
+        "ISFJ": "ISFJ는 사회적 규범을 중시하며, ENFP의 자유롭고 개방적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ISTJ": {
+      "성격": "실용적이고 신뢰할 수 있는 관리인",
+      "직업": "회계사, 관리자, 공무원",
+      "궁합": ["ESFP", "ESTP"],
+      "나쁜 궁합": ["ENFP", "ENTP"],
+      "궁합 설명": {
+        "ESFP": "ESFP는 ISTJ의 실용적인 성향을 존중하며, 함께 현실적인 목표를 달성할 수 있습니다.",
+        "ESTP": "ESTP는 ISTJ의 조직적이고 계획적인 성향을 보완하며, 빠른 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ENFP": "ENFP는 창의적이고 자유로운 성향이 강해, ISTJ의 전통적이고 보수적인 성향과 충돌할 수 있습니다.",
+        "ENTP": "ENTP는 실험적이고 모험적인 성향이 강해, ISTJ의 실용적이고 신중한 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ISFJ": {
+      "성격": "성실하고 배려심 깊은 보호자",
+      "직업": "간호사, 교사, 사회복지사",
+      "궁합": ["ESFP", "ESTP"],
+      "나쁜 궁합": ["ENTP", "ENFP"],
+      "궁합 설명": {
+        "ESFP": "ESFP는 ISFJ의 배려심과 성실함을 존중하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+        "ESTP": "ESTP는 ISFJ의 세심한 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ENTP": "ENTP는 실험적이고 비판적인 성향이 강해, ISFJ의 전통적이고 보호적인 성향과 충돌할 수 있습니다.",
+        "ENFP": "ENFP는 자유롭고 창의적인 성향이 강해, ISFJ의 조직적이고 보수적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ESTJ": {
+      "성격": "실용적이고 조직적인 관리자",
+      "직업": "경영자, 군인, 공무원",
+      "궁합": ["ISTP", "INTP"],
+      "나쁜 궁합": ["INFP", "INFJ"],
+      "궁합 설명": {
+        "ISTP": "ISTP는 ESTJ의 조직적이고 실용적인 성향을 보완하며, ���께 효율적인 문제 해결을 도모할 수 있습니다.",
+        "INTP": "INTP는 ESTJ의 논리적 사고를 보완하며, 전략적인 목표 달성에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "INFP": "INFP는 이상적이고 감정적인 성향이 강해, ESTJ의 실용적이고 논리적인 성향과 충돌할 수 있습니다.",
+        "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTJ의 외향적이고 실용적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ESFJ": {
+      "성격": "사교적이고 협력적인 지원자",
+      "직업": "교사, 간호사, 이벤트 플래너",
+      "궁합": ["ISFP", "ISTP"],
+      "나쁜 궁합": ["INTP", "INTJ"],
+      "궁합 설명": {
+        "ISFP": "ISFP는 ESFJ의 배려심을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+        "ISTP": "ISTP는 ESFJ의 세심함을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "INTP": "INTP는 논리적이고 분석적인 성향이 강해, ESFJ의 감정적이고 사교적인 성향과 충돌할 수 있습니다.",
+        "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESFJ의 즉각적인 행동과 맞지 않을 수 있습니다."
+      }
+    },
+    "ISTP": {
+      "성격": "유연하고 창의적인 문제 해결사",
+      "직업": "엔지니어, 기술자, 파일럿",
+      "궁합": ["ESFJ", "ESTJ"],
+      "나쁜 궁합": ["ENFJ", "ESFP"],
+      "궁합 설명": {
+        "ESFJ": "ESFJ는 ISTP의 창의적인 문제 해결 능력을 존중하며, 함께 실용적인 목표를 달성할 수 있습니다.",
+        "ESTJ": "ESTJ는 ISTP의 유연함을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ENFJ": "ENFJ는 감정적이고 사교적인 성향이 강해, ISTP의 논리적이고 독립적인 성향과 충돌할 수 있습니다.",
+        "ESFP": "ESFP는 즉흥적이고 외향적인 성향이 강해, ISTP의 신중하고 분석적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ISFP": {
+      "성격": "예술적이고 감각적인 장인",
+      "직업": "디자이너, 예술가, 음악가",
+      "궁합": ["ESFJ", "ESTJ"],
+      "나쁜 궁합": ["ENTJ", "ENTP"],
+      "궁합 설명": {
+        "ESFJ": "ESFJ는 ISFP의 감정적이고 예술적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+        "ESTJ": "ESTJ는 ISFP의 유연함을 보완하며, 실용적인 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "ENTJ": "ENTJ는 논리적이고 계획적인 성향이 강해, ISFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
+        "ENTP": "ENTP는 비판적이고 실험적인 성향이 강해, ISFP의 감정적이고 예술적인 성향과 맞지 않을 수 있습니다."
+      }
+    },
+    "ESTP": {
+      "성격": "모험적이고 즉흥적인 활동가",
+      "직업": "기업가, 운동선수, 경찰",
+      "궁합": ["ISFJ", "ISTJ"],
+      "나쁜 궁합": ["INFJ", "INTJ"],
+      "궁합 설명": {
+        "ISFJ": "ISFJ는 ESTP의 활동적이고 모험적인 성향을 이해하며, 함께 현실적인 목표를 달성할 수 있습니다.",
+        "ISTJ": "ISTJ는 ESTP의 즉흥적인 성향을 보완하며, 체계적인 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESTP의 외향적이고 즉흥적인 성향과 충돌할 수 있습니다.",
+        "INTJ": "INTJ는 전략적이고 장기적인 계획을 중시하여, ESTP의 즉각적인 행동과 맞지 않을 수 있습니다."
+      }
+    },
+    "ESFP": {
+      "성격": "사교적이고 열정적인 연예인",
+      "직업": "배우, 연예인, 이벤트 플래너",
+      "궁합": ["ISFJ", "ISTJ"],
+      "나쁜 궁합": ["INTJ", "INFJ"],
+      "궁합 설명": {
+        "ISFJ": "ISFJ는 ESFP의 활발하고 사교적인 성향을 이해하며, 함께 따뜻한 인간관계를 유지할 수 있습니다.",
+        "ISTJ": "ISTJ는 ESFP의 즉흥적인 성향을 보완하며, 현실적인 문제 해결에 도움을 줍니다."
+      },
+      "나쁜 궁합 설명": {
+        "INTJ": "INTJ는 논리적이고 계획적인 성향이 강해, ESFP의 즉흥적이고 감정적인 성향과 충돌할 수 있습니다.",
+        "INFJ": "INFJ는 감정적이고 내성적인 성향이 강해, ESFP의 외향적이고 활동적인 성향과 맞지 않을 수 있습니다."
+      }
+    }
+  };
+
+  // (Python) calculate_mbti_responses의 로직을 JS로 흉내냄
+  // 실제로는 난수 발생 범위가 동일하게 되도록 임의로 구현
+  function calculateMBTI(responses) {
+    // 16가지 유형 스코어(0으로 초기화)
+    let scores = new Array(16).fill(0);
+    // MBTI 키 배열 (고정된 순서)
+    const mbtiKeys = Object.keys(mbti_types); 
+
+    // "매우 그렇다" -> +[5..9] (랜덤), "그렇다" -> +[2..4], etc.
+    // 파이썬 난수 로직과 유사하게 구현
+    function getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    responses.forEach(ans => {
+      let deltaArr = new Array(16).fill(0);
+      if (ans === "매우 그렇다") {
+        for (let i=0; i<16; i++) {
+          deltaArr[i] = getRandomInt(5, 9);
+        }
+      } else if (ans === "그렇다") {
+        for (let i=0; i<16; i++) {
+          deltaArr[i] = getRandomInt(2, 4);
+        }
+      } else if (ans === "보통이다") {
+        for (let i=0; i<16; i++) {
+          deltaArr[i] = getRandomInt(0, 1);
+        }
+      } else if (ans === "아니다") {
+        for (let i=0; i<16; i++) {
+          deltaArr[i] = -getRandomInt(2, 4);
+        }
+      } else if (ans === "매우 아니다") {
+        for (let i=0; i<16; i++) {
+          deltaArr[i] = -getRandomInt(5, 9);
+        }
+      }
+      // 합산
+      for (let i=0; i<16; i++) {
+        scores[i] += deltaArr[i];
+      }
+    });
+
+    // 최댓값 인덱스 찾기
+    let bestMatchIndex = 0;
+    for (let i=1; i<16; i++) {
+      if (scores[i] > scores[bestMatchIndex]) {
+        bestMatchIndex = i;
+      }
+    }
+    // 두 번째로 높은 점수
+    let sortedIndices = [...scores.keys()].sort((a,b) => scores[a] - scores[b]);
+    let secondBestIndex = sortedIndices[14]; // 마지막이 best, 그 이전이 second best
+
+    let scoreDiff = scores[bestMatchIndex] - scores[secondBestIndex];
+
+    // 신뢰도 계산
+    let percentage = 0;
+    if (scoreDiff > 15) {
+      percentage = 95 + getRandomInt(0, 4);
+    } else if (scoreDiff > 10) {
+      percentage = 85 + getRandomInt(0, 9);
+    } else if (scoreDiff > 5) {
+      percentage = 75 + getRandomInt(0, 9);
+    } else {
+      percentage = 60 + getRandomInt(0, 14);
+    }
+
+    let bestType = mbtiKeys[bestMatchIndex];
+    return [bestType, percentage];
+  }
+
+  // 폼 전송 시 결과 계산
+  const quizForm = document.getElementById('quizForm');
+  const questionPages = document.querySelectorAll('.question-page');
+  const resultPage = document.querySelector('.result-page');
+  const finalResultElem = document.querySelector('.final-result');
+  const finalImageElem = document.querySelector('.final-image');
+
+  // 페이지 이동 버튼들
+  const nextButtons = document.querySelectorAll('.next-btn');
+  const prevButtons = document.querySelectorAll('.prev-btn');
+
+  nextButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const nextPage = btn.dataset.next;
+      showPage(nextPage);
+    });
+  });
+  prevButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const prevPage = btn.dataset.prev;
+      showPage(prevPage);
+    });
+  });
+
+  function showPage(pageNum) {
+    questionPages.forEach(p => {
+      p.style.display = (p.dataset.page === pageNum) ? 'block' : 'none';
+    });
+    resultPage.style.display = 'none';
+  }
+
+  // 폼 submit -> 결과 계산
+  quizForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    // 각 문항의 값 수집
+    let answers = [];
+    for (let i=1; i<=20; i++){
+      const val = quizForm[`q${i}`].value;
+      answers.push(val);
+    }
+    // MBTI 계산
+    const [mbtiType, percentage] = calculateMBTI(answers);
+    const typeData = mbti_types[mbtiType];
+    
+    let outputText = `당신의 MBTI 유형은 ${mbtiType}입니다. 신뢰도: ${percentage.toFixed(2)}%\n\n`;
+    outputText += `성격 설명: ${typeData["성격"]}\n`;
+    outputText += `추천 직업: ${typeData["직업"]}\n\n`;
+    outputText += `좋은 궁합:\n`;
+    typeData["궁합"].forEach(g=>{
+      outputText += `- ${g}: ${typeData["궁합 설명"][g]}\n`;
+    });
+    outputText += `\n나쁜 궁합:\n`;
+    typeData["나쁜 궁합"].forEach(b=>{
+      outputText += `- ${b}: ${typeData["나쁜 궁합 설명"][b]}\n`;
+    });
+
+    finalResultElem.textContent = outputText;
+    finalImageElem.style.display = 'none';
+    finalImageElem.src = `./${mbtiType}.webp`;
+
+    // 혹시 해당 MBTI 유형의 웹프 이미지가 있다면 아래처럼 표시
+    // 이미지가 실제로 있는 환경이라면 로드 후 display:block
+    finalImageElem.onerror = () => {
+      // 이미지가 없으면 숨김
+      finalImageElem.style.display = 'none';
+    };
+    finalImageElem.onload = () => {
+      finalImageElem.style.display = 'block';
+    };
+
+    // 결과 화면 표시
+    questionPages.forEach(p => p.style.display = 'none');
+    resultPage.style.display = 'block';
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+
+  // 다시하기
+  const restartBtn = document.querySelector('.restart-btn');
+  restartBtn.addEventListener('click', () => {
+    quizForm.reset();
+    showPage('1');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+</script>
+</body>
+</html>