2/21(화) 실검에 오르는 세렝게티 동물 테스트 만들기

정민지·2023년 2월 21일
멋사멋쟁이사자처럼백엔드
0

멋쟁이사자처럼 백엔드 스쿨

목록 보기
4/15
  1. MBTI 활용 = 총 16가지 성격 유형
    E/I, S/N, T/F, P/J 테스트 여러개 -> e와 i 중 하나 판단

3문제씩 4번 => 총 12문제

개발 환경 세팅

  1. 브라우저: 크롬
  2. 코드 에디터: Visual Studio Code

1. index.html 생성

왼쪽 종이 버튼 누르고 open folder 해서 저장할 폴더 만들고 열기
문서 추가해서 index.html로 이름 바꾸기
! 하고 탭 눌러서 형식 불러오기

2. style.css 생성

문서 추가해서 style.css로 이름 바꾸기
index.html 파일에서 head 태그 사이에 link:css 쓰고 엔터 해서 연결

3. Bootstrap (JQuery 포함) 연결

-CSS를 직접 꾸밀 필요 없이 복사해서 가져다 씀
-previous release 4.5버전 CSS 복사해서 head 태그 사이에 넣기
-<link:css> 위에 넣기
-CSS 요소중 동적으로 움직이게 만든것도 있기 때문에
-JS 코드도 복사해서 body 태그 사이에 넣기

<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>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

4. Live Server 설치

-VS code 왼쪽에 블럭 모양 선택하면 다양한 extential 코드 사용 가능
-Live server 검색해서 install
-화면 오른쪽 마우스 클릭, open with live server 클릭
=> 바로 실제 사이트처럼 볼수 있음
-html lang="ko"로 바꾸면 번역하겠냐는 창 안뜸

세렝게티 동물 테스트 제작하기 1

버튼 디자인이 안이쁘니 bootstrap에 button 검색해서 한줄 복사해오기
벽에서 글자 띄우려면 bootstrap class 이용
h1 class="mt-5" => margin top 5만큼
text center => 가운데 정렬

article 태그로 두 태그 감싸기
탭 누르면 자동 들여쓰기
article class="start"

index.html

<!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>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5">테스트 시작하기</button>
    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

style.css

.start{
    display: flex;
    flex-direction: column;
}

세렝게티 동물 테스트 제작하기 2

jQuery 이용해서 버튼 눌렀을때 현재 화면 사라지고 문제 화면 보여주기

index.html

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick="start();">테스트 시작하기</button>
    </article>

    <article class="question">
        <h2>문제</h2>
    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        function start(){
            $(".start").hide();
            $(".question").show();
        }
    </script>

style.css

.start{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

세렝게티 동물 테스트 제작하기 3

문제 화면 꾸미기 - 프로그레스 바
bootstrap 에서 progress 검색
25% 차있는거 복사해서 문제 화면에 붙여넣기
문제 화면만 보이게 start 클래스 주석 처리, css에서 question도 주석
article 태그는 모두 세로 정렬
태그 사이에 마진 주기 mt-5

주석처리 방법
ctrl + /
command + /

index.html

<body class="container">
    <!-- <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5">테스트 시작하기</button>
    </article> -->

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        <h2 class="text-center mt-5">문제</h2>
        <button type="button" class="btn btn-primary mt-5">Primary</button>
        <button type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        function start(){
            $(".start").hide();
            $(".question").show();
        }
    </script>


</body>

style.css

article{
    display: flex;
    flex-direction: column;
}
/* 
.question{
    display: none;
} */

세렝게티 동물 테스트 제작하기 4

  1. E/I=2 ex) E가 2점이면 I는 1점 -> 성향 E
  2. S/N
  3. T/F
  4. J/P

둘중에 앞에만 점수 매기기->자동으로 뒤쪽 점수 계산됌
3문제씩 총 12개 문제

결과가 2 이상이면 앞쪽, 아니면 뒤쪽 선택

각 4가지 항목 마다 점수 저장할 변수 생성, input type

사이트 오른쪽 마우스 클릭-> 검사 -> console 창이랑, 변수 값 볼수 있음

