-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
472 lines (438 loc) · 24.8 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!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>곰돌이 성격 테스트</title>
<meta
name="description"
content="나의 성격과 닮은 곰돌이를 MBTI를 기반으로 추천해주는 테스트입니다."
/>
<!-- Open graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="곰돌이 성격 테스트" />
<meta
property="og:description"
content="나의 성격과 닮은 곰돌이를 MBTI를 기반으로 추천해주는 테스트입니다."
/>
<meta
property="og:image"
content="https://bear-test.netlify.app/title.png"
/>
<meta property="og:url" content="https://bear-test.netlify.app/" />
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Jua&display=swap"
rel="stylesheet"
/>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-F4X0413S2E"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-F4X0413S2E');
</script>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<!-- 시작화면 -->
<article class="start">
<h1 class="mt-5 text-center" id="title_text" style="color: #514538">
나와 닮은 곰돌이는?
</h1>
<img
class="mt-1"
src="title.png"
alt="초기화면"
style="
margin: 0 auto;
padding: 0 10px 0;
width: 300px;
height: 300px;
"
/>
<button type="button" class="btn mt-5" onclick="start();">
테스트 시작하기
</button>
</article>
<!-- 문제화면 -->
<article class="question">
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: calc(100 / 12 * 1%)"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="qBox mt-3">
<p id="title" class="text-center" style="color: #514538">
문제
</p>
</div>
<input id="type" type="hidden" value="EI" />
<!--아떤 type의 문제인지-->
<button id="A" type="button" class="btn mt-3">Primary</button>
<button id="B" type="button" class="btn mt-2">Primary</button>
</article>
<!-- 결과 화면 -->
<article class="result">
<img id="img" class="mt-5" src="result/lion.jpg" alt="animal" />
<h2 id="animal" class="text-center mt-3" style="color: #514538">
동물이름
</h2>
<h4
id="pre"
class="text-center mt-1"
style="
color: #514538;
font-family: sans-serif;
font-weight: bold;
"
>
mbti
</h4>
<div
class="eBox mt-2"
style="
width: fit-content;
padding: 15px;
margin: 0 auto;
border-radius: 30px;
background-color: #735530;
"
>
<p
id="explain"
class="text-center mt-2"
style="
color: white;
font-family: sans-serif;
font-weight: bolder;
"
>
설명
</p>
<p
class="mt-5"
style="
color: white;
font-family: sans-serif;
font-weight: bolder;
text-align: center;
"
>
테스트 공유하기 ▼
</p>
<!-- SNS 공유 기능 -->
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="share addthis_inline_share_toolbox mb-2"></div>
</div>
</article>
<!-- 광고 배너 -->
<article class="kakao_ad mt-5">
<ins
class="kakao_ad_area"
style="display: none"
data-ad-unit="DAN-7CRnWLR6NEcPiPoZ"
data-ad-width="320"
data-ad-height="100"
></ins>
<script
type="text/javascript"
src="//t1.daumcdn.net/kas/static/ba.min.js"
async
></script>
</article>
<!-- 외부 광고 연습 -->
<!-- <a class = "mt-5 banner" href = “https://1olo.tistory.com?utm_source=bear_test&utm_medium=mbti_test&utm_campaign=iiolo”>
<img class = "banner-img" src=”banner.png” alt=”banner”>
</a> -->
<!-- 점수 계산 -->
<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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<!-- Jquery 이용 -->
<script>
// 문제 객체에서 정보 가져오기
var num = 1;
// 문제 정보를 객체로 만들기
var q = {
//type 별로 3문제씩 총 12문제 생성
1: {
title: '평일 내내 일한 나, 주말엔 뭐하고 쉴까?',
type: 'EI',
A: '평일 내내 회사에 있었으니까 밖에 나가야지! 그동안 못봤던 친구들과 파티파티🎉!',
B: '주말엔 집콕이지. 혼자 집에서 영화 보면서 편하게 쉬기',
},
2: {
title: '친구가 나와의 약속에서 모르는 사람을 데려왔다.나는 어떻게 반응할까?',
type: 'EI',
A: '친구의 친구면 내친구지! 근데 너 왜 나한테 말 안하고 데려왔냐',
B: '불편하지만 아닌 척,, 하지만 친구와 단 둘이 있을 때보다 훨씬 말 수가 줄어든다.',
},
3: {
title: '전화와 메시지 둘 중 내가 좋아하는 연락방법은?',
type: 'EI',
A: '전화, 직접 목소리 들으면서 내 의견을 바로바로 말할 수 있어 좋아',
B: '메시지, 일단 생각을 정리하고 의견을 전달할 수 있는 메시지가 편해',
},
4: {
title: '멍 때릴 때 나는? ',
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: '밤새 열심히 준비한 프로젝트 발표를 끝낸 나에게 친구가 말을 걸어온다. “너 열심히 한 것 같진 않은데 엄청 잘했다?” 이 때 나의 생각은?',
type: 'TF',
A: '열심히 하지 않아도 결과는 뛰어난 나,,,,, 이런 나에게 취한다,,, 나 자신 너무 멋져,,,',
B: '열심히 하지 않았다고.? 이거 하려고 밤까지 샜는데.. 너가 뭘 알아!',
},
10: {
title: '제출 기한이 정해져 있는 과제를 준비하는 나의 방식은?',
type: 'JP',
A: '과제 마감일까지의 계획표를 세워놓고 그 계획에 따라 과제를 시작한다.',
B: '시작이 반이다. 일단 과제에 대한 자료조사부터 해보자',
},
11: {
title: '요리를 준비하는 나의 방식은?',
type: 'JP',
A: '무조건 레시피 대로, 정량, 재료 다 똑같이 준비해서 순서대로 하면 망할 리 없어',
B: '요리는 손 맛이지, 재료가 부족해도 비슷한 재료로 대체해도 맛있어!',
},
12: {
title: '친구가 갑자기 오늘 만나서 놀자고 한다. 이때 나의 반응은?',
type: 'JP',
A: '별다른 스케줄이 없다면 좋아. 하지만 할 일이 있다면 친구에게 미안하지만 만나지 못할 거 같다고 말하기',
B: '완전 예쓰!!! 바로 나가서 논다. 오늘의 일은 내일의 내가 하겠지!',
},
};
// mbti 결과를 객체로 저장
var result = {
ISFP: {
animal: '숨겨진 인싸 곰돌이',
pre: 'ISFP',
explain:
'누워있을 수 있는데 왜 눕지 않죠? 누워있는 것과 조용한 것을 좋아하는 당신이지만 막상 밖에 나가면 인기폭발이에요.편한 사람들 사이에 있으면 화려한 언변을 자랑하거든요 주변 사람들에게 언제나 겸손하고 따뜻한 사람으로 평가되는 당신은 숨겨진 인싸 곰돌이와 잘 어울려요.',
img: 'result/ISFP.png',
},
ISFJ: {
animal: '다정한 곰돌이',
pre: 'ISFJ',
explain:
'화 내는 게 뭐죠…? 성격이 본래 온화해서 싸움을 싫어해요. 어쩌면 팀프로젝트를 할 때 협조 잘하는 팀원으로 소문나 각 팀에서 서로 당신을 데려가려고 했을지도 몰라요. 성실하고 온화한 성격으로 협조를 잘하는 당신은 다정한 곰돌이와 잘 어울려요.',
img: 'result/ISFJ.png',
},
ISTP: {
animal: '모험적인 곰돌이',
pre: 'ISTP',
explain:
'호기심이 많아 이것 저것 건드려보는 당신은 손재주가 좋은 편이에요. 직접 해봐야 직성이 풀리는 편이라 궁금한 거는 꼭 해 봐야해요. 그런 당신에게 너무 엄격한 규칙은 오히려 독이 될 수 있어요 이론 보단 몸으로 직접 배우는 것을 좋아하는 당신은 모험적인 곰돌이와 잘 어울려요.',
img: 'result/ISTP.png',
},
ISTJ: {
animal: '믿을만한 곰돌이',
pre: 'ISTJ',
explain:
'옆에서 사건 사고가 일어나도 침착한 당신! 당신은 아무리 큰 사고가 일어나도 그 상황 속에서 해야 할 것을 찾아 논리적으로 결정하고 흐트러짐 없이 해 나가는 편입니다. 확실한 것을 좋아해 신중한 타입입니다. 어떤 것을 하더라도 구체적이고 사실적인 것을 원하는 당신은 믿을만한 곰돌이와 잘 어울려요.',
img: 'result/ISTJ.png',
},
INFP: {
animal: '용감한 곰돌이',
pre: 'INFP',
explain:
'조용하지만 사람들의 말에 잘 귀 기울이는 당신은 타고난 리스너에요! 당신에게 위로를 받은 사람들은 줄 단위로 세어야 할 지경이에요.이런 당신을 부드럽다고 생각할 수 있지만 사실 당신은 용감하다 라는 말이 더 잘 어울려요. 왜냐하면 자신의 신념과 다른 일이면 당당히 아니라고 말하거든요. 그런 당신은 용감한 곰돌이와 잘 어울려요',
img: 'result/INFP.png',
},
INFJ: {
animal: '신비로운 곰돌이',
pre: 'INFJ',
explain:
'당신은 자신이 생각하는 선을 믿고 그에 따라 행동하는 경우가 많아요. 자신의 가치관이 흔들리면 다소 공격적으로 변할 때도 있어요. 하지만 만약 모순이 있다면 해결하려 노력하는 편이에요. 타인과의 원만한 관계를 유지하는 편이지만 혼자만의 시간은 필요한 당신은 신비로운 곰돌이와 잘 어울려요. ',
img: 'result/INFJ.png',
},
INTP: {
animal: '논리적인 곰돌이',
pre: 'INTP',
explain:
'경험보다 이론이 중요한 편인 당신은 다양한 지식을 많이 갖고 있는 편이에요 그래서 자신이 관심있지 않은 주제에 대해서는 말이 많은 편이에요 하지만 양보단 질이라고 생각하는 당신은 쓸데없는 잡담에는 말을 아끼는 경우가 많아요 조용하면서도 솔직한 당신은 논리적인 곰돌이와 잘 어울려요. ',
img: 'result/INTP.png',
},
INTJ: {
animal: '지적인 곰돌이',
pre: 'INTJ',
explain:
'냉철한 판단을 자랑하는 당신은 감성보단 이성을 믿는 편이에요. 목표를 세우고 계획하는 것을 좋아해요 그리고 일관성과 합리성 그리고 실용성을 증명하는 것을 좋아해서 토론에 있어서 논리적으로 잘하는 편이에요 어떤 것에 대해 먼저 의심하고 판단하는 신중한 당신은 지적인 곰돌이와 잘 어울려요.',
img: 'result/INTJ.png',
},
ESFP: {
animal: '쾌활한 곰돌이',
pre: 'ESFP',
explain:
'타고난 엔터테이너인 당신은 늘 사람들 속에 있어요. 열정적이고 화려한 걸 좋아해서 핫플레이스를 남들보다 찾아내는 능력이 뛰어나요. 또한 편견이 없어서 굉장히 관대한 편이에요. 그래서 다양한 인맥을 가지고 있답니다. 낙천적이고 정이 많은 당신은 쾌활한 곰돌이와 잘 어울려요.',
img: 'result/ESFP.png',
},
ESFJ: {
animal: '인싸 곰돌이',
pre: 'ESFJ',
explain:
'사람들 사이에서 인정을 받고 관심을 받는 것을 좋아하는 당신은 사소한 것들까지도 계획을 세워 다 이뤄내고 말아요.하지만 그 와중에 사람들과의 관계도 놓치지 않습니다.당신을 한마디로 표현하면 인싸 아닐까요? 캘린더에 약속이 빽빽 차 있는 당신은 인싸 곰돌이와 어울려요.',
img: 'result/ESFJ.png',
},
ESTP: {
animal: '장난스러운 곰돌이',
pre: 'ESTP',
explain:
'농담을 즐겨하는 당신의 주변에는 웃음이 가득해요. 인생은 한번 뿐, 즐겨야 한다가 모토인 당신은 언제나 긍정적인 편이에요. 재치있고 눈치가 빨라서 적응이 빠른 당신은 주변 사람들에게 유쾌한 사람으로 평가돼요. 마치 바람 같이 자유롭고 한 자리에 머무는 게 지루함을 느끼는 당신은 장난스러운 곰돌이와 잘 어울려요.',
img: 'result/ESTP.png',
},
ESTJ: {
animal: '단호한 곰돌이',
pre: 'ESTJ',
explain:
'결정을 하는 데 있어서 가장 빠른 사람이라고 할 수 있는 당신! 현실적으로 효율적인 방법을 잘 찾아내는 당신은 당신도 모르게 리더가 돼 있었을 가능성이 큽니다.명확하고 논리적 기준을 가지고 판단하는 당신은 단호한 곰돌이와 잘 어울려요. ',
img: 'result/ESTJ.png',
},
ENFP: {
animal: '재주가 많은 곰돌이',
pre: 'ENFP',
explain:
'사람 간의 미묘한 기류를 잘 읽어내 갈등이 일어나기도 전에 당신이 먼저 막지 않나요? 사람에 대한 통찰력이 높은 편이에요. 또한 상상을 많이 하고 다방면에서 다재다능한 당신은 트렌드를 주도하는 편입니다. 심각한 고민은 하지 않아 여러가지 도전을 즐기는 편이기도 하죠. 획기적인 아이디어로 사람들을 놀래키는 경우가 많은 당신은 재주가 많은 곰돌이와 잘 어울려요. ',
img: 'result/ENFP.png',
},
ENFJ: {
animal: '열정적인 곰돌이',
pre: 'ENFJ',
explain:
'감정이입을 잘하는 타입으로 그 감정을 숨기지 않고 표출하는 당신! 사람들에 대한 관심이 많아 사람들에 대한 이해도가 뛰어나요 친구의 재능을 당신이 친구보다 먼저 알아채는 경우가 있지 않았었나요? 사람들과의 상호작용을 중요하게 여기고, 누구보다 어려움에 처한 사람이 있다면 기꺼이 도와주는 당신은 열정적인 곰돌이와 잘 어울려요.',
img: 'result/ENFJ.png',
},
ENTP: {
animal: '유창한 곰돌이',
pre: 'ENTP',
explain:
'말 잘하다는 얘기를 하도 들어서 귀에 딱지가 앉을 거 같아요. 아는 지식이 많아 여러 주제들의 이야기에 참여 할 수 있어 다양한 사람들과도 잘 어울려요. 같은 말이라도 당신이 말하면 사람들이 호응을 잘해주지 않나요? 언변의 마술사인 당신은 유창한 곰돌이와 잘 어울려요. ',
img: 'result/ENTP.png',
},
ENTJ: {
animal: '강력한 곰돌이',
pre: 'ENTJ',
explain:
'논리적이고 객관적인 것을 좋아하는 타입인 당신! 어렸을 적 이해되지 않으면 바로 손 들고 질문하는 학생이 아니었나요? 그만큼 문제를 찾아내고 해결하는 것을 좋아하는 편이에요. 맡겨진 일에 대해 책임감을 강하게 느끼는 편이라 한번 일을 시작하면 끝을 내야 직성이 풀려요. 그런 당신은 강력한 곰돌이와 잘 어울려요.',
img: 'result/ENTJ.png',
},
};
function start() {
$('.start').hide();
$('.question').show();
next(); //처음 시작 버튼 눌렀을 때 시작화면 숨기고 문제화면을 보여주면서 바로 첫번째 문제가 나올 수 있도록 해주기
shareSNS();
}
// A버튼을 눌렀을 때만 value 값 +1
$('#A').click(function () {
var type = $('#type').val();
var preValue = $('#' + type).val();
$('#' + type).val(parseInt(preValue) + 1);
next();
});
// B버튼 클릭시 value 값 증가하지 않아도 되므로 next 함수만 적용(즉 점수 저장 안하고 다음 문제로 넘어감)
$('#B').click(function () {
next();
});
// 다음 문제로 넘어가는 함수 만들기(문제랑 버튼들이 다음 문제에 해당하는 것으로 변경됨)
function next() {
if (num == 13 /*마지막 문제에서 다음버튼 클릭시 */) {
$('.question').hide();
$('.result').show();
//mbti를 판단하는 최종 로직
var mbti = '';
$('#EI').val() < 2 ? (mbti += 'I') : (mbti += 'E'); // EI
$('#SN').val() < 2 ? (mbti += 'N') : (mbti += 'S'); // SN
$('#TF').val() < 2 ? (mbti += 'F') : (mbti += 'T'); // TF
$('#JP').val() < 2 ? (mbti += 'P') : (mbti += 'J'); // JP
// alert(mbti); //test용
// 이미지 주소
$('#img').attr('src', result[mbti]['img']); //result의 mbti라는 key의 value 안 객체 속 img라는 key의 value
//mbti
$('#pre').html(result[mbti]['pre']);
// 동물 이름
$('#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++;
}
}
</script>
<!-- AddThis SNS 공유기능 -->
<!-- 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-62027571b10ddddd"
></script>
</body>
</html>