JKyEun/test-world

4가지 테스트를 경험해볼 수 있는 모바일 기준 웹사이트 (장경은, 김계환, 박지원, 김민정)

결과물 페이지 바로가기

프로젝트 개요

• 프로젝트 명: Test-World
• 팀 구성: 장경은, 김계환, 박지원, 김민정
• 4가지 테스트를 경험해볼 수 있는 모바일 기준 웹사이트
• 4가지 테스트는 다음과 같습니다.
  • 경력 유형 검사 (장경은)
  • Big 5 성격 검사 (김민정)
  • 반응속도 테스트 (박지원)
  • 색상 구분 테스트 (김계환)

각 페이지별 사용법

경력 유형 검사

• 메인 페이지

  • 좌측 상단 홈 버튼을 누르면 메인 페이지로 갈 수 있습니다.
  • 햄버거 메뉴를 누르면 다른 테스트로 바로 이동할 수 있습니다.
  • 스타트 버튼을 눌러 시작합니다.

• 테스트 페이지

  • 왼쪽 버튼부터 전혀 그렇지 않다, 그렇지 않다, 보통이다, 그렇다, 매우 그렇다입니다.
  • 본인이 생각하기에 알맞은 정도를 선택합니다.
  • 잘못 대답한 경우 좌측 상단 이전버튼을 누르면 이전 질문에 다시 대답할 수 있습니다.
  • 40개의 질문에 대답하면 결과 페이지가 나옵니다.

• 결과 페이지

  • 결과 페이지에서는 검사 결과 어떤 경력 유형을 가지고 있는지 알려줍니다.
  • 아래에서는 해당 경력 유형에 대해 설명하고, 관련 직업들이 나열됩니다.
  • 각 유형별 점수가 그래프로 나타납니다.
  • 버튼을 눌러 각 유형에 대한 정보를 볼 수 있습니다.
  • 버튼을 눌러 다시 한 번 검사해볼 수 있습니다.
  • 카톡으로 결과공유, 이미지로 결과 저장, URL 복사를 할 수 있습니다.

반응속도 테스트

• 메인 페이지

  • 좌측 상단 홈 버튼을 누르면 메인 페이지로 갈 수 있습니다.
  • 햄버거 메뉴를 누르면 다른 테스트로 바로 이동할 수 있습니다.
  • 플레이 버튼을 눌러 시작합니다.

• 테스트 페이지

• 플레이를 누르는 즉시 게임 화면으로 바뀌며 게임이 시작합니다.

• 색상 패널이 노란색에서 초록색으로 바뀔경우 버튼을 클릭 또는 터치를 하면 반응 시간이 기록뒵니다.

• 색상이 바뀌지 않았는데 버튼을 클릭 또는 터치를 하면 반칙이므로 한번더 버튼을 눌러 게임을 재시작 할 수 있습니다.

• 결과 페이지

  • 결과 페이지 최상단에서 평균 반응속도를 볼 수 있습니다. 반응속도에 따라 글자색이 바뀝니다.
  • 최고 반응속도를 볼 수 있습니다.
  • 반응속도에 따른 결과 분석을 볼 수 있습니다.
  • 기록된 5회의 반응속도를 볼 수 있습니다.
  • 카카오톡 결과공유, 이미지로 결과 저장, URL을 복사 할 수 있습니다.

Big5 성격 검사

• 메인 페이지

  • 좌측 상단 홈 버튼을 누르면 메인 페이지로 갈 수 있습니다.
  • 햄버거 메뉴를 누르면 다른 테스트로 바로 이동할 수 있습니다.
  • 스타트 버튼을 눌러 시작합니다.

• 테스트 페이지

  • 질문은 30문제로 이루어져 있습니다.
  • 총 5개의 성향이 있고 각 성향마다 3가지 유형으로 나누었습니다.
    • 5가지 성향(개방성, 성실성, 외향성, 친화성, 감정 민감성)
  • 성향 당 6 문제로 이루어져 있습니다.
  • 30개의 질문에 대답하면 결과 페이지가 나옵니다.

• 결과 페이지

  • 가장 높은 성향을 상단에 보여 줍니다.
  • 성향과 유형을 점수로 나타내어 보여 줍니다.
  • 세부 사항은 하단이 클릭 버튼을 누르면 볼 수 있습니다.
  • 카카오톡 결과공유, 이미지로 결과 저장, URL을 복사 할 수 있습니다.

색상 구분 테스트

• 메인 페이지

  • 좌측 상단 홈 버튼을 누르면 메인 페이지로 갈 수 있습니다.
  • 햄버거 메뉴를 누르면 다른 테스트로 바로 이동할 수 있습니다.
  • 플레이 버튼을 눌러 시작합니다.