index.html

<article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        <h2 class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        function start(){
            $(".start").hide();
            $(".question").show();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function (){
           var type= $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
        });
    </script>

style.css

article{
    display: flex;
    flex-direction: column;
}
/* 
.question{
    display: none;
} */

세렝게티 동물 테스트 제작하기 5

문제에 대한 정보 가져와서 JS 객체에 저장

문제 답 선택하면 다음 문제로 넘어가기
A 선택하면 type의 val+1 하고 next()
B 선택하면 그냥 next()

파이썬의 딕셔너리 개념
var jsObject={key:value}
jsObject[key] => value

var q={
1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},
}

index.html

<body class="container">
    <!-- <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5">테스트 시작하기</button>
    </article> -->

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        var num=1; //현재 어느 문제인지
        var q={
            1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
            2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
            3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},
        }
        function start(){
            $(".start").hide();
            $(".question").show();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function (){
           var type= $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
           next();
        });

        $("#B").click(function(){
            next();
        });
        function next(){
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num][type]); //input 태그는 val로 값 바꿈
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
   </body>

style.css
article{
display: flex;
flex-direction: column;
}
/
.question{
display: none;
} /

세렝게티 동물 테스트 제작하기 6

next 함수 호출될때마다 프로그레스 너비 1/12씩 증가
100을 12로 나눈값을 1,2,3...
수식 직접 계산 안해도 됌, calc{100/121}

index.html

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
          </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        var num=1; //현재 어느 문제인지
        var q={
            1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
            2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
            3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function(){
           var type = $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
           next();
        });

        $("#B").click(function(){
            next();
        });

        function next(){
            $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num][type]); //input 태그는 val로 값 바꿈
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
</body>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

세렝게티 동물 테스트 제작하기 7

12개 문제 만들기, 12문제 다 풀었을때 결과창 띄우기
index.html

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
          </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <article class="result">
        <img id="img" src="" alt="">
        <h2 id="animal">동물이름</h2>
        <h3 id="explain">설명</h3>
    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        var num=1; //현재 어느 문제인지
        var q={
            1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
            2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
            3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},

            4:{"title": "문제 4번", "type":"SN", "A":"S", "B":"N"},
            5:{"title": "문제 5번", "type":"SN", "A":"S", "B":"N"},
            6:{"title": "문제 6번", "type":"SN", "A":"S", "B":"N"},

            7:{"title": "문제 7번", "type":"TF", "A":"T", "B":"F"},
            8:{"title": "문제 8번", "type":"TF", "A":"T", "B":"F"},
            9:{"title": "문제 9번", "type":"TF", "A":"T", "B":"F"},

            10:{"title": "문제 10번", "type":"JP", "A":"J", "B":"P"},
            11:{"title": "문제 11번", "type":"JP", "A":"J", "B":"P"},
            12:{"title": "문제 12번", "type":"JP", "A":"J", "B":"P"},
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function(){
           var type = $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
           next();
        });

        $("#B").click(function(){
            next();
        });

        function next(){
            if(num==13){
                //마지막에 다음 버튼을 클릭할때 
                $(".question").hide();
                $(".result").show();
            }
            $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num][type]); //input 태그는 val로 값 바꿈
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
</body>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

.result{
    display: none;
}

세렝게티 동물 테스트 제작하기 8

이미지 받아서 result 화면에 라운드하게 띄우기

  1. pixabay-저작권 무료
    이미지 다운 받아서 같은 폴더에 넣기

  2. bootstrap 에 border 검색, border-radius =>round circle 복사

결과 화면

