test.js

var num = 1;
var q = {
  1: {
    title: "학교 갈 준비를 하는중,<br> 오늘 수업은 쉰다는 문자가 왔다.",
    type: "EI",
    A: "이왕 나갈 준비하던거..친구랑 놀러가자!",
    B: "밖에 날씨도 더운데 잘됐다. 집에서 영화나 봐야지",
  },
  2: {
    title: "친구와 놀다가 배가 고파졌다.<br> 어디서 밥 먹지?",
    type: "JP",
    A: "미리 알아둔 맛집으로 간다.",
    B: "주변에 인기 많아보이는 곳으로 간다.",
  },
  3: {
    title: "오랜만에 친구와 술 약속,<br> 어떤 술집을 가지?",
    type: "EI",
    A: "시끌벅적 핫플레이스",
    B: "조용한 우리만의 맛집",
  },
  4: {
    title: "친구가 직장 상사때문에 힘들어한다.<br> 뭐라고 말 해주지?",
    type: "TF",
    A: '"최대한 듣는척만 하고 무시해버려.. 신경써봐야 힘들다"',
    B: '"에라이 그 나쁜 놈! 내가 가서 한 소리 해줘??"',
  },
  5: {
    title: "곧 연인의 생일이다.<br> 무슨 선물을 주지?",
    type: "TF",
    A: "'곧 추워지면 필요할텐데..' 목도리를 산다. ",
    B: "'역시 로맨틱하게..' 꽃다발을 산다.",
  },
  6: {
    title: "연인의 선물을 사기 위해 돈이 필요하다.<br> 단기알바를 시작했다.",
    type: "SN",
    A: "일이 좀 힘드네.. 빨리 퇴근이나 하고싶다.",
    B: "일이 어려운데.. 편하게 할수있는 방법 없을까?",
  },
  7: {
    title: "단기 알바에서 만난 사람들.<br> 친하게 지낼까?",
    type: "EI",
    A: "알바가 끝나도 친구로 지내면 좋지!",
    B: "어차피 잠깐 보고 안볼 사람들이다.",
  },
  8: {
    title: "바쁜 시험기간 조별과제,<br> 친구가 자료조사를 해왔다.",
    type: "TF",
    A: '"여기 자료가 좀 부족한것 같은데? 조금더 조사해줘."',
    B: '"요즘 바쁜데 수고했어. 이정도면 잘 조사했네."',
  },
  9: {
    title: "새로운 프로젝트가 시작됐다.<br> 이제 일을 시작해야하는데..",
    type: "JP",
    A: "먼저 전체적인 구조를 생각한 뒤에 차곡차곡 진행한다.",
    B: "일단 시작했는데 너무 어렵다..다른것부터 해야하나..?",
  },
  10: {
    title: "어렵기로 소문이 자자한 테스트,<br> 얼마나 어렵길래?",
    type: "SN",
    A: "어려운지 아닌지는 일단 해보고 판단한다!",
    B: "예상 시나리오를 분석해 충분히 준비한다.",
  },
  11: {
    title: "기다리던 휴가가 다가온다!<br> 여행일정은 어떻게 하지?",
    type: "JP",
    A: "휴가는 알차게 보내야지. 미리 계획해둔다.",
    B: "그때그때 기분따라 가는거지! 일단 간다.",
  },
  12: {
    title: "드디어 여행을 떠나는 날!<br> 비행기를 타러 가는 중.",
    type: "SN",
    A: "비행기는 오랜만인데, 신난다!",
    B: "만약 사고가 나서 바다에 추락하면 살수있을까?..",
  },
};
var result = {
  ISTJ: {
    animal: "하마",
    explain:
      "• 철저하고 계획적이며 규칙을 잘 지켜요.<br>• 팔벌려 뛰기 10 외치지 말라니까 자꾸 외치는 사람이 제일 짜증나요. 아니 하지 말라는 건 좀 하지 마세요. 모르는 것도 죄에요.<br>• 팀플에서 팀플 카톡 영원히 안 보면서 수업시간에 보면 손가락 안 보이게 카톡하고 있는 애들 꼭 있어요. 그럴거면 선배님 이름은 여기서 뺄게요.<br>• 고리타분하다는 얘기를 가끔 들어요. 근데 기본 예의만 지키면 되는건데 그걸 못할 것 같은 사람은 그냥 지구를 떠나면 될 것 같아요.<br>• 내 주제를 잘 알아요. 국어 문제 풀 때도 주제 찾기 제일 잘해요.<br>• 상하 조직 위계질서가 편하고 정립된 프로세스에는 다 이유가 있는 거에요. 직장이나 군대에서도 적응을 잘해요.<br>• 여행갈 때 10일만에 서유럽과 남유럽을 모두 돈다는 89만원짜리 유럽 패키지보다 더 자세하게 짜놔요. 선셋 볼려면 빨리 가야되니까 동행한 사람들아 밥 5분만에 안 먹기만 해봐요.<br>● 취미같은 건 평범한 게 좋아요. 덕질도 다 함께 해야 리소스가 풍부해요.<br>",
    img: "hippo.jpg",
  },
  ISFJ: {
    animal: "부엉이",
    explain:
      "• 내향적인 사람 중에 제일 외향적이고 외향적인 사람 중에서 제일 내향적이에요. 내 감정은 잘 이해하지만 감정을 잘 표현하지는 못하겠어요. 자기주장이 속으로는 강한데 밖으로는 강하지 않아요. 나도 가끔 날 잘 모르겠어요.<br>• 배려가 있고 성격이 온화해요. 남들의 성격을 잘 파악하고, 성실해서 존재만으로도 안정적이에요. 그런데 내가 안 좋아하는 사람한테는 단호해요. 예의 없는 사람 진짜 싫어요. 나한테 예의를 지킨다면 잘 해주겠지만 내 호의를 이용하면 요단강 건넌다고 생각하고 있길 바래요.<br>• 지속적이고 반복되는 게 편해요. 파격적인 변화 같은 거 싫어요. 욜로 족도 아니에요.<br>• 신세지는 것도 피해주는 것도 싫어요. 복잡한 세상 안정적이고 편하게 살고 싶어요.<br>• 남의 말을 잘 들어주고 잘 기억하기도 해요. 서로 배려하면서 사는 게 좋아요. 싸우는 거 별로 안 좋아해요.<br>",
    img: "owl.jpg",
  },
  INFJ: {
    animal: "물소",
    explain:
      "• 직관력과 통찰력이 높아 알게 모르게 주변 사람들에게 강한 영향을 줘요. 그러면서도 눈치가 빨라서 남들의 상황을 파악하고 잘 맞춰주는 성향을 가지고 있어요. 누가 거짓말을 하고 있는지도 빠르게 간파할 수 있어요. 마피아 게임하면 내가 1등이에요.<br>• 완벽주의자 성향이 있고 중심이 있어서 옳다고 생각한 것은 잘 변하지 않아요.<br>• 호불호가 강하고 관심이 없는 것은 전혀 관심을 두지 않아요.<br>• 속마음이 잘 드러나지 않지만 외향적이어야 할 때는 외향적으로 보일 수 있어요.<br>• 이상주의적이고 정의로움에 관심이 많아요. 어른스럽다는 이야기를 들어요.<br>• 독립적이라 어떤 집단에 휘둘리는 상황을 싫어해요. 보드카처럼 어딘가에 섞여도 존재감을 강하게 드러내요.<br>",
    img: "beef.jpg",
  },
  INTJ: {
    animal: "치타",
    explain:
      "• 원리 원칙 중요해요. 감정에 휘둘리는 건 싫고 이성적으로 살고 싶어요.<br>• 공부하는 것이나 연구하는 거 재밌어요. 이론과 근거를 파고드는 일도 관심이 있어요.<br>• 계획을 짜고 그대로 행동하는 게 좋아요. 착착 진행되면 뿌듯해요. 돈 관리도 잘 해요.<br>• 독립적인 성격이고 내가 합리적이라고 생각하는 건 망설임 없이 해요. 윗사람이라도 규칙을 어기고 뭘 하라고 하면 규칙대로 해야지 왜 그렇게 하냐고 물어볼 수 있어요.<br>• 스스로는 현실적이라고 생각하지만 어떻게 보면 이상적인 쪽에 가까워요. 모든 사람들이 논리대로 행동해야 한다고 생각하기 때문이에요.<br>",
    img: "cheetah.jpg",
  },
  ISTP: {
    animal: "나무늘보",
    explain:
      "• 건조건조해서 낯을 많이 가려요. 새로운 사람 만나는 게 싫고 간섭이 너무 싫어요.<br>• 귀찮은 거 안하고 싶어요. 효율적인 게 좋고 노력은 최소화해요.<br>• 할 말 없으면 대화 종료에요. 굳이 이어갈 필요가 있나?<br>• 남이 뭘 하건 노관심, 공감능력도 없고 내 얘기도 하기 싫으니 빛이 나는 솔로,<br>• 그래도 내가 좋아하는 거에는 쫀득쫀득해요. 친해진 내 사람한테는 말도 많고 장난도 많이 쳐요.<br>• 또 좋아하는 무언가가 생기면 질릴 때까지 해야돼요. 뭐하나 꽂히면 다 사요.<br>• 미루고 미루다가 발등에 불이 떨어지고 재가 되면 해요.<br>",
    img: "sloth.jpg",
  },
  ISFP: {
    animal: "거북이",
    explain:
      "• 둥글둥글하고 순해서 어떤 사람을 만나든 원만하게 잘 지내는 편이에요.<br>• 따뜻하고 순한 마음에 끌려 사람들이 많이 다가오기도 합니다.<br>• 사람들을 편하게 만들어 주고 배려심이 깊죠. 이런 것들을 표현할 때는 직접 말로 하기보다는 행동으로 많이 표현해요.<br>• 하지만 이런 말랑하고 연약한 마음 때문에 쉽게 상처를 받고, 다른 사람에게 자기 주장을 강력하게 얘기를 못하는 편이에요.<br>• 매사에 조용하고 수용적인 것 같지만, 은근히 질긴 고집이 약간 있긴 있어요.<br>• 매사에 여유롭고 낙천적인 편이며, 자유로운 영혼이라는 소리를 많이 듣는 편이에요.<br>",
    img: "tutle.jpg",
  },
  INFP: {
    animal: "코끼리",
    explain:
      "• 내가 맡은 일에 책임감이 있어요. 낭만적이고 충실한 면이 있고, 사람들을 배려해요.<br>• 이상적이기도 하고 감정적이기도 해서 내가 지향하는 가치관을 지키기 위해 열정을 보이기도 해요.<br>· 손에 잡히는 무언가보다 손에 잡히지 않는 것을 향해 가고 싶어요. 그래서 현실적인 계획을 잘 지키지 못하기도 하지만, 누구보다 순수하고 내면을 꾸미는 데에 집중하려고 하기도 해요.<br>• 아부를 잘 못하는 편이에요. 남들이 내게 하는 말에 상처를 받지만 나를 싫어하는 그들에 맞추어서 내가 변하고 싶지는 않아요.<br>• 남보다는 나한테 관심이 더 많아요. 나를 잘 알지도 못하면서 나한테 간섭하는 게 싫어요. 혼자만의 시간도 필요해요. 연락이 안오는 건 싫지만 24시간 연락에 답을 해 주는 것도 피곤해요.<br>• 나한테 관심이 있었으면 좋겠는데 그렇다고 자리의 중심이 되면 어떻게 할지를 모르겠어요.<br>• 일을 취미처럼 하고 싶고 취미를 일처럼 하고 싶어요.<br>• 총대매고 누구한테 뭐라고 하는거 못하겠어요. 그냥 총으로 쏘는게 더 쉬울 것 같아요.<br>",
    img: "elephant.jpg",
  },
  INTP: {
    animal: "침팬지",
    explain:
      "• 모든 유형 중에 가장 내향적인 유형이에요. 조용조용하고 새로운 사람 만나는 게 싫어요.<br>• 날 잘 모르는 사람들은 나를 딱딱하게 봐요. 진지하다는 얘기도 많이 들어요. 아마도 쟤 어떤 애야? 라고 하면 조용한 애, 라고 대답하는 사람들이 많을 거에요<br>• 근데 굳이 나도 쟤네랑 친하게 지내고 싶지는 않아요. 굳이 같이 안 놀아도 세상엔 할 게 많거든요. 가는 사람 안 붙잡고 오는 사람 안 막아요. 근데 너무 가까이 오는 건 싫어요.<br>• 그렇다고 해서 혼자만 사는 사람은 아니에요. 주변에 사람은 별로 없지만 있는 사람들이랑은 재밌게 잘 놀아요. 그 사람들은 나의 다른 모습도 알아요. 그냥 조용한 게 아니라 생각이 많은 것도, 아이디어가 많고 상상력이 풍부한 것도, 분석력이 좋은 것도요. 그래서 남들이 무슨 말할 때 틀린 게 잘 보여요.<br>• 이런 성격이라 공상은 자주하지만 신이나 종교에 대해서는 잘 안 믿어요. 사이비나 정통 종교나 거기서 거기에요. 근데 어떤 종교에 이성적으로 동의하는 순간 신학과 진학할 거니까 말리지 말아요.<br>",
    img: "chimpanzee.jpg",
  },
  ESTP: {
    animal: "악어",
    explain:
      "• 현실적인 당신은 일을 한 번 맡으면 잘 하려고 해요.<br>• 나의 리더십은 막으려고 해도 흘러 넘쳐서 정신 차려보면 내가 분위기 메이커에요. 반장이나 조장을 해본 적도 많아요.<br>• 이쯤이면 눈치챘겠지만 약간 관종이에요. 그래서 그런지 또래들도 어른들도 좋아해요.<br>• 그렇다고 해서 매사에 열정이 가득하거나 엄청나게 적극적인 편은 아니에요. 남들이 나에 대해 무슨 생각하든 관심없어요. 귀찮거든요. 그래서 공감능력이 약간 부족하다는 소리도 들어요. 하지만 다른 말로 하면 사람에 대한 선입견이 없고 관용적이에요.<br>• 사람들 만나는 건 좋은데 귀찮아서 나가기는 싫어요. 그냥 Zoom으로 만날까<br>• 자신감이 있고 표현력도 좋아요.<br>• 즉흥적이면서 재밌는 자리에는 나가고 싶고 스릴있는 것도 해보고 싶어요. 인생 한 번 사는데 맵게도 살아보고 싶어요.<br>",
    img: "crocodile.jpg",
  },
  ESFP: {
    animal: "미어캣",
    explain:
      "• 복잡한 건 그냥 생각하지 말고 재밌게 살아요. 하고 싶은 건 다 해보고 싶고 하기 싫은건 영원히 안 할래요.<br>• 소액결제 오백 번해서 티끌모아 태산이 실제로 되는 모습을 지켜봐요. 그래도 어떻게든 해결 되니까 걱정 안 해요.<br>• 톡톡 튀는 재밌는 친구라 모르는 사람이랑도 잘 친해져요. 사람들이 좋아요. 세상엔 좋은 사람도 많거든요.<br>• 여기저기 참여하고 싶고 사람들이랑 어울리고 싶어요.<br>• 어디가서 목소리 작다는 소리 못들어봤어요. 내가 낀 자리가 갑자기 조용해지는게 싫어서 아무말 대마왕으로 2차 전직해요. 진짜 아무말하다가 정신차려보면 나의 장기를 선보이고 있어요. 가만히 생각해보면 창피한데 그럴땐 생각을 안 하면 돼요.<br>• 자존감이 높아요. 그래서 가끔 고집이 세다는 소리를 들어요.<br>• 고민이 생길 때가 있는데 생각하다가 일어나보면 오후 2시에요. 고민이 뭐였더라? 그냥 귀여운 나의 탓이겠지 하고 넘겨요. 자유분방하고 개성이 넘쳐요.<br>",
    img: "meerkat.jpg",
  },
  ENFP: {
    animal: "사자",
    explain:
      "• 창의적이고 새로운 걸 찾아다녀요. 내가 관심있는 건 뭐든지할 수 있는 능력과 열정이 있어요. 근데 하기 싫은 건 제시할 생각도 하지 마세요.<br>• 새롭고 재밌는 건 여러 개라도 할 수 있어요. 일단 즉흥적으로 일을 다 벌여놔요. 근데 지루하고 틀에 갇힌 일은 싫어요.<br>• 돈은 돈일뿐 굳이 아등바등 모으고 싶지 않아요. 어차피 모아봤자 한국에 집살려면 수맥 정도는 흘러야 내 예산에서 가능해요.<br>• 공부가 재미없는 건 아닌데 단순 암기는 하기 싫어요. 도라에몽 암기 빵 없으면 암기 안 할래요.<br>• 밀당 싫어요. 줄다리기도 안 할 거에요.<br>",
    img: "lion.jpg",
  },
  ENTP: {
    animal: "태양새",
    explain:
      "• 스스로도 호불호가 강해서 내가 좋아하는 사람은 너무 좋은데, 싫은 사람은 너무 싫어요.<br>• 한번 싫으면 영구히 싫어해요.<br>• 틀에 박힌 게 싫고 자유롭게 살고 싶어요.<br>• 어느 때는 한 없이 다정하지만 어느 때는 한 없이 냉정해요.<br>• 잘못된 것은 잘못됐다고 말해야 직성이 풀려요.<br>• 주변 사람들에게도 호불호가 갈려요.<br>• 이렇게 개성이 있는 사람에게 호를 외치는 사람도 있지만 이기적이라고 불호를 외치는 사람도 있어요.<br>• 그런데 남이 나를 좋아하든 말든 관심 없어요.<br>• 뒤끝이 부족해요. 자신이 좋아하는 것에는 누구보다 열정을 쏟을 수 있지만 빨리 질려요.<br>",
    img: "sunbird.jpg",
  },
  ESTJ: {
    animal: "기린",
    explain:
      "• 시원시원하게 적극적이고 직선적이에요.<br>• 완벽주의적인 성향이 있어 뭐든 잘해야 직성이 풀려요.<br>● 내가 하는 건 뭐든 잘 돼야 하고, 자기가 해낸 건 어벤져스처럼 인정 받길 원하기도 해요.<br>• 상황판단과 문제해결에 뛰어난 능력이 있고, 솔선수범하는 편이죠.<br>• 불도저 같은 추진력으로 자기가 하는 모든 것들을 처음부터 끝까지 멈추지 않고 진행시켜요. 심지어는 하기 싫은 일도 마무리는 짓는 편이에요.<br>• 주로 리더의 성향이 강한 편이에요. 용의 꼬리가 되느니 뱀의 머리가 되는게 속이 편해요. 구멍가게라도 자기 사업을 하는 걸 선호해요.<br>• 하지만 전반적으로 표현이 서투른 편이고 너무 솔직해서 다른 사람들에게 상처를 줄 수도 있어요.<br>• 조급하게 판단하는 경향이 있고, 가끔은 분위기를 타지 못해 갑분싸를 만들기도 해요.<br>",
    img: "giraffes.jpg",
  },
  ESFJ: {
    animal: "고릴라",
    explain:
      "• 상대방이 신경쓰여요. 남이 어떻게 행동하고 생각할지를 그 사람보다 내가 더 고민하고 행동해요.<br> • 그러다보니 인간관계에 상처를 받을 때가 있어요. 근데 내가 그런 얘기하면 남이 신경쓰일테니까 뭐라고 안해요.<br>•  공감능력이 좋아서 상담을 잘 해줘요. 내 주변 사람이라면 내가 챙겨줄줄 알아야 된다고 생각해요. 남들 고민을 내가 더 심각하게 해요. 살아있는 걱정 인형 수준이에요. 친구한테 내가 고민해봤는데, 라고 말하면 그 친구는 이미 잊은지 오래에요. 내가 아는 걸 남한테 얘기 안하고 입이 무거워요.<br>• 그래서 강의 들을 때 강사까지 배려해줘요. 강사가 한 마디 할 때마다 혼자 제일 많이 끄덕여줘요. 방청객알바 잘할 것 같아요.<br>• 남들 얼굴이나 이름도 잘 외우고 신경써줘요. 쟤는 한 학기동안 내가 우리반인지 몰랐다고 하더라도 나는 쟤를 알아요.<br>• 배려를 잘해주고 감성적인 면이 발달해 있다면 현실적인 면도 발달해 있어서 계획을 잘 세우고 잘 지켜요.<br>",
    img: "gorilla.jpg",
  },
  ENFJ: {
    animal: "카피바라",
    explain:
      "• 선비같은 성품이 있어서 본인에게 엄격하지만 남들에게는 배려심이 높고 말랑말랑하게 대해요.<br>• 화를 잘 표현하지 않고 참을성이 높아요.<br>• 상대방을 잘 배려하는 편이라 스스로 어려움이 있어도 도와달라고 말을 잘 못해요. 남들이 저때문에 피해보는 게 싫어요. 동정심이 많은데 정이 너무 많아서 문제일 때도 있어요.<br>• 그렇다고 해서 내 일을 못하지는 않아요. 호기심이 많아서 이것 저것을 해 보기도 하고 계획을 잘 세우고 지켜나가요. 체력이 하루종일 좋아서 가능해요.<br>",
    img: "capibara.jpg",
  },
  ENTJ: {
    animal: "호랑이",
    explain:
      "• 팀플이나 대화를 하다보면 남들이 너무 답답해요. 하는 짓 보고 있으면 그냥 내가 해 버리는 게 나아요.<br>• 인생사는 게 쉬워서 열등감도 느낀 적이 거의 없는데 내가 하기 싫은 건 안 해요. 그래도 해야 될 땐 최대한 빨리 화끈하게 끝내버려요.<br>● 다른 사람들한테 매운 맛이에요. 하소연해도 공감이 아니라 해결책을 찾아줘요.<br>• 현실적인 사람인데 상상은 월터 수준이에요.<br>• 살짝 관종끼가 있어서 새로운 사람 만나는 건 좋은데 깊은 관계가 되는 건 별로 안 좋아해요.<br>• 남의 일에는 관심이 없어요.<br>",
    img: "tigers.jpg",
  },
};
function start() {
  $(".start").hide();
  $(".question").show();
  next();
}
$("#A").click(function () {
  var type = $("#type").val();
  var preValue = $("#" + type).val();
  $("#" + type).val(parseInt(preValue) + 1);
  next();
});
$("#B").click(function () {
  next();
});
function next() {
  if (num == 13) {
    $(".question").hide();
    $(".result").show();
    var mbti = "";
    $("#EI").val() < 2 ? (mbti += "I") : (mbti += "E");
    $("#SN").val() < 2 ? (mbti += "N") : (mbti += "S");
    $("#TF").val() < 2 ? (mbti += "F") : (mbti += "T");
    $("#JP").val() < 2 ? (mbti += "P") : (mbti += "J");
    $("#img").attr("src", result[mbti]["img"]);
    $("#animal").html(result[mbti]["animal"]);
    $("#explain").html(result[mbti]["explain"]);
  } else {
    $(".progress-bar").attr("style", "width: calc(100 / 12 * " + num + "%)");
    $("#title").html(q[num]["title"]);
    $("#type").val(q[num]["type"]);
    $("#A").html(q[num]["A"]);
    $("#B").html(q[num]["B"]);
    num++;
  }
}