Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags more
Archives
Today
Total
관리 메뉴

heyday2024 님의 블로그

[사전캠프 퀘스트] mbti 설문지 본문

프론트엔드 부트캠프

[사전캠프 퀘스트] mbti 설문지

heyday2024 2024. 9. 21. 21:06

mbti 테스트

// 결과 텍스트를 저장한 객체 (MBTI 유형별로 설명을 저장)
const results = {
  ESTJ: "당신은 현실적이고 실용적인 리더입니다! (ESTJ - 경영자)",
  ENTJ: "당신은 대담하고 결단력 있는 전략가입니다! (ENTJ - 통솔자)",
  ESFJ: "당신은 친절하고 외교적인 제공자입니다! (ESFJ - 집정관)",
  ENFJ: "당신은 카리스마 있고 영감을 주는 리더입니다! (ENFJ - 선도자)",
  ISTJ: "당신은 책임감 있고 신뢰할 수 있는 관리자입니다! (ISTJ - 논리주의자)",
  INTJ: "당신은 독창적이고 결단력 있는 전략가입니다! (INTJ - 과학자)",
  ISFJ: "당신은 헌신적이고 믿을 수 있는 수호자입니다! (ISFJ - 수호자)",
  INFJ: "당신은 통찰력 있고 이상적인 조언자입니다! (INFJ - 옹호자)",
  ESTP: "당신은 활동적이고 과감한 도전자입니다! (ESTP - 사업가)",
  ENTP: "당신은 창의적이고 전략적인 사상가입니다! (ENTP - 발명가)",
  ESFP: "당신은 외향적이고 자유로운 연예인입니다! (ESFP - 연예인)",
  ENFP: "당신은 열정적이고 자유로운 활동가입니다! (ENFP - 재기발랄한 활동가)",
  ISTP: "당신은 독립적이고 실용적인 장인입니다! (ISTP - 장인)",
  INTP: "당신은 논리적이고 창의적인 사색가입니다! (INTP - 논리학자)",
  ISFP: "당신은 온화하고 예술적인 탐구자입니다! (ISFP - 예술가)",
  INFP: "당신은 이상적이고 성찰적인 중재자입니다! (INFP - 중재자)",
};

// 사용자가 퀴즈를 완료했을 때 호출되는 함수
function calculateResult() {
  console.log("버튼 눌림");
  // 퀴즈 폼 요소를 가져옴
  const form = document.getElementById("quiz-form");

  // 각 MBTI 성향별로 점수를 저장할 객체
  let score = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };

  // 폼 데이터를 가져옴
  const formData = new FormData(form);

  console.log(formData)

  // 폼 데이터에 포함된 값을 기반으로 점수를 계산
  for (let value of formData.values()) {
    score[value] = score[value] + 1; // 각 성향에 해당하는 점수를 1씩 증가
  }

  // 최종 MBTI 유형을 저장할 빈 문자열 초기화
  let personalityType = "";

  // E와 I 중 높은 점수를 가진 쪽을 선택하여 personalityType에 추가
  if (score.E >= score.I) {
    personalityType += "E";
  } else {
    personalityType += "I";
  }

  // S와 N, T와 F, J와 P 중 높은 점수를 가진 쪽을 선택하여 personalityType에 추가하는 코드를 작성해주세요!! 바로 위 로직을 참고하면 되겠죠?
  if (score.S >= score.N) {
    personalityType += "S";
  } else {
    personalityType += "N";
  }
  if (score.T >= score.F) {
    personalityType += "T";
  } else {
    personalityType += "F";
  }
  if (score.J >= score.P) {
    personalityType += "J";
  } else {
    personalityType += "P";
  }

  document.getElementById("result-text").innerText = results[personalityType];
  document.getElementById("result").classList.remove("hide");
}

// 퀴즈를 초기 상태로 되돌리는 함수
function resetQuiz() {
  document.getElementById("quiz-form").reset();
  document.getElementById("result").classList.add("hide");
}
body {
  font-family: "Arial", sans-serif;
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 700px;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
  font-size: 26px;
  margin-bottom: 10px;
  color: #444;
}

