Spaces:

jenny00816
/

mbtiS

Running

File size: 7,390 Bytes

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MBTI 성격 유형 테스트</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <!-- 질문 섹션 -->
    <div id="quiz-section">
      <h1>MBTI 성격 유형 테스트</h1>
      <p>다음 질문들에 답해주세요.</p>
      <div id="question-container"></div>
      <button id="next-button">다음</button>
    </div>

    <!-- 결과 섹션 -->
    <div id="result-section" class="hidden">
      <h1>MBTI 결과</h1>
      <pre id="result-text"></pre>
      <img id="result-image" src="" alt="유형 이미지">
      <button id="restart-button">다시 테스트하기</button>
    </div>
  </div>

  <script>
    // 질문 리스트 및 MBTI 데이터
    const questions = [
      "당신은 혼자 있을 때 에너지를 얻나요?",
      "당신은 계획을 세우는 것을 좋아하나요?",
      "당신은 새로운 상황에 쉽게 적응하나요?",
      "당신은 감정보다는 논리에 더 의존하나요?",
      "당신은 다른 사람을 돕는 것을 좋아하나요?",
      "당신은 사교적인 성격을 가지고 있나요?",
      "당신은 일을 끝내기 전에 계획을 세우는 편인가요?",
      "당신은 사실과 데이터를 중시하나요?",
      "당신은 감정 표현을 잘 하나요?",
      "당신은 문제를 해결할 때 창의적인 방법을 사용하나요?",
      "당신은 다른 사람들과의 협업을 선호하나요?",
      "당신은 결정을 내릴 때 직감을 신뢰하나요?",
      "당신은 규칙과 절차를 따르는 것을 좋아하나요?",
      "당신은 주변 환경에 민감하게 반응하나요?",
      "당신은 일을 처리할 때 효율성을 중시하나요?",
      "당신은 남들이 생각하는 것에 대해 많이 신경 쓰나요?",
      "당신은 자연스럽게 리더 역할을 맡게 되나요?",
      "당신은 새로운 아이디어를 제안하는 것을 좋아하나요?",
      "당신은 대인 관계에서 갈등을 피하려 하나요?",
      "당신은 목표를 설정하고 이를 달성하기 위해 노력하나요?"
    ];

    const mbti_types = {
      "INTJ": {
        "성격": "독창적이고 전략적인 사고를 가진 조용한 리더",
        "직업": "과학자, 엔지니어, 데이터 분석가",
        "궁합": ["ENFP", "ENTP"],
        "나쁜 궁합": ["ESFP", "ESTP"],
        "궁합 설명": {
            "ENFP": "ENFP는 INTJ의 이상주의를 자극하고, 서로의 강점과 약점을 보완합니다.",
            "ENTP": "ENTP는 INTJ의 창의성과 전략적 사고를 자극하여 생산적인 파트너십을 형성합니다."
        },
        "나쁜 궁합 설명": {
            "ESFP": "ESFP는 INTJ와 정반대의 성향을 가지고 있어 갈등이 잦을 수 있습니다.",
            "ESTP": "ESTP는 실용적인 접근을 선호하는 반면, INTJ는 장기적인 계획을 중시합니다."
        }
      },
      /* 다른 MBTI 유형 데이터 생략: 동일한 구조로 추가 */
    };

    // 응답 저장 배열
    let responses = [];
    let currentQuestionIndex = 0;
    const questionsPerPage = 5;

    const questionContainer = document.getElementById('question-container');
    const nextButton = document.getElementById('next-button');
    const resultSection = document.getElementById('result-section');
    const quizSection = document.getElementById('quiz-section');
    const resultText = document.getElementById('result-text');
    const resultImage = document.getElementById('result-image');
    const restartButton = document.getElementById('restart-button');

    // 라디오 버튼 옵션
    const options = ["매우 그렇다", "그렇다", "보통이다", "아니다", "매우 아니다"];

    function loadQuestions() {
      questionContainer.innerHTML = '';
      const end = Math.min(currentQuestionIndex + questionsPerPage, questions.length);
      for(let i = currentQuestionIndex; i < end; i++) {
        const qDiv = document.createElement('div');
        qDiv.className = 'question-block';
        const qText = document.createElement('p');
        qText.textContent = questions[i];
        qDiv.appendChild(qText);
        
        options.forEach(option => {
          const label = document.createElement('label');
          const radio = document.createElement('input');
          radio.type = 'radio';
          radio.name = 'question' + i;
          radio.value = option;
          label.appendChild(radio);
          label.appendChild(document.createTextNode(option));
          qDiv.appendChild(label);
        });

        questionContainer.appendChild(qDiv);
      }
    }

    function collectResponses() {
      const end = Math.min(currentQuestionIndex + questionsPerPage, questions.length);
      for(let i = currentQuestionIndex; i < end; i++) {
        const radios = document.getElementsByName('question' + i);
        let answered = false;
        radios.forEach(radio => {
          if(radio.checked) {
            responses[i] = radio.value;
            answered = true;
          }
        });
        if(!answered) {
          responses[i] = "보통이다"; // 미응답 시 기본값 설정
        }
      }
    }

    // MBTI 결과 계산 (단순화된 버전)
    function calculate_mbti_responses(responses) {
      // 본 예제에서는 단순화를 위해 무작위로 MBTI 유형 선택
      const types = Object.keys(mbti_types);
      const randomIndex = Math.floor(Math.random() * types.length);
      const best_match_type = types[randomIndex];
      const percentage = 75 + Math.random() * 25;
      return { type: best_match_type, percentage: percentage.toFixed(2) };
    }

    function displayResult() {
      const result = calculate_mbti_responses(responses);
      const details = mbti_types[result.type];
      let output = `당신의 MBTI 유형은 ${result.type}입니다. 신뢰도: ${result.percentage}%\n\n`;
      output += `성격 설명: ${details.성격}\n추천 직업: ${details.직업}\n\n좋은 궁합:\n`;
      details.궁합.forEach(match => {
        output += `- ${match}: ${details["궁합 설명"][match]}\n`;
      });
      output += `\n나쁜 궁합:\n`;
      details["나쁜 궁합"].forEach(match => {
        output += `- ${match}: ${details["나쁜 궁합 설명"][match]}\n`;
      });

      resultText.textContent = output;
      resultImage.src = `./${result.type}.webp`; // 이미지 경로 설정
    }

    nextButton.addEventListener('click', () => {
      collectResponses();
      currentQuestionIndex += questionsPerPage;
      if(currentQuestionIndex < questions.length) {
        loadQuestions();
      } else {
        // 모든 질문 완료 후 결과 페이지로 이동
        quizSection.classList.add('hidden');
        displayResult();
        resultSection.classList.remove('hidden');
      }
    });

    restartButton.addEventListener('click', () => {
      // 초기화 후 테스트 재시작
      responses = [];
      currentQuestionIndex = 0;
      loadQuestions();
      resultSection.classList.add('hidden');
      quizSection.classList.remove('hidden');
    });

    // 초기 질문 로드
    loadQuestions();
  </script>
</body>
</html>