From d665aa2eb8270c302a8a7c5de52066a69e05af95 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 23 Mar 2021 01:55:55 +0900 Subject: [PATCH] Modify before test done --- public/script/useCookies.js | 28 +++++++++++++---- public/style.css | 41 ++++++++++++++++++++----- views/index.ejs | 60 ++++++++++++++++++++++++++----------- 3 files changed, 97 insertions(+), 32 deletions(-) diff --git a/public/script/useCookies.js b/public/script/useCookies.js index 2109b63..6899aaf 100644 --- a/public/script/useCookies.js +++ b/public/script/useCookies.js @@ -12,15 +12,31 @@ function checkSubmitTest() { } - function afterSubmitPageTransition() { let cookies = Cookies.get(); - if(cookies.curPage) { - gsap.to('#root', { duration: 0, scrollTo: { y: cookies.curPage, offsetY: 0 } } ); + if (cookies.curPage) { + gsap.to('#root', { duration: 0, scrollTo: { y: cookies.curPage, offsetY: 0 } }); } else { - gsap.to('#root', { duration: 0, scrollTo: { y: '#main_top', offsetY: 0 } } ); + gsap.to('#root', { duration: 0, scrollTo: { y: '#main_top', offsetY: 0 } }); } } - - +function checkTestDone() { + let ownScore = document.querySelectorAll('.own-score.chart-comment'); + let lastChartComment = document.querySelector('#last-score-comment'); + let notYet = document.querySelector('.not-yet-test'); + let cookies = Cookies.get(); + if (cookies.test === 'done') { + ownScore.forEach(ownScore => { + $(ownScore).show(); + }) + $(lastChartComment).show(); + $(notYet).hide(); + } else { + ownScore.forEach(ownScore => { + $(ownScore).hide(); + }) + $(lastChartComment).hide(); + $(notYet).show(); + } +} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 58ecccd..4d75273 100644 --- a/public/style.css +++ b/public/style.css @@ -376,7 +376,7 @@ body { z-index: 10; font-size: 5rem; font-weight: 800; - margin: 0 0 8rem 5%; + margin: 3rem 0 8rem 5%; } #img-container { @@ -508,7 +508,7 @@ body { } #hover_icon1 { - transform: translate(-40%, 0%); + transform: translate(-60%, 0%); } #hover_icon2 { @@ -549,6 +549,8 @@ body { .label_hover { color: white; + margin: 0.3rem; + font-size: 15px; } .background[data-index="1"] .color_box_hover { @@ -559,11 +561,6 @@ body { background-color: #787878; } -.label_hover { - margin: 0.3rem; - font-size: 1vw; -} - .img_people { width: 100%; display: flex; @@ -756,6 +753,24 @@ body { margin-bottom: 3rem; } +.not-yet-test { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; +} + +.not-yet-test-comment { + font-size: 35px; + font-weight: 700; +} + +#menu-desc-comment { + margin-top: 20px; + font-size: 20px; + font-weight: 700; +} + /* feedback chart css */ @@ -804,6 +819,7 @@ body { display: flex; justify-content: center; align-items: center; + padding-top: 5%; } .chart-desc-comment { @@ -813,10 +829,11 @@ body { flex-flow: column; justify-content: center; align-items: center; + margin: 0 10%; } .chart-desc-div { - margin: 5% 0; + margin: 0 0 5% 0; } @media (max-width: 1200px) { @@ -1095,6 +1112,14 @@ body { margin: 1rem 0; font-size: 25px; } + .not-yet-test-comment { + font-size: 25px; + text-align: center; + } + #menu-desc-comment { + font-size: 20px; + text-align: center; + } #propose-passover { width: 250px; margin: 0 7% 5rem auto; diff --git a/views/index.ejs b/views/index.ejs index 9349983..26fc2a5 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -171,7 +171,7 @@
평범한 일상입니다.
+ 평범한 일상입니다.
다른 사용자분들의 결과도 확인해보세요! @@ -656,10 +676,10 @@
- 파란 색 선이 오른쪽으로 더 치우쳐져 있을 수록
두번째 테스트에서 더 좋은 결과가 많이 나온 것을 의미해요! + 파란 색 선이 오른쪽으로 더 치우쳐져 있을 수록 저희 서비스를 통해 사용자들의 인식이 개선되었음을 의미해요!
- 점수 분포 그래프를 통해 다른 사용자 분들의
인식 개선 서비스 이용 전 후, 테스트 결과를 비교해보세요! + 점수 분포 그래프를 통해 다른 사용자 분들의 인식개선 서비스 이용 전 후, 인식개선 결과를 비교해보세요!
@@ -667,7 +687,7 @@
- 인식 개선 서비스를 이용한 뒤의 점수 변화 비율 + 인식개선 서비스를 이용한 뒤의 점수 변화 비율
@@ -678,10 +698,10 @@
- 초록색 부분이 더 클수록 두번째 테스트에서
점수가 상승한 사람이 많다는 것을 의미해요! + 초록색 부분이 더 클수록 두번째 테스트에서 인식개선 점수가 상승한 사람이 많다는 것을 의미해요!
- 점수 변화 비율 그래프를 통해 점수가 상승한
사용자분들을 확인해 보세요! + 점수 변화 비율 그래프를 통해 인식개선 점수가 상승한 사용자분들을 확인해 보세요!
@@ -693,11 +713,15 @@