.question {
  margin-bottom: 20px;
  text-align: left;
}

.question p {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 500;
}

label {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

input[type="radio"] {
  margin-right: 5px;
  cursor: pointer;
}

#submit-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.3s ease;
}
#submit-button:hover {
  background-color: rgb(4, 52, 182);
  transition: 0.5s;
}

#result {
  margin-top: 25px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#result h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

#result p {
  font-size: 16px;
  color: #555;
}

.hide {
  display: none;
}

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MBTI테스트</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>MBTI 테스트</h1>
      <form id="quiz-form">
        <div class="question">
          <p>Q. 아침에 일어나자마자 가장 먼저 하는 일은?</p>
          <label
            ><input type="radio" name="q1" value="E" /> 휴대폰 확인하기</label
          >
          <label><input type="radio" name="q1" value="I" /> 커피 마시기</label>
          <label><input type="radio" name="q1" value="S" /> 운동하기</label>
          <label><input type="radio" name="q1" value="N" /> 잠 더 자기</label>
        </div>

        <div class="question">
          <p>Q. 주말에 주로 하는 일은?</p>
          <label><input type="radio" name="q2" value="E" /> 친구 만나기</label>
          <label><input type="radio" name="q2" value="I" /> 집에서 쉬기</label>
          <label><input type="radio" name="q2" value="S" /> 여행 가기</label>
          <label
            ><input type="radio" name="q2" value="N" /> 취미 활동 하기</label
          >
        </div>

        <div class="question">
          <p>Q. 일을 할 때 가장 중요한 것은?</p>
          <label><input type="radio" name="q3" value="T" /> 효율성</label>
          <label><input type="radio" name="q3" value="F" /> 팀워크</label>
          <label><input type="radio" name="q3" value="J" /> 계획성</label>
          <label><input type="radio" name="q3" value="P" /> 유연성</label>
        </div>

        <div class="question">
          <p>
            Q. 집 근처에 새로 생긴 카페가 궁금하다. 당신은 어떻게 할 것인가?
          </p>
          <label
            ><input type="radio" name="q4" value="J" />카페 운영 시간과 날짜를
            체크하고, 카페를 언제갈지 계획을 세워본다.</label
          >
          <label
            ><input type="radio" name="q4" value="P" />'너무 궁금해, 지금 할
            것도 없는데 카페나 가보자!'하며 바로 카페로 가본다.</label
          >
        </div>
        <div class="question">
          <p>
            Q. 친구가 속상한 일이 있어 꺼이꺼이 울면서 내게 무슨 일이 있었는지
            설명하려고한다. 근데 친구가 우는 소리에 뭐라고 말하는지 잘 들리지
            않는다. 당신의 할 말은?
          </p>
          <label
            ><input type="radio" name="q5" value="T" />'야! 무슨일이야! 좀
            추스리고 천천히 말해봐.'
          </label>
          <label
            ><input type="radio" name="q5" value="F" />'야~ 괜찮아?? 뭐땜에
            그래~~ 아이고 ㅠㅠ 속상한 일 있었구나ㅠㅠ(휴지로 눈물
            닦아주면서)'</label
          >
        </div>
        <button id="submit-button" type="button" onclick="calculateResult()">결과 확인하기</button>
      </form>
      <div id="result" class="hide">
        <h2>당신의 성격 유형은?</h2>
        <p id="result-text">결과가 여기에 표시됩니다.</p>
        <button onclick="resetQuiz()">다시 시작하기</button>
      </div>
    </div>
  </body>
</html>


초간단 mbti 테스트 버그 수정 완료

 

'프론트엔드 부트캠프' 카테고리의 다른 글

[사전캠프 5주차] 마지막! 파이썬  (1) 2024.09.24
[사전캠프 5주차] Github으로 배포하기  (2) 2024.09.23
[사전캠프 퀘스트] 로또 번호 생성기  (0) 2024.09.21
[사전캠프 4주차] Firebase  (0) 2024.09.19
[사전캠프 퀘스트] TO DO LIST 만들기  (1) 2024.09.19
'프론트엔드 부트캠프' Related Articles more