• 테스트 페이지

• 2 x 2 개의 사각형으로 테스트를 시작하며, 그 중 하나만 색깔이 다르다.

• Stage당 제한 시간 15초 내에 다른 색 하나를 찾아야 한다.

• 색이 다른 사각형(정답)을 클릭한 경우 다음 스테이지로 넘어가며, 3단계씩 넘어갈 때 마다 행, 열 사이즈가 늘어난다.

• stage가 올라갈수록 정답과 오답의 색상 차이가 줄어든다.

• 오답을 클릭한 경우 남은 시간이 3초씩 줄어든다.

• 남은 시간이 0초 이하가 되면 게임이 종료, 최종 stage 및 공유하기 출력한다.

• 결과 페이지

  • 게임 종료 메세지와 함께 최종 stage를 보여준다.
  • 카카오톡으로 테스트 공유, 이미지로 결과 저장, URL을 복사 할 수 있습니다.

기술 설명

공통 기능

• Canvas를 이용한 애니메이션

  • 전체적인 디자인이 픽셀 디자인이기 때문에 이러한 분위기에 맞는 트랜지션 효과가 있습니다.
  • Canvas의 z-index 값이 1이 되면서 width와 height가 num인 사각형을 랜덤 좌표에 반복해서 그립니다.
  • 해당 좌표를 배열에 담아두었다가, setTimeOut을 이용하여 사각형 그리기가 끝났을 시간 쯤에 해당 좌표에 clearRect를 이용하여 다시 사각형을 지워줍니다.
  • Canvas를 리셋하고 배열을 비워줍니다. Canvas의 z-index도 -1로 바꿔줍니다.

• 이미지로 결과 저장

  • "HTML2CANVAS" 라는 라이브러리를 이용했습니다.
  • 해당 라이브러리를 이용하여 결과 부분에 해당하는 HTML 태그를 캡쳐합니다.
  • 이미지 다운로드를 위해 createElement로 a태그를 만들고 a태그의 href 속성에 해당 이미지 URL를 삽입합니다.
  • 해당 태그를 클릭하여 이미지를 다운로드합니다.
  • 이 기능이 아이폰에서는 작동하지 않기 때문에 Boolean 타입의 전역변수 isIphone을 선언하여 isIphone이 true일 경우 해당 기능은 작동하지 않고 화면 캡쳐를 사용하라는 문구를 띄웁니다.

• 카톡으로 결과 공유

  • 각 테스트의 결과창에서는 테스트 결과를 카톡으로 공유할 수 있게 했습니다.
  • Kakao SDK를 각 HTML 파일에서 script 태그로 가져왔습니다.
  • kakaoShare() 함수를 선언하여 공유 시 보여질 이미지와 설명 등을 정의해주었습니다.

• URL 복사

  • url을 변수로 선언합니다. url 변수는 사이트의 주소입니다.
  • navigator.clipboard 요소에 접근하여 writeText() 메소드를 사용하여 url을 넣어주었습니다.
  • 복사가 되면 "복사되었습니다!"를 띄웁니다.

경력 유형 검사

• 메인 페이지

  • Start 버튼을 누르면 Canvas 애니메이션이 나오면서 테스트 페이지로 이동합니다.
  • 각 요소들이 보여지거나 숨겨지는 것은 hide 클래스를 추가했다 지웠다 하는 것으로 구현했습니다. hide 클래스의 CSS 속성은 display: none; 입니다.

• 테스트 페이지

  • 1개의 질문이 하나의 section 태그로 묶어져 있으며, test 클래스를 가지고 있습니다.
  • 애초에는 모두 hide 클래스를 가지고 있으나, 메인 페이지에서 Start 버튼을 누르면 첫 번째 질문에는 on 클래스가, 두 번째 질문에는 next 클래스가 생성됩니다.
  • 질문에 답을 하면 goNextPage()가 실행됩니다.
  • 다음 페이지로 넘기는 함수 goNextPage()에서는 prev 클래스를 가진 태그가 hide 클래스를 갖게 되고, on 클래스를 가진 태그가 prev를 갖게 되며, next 클래스를 가진 태그가 on을 갖게 되고, next 태그의 인접 형제가 next 클래스를 갖게 됩니다.
  • 이전 페이지로 돌아가는 함수 goPrevPage()도 이와 같은 로직으로 작동합니다.
  • prev 클래스를 가진 태그는 CSS로 translateX(-150%), next 클래스를 가진 태그는 CSS로 translateX(150%)가 적용됩니다.
  • 마지막 질문지일 때 goNextPage()가 실행되면 getResult() 함수를 실행합니다.

