testJS.js

$("#question").hide();
$("#result").hide();

var num =1;

var q = {
    1:{"title":"아무일도 없는 나른한 오후, 친구가 놀자며 카톡을 보냈다.<img src='image/qs1.png'>", "type":"EI","A":"빠르게 준비를 마치고 친구를 만나러 나간다.","B":"얼마만의 휴일인데... 집에서 휴식을 취한다."},
    2:{"title":"소개팅을 갔는데 분위기가 너무 어색하다.<img src='image/qs2.png'>", "type":"EI","A":"어색함을 견디지 못하고 말을 먼저 꺼낸다.","B":"너무 어색해 미치겠지만 가만히 있는다."},
    3:{"title":"자취를 하려고 집을 구하러 다닌다.<img src='image/qs3.png'>", "type":"SN","A":"방 구조, 수압, 방음 등을 꼼꼼하게 체크한다.","B":"방이 화사한지, 넓은지, 포근한지 등을 본다."},
    4:{"title":"바로 당장 내일이 시험인데 공부하기가 너무 싫다.<img src='image/qs4.png'>", "type":"SN","A":"범위가 줄었으면 좋겠다. 이번 시험 잘 봐야 하는데..","B":"시험은 왜 봐야 하는거지..? 시험이 사라지는 시대도 올까?"},
    5:{"title":"화났을 때 나는?<img src='image/qs5.png'>", "type":"TF","A":"논리적으로 잘 말하면서 따진다.","B":"할말이 많지만 너무 분해서 눈물부터 난다."},
    6:{"title":"고민을 얘기하는 친구, 듣다보니 친구의 잘못인 것 같다.<img src='image/qs6.png'>", "type":"TF","A":"친구의 잘못된 점을 말해준다.","B":"직접적으로 말하면 친구가 상처받을까봐 돌려 말한다."},
    7:{"title":"준비물을 챙겨야할 때 나는?<img src='image/qs7.png'>", "type":"PJ","A":"굳이 하루전에...? 당일날 챙기면 충분하다!","B":"며칠 전에 미리 챙겨 준비해둔다!"},
    8:{"title":"여행 계획을 짤 때 나는?<img src='image/qs8.png'>", "type":"PJ","A":"그때 그때 가고 싶은 곳 가고 먹고 싶은 것 먹는 것이 낭만이지!","B":"버스 시간, 가격, 메뉴까지 미리 다 정해서 계획을 짜둔다."},
    9:{"title":"곧 워터밤 페스티벌이 열린다고 한다.<img src='image/qs9.png'>","type":"EI","A":"아껴뒀던 수영복과 물총을 꺼내 페스티벌을 즐기러 간다.","B":"집에서도 충분히 즐길 수 있어! 유튜브로 시청한다."},
    10:{"title":"비행기를 탔는데 갑자기 흔들린다.<img src='image/qs10.png'>", "type":"SN","A":"최대한 침착하며 안전벨트를 꽉 매고 주위를 살핀다.","B":"비행기가 갑자기 추락하면 어쩌지?? 혹시 누가 테러를 일으킨 건 아닐까??"},
    11:{"title":"친구가 갑자기 차 사고가 났다고 한다.<img src='image/qs11.png'>", "type":"TF","A":"헐 보험은 들어놨지?? 보험사에서는 뭐래??","B":"헐 몸은 괜찮아?? 다친데는 없고...?"},
    12:{"title":"오랜만에 밖에서 외식을 하려고 한다.<img src='image/qs12.png'>", "type":"PJ","A":"같은 곳은 지겨워! 새로운 곳을 탐방한다!","B":"매번 가던 곳으로! 편안하고 맛있어서 좋다."},
}

