안녕하세요 느종입니다.
부지런히 글을 작성하려고 하는데 쉽지가 않네요ㅠㅠ
다시 한번 마음을 다잡고 부지런히 하나씩 포스팅하도록 하겠습니다.
저번 포스팅까지 자바스크립트를 활용하여 간단한 OX 퀴즈 만들기를 했었느데요.
오늘은 간단한 나라 수도 맞추기를 만들어볼까합니다.
거의 비슷한 포맷이지만 다른 부분도 꽤 있으니깐 자세히 작성하도록 하겠습니다.
그럼 시작해보겠습니다. 함께 공부해요!
설계
이번에도 저번과 같이 시작 화면 - 메인 화면 - 결과 화면으로 구성하였습니다.
시작 화면과 결과 화면에서는 크게 변한 부분이 없고,
메인 화면에서만 변화된 부분이 있습니다.
퀴즈 번호 영역에 기회라는 기능이 추가되었는데요.
틀릴 때마다 기회(목숨)이 줄어들도록 구성하였습니다.
전에 OX버튼이 있던 영역에는 입력할 수 있는 부분을 만들고, 정답 확인 버튼을 추가하였습니다.
버튼 형식이 아닌 텍스트를 작성하여 퀴즈를 맞힐 수 있도록 구성하였습니다.
폴더 및 파일
이번에도 저번과 같이 폴더 및 파일을 구성해주시면 될 것 같습니다.
따로 이미지가 필요 없기 때문에 이미지 폴더는 안만들어주셔도 됩니다.
앞서 말씀드렸듯이 꼭 이렇게 폴더를 만들지 않고, 그냥 index.html과 style.css만 만드셔서
코딩을 하셔도 됩니다.
폴더 : css, js
파일 : index.html, style.css, scripts.js
시작 화면 페이지
시작 화면 페이지는 위 사진과 같습니다.
시작 페이지처럼 만들기 위해서 index.html파일 안에 위와 같이 작성해주시면 됩니다. 첫 시작 화면에서는 기회(목숨)에 대한 부분이 나오면 안되기 때문에 <span id="life"> 이 부분은 보이지 않도록 처리하였습니다.
html파일과 css파일을 위와 같이 작성해주시면 처음 시작 화면이 예시 화면처럼 나올 것입니다.
아직 js파일을 작성하지 않았기 때문에 시작하기 버튼을 눌러도 아무런 변화가 없을거에요.
그럼 바로 js 파일을 작성해보도록 할게요.
자바스크립트 코드
[ scripts.js ]
1. quizNumber : 퀴즈 번호가 들어있는 태그의 변수2. quiz : 퀴즈 내용이 들어있는 태그의 변수
3. startBtn : 시작하기를 할 수 있는 <button> 태그의 변수
4. init() : 초기화 함수입니다. 처음 실행하거나, 다시 하기 버튼으로 다시 실행할 때 변수들이나 기능들을 초기화 할 때 이 함수에 넣고 초기화 함수를 실행해줍니다.
5. quizNumber자리에 "나라 수도 퀴즈"라는 문구를 넣는 innerHTML을 작성해주었습니다.
6. quiz자리에 "퀴즈를 시작해 볼까요?"라는 문구를 넣는 innerHTML을 작성해주었습니다.
※ innerHTML이란?
예를 들어 quizNumber.innerHTML = "나라 수도 퀴즈";
quizNumber은 작성한 html 태그 안에 id가 quizNumber이라는 태그를 넣는 변수입니다. 예시
에서는 <div>태그가 되겠네요. 이 태그 안에 ""안에 들어 있는 내용을 넣을 때 사용하는 기능입니다
7. life.style.display = "none" : 앞서 언급한 것과 같이 시작 페이지에서는 기회(목숨)을 표현하는 부분이 나타나면 안되기 때문에 자바스크립트 코드상에서 보이지 않도록 처리한 것입니다. css에서 처리해도 되는데, 보였다가 사라졌다가를 해야 되기 때문에 자바스크립트로 처리하는 것이 더 좋습니다.
8. startBtn.addEventListener : 시작하기 버튼 태그에 클릭 이벤트를 더해주는 함수입니다. 여기에서 시작 버튼을 눌렀을 때 실행되어야 할 기능들을 넣으시면 됩니다. 저 같은 경우에는 퀴즈를 맞추는 페이지가 보여져야 하고, 시작하기 버튼은 사라지고, 입력창과 정답 확인 버튼이 활성화가 되어야 하는 등의 기능을 넣을 것입니다.
오늘은 저번 시간의 간단한 OX 퀴즈 맞추기에 이어서 나라 수도 퀴즈 맞추기에 대한 첫 번째 코드를 작성해보았습니다. 이번에는 버튼 형식이 아닌 input 태그를 이용한 텍스트를 작성하여 문제를 맞추도록 구상하였습니다. 그리고 틀릴 때 마다 기회도 하나씩 줄어드는 기능도 추가할 예정입니다.
쉽고 간단하게 보실 수 있고, 따라하실 수 있도록 최대한 자세하게 설명을 적도록 하겠습니다. 다음 편에서는 메인 페이지를 만들어보도록 하겠습니다.