index.html

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
          </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <article class="result">
        <img id="img" class="rounded-circle mt-5" src="lion.jpg" alt="">
        <h2 id="animal" class="text-center mt-5">동물이름</h2>
        <h3 id="explain" class="text-center mt-5">설명</h3>
    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        var num=1; //현재 어느 문제인지
        var q={
            1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
            2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
            3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},

            4:{"title": "문제 4번", "type":"SN", "A":"S", "B":"N"},
            5:{"title": "문제 5번", "type":"SN", "A":"S", "B":"N"},
            6:{"title": "문제 6번", "type":"SN", "A":"S", "B":"N"},

            7:{"title": "문제 7번", "type":"TF", "A":"T", "B":"F"},
            8:{"title": "문제 8번", "type":"TF", "A":"T", "B":"F"},
            9:{"title": "문제 9번", "type":"TF", "A":"T", "B":"F"},

            10:{"title": "문제 10번", "type":"JP", "A":"J", "B":"P"},
            11:{"title": "문제 11번", "type":"JP", "A":"J", "B":"P"},
            12:{"title": "문제 12번", "type":"JP", "A":"J", "B":"P"},
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function(){
           var type = $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
           next();
        });

        $("#B").click(function(){
            next();
        });

        function next(){
            if(num==13){
                //마지막에 다음 버튼을 클릭할때 
                $(".question").hide();
                $(".result").show();
            }
            $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num][type]); //input 태그는 val로 값 바꿈
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
</body>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

.result{
    display: none;
}

#img{
    width: 300px;
    height: 300px;
    margin: 0 auto; 
}

세렝게티 동물 테스트 제작하기 9

mbti 판단 로직 작성하고 결과 출력

각 4문항 별 value가 2 이상이면 앞에꺼, 아니면 뒤에꺼
하나씩 나열하면 mbti 결과
(if-else 구문은 삼항 연산자로 표시 가능)
ex) 

($("#EI").val()<2) ? mbti+="I": mbti+="E";

결과는 num==13일때 계산, 표시

index.html

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
          </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <article class="result">
        <img id="img" class="rounded-circle mt-5" src="lion.jpg" alt="">
        <h2 id="animal" class="text-center mt-5">동물이름</h2>
        <h3 id="explain" class="text-center mt-5">설명</h3>
    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        var num=1; //현재 어느 문제인지
        var q={
            1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
            2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
            3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},

            4:{"title": "문제 4번", "type":"SN", "A":"S", "B":"N"},
            5:{"title": "문제 5번", "type":"SN", "A":"S", "B":"N"},
            6:{"title": "문제 6번", "type":"SN", "A":"S", "B":"N"},

            7:{"title": "문제 7번", "type":"TF", "A":"T", "B":"F"},
            8:{"title": "문제 8번", "type":"TF", "A":"T", "B":"F"},
            9:{"title": "문제 9번", "type":"TF", "A":"T", "B":"F"},

            10:{"title": "문제 10번", "type":"JP", "A":"J", "B":"P"},
            11:{"title": "문제 11번", "type":"JP", "A":"J", "B":"P"},
            12:{"title": "문제 12번", "type":"JP", "A":"J", "B":"P"},
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function(){
           var type = $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
           next();
        });

        $("#B").click(function(){
            next();
        });

        function next(){
            if(num==13){
                //마지막에 다음 버튼을 클릭할때 
                $(".question").hide();
                $(".result").show();
                
                //mbti 로직
                var mbti="";
                ($("#EI").val()<2) ? mbti+="I": mbti+="E";
                ($("#SN").val()<2) ? mbti+="N": mbti+="S";
                ($("#TF").val()<2) ? mbti+="F": mbti+="T";
                ($("#JP").val()<2) ? mbti+="P": mbti+="J";
                alert(mbti);
            }else{
                $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
                $("#title").html(q[num]["title"]);
                $("#type").val(q[num][type]); //input 태그는 val로 값 바꿈
                $("#A").html(q[num]["A"]);
                $("#B").html(q[num]["B"]);
                num++;
            }
        }
    </script>
</body>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

.result{
    display: none;
}

#img{
    width: 300px;
    height: 300px;
    margin: 0 auto; 
}

세렝게티 동물 테스트 제작하기 10

JS 객체(=딕셔너리)로 mbti 결과를 저장해서 사용하기
mbti 결과와 결과에 맞는 동물 이름/설명/사진 출력

html 태그 안쪽 값을 바꿀땐
=> $("#animal").html(result[mbti]["animal"]);

