-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (126 loc) · 9.32 KB
/
index.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나랑 zeze랑</title>
<meta name="description" content="제제랑 칭구가 될 수 있을까?">
<meta property="og:type" content="website">
<meta property="og:title" content="me & zeze">
<meta property="og:description" content="제제랑 칭구가 될 수 있을까?">
<meta property="og:image" content="https://zeze-mbti.netlify.app/img/hbd_zeze.jpg">
<meta property="og:url" content="https://zeze-mbti.netlify.app">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body class="container">
<article class="start">
<h1 class="mt-5 text-center">제제의 우정테스트</h1>
<button type="button" class="btn btn-primary mt-5" onclick="start();">테스트 시작하기</button>
</article>
<article class="question">
<div class="progress mt-5">
<div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
</div>
<h2 id="title" class="text-center mt-5">문제</h2>
<input id="type" type="hidden" value="EI">
<button id="A" type="button" class="btn btn-primary mt-5">1</button>
<button id="B" type="button" class="btn btn-primary mt-5">2</button>
</article>
<article class="result">
<img id="img" class="rounded-circle mt-5" src="hbd_zeze.jpg" alt="friend">
<h2 id="friend" class="text-center mt-5">명칭</h2>
<h3 id="explain" class="text-center mt-5">설명</h3>
<div class="share addthis_inline_share_toolbox"></div>
</article>
<article class="kakao_ad mt-5">
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "DAN-sO9Ggy328jn2EXDO"
data-ad-width = "320"
data-ad-height = "100"></ins>
</article>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
<input type="hidden" id="EI" value="0">
<input type="hidden" id="SN" value="0">
<input type="hidden" id="TF" value="0">
<input type="hidden" id="JP" value="0">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
var num = 1;
var q = {
1: {"title": "제제와 첫만남일 때 당신의 행동은?", "type": "EI", "A": "먼저 자기소개하기", "B": "제제가 먼저 말하길 기다리기"},
2: {"title": "제제와 대화하다 정적이 왔을 때 당신의 행동은?", "type": "EI", "A": "침묵은 용납 못해. 새로운 화제 던지기!", "B": "조용해졌어. 오히려 좋아."},
3: {"title": "제제와 헤어질 때 당신의 한 마디는?", "type": "EI", "A": "다음에 언제 볼까?", "B": "안녕히가세요."},
4: {"title": "AWS 한국지사장이 되겠다는 제제의 꿈을 들은 당신의 반응은?", "type": "SN", "A": "어떻게 될건데? 계획이 뭐야?", "B": "나 뽑아줘"},
5: {"title": "좀비를 걱정하는 제제를 향해 당신의 말은?", "type": "SN", "A": "그걸 왜 걱정해?", "B": "이마트로 달리자"},
6: {"title": "단골 집이 아닌 다른 곳을 가보자는 제제에게 당신은?", "type": "SN", "A": "놉! 익숙한데가 좋아", "B": "꼬! 새로운 공간은 언제나 환영이야"},
7: {"title": "면접 떨어졌어...ㅇ<-< 울적한 제제에게 응원의 한 마디는?", "type": "TF", "A": "부족한 점을 알았으니깐 보완하면 될거야", "B": "따흐읅 당장 불매하자"},
8: {"title": "같이 본 영화의 제제 감상편을 들은 당신의 반응은?", "type": "TF", "A": "호오 나는 감독의 의도는 ~~라 생각해", "B": "헐 그렇게 생각할 수 있겠구나"},
9: {"title": "mbti 질문 만들기 힘들어하는 제제를 보며 당신은?", "type": "TF", "A": "어쩌겠어 끝까지 해야지", "B": "힝 힘내 제제ㅠㅠ"},
10: {"title": "마감기간인데도 누워있는 제제를 보며 한 마디 해주자", "type": "JP", "A": "기간은 지키라고 있는거야!", "B": "벼락치기 효율성 최고^0^"},
11: {"title": "약속시간에 늦은 제제를 보며 당신은?", "type": "JP", "A": "약속은 지키라고 만들어진 것. 제제 정식 딱딱 차려!", "B": "코리안타임 인죵"},
12: {"title": "플젝 하는 제제를 향해 응원의 한 마디는?", "type": "JP", "A": "시작한거 끝을 보자", "B": "천천히 혀~ 지금도 충분히 멋져~"}
}
var result = {
"ISTJ": {"friend": "당신: 더 할 말 있으세요?", "explain": "제제가 눈치껏 필요한 얘기만 해서 편할거에요.", "img": "/img/hbd_zeze.jpg"},
"ESTJ": {"friend": "우리 사이 거리두기 2단계", "explain": "목표를 향해 꼼꼼하지만 불도저 같이 달리는 당신! 제제가 당신을 얼마나 존경하는지 아시나요. 제제의 원픽은 바로 당신!.", "img": "/img/hbd_zeze.jpg"},
"INTJ": {"friend": "따듯한 로봇이 있다면 바로 당신", "explain": "인간관계 칼같은 당신에게 나타난 제제! 헛소리 안하고 필요한 얘기만 하는 제제가 편할지도?!", "img": "/img/hbd_zeze.jpg"},
"INFJ": {"friend": "사랑해요", "explain": "따듯한 심장을 가진 당신에게 제제가 질척될 거에요. 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ISFJ": {"friend": "사랑해요", "explain": "따듯한 심장을 가진 당신에게 제제가 질척될 거에요. 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ENTJ": {"friend": "우리 사이 거리두기 2단계", "explain": "목표를 향해 불도저 같이 달리는 당신! 제제가 당신을 얼마나 존경하는지 아시나요. 제제의 원픽은 바로 당신!.", "img": "/img/hbd_zeze.jpg"},
"ENFJ": {"friend": "사랑해요", "explain": "따듯한 심장을 가진 당신에게 제제가 질척될 거에요. 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ENFP": {"friend": "사랑해요", "explain": "제제가 살짝 기빨린대요. 그래도 같이 있으면 넘 즐겁대요!", "img": "/img/hbd_zeze.jpg"},
"ESFJ": {"friend": "사랑해요", "explain": "따듯한 심장을 가진 당신에게 제제가 질척될 거에요. 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ESFP": {"friend": "제제: 기 빨릴게", "explain": "제제가 살짝 기빨린대요. 그래도 같이 있으면 넘 즐겁대요! 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ENTP": {"friend": "제제: 기 빨릴게", "explain": "제제의 헛소리도 재밌게 받아치는 당신! 제제가 당신을 좋아한대요.", "img": "/img/hbd_zeze.jpg"},
"INTP": {"friend": "사람한테 관심 없어요", "explain": "인간관계 칼같은 당신에게 나타난 제제! 제제의 헛소리가 가끔은 웃길지도?!", "img": "/img/hbd_zeze.jpg"},
"INFP": {"friend": "사랑해요", "explain": "따닷한 심성의 소유자 당신! 제제의 베프가 되어줄래요?", "img": "/img/hbd_zeze.jpg"},
"ISFP": {"friend": "사랑해요", "explain": "만사가 귀찮은 당신에게 제제가 질척될 거에요. 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ISTP": {"friend": "제제: 집에서 나와야 친해지지!", "explain": "만사가 귀찮은 당신에게 제제가 질척될 거에요. 우리 친하게 지내요!", "img": "/img/hbd_zeze.jpg"},
"ESTP": {"friend": "제제: 기 빨릴게", "explain": "제제가 살짝 기빨린대요. 그래도 같이 있으면 넘 즐겁대요! 우리 친하게 지내요!", "img": "/img/hbd_zeze.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(){
// B를 눌렀을 때는 점수 증가할 필요 없이 다음 페이지로 이동
next();
});
function next() {
// 12문제가 끝나면 문제화면은 숨기고 결과화면 나타나기
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";
alert(mbti + '일 확률 200% (출처: 하버드대 MBTI학과 석박통합과정 제제)');
$("#img").attr("src", result[mbti]["img"]);
$("#friend").html(result[mbti]["friend"]);
$("#explain").html(result[mbti]["explain"]);
} else {
$(".progress-bar").attr('style', 'width: calc(100/12*'+num+'%)'); // 1/12 칸씩 프로그레스 바가 채워짐
$("#title").html(q[num]["title"]);
$("#type").val(q[num]["type"]);
$("#A").html(q[num]["A"]);
$("#B").html(q[num]["B"]);
num++;
}
}
</script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6236e0234af5793f"></script>
</body>
</html>