var result = {
    "ISFJ":{"mbti":"원장 선생님","explain":"따뜻하고 친근한 성격이며, 책임감이 있고 인내력이 강해요! 그룹에서 리더보다는 서포터의 역할을 선호하며, 소외되는 팀원이 있으면 잘 이끌어서 도움을 줘요. 남의 부탁을 잘 거절 못하고 잘 들어주는 편이에요.","img":"image/원장 선생님.png"},
    "ISFP":{"mbti":"훈이","explain":"사람을 만나는 건 좋지만 싫기도하고 그러다가도 만나면 잘 노는 타입이에요! 다른 사람의 부탁을 잘 거절하지 못하고 양보를 잘하며, 타인에게 민폐 끼치는 걸 싫어하는 성격이에요. 발등에 불 떨어질 때까지 일을 미루기도 해요.","img":"image/훈이.png"},
    "ISTJ":{"mbti":"채성아 선생님","explain": "신중하고 조용한 편이며 집중력이 강하고 매사에 철저한 성격이에요! 책임감이 강하고 성취해야 한다고 생각하는 일에는 꾸준하게 추진해 나가는 유형이며, 타인에게 속마음을 잘 드러내지 않는 편이에요.","img":"image/채성아.png"},
    "ISTP":{"mbti":"옆집 아주머니", "explain" : "타인을 잘 도우며 다른 사람들과 경험을 공유하는 것을 좋아하는 성격이에요! 직접 손으로 만지고 눈으로 보면서 세상을 탐색하는 것을 좋아하며 무언가를 만드는 데 타고난 재능을 가졌어요.","img":"image/옆집 아줌마.png"},
    "INFJ":{"mbti":"이슬이누나", "explain" : "인내심이 많고 통찰력과 직관력이 뛰어나며 화합을 추구하는 성격이에요! 친해지고 나면 첫인상과 다른 경우가 있으며, 몽환적이고 신비로운 것을 좋아해요. 분쟁이나 다툼을 싫어하는 편이에요.","img":"image/이슬이누나.png"},
    "INFP":{"mbti":"짱아", "explain" : "사람 만나는걸 좋아하면서도 싫어하는, 집 들어가면 연락 두절되는 조용한 관종이에요! 어디로 튈지 모르는 탱탱볼 같은 매력이 있어요. 인간 관계에선 눈치가 빨라 섬세한 부분까지 잘 캐치하는 성격이에요.","img":"image/짱아.png"},
    "INTJ":{"mbti":"오수", "explain" : "본인이 수립한 목표를 향해 끊임없이 노력하고, 세상의 많은 것들에 지적 호기심을 갖는 성격이에요! 리더로서 자신의 행동이나 결과에 철저하게 책임지는 책임감을 가지고 있어요. 쉽고 간단한 일에도 항상 최선을 다하는 성격이에요.","img":"image/오수형.png"},
    "INTP":{"mbti":"맹구", "explain" : "분석적이고 논리적이며 객관적인 비평을 잘 하는 성격이에요! 이해가 빠르고 직관력, 통찰력이 있으며 때로는 조용하고 과묵하기도 해요. 자기가 원하는 것이 아니면 별로 관심을 갖지는 않아요.","img":"image/맹구.png"},
    "ESFJ":{"mbti":"신형만", "explain" : "눈치가 빠르고 분위기를 잘 맞춰주는 성격이에요! 맡은 일을 정확한 시간에 맞추어 끝내는 것을 중요시하고, 주변 사람들이 무엇이 필요한지 쉽게 찾아 도움을 줘요. 조화를 추구하기 때문에 갈등은 싫어해요.","img":"image/신형만.png"},
    "ESFP":{"mbti":"봉미선", "explain" : "어디에서나 분위기 메이커를 담당하며 사교적이고 활동적인 성격이에요! 어떤 상황에서든 잘 적응하는 편이며, 주변 사람들에게 관심이 많고 그들의 일에 진정으로 공감해주는 성격이에요.","img":"image/봉미선.png"},
    "ESTJ":{"mbti":"철수", "explain" : "강한 의지력과 끈기를 지닌 성격이에요! 모든 일에 책임감을 가지고 있으며 목표한 바를 이루기 위해 노력해요. 매 일에 도전적이고 호기심을 가지고 있어요. 외로움을 잘 타지 않는 성격이에요.","img":"image/철수.png"},
    "ESTP":{"mbti":"수지", "explain" : "항상 모든 일에 자신감이 넘치는 성격이에요! 모임에 가면 분위기 메이커 역할을 하며 스릴을 즐기는 성격이에요! 오늘의 일은 내일로 미루는 것을 좋아하며 오늘만 산다라는 생각으로 살아가기도 해요.","img":"image/수지.png"},
    "ENFJ":{"mbti":"유리", "explain" : "사람을 좋아하며 항상 타인에게 잘 맞춰주는 성격이에요! 소소한 거에도 배려심이 많으며 진실성을 중요시하고, 매사에 책임감이 강한 타입이에요. 따라서 많은 사람들에게 신뢰를 받는 성격이에요.","img":"image/유리.png"},
    "ENFP":{"mbti":"흰둥이", "explain" : "긍정적이고 낙천적인 성격을 가지고 있어요! 공감능력이 좋아서 친구들의 고민 상담을 잘 해줘요! 즉흥적인 행동을 좋아하는 편이며 지루하고 재미없는 일상에 질려하는 편이에요.","img":"image/흰둥이.png"},
    "ENTJ":{"mbti":"나미리 선생님", "explain": "미래를 향한 뚜렷한 목표를 가지고 빈틈없이 행동으로 옮기는 성격이에요! 집에 있으면 무기력해져서 무엇이라도 해야 하는 편이며 친구들이 고민 상담하면 해결책을 찾아주는 걸 좋아해요.","img":"image/나미리선생님.png"},
    "ENTP":{"mbti":"짱구", "explain": "사교적인 성격에 타인의 생각을 읽고 이해하는 능력이 뛰어난 타입이에요! 새로운 아이디어나 창의적인 발상을 잘 하며, 두뇌회전이 빠르고 이해심이 뛰어나요. 지속적으로 새로운 것들에 도전하는 것을 좋아해요.","img":"image/짱구.png"},
    
}

function start(){
    $("#start").hide();
    $("#question").show();
    next();
}

function next(){
    if(num==13){
        $("#question").hide();
        $("#result").show();
        var str="";
        ($("#EI").val()<2) ? str+="I" : str+="E";
        ($("#SN").val()<2) ? str+="N" : str+="S";
        ($("#TF").val()<2) ? str+="F" : str+="T";
        ($("#PJ").val()<2) ? str+="J" : str+="P";

        console.log("EI:", $("#EI").val())
        console.log("SN:", $("#SN").val())
        console.log("TF:", $("#TF").val())
        console.log("PJ:", $("#PJ").val())

        $("#img").attr("src",result[str]["img"]);
        $("#mbti").html(result[str]["mbti"]);
        $("#explain").html(result[str]["explain"]);
    }
    else{
        $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
        $("#pgrNum").html(num+'/12');
        $("#title").html(q[num]["title"]);
        $("#type").val(q[num]["type"]);
        $("#A").html(q[num]["A"]);
        $("#B").html(q[num]["B"]);
        num++;
    }
}

$("#A").click(function(){
    var type=$("#type").val();
    var preValue = $("#"+type).val();
    $("#"+type).val(parseInt(preValue)+1);
    next();
});
$("#B").click(function(){
    next();
});

function copy(){
    var url= '';
    var textarea = document.createElement("textarea");
    document.body.appendChild(textarea);
    url=window.document.location.href;
    textarea.value=url;
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
    alert("링크가 복사되었습니다.");
}