안녕하세요 느종입니다.
오늘은 무엇을 만들어볼까하다가 문득 구구단이 떠올랐어요.
그래서 간단하게 구구단 퀴즈를 해볼 수 있는 페이지를 만드려고 합니다. OX 퀴즈, 나라 수도 퀴즈 페이지에서 만들어 놓았던 기존 형태에서 크게 벗어나지 않으니 어렵지 않을거에요.
그럼 시작해볼게요. 함께 공부해요!
설계
이번에도 비슷한 형태로 구성해보았습니다.
다른 점이라고 한다면 메인 화면의 퀴즈 내용 부분이랑 숫자 출력창, 숫자 버튼 이 부분이겠네요.
0부터 9까지 버튼 형식으로 만들고, 버튼을 누르게 되면 숫자 출력창에 누른 숫자가 표현이 되게끔 만들거에요. 그리고 나서 정답 확인 버튼을 누르게 되면 퀴즈 내용 부분에서 정답인지 틀렸는지를 표시해주려고 합니다. 당연히 맞으면 기회는 차감이 되지 않고, 틀리게 된다면 기회가 하나 줄고 문제를 다시 풀 수 있도록 할거에요.
폴더 및 파일
항상 제가 만드는 폴더 및 파일 구성은 동일해요.
언젠가는 이미지를 사용하는 페이지도 만들어 볼 거에요. 그 때에는 images 폴더가 필요하겠지만 지금은 필요없고, css, js폴더만 만들어주시고, 각각 폴더 안에 style.css, scripts.js, index.html 파일만 잘 위치해 있으면 됩니다.
따로 폴더를 만들지 않고 한 폴더안에 위 3개의 파일을 두셔도 상관없어요. 경로만 잘 잡아주시면 됩니다.
경로에 대한 부분은 만약 폴더를 만들어서 따로 파일을 넣으셨으면 index.html에
<link rel="stylesheet" href="./css/style.css" />
위와 같이 ./폴더/파일이름을 입력해주시면 됩니다.
만약 3개의 파일을 한 폴더에 넣고 작업을 하시는 거라면
./파일이름으로 입력해주시면 되겠죠!
시작 화면 페이지
시작 화면은 위와 같습니다.
[ index.html ]
시작 페이지 화면은 저번에 만들었던 나라 수도 퀴즈의 시작 페이지 화면과 동일합니다. 이번에도 기회(목숨)에 대한 부분은 시작페이지에서 안보이도록 하였습니다.
[ style.css ]
index.html파일과 style.css파일을 위와 같이 작성해주시면 됩니다. 편의상 style.css는 나눠서 적지 않고 시작 화면, 메인 화면, 결과 화면까지 모든 내용을 포함하고 있습니다. 크게 어려운 부분은 없어서 보시면 바로 아실 수 있을거에요. 최대한 사용하는 용도에 맞춰서 클래스명이나 id를 적으려고 노력하였습니다. 이번에는 자바스크립트 파일을 작성해볼게요.자바스크립트 코드
1. quizNumber : 구구단 퀴즈 문제 번호를 나타내는 태그
2. lief : 기회(목숨)을 나타내는 태그
3. quiz : 구구단 퀴즈 내용이 들어가는 태그
4. startBtn : 시작하기 버튼 태그
5. let chapter : 지금이 시작 화면인지 메인 화면인지 결과 화면인지를 나타내는 변수
6. function init() : 초기화 함수. 앞으로 모든 변수나 기능들의 초기화는 이 함수안에 작성해주시면 됩니다.
7. life.style.display = none : 이번에도 시작화면에서는 기회(목숨)이 보이면 안되기 때문에 none으로 작성해주었습니다.
8. chater = "start" : 초기화를 했을 경우 시작 화면이 나와야 되므로, chapter 변수에 start라는 시작 화면 인지를 알 수 있는 변수를 넣어줍니다. 추후에 결과 화면에서 다시 하기를 클릭했을 경우 시작 화면으로 돌아오는데 그런 부분들을 구분 짓기 위해서 변수로 넣어주었습니다. 이 부분은 결과 화면 부분에서 다시 하기 함수를 만들 때 좀 더 자세히 다루도록 하겠습니다.
9. 앞 포스팅들에서 언급한 것과 같은 클릭 이벤트를 시작 버튼에 추가해줍니다.
오늘은 구구단 퀴즈 페이지의 시작 화면까지 만들어보았는데요. 기존에 만들어 놓았던 포맷에서 크게 변경되는 부분이 없어 쉽게 보실 수 있을거에요. 저도 이것 저것 공부하면서 간단하게 하나씩 만들어 보고 있는거라 같이 공부하는 마음으로 너그러이 봐주셨으면 좋겠습니다. 다음 포스팅에서는 메인 화면을 만들건데, OX퀴즈, 나라 수도 퀴즈랑 다른 형식이기 때문에 코드상으로 다른 부분이 많을거에요. 하나씩 보시면서 따라해보시면 될 것 같습니다.