• 결과 페이지

  • 결과는 각 유형 별 점수를 합산하여 100점 만점으로 환산합니다.
  • 다른 유형에 대한 질문이라도 특정 문항은 해당 유형의 점수에서 보너스 점수를 추가하거나 감점시킵니다.
  • 가장 높은 점수를 가진 유형이 userType 변수에 할당되고 이에 따라 summary와 explain 클래스를 가진 태그 안에 요약과 설명이 입력됩니다.
  • 그래프는 애니메이션 시간을 고려하여 setTimeOut을 이용하여 1초 후부터 그려지기 시작합니다.
  • 다시 시작하는 버튼을 누르면 페이지가 새로고침되면서 첫 화면으로 돌아가게 됩니다.
  • 카톡으로 결과 공유는 userType을 매개변수로 전달하여 kakaoShare() 함수에서 해당 유저의 타입에 따른 이미지와 설명을 띄우도록 합니다.

반응속도 테스트

• 메인 페이지

  • start, home 버튼은 a태그의 href속성을 통해 테스트 페이지, 메인 페이지로 이동 할 수 있게 하였습니다.
  • PLAY 버튼에 mousedown, touchdown EventListener를 적용시키고 버튼 이미지를 바꿔 버튼이 눌리는 효과를 주었습니다.

• 테스트 페이지

  • 테스트 페이지와 결과 페이지의 container 모양을
  • 색상 패널
    • 3가지 색으로(노란색, 초록색, 빨간색) 패널 및 버튼을 바꾸는 함수를 만들어 패널이 바뀌어야 할 상황에 호출하였습니다.
    • window.onload 함수 재정의를 통해 테스트 페이지로 넘어올 시 노란색 패널을 설정하고, timer함수를 실행해 게임이 바로 시작될 수 있게 하였습니다.
    • setTimeouta 메서드를 이용하여 3~7초의 랜덤한 시간에 색상 패널이 바뀔 수 있게 하였습니다.
  • 버튼
    • navigator.userAgent에 접근하여 사용자의 디바이스를 확인하고 디바이스에 따라 모바일 환경은 touchdown, pc환경은 mousedown 이벤트를 추가하였습니다.
    • 이벤트 리스너 함수에 패널의 색으로 조건을 걸어 버튼의 이벤트을 설정하였습니다. 패널의 색에 따른 버튼의 역할은 각각 다음과 같습니다. 노란색 : 노란색에 클릭, 터치할 경우 반칙이므로 빨간색 패널로 바꾸고 timeOut을 종료시켜 게임이 중단될 수 있도록 하였습니다. 초록색 : 초록색에 클릭, 터치할 경우 시간을 기록하고 노란색 패널로 바뀔 수 있게 하였습니다. 그리고 setTimeout메서드를 다시 실행시켜 게임이 계속 진행될 수 있게 하였습니다. 또 기록 list의 길이를 확인하여 게임이 끝났는지 확인하고 시간을 기록할 수 있게 하였습니다. 빨간색 : 클릭 시 기록을 초기화하고 게임을 다시 시작해야하기 때문에 recordUl의 HTML요소를 비우고 resultArr(기록 저장 배열)을 빈 값으로 초기화 하였습니다.
    • 변화의 인지를 더 쉽게 하기 위해 버튼의 색이 바뀌는 순간 animate.css 라이브러리를 이용하여 버튼이 제자리에서 bounce되는 애니메이션을 추가했습니다.
  • 시간 기록
    • 측정 시간은 date 생성자를 통해 패널이 초록색으로 바뀌는 순간을 START_TIME, 버튼이 클릭되는 순간을 END_TIME 변수에 저장한 후 차를 계산해 측정하였습니다.
    • 기록을 띄우기 위한 html ul 태그를 미리 만들어 놓고 기록이 생기면 ul태그의 자식요소로 li태그를 만들어 기록을 렌더링 하였습니다.
    • 추후 결과 기록을 위해 resultArr 배열에 기록을 저장하였습니다.
    • 기록이 저장될 때 하나하나 생기면서 쌓이는 느낌을 주기위해 animate.css 라이브러리를 통해 기록이 날아와 자리잡는 애니메이션을 추가하였습니다.
    • li태그의 갯수를 childElementCount를 통해 체크하고 5개가 되면 test에 필요한 요소들에 hide클래스를 추가하고 결과 요소들의 hide를 없애 결과 페이지로 이동할 수 있게 하였습니다.