객체의 속성 값을 바꿀때
=> $("#img").attr("src",result[mbti]["img"]);

index.html

<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나랑 꼭 닯은 세렝게티 동물은?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>

    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" style="width: calc(100/12*1%)"></div>
          </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">Primary</button>
        <button id="B" type="button" class="btn btn-primary mt-5">Primary</button>

    </article>
    <article class="result">
        <img id="img" class="rounded-circle mt-5" src="lion.jpg" alt="">
        <h2 id="animal" class="text-center mt-5">동물이름</h2>
        <h3 id="explain" class="text-center mt-5">설명</h3>
    </article>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script>
        var num=1; //현재 어느 문제인지
        var q={
            1:{"title": "문제 1번", "type":"EI", "A":"E", "B":"I"},
            2:{"title": "문제 2번", "type":"EI", "A":"E", "B":"I"},
            3:{"title": "문제 3번", "type":"EI", "A":"E", "B":"I"},

            4:{"title": "문제 4번", "type":"SN", "A":"S", "B":"N"},
            5:{"title": "문제 5번", "type":"SN", "A":"S", "B":"N"},
            6:{"title": "문제 6번", "type":"SN", "A":"S", "B":"N"},

            7:{"title": "문제 7번", "type":"TF", "A":"T", "B":"F"},
            8:{"title": "문제 8번", "type":"TF", "A":"T", "B":"F"},
            9:{"title": "문제 9번", "type":"TF", "A":"T", "B":"F"},

            10:{"title": "문제 10번", "type":"JP", "A":"J", "B":"P"},
            11:{"title": "문제 11번", "type":"JP", "A":"J", "B":"P"},
            12:{"title": "문제 12번", "type":"JP", "A":"J", "B":"P"},
        }
        var result={
            "ISTJ":{"animal": "하마","explain":"하마 설명","img":"lion.jpg"},
            "INFP":{"animal": "멋쟁이 사자","explain":"멋쟁이 사자 설명","img":"lion.jpg"},
            "ENTJ":{"animal": "호랑이","explain":"호랑이 설명","img":"lion.jpg"},
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        // A 버튼 클릭하면 EI 값 가져오기, 타입에 해당하는 값 올려주기
        $("#A").click(function(){
           var type = $("#type").val();
           var preValue = $("#"+type).val();
           $("#"+type).val(parseInt(preValue)+1);
           next();
        });

        $("#B").click(function(){
            next();
        });

        function next(){
            if(num==13){
                //마지막에 다음 버튼을 클릭할때 
                $(".question").hide();
                $(".result").show();
                
                //mbti 로직
                var mbti="";
                ($("#EI").val()<2) ? mbti+="I": mbti+="E";
                ($("#SN").val()<2) ? mbti+="N": mbti+="S";
                ($("#TF").val()<2) ? mbti+="F": mbti+="T";
                ($("#JP").val()<2) ? mbti+="P": mbti+="J";
                alert(mbti);

                $("#img").attr("src",result[mbti]["img"]);
                $("#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]); //input 태그는 val로 값 바꿈
                $("#A").html(q[num]["A"]);
                $("#B").html(q[num]["B"]);
                num++;
            }
        }
    </script>
</body>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

.result{
    display: none;
}

#img{
    width: 300px;
    height: 300px;
    margin: 0 auto; 
}

세렝게티 동물 테스트 제작하기 정리

-보이지는 않는 내부 저장할 내용이 있으면 hidden input 태그 사용 했음
-동물의 이미지, 이름, 설명 다 저장

세렝게티 동물 테스트 배포

netlify
-> 간단한 배포 사이트
1. 로그인
2. sites 버튼 누르고 내가 작성한 폴더 끌어오기
3. 링크 누르면 배포한 사이트 열림
4. 사이트 세팅에서 사이트 이름 바꿀수 있음

profile
정민지
꾸준히 성장하는 개발자
이전 포스트

2/20(월) 일단 만드는 JavaScript > [자소서 글자수 계산기]

다음 포스트

2/21(화) 웹 서비스 고도화하기

0개의 댓글