-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathquestion.js
More file actions
252 lines (214 loc) · 9.19 KB
/
question.js
File metadata and controls
252 lines (214 loc) · 9.19 KB
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
"use strict";
/* 설명: 질문 12가지를 화면에 보여줍니다. */
// =========================== Variables ===========================
const questionList = [
{ // 01
num: "../imgs/question_num/Q1_Frame900.png",
qTop: "오늘은 크리스마스 홈파티 하는 날.<br>방을 어떻게 꾸밀까?",
qBottom: "고민하는 나는?",
btnTop: "오늘은 특별한 날 화려하게 꾸민다.",
btnBottom: "그래도 단순한 게 좋다.<br>미니멀하게 꾸민다."
},
{ // 02
num: "../imgs/question_num/Q2_Frame901.png",
qTop: "오늘은<br>크리스마스",
qBottom: "집에 있는 나는?",
btnTop: "친구들에게 연락해 약속을 잡는다.",
btnBottom: "오늘은 그냥 평범한 하루,<br>집에서 쉰다."
},
{ // 03
num: "../imgs/question_num/Q3_Frame902.png",
qTop: "내가 영화 속<br>히어로라면",
qBottom: "나는?",
btnTop: "불의를 못 참고,<br>바로 행동에 나서는 히어로.",
btnBottom: "계획을 세우고<br>이후에 행동 개시하는 히어로."
},
{ // 04
num: "../imgs/question_num/Q4_Frame903.png",
qTop: "지금 밖에<br>눈이 내린다.",
qBottom: "옆 사람에게 나는?",
btnTop: "\"눈이 2cm 정도 왔네. 내일은 더 쌓인대.<br>뉴스 봐야겠다.\" 라고 말한다.",
btnBottom: "\"눈이 많이 왔네. 집 갈 때 조심해\"<br>라고 말한다."
},
{ // 05
num: "../imgs/question_num/Q5_Frame904.png",
qTop: "크리스마스에<br>재밌는 영화를 보았다.",
qBottom: "친구에게 묘사하는 나는?",
btnTop: "\"주인공이...\" 스토리부터 길고 상세하게<br>구체적으로 설명한다.",
btnBottom: "\"재밌게 볼만하더라.\" 라고 짧게<br>설명한다."
},
{ // 06
num: "../imgs/question_num/Q6_Frame905.png",
qTop: "영화를 선택하려는데<br>평점이 생각보다 낮았다.",
qBottom: "그러면 나는?",
btnTop: "\"평점이 낮다면 재미없을 게 뻔해.\" 라며<br>다른 걸 찾아본다.",
btnBottom: "\"평점이 낮지만 내용이 끌리는데,<br>한 번 봐볼까?\" 라며 영화를 감상한다."
},
{ // 07
num: "../imgs/question_num/Q7_Frame906.png",
qTop: "크리스마스 데이트하는 날,<br>사고가 나 상대방이 늦었다.",
qBottom: "그때 나는?",
btnTop: "\"괜찮아? 놀랐겠다ㅠㅠ 병원 다녀왔어?\"<br>라고 말한다.",
btnBottom: "\"무슨 사고? 어떻게 하다가 다쳤어?\"<br>라고 말한다."
},
{ // 08
num: "../imgs/question_num/Q8_Frame907.png",
qTop: "크리스마스<br>선물을 받았다고",
qBottom: "자랑하는 친구에게 나는?",
btnTop: "\"진짜? 기분 좋겠다!\"라고 말한다.",
btnBottom: "\"뭐 받았어? 봐봐!\" 라고 말한다."
},
{ // 09
num: "../imgs/question_num/Q9_Frame908.png",
qTop: "영화를<br>볼 때,",
qBottom: "나는?",
btnTop: "주인공에게 감정을 이입해서 본다.",
btnBottom: "상황이 어떻게 흘러가는지,<br>논리적으로 사고하면서 본다."
},
{ // 10
num: "../imgs/question_num/Q10_Frame909.png",
qTop: "크리스마스 아침에<br>일어나서",
qBottom: "나는?",
btnTop: "오늘 할 일을 세세하게 계획한다.",
btnBottom: "할 일을 대강 정해두었지만,<br>변경 가능성은 있다."
},
{ // 11
num: "../imgs/question_num/Q11_Frame910.png",
qTop: "크리스마스<br>홈 파티가 끝나고,",
qBottom: "나는?",
btnTop: "어지러진 것들을 바로 치운다.",
btnBottom: "친구들이 떠난 후, 치운다."
},
{ // 12
num: "../imgs/question_num/Q12_Frame899.png",
qTop: "영화관에서 영화를 보려는데,<br>자리가 없다..",
qBottom: "그때 나는?",
btnTop: "\"오늘은 날이 아닌가보다. 다음에 봐야지\"<br>라며 돌아간다.",
btnBottom: "\"그러면 지금 하는 다른 걸 볼까?\" 하며<br>다른 걸 본다."
}
];
const body = document.querySelector("body");
// =========================== window ===========================
window.addEventListener('load', () => {
setTimeout(() => {
scrollTo(0, 0);
}, 10);
});
window.onpageshow = function (event) {
// 뒤로가기 선택시
if (event.persisted) {
window.location.reload();
} // else - 새로운 페이지 로드 시
}
let showCorrectQuestion = null;
// 브라우저 화면 크기가 바뀌었을 때 현문제 위치로 움직인다.
window.addEventListener('resize', () => {
clearTimeout(showCorrectQuestion);
showCorrectQuestion = setTimeout(scrollToNextQuestion(document.documentElement, blocks[questionNum].offsetTop, 20), 200);
});
// 화면에 문제 보여주기
let innerQuestion = questionList.map(function (q) {
return `
<div class="b2">
<div class="q2" style="background-image: url('${q.num}');"></div>
<span class="q1 t0">${q.qTop}</span>
<span class="q1 b0">${q.qBottom}</span>
<div class="t1">
<button class="s1 t0">${q.btnTop}</button>
<button class="s1 b0">${q.btnBottom}</button>
</div>
</div>
`;
});
innerQuestion = innerQuestion.join("");
body.innerHTML += innerQuestion;
// =========================== Variables ===========================
// HTML에 block 12개가 들어가야 아래 변수를 얻을 수 있음.
const selectBtns = document.querySelectorAll(".s1:nth-child(n)");
const qNums = document.querySelectorAll('.q2:nth-child(n)');
const blocks = document.querySelectorAll(".b2:nth-child(n)");
const next = document.querySelector(".n1");
const questionNumMax = questionList.length;
let questionNum = 0;
let clientClicked = "";
let selectBtnIndex = 0;
// =========================== Functions ===========================
let changeNextText = function () {
let leftQuestion = questionNumMax - questionNum - 1;
if (window.innerWidth < 756) {
next.textContent = `${leftQuestion}개의 항목이 남았습니다.\r\n`;
next.textContent += `(총 ${questionNumMax}문항)`;
}
else {
next.textContent = `${leftQuestion}개의 항목이 남았습니다. (총 ${questionNumMax}문항)`;
}
}
let showNextQnum = function () {
qNums[questionNum].style.display = "block";
}
// 부드럽게 아래로 이동할 떄 사용하는 함수
// t = current time, b = start value, c = change in value, d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
};
let vh = function (value) {
let vHeight = window.innerHeight * 0.01;
return vHeight * value;
}
// 버튼을 누를 때마다 다음 문제로 이동한다.
let scrollToNextQuestion = function (element, nextQuestion, duration) {
let setBlockCenter = 0;
// 가로로 긴 모바일 화면에서는 이전 문제의 하단이 더 많이 보인다. (iPhone X, Pixel XL)
setBlockCenter = (window.innerHeight > 811 && window.innerWidth < 429) ? vh(15) : vh(7);
let start = element.scrollTop, change = nextQuestion - start - setBlockCenter, currentTime = 0, increment = 20;
let animateScroll = function () {
currentTime += increment;
let movement = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = movement;
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
}
// (1) next btn text 변경
changeNextText();
// (2) 이동
animateScroll();
// (3) 다음 q-num이 보인다.
showNextQnum();
}
selectBtns.forEach((btn) => {
btn.addEventListener("click", (e) => {
// 선택된 문항의 색을 바꾸어준다.
e.currentTarget.classList.add("active");
if (e.currentTarget.classList.contains("t0")) {
clientClicked += "0";
selectBtns[selectBtnIndex + 1].style.pointerEvents = "none";
}
else {
clientClicked += "1";
selectBtns[selectBtnIndex].style.pointerEvents = "none";
}
// 문항이 선택되면 아래로 이동한다.
if (questionNum < questionNumMax - 1) {
// 다음 문제로
questionNum += 1;
selectBtnIndex += 2;
scrollToNextQuestion(document.documentElement, blocks[questionNum].offsetTop, 650);
} else {
// 모든 문항에 답변하면 결과를 볼 수 있는 버튼이 활성화된다.
next.textContent = `나랑 비슷한 영화 캐릭터 결과 보기`;
next.classList.remove("n1");
next.classList.add("s2");
next.onclick = function () {
location.href = "result.html";
window.sessionStorage.setItem('clientClicked', JSON.stringify(clientClicked));
}
}
});
});
// 첫 문항의 이미지를 화면에 보여준다.
qNums[0].style.display = "block";
changeNextText();