• 결과 페이지

  • 평균 반응속도는 5번의 결과시간이 들어있는 resultArr의 평균을 reduce를 통해 구하여 표시했습니다.
  • 평균 반응속도의 countUp 애니메이션은 setInterval을 통해 0부터 증가시켜 구현하였고 범위에 따라 조건을 주어 텍스트 색을 바뀌도록 하였습니다.
  • 최고 반응속도는 Math.min메서드를 통해 resultArr에서 가져와 출력하였습니다.
  • 결과 분석은 범위에따라 알맞은 문구가 출력되도록 하였고 setInterval을 통해 문자열을 잘라 넣어 타이핑 효과를 구현하였습니다.

Big5 성격 검사

• 메인 페이지

  • Start 버튼을 누르면 Canvas 애니메이션이 나오면서 테스트 페이지로 이동합니다.
  • 각 요소들이 보여지거나 숨겨지는 것은 hide 클래스를 추가했다 지웠다 하는 것으로 구현했습니다.
  • hide 클래스의 CSS 속성은 display: none; 입니다.
  • start 버튼이 hover되었을 때 커지는 효과를 주어 입체적으로 표현하였습니다.

• 테스트 페이지

  • 질문들을 배열로 만들어 준 후 for문을 사용하여 넣어주었습니다.
  • .answer 클래스를 가진 요소를 찾아 createElemnet와 innerText를 이용하여 "전혀 그렇지 않다"와 "매우 그렇다" 문구를 추가하였습니다.
  • 작업의 진행 상황을 HTML progress 요소를 사용하여 현재 페이지 수를 기반으로 current-percentage 클래스를 가진 요소의 너비를 업데이트하여 작업 완료 비율을 나타낼 수 있었습니다.
    • .progress-bar 클래스를 가진 요소의 value 속성을 1 증가시키고 currentPage 변수를 업데이트하였습니다.

• 결과 페이지

  • 5개의 성향과 각 성향의 3가지 유형별 점수를 계산하기 위해 2차원 배열을 사용하였습니다.
  • 2차원 배열을 사용함으로써 세부 유형의 점수를 따로 계산하여 나타낼 수 있었습니다.
  • 점수는 전혀 그렇지 않다 1점부터 매우 그렇다 5점으로 측정하였습니다.
  • 한 성향과 각 유형의 점수를 100점 만점으로 환산하여 보기 편하게 하였습니다.
  • 가장 높은 성향이 userType변수에 할당되어 어떤 성향이 가장 높은지 summary에 입력됩니다.

색상 구분 테스트

• 메인페이지

  • play, home 버튼은 a태그의 href속성을 통해 테스트 페이지, 메인 페이지로 이동 할 수 있습니다.
  • PLAY 버튼에 mousedown, touchdown EventListener를 적용시키고 버튼 이미지를 바꿔 버튼이 눌리는 효과를 주었습니다.
  • 각 요소들이 보여지거나 숨겨지는 것은 hide 클래스를 추가했다 지웠다 하는 것으로 구현했습니다. hide 클래스의 CSS 속성은 display: none; 입니다.

• 테스트 페이지

  • 테스트 사각형 아이템 갯수는 palettRow ** 2 로 설정하여 행의 제곱으로 전체 아이템을 구현했습니다. 1 stage는 2개로 시작하여 2**2 = 4개로 시작합니다.
  • 색상이 다른 아이템은 전체 아이템 갯수에서 Math.random() 함수를 사용하여 임의의 하나를 선정했으며, div class 에서 id 값을 target 부여하였습니다.
  • 사각형 아이템들의 색상은 너무 밝은 색상과 어두운 색상을 피하기 위하여 100-200사이의 범위값에서 색상을 지정하게 했으며, Math.random() 와 Math.floor()를 사용하여 색상 값을 지정하였습니다.
  • 테스트 stage가 올라갈 때 마다 변하는 타켓의 투명도는 opcity 값을 지정하여 한 stage 마다 0.02씩 증가하고 최대 0.94 이상으로 증가하지 않도록 지정했습니다. toFixed(2)를 사용하여 소수점 2자리 까지 표현햇습니다.
  • 오답 선택시에는 time - 3으로 지정하여 3초씩 줄어들게 표현하였으며, 떨리는 애니메이션 효과는 keyframe을 사용하여 transform: rotate() 값을 1.5 ~ -1.5deg 로 지정하여 떨리는 효과를 주었습니다.

• 결과 페이지

  • 부트스트랩 modal 창을 사용하여 게임종료 및 ${stage}를 보여주었습니다.
  • ${resultText}와 if (stage > 0 && stage <= 5)를 사용하여 5개 단위로 30stage 까지 출력 문구를 설정하였습니다.
  • window.onload = function () 와 playerTime.innerHTML = time, playerStage.innerHTML = stage 를 사용하여 기본 세팅값 및 자동시작을 구현하였습니다.