오늘의 JS 놀이: 정적 페이지를 위한 퀴즈엔진을 만들 계획

복잡한 일은 최대한 스크립트에 맞기고 간단한 마크업만 사용하여 객관식 퀴즈를 구현하고 총점을 확인할 수 있는 자바스크립트 엔진을 만들어보려고 합니다. 티스토리에 써볼 생각이니 하나의 정적 페이지 안에서 출제와 결과가 모두 나와야 합니다.

간단한 마크업

<div class="quiz-list">
  <quiz>
    <p>대충 문제라는 내용</p>
    <answer>대충 답안이라는 내용</answer>
    <answer point="10">대충 10점짜리 답이라는 내용</answer>
  </quiz>
  <quiz>
    <p>대충 결과페이지라는 내용</p>
    <p>적당히 점수: <point></point> / <total></total></p>
    <reset>다시하기</reset>
  </quiz>
</div>

이런 식으로 만들 수 있도록 스크립트를 구현할 생각입니다. 태그 자체가 다르니 스타일시트에서 관리하기에도 나쁘지 않을 듯하고, 굳이 있는 태그 안에 class니 id니 data-quiz니 넣어가며 불편하게 만들고 싶은 생각이 없어요. 만들때 만큼은 간단했으면 좋겠습니다.

간단한 기능

문제를 내는 페이지는 각각 <quiz> 태그로 구분합니다. 봐야 할 페이지를 제외하고는 스타일에 모두 display: none을 줘서 숨기는 방법을 사용할 생각입니다. 한 페이지에 퀴즈가 여럿일 가능성도 고려하여 퀴즈와 관련한 변수는 모두 퀴즈를 담고있는 컨테이너인 .quiz-list 태그 안에 넣을 생각입니다. 변수를 뽑아내기 위해 요소.closest(선택자)를 적극적으로 활용하게 되겠네요.

기능: 퀴즈 컨테이너 관리

<div class="quiz-list"
     quiz-num="현재 페이지 번호"
     quiz-tot="전체 페이지 번호"
     point-tot="총점"
     point-get="현재 점수">
</div>

이런 식으로 필요한 변수를 둘 생각입니다. 즉, 이 단계에서 스크립트가 할 일은,

1. 전체 페이지 수를 센다.
2. 총점을 센다.

이 두 가지 일을 해야 합니다. 첫 번째 일은 자식 요소 <quiz>의 수를 세는 일이고, 두 번째 일은 point속성을 가진 <answer>들을 찾아서 값을 더하는 일이 됩니다.

기능: 각 퀴즈 페이지 번호 매기기

<quiz num="1"></quiz>
<quiz num="2"></quiz>
  ...

보이는 페이지와 숨기는 페이지를 쉽게 구분하기 위해 적당한 속성을 부여합니다.

기능: 답 버튼 효과

<answer>대충 답안이라는 내용</answer>
<answer point="10">대충 10점짜리 답이라는 내용</answer>

사용자가 정답을 택하건 오답을 택하건 다음 퀴즈 페이지로 넘어가야 합니다. 또한, 점수가 있는 답을 선택했을 경우 이 값이 퀴즈 컨테이너에 있는 point-get 속성에 영향을 줘야 합니다.

점수 표시와 다시 하기

<quiz>
  <p>대충 결과페이지라는 내용</p>
  <p>적당히 점수: <point></point> / <total></total></p>
  <reset>다시하기</reset>
</quiz>

퀴즈 페이지 중에 점수를 공개하고픈 취향도 있을 듯하여 굳이 결과 태그를 만들어 공개하는 장소를 제한하지 않았습니다. 현재 점수를 나타내는 <point>태그의 값은 답을 누를 때마다 업데이트하고, 총점을 나타내는 <total> 태그는 컨테이너가 초기화될 때 딱 한 번 업데이트합니다.

처음부터 다시 하는 <reset>버튼은 클릭했을 때 페이지 값과 현재 점수를 초기화한 후 첫 페이지로 돌아갑니다.