설문조사(+알고리즘) 구현

section 3개로 나눠서 진행 (main,qna,result)
사용된 언어 : html,css,javascript
프레임 워크 : bootstrap

구성

main section : 제목,이미지,본문내용,시작버튼
qna section : 질문 + 답변 버튼 3개
result section :

HTML layout

    <div class="container">
  <!--main section -->
  <section id="main" class="mx-auto mt-5 px-5 py-5">
    <h3>나는 어떤 사람일까?</h3>
    <div>
      <img src="" alt="">
    </div>
    <p>
      재미로 보는 심리테스트 <br>
      과연 9가지 성향 중 나는 어떤 성향일까?
    </p>
    <p id="twochild">(과학적 근거가 없는 재미용 테스트입니다.)</p>
    <button type="button" class="btn btn-outline-dark mt-5" onclick="js:begin()">시작하기</button>
  </section>
  <!-- qna section -->
  <section id="qna">
    <div class="qBox"></div>
    <div class="answerBox"></div>
  </section>
  <!-- result section -->
  <section id="result"></section>
  </div>
  <!-- result section -->
  <section id="result"></section>
  </div>

---

CSS style,animation

style css (main,dafault)

#main {
  background-color: rgb(249, 230, 253);
  text-align: center;
  padding: 80%;
  border-radius: 4px;
}

#twochild {
  font-size: 15px;
  color: rgb(250, 102, 102);
  margin-bottom: 0%;
}

* {
  font-size: 20px;
  color: rgb(68, 68, 68);
}

body {
  background-color: rgb(204, 175, 221);
}

* {
  font-family: 'Gowun Dodum', sans-serif;
}

animation

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

---

Java Script

1.main section에서 qna section으로 창 전환
2.창 전환 후 qna section 구성하기
3. 다음 질문 + 답변버튼 생성 (답변 버튼 선택 시)

data js

const qnaList = [
  {
    q: '1.당신이 좋아하는 색깔은?',
    a: [
      { answer: '무채색',type: ['완벽주의자','진중한 리더','씹선비','방구석 아싸']},
      { answer: '쨍한색',type: ['통통튀는 인싸','분위기 메이커','관종']},
      { answer: '파스텔톤',type: ['차분한 나무','햇살같은 따듯한 사람','방구석 아싸']},
    ]
  },
  {
    q: '2.주말 모임에 대한 당신의 생각은?',
    a: [
      { answer: '모임따위? 피곤해..',type: ['방구석 아싸','씹선비','완벽주의자','차분한 나무'] },
      { answer: '너무 좋아! 완전 재밌겠다 ❤',type: ['통통튀는 인싸','관종','햇살같은 따듯한 사람'] },
      { answer: '모임? 인맥을 넓힐 수 있는 좋은 기회군',type: ['진중한 리더','완벽주의자','관종'] },
    ]
  },

start js

const main = document.querySelector('#main');
const qna = document.querySelector('#qna');

// 1.버튼 생성 후 클릭 이벤트 추가
// 2.생성 한 버튼에 답변 리스트 넣기 -> answerList에 
// 3.버튼 클릭 시 기존 질/답은 비활성화 되고 화면에서 숨겨진 다음에
// 4.다음 질문+답변버튼 화면에 출력 (goNext(++qIdx))
function addAnswer(answerText,qIdx){
  var a = document.querySelector('.answerBox');
  var answer = document.createElement('button');
  answer.classList.add('answerList');
  a.appendChild(answer);
  answer.innerHTML = answerText;

  answer.addEventListener('click',function(){
    var children = document.querySelectorAll('.answerList');
    for(let i = 0; i < children.length; i++){
      children[i].disabled = true;
      children[i].style.display = 'none';
    }
    goNext(++qIdx);
  },false);
}

// 질문,답변 리스트 가져와서 addAnswer에 넘겨주기 
function goNext(qIdx){
  var q = document.querySelector('.qBox');
  q.innerHTML = qnaList[qIdx].q;
  for(let i in qnaList[qIdx].a){
    addAnswer(qnaList[qIdx].a[i].answer,qIdx);
  }
}

// 창 전환 
function begin(){
  main.style.WebkitAnimation = 'fadeOut 1s';
  main.style.Animation = 'fadeOut 1s'
  setTimeout(()=>{
    qna.style.WebkitAnimation = 'fadeIn 1s';
    qna.style.Animation = 'fadeIn 1s';
    setTimeout(()=>{
      main.style.display = 'none';
      qna.style.display = 'block';
    },250);
    let qIdx = 0;
    goNext(qIdx);
  },250);
}

---

Preview

memo

keyframe

• 애니메이션의 중간 상태를 정의할 수 있는 프레임
• @keyframe tagname { from{} to{} } , { to{} }, { 0%{} 100%{} }
• opacity : 요소의 불투명도를 조절하는 속성
  0 : 투명 (투명도 100)
  0.33 : 반투명
  1 : 불투명 (투명도 0)

호출 스케줄링

• 일정 시간이 지난 후 원하는 함수를 예약 실행할 수 있게 하는 것
• setTimeout : 일정 시간이 지난 후 함수를 실행하는 방법
• setInterval : 일정 시간 간격을 두고 함수를 실행하는 방법

값 가져오기

• <div style="color: red">A</div>
• innerText : element안의 text값만 가져옴
  코드열 입력 시 코드열이 그대로 화면에 출력
  "<div style="color: red">A</div>"
• innerHTML : element안의 HTML이나 XML을 가져옴
  A