[Javascript] 간단한 mbti 설문 만들기

 

codelion강의를 들으면서 나와 닮은 세렝게티 동물을 알려주는 일종의 mbti테스트를 만들어 보았다.

웹 프레임워크를 사용하지 않고 자바스크립트만을 이용해서 만들었는데, 자바스크립트를 배우는 과정에서 데이터베이스를 거치지 않고 자바스크립트 객체를 사용해서 결과를 도출해내는 과정을 한눈에 볼 수 있었고, 별도의 kakao adfit와 같은 광고와 직접적으로 기업과 광고계약을 맺을 시에 template에 어떻게 노출시키는지에 대해서 알 수 있었다.

다음 사진은 웹 서비스를 대표하는 세가지 화면인 [시작화면], [문제화면], [결과화면]이다. 총 12개의 질문으로 검사자와 맞는 동물을 찾아주는 서비스이며, 12개의 질문은 E/I, S/N, T/F, J/P를 구별하는 문제가 각각 3개씩 들어있다.

 

큰 틀을 우선 잡아보면, 시작화면, 문제화면, 결과화면 3가지의 페이지로 나눠지며, 이는 js상에서 show()와 hide()함수로 화면에 노출시키거나, 숨길 수 있다. 

따라서 다음과 같이 article태그 3개를 사용하여 각각의 template을 구성하였다. 

    <!-- 시작화면 -->
    <article class="start">
        <div class="main_title mt-5 text-center">세렝게티 동물 테스트</div>
        <h1 id = 'sub_title' class="mt-5 text-center">나랑 똑닮은 세렝게티 동물이 궁금하지 않나요?</h1>
        <button type="button" id='startbtn' onclick='start();' class="btn btn-primary mt-5">테스트 시작하기</button>
    </article>
 
    <!--문제화면-->
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input type="hidden" id="type" value="EI">
        <button type="button" id="A" class="btn btn-primary mt-5">답변1</button>
        <button type="button" id="B" class="btn btn-primary mt-5">답변2</button>
    </article>
 
    <!--결과화면-->
    <article class="result">
        <img id="img" class="rounded-circle mt-5" src="" alt="">
        <h2 id="animal" class="text-center mt-5">동물이름</h2>
        <h3 id="explain"class="text-center mt-5">설명</h3>
        
        <!-- Go to www.addthis.com/dashboard to customize your tools -->
        <div class="share addthis_inline_share_toolbox"></div>
    </article>

 

 

[시작화면]은 별거없이 "테스트 시작하기" 버튼을 클릭했을 시에 문제로 넘어가게끔 onclick='start()'로 클릭했을 때 함수를 호출되게 했고

[문제화면]으로 넘어가면 답변1과 답변2로 나누어서 답변 1을 선택했을 시에, E/I or S/N or T/F or J/P 를 결정하는지에 대한 type에 따라 만약에 검사자가 E에 해당하는 답변을 눌렀을 경우에 hidden value를 ++ 해주는 식으로 구성하였다. 예를 들어, 검사를 마친 후에 E/I type에서 value가 2일때, 검사자는 E로 결과가 나올 것이다. 마찬가지로 S/N type에서 value가 1이면, S가 아닌 N으로 결과가 나올 것이다.답변1과 답변2를 선택하게 되면, 다음 문제로 넘어가게 js상에서 num(page번호)를 증가시키면서 미리 만들어둔 질문지를 num에 맞게 바꿔주게 된다.

[결과화면]에서는 미리 자바스크립트 객체로 만들어 둔 결과지에 따라서 검사자에 맞는 동물을 찾아준다. 만약에 검사자가 ISTJ가 나왔을 경우에 "하마"이미지와 함께 특징에 대한 설명을 제공해준다.

완성된 코드는 다음과 같으며, img파일은 넣어놓지 않았으므로 동물 사진은 나오지 않을 것이다.

 

index.html

0.02MB

style.css

0.00MB

 

 

 

알게된점?

간단한 mbti설문을 하는 웹서비스를 만들어보면서 python dictionary와 비슷한 자바스크립트 객체에 대한 이해를 할 수 있었고, 해당 document의 element값을 변환하고. style, img src등의 속성을 attr(), html()함수로 지정해주는 과정을 통해서 jquery가 꽤나 편리하다는 것을 알게 되었다. 

또한 input태그를 hidden으로 설정해주어서  입력값에 대한 결과값을 보이지 않는 곳에 저장해두고, 후에 mbti결과를 도출할 때에 검사 결과를 도출해내는 로직을 구현해보면서 자바스크립트 상에서 어떻게 돌아가는 지에 대한 원리를 파악하는 데 굉장히 도움이 되었음을 느꼈다.