<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (1)

- 자바스크립트로 선택지 기능 구현

개인 프로젝트로 개발중인 웹 프로젝트에서, 총 3개의 문답 페이지가 존재하며 차례로 1개씩 버튼을 클릭하여 모두 답을 하고 나면, 결과로 3개 문답에 대해 데이터를 받아 이에 대한 결과 페이지로 넘겨주는 작업을기획하였다. 

 

비슷한 알고리즘이 어떤 것이 있을까 생각해보았더니 최근에 유행이었던 다양한 심리테스트들이 생각나서, 심리테스트를 만들 때의 코드를 응용하였다. 코드는 인프런 판다코딩님의 <[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기>를 참고하였다. 무료로 이런 좋은 강의를 공개해주심에 매우 감사!

 

순서는 다음과 같다.

 

1) html에 버튼을 넣을 영역의 태그를 만들어준다.

				<section id="qbox">
					<!-- 질문 내용 -->
				</section>
				<section id="abox">
                	<!-- 질문에 대한 선택지들 -->
                </section>
		<script type="text/javascript" src="연결할 js 주소"></script>
		<script type="text/javascript">
			'위 자바스크립트 파일에서 첫번째로 존재하는 함수명'();
		</script>

qbox 영역이 질문 내용이 들어갈 영역이고, abox가 그 질문에 대한 선택지들을 나열할 영역이다. qbox와 abox 모두 자바스크립트로 안의 내용을 구성해서 넣어도 되지만, 여기서는 abox만 자바스크립트로 따로 구현하기로 하였다. 따라서 자바스크립트로 내용을 채울 것이기 때문에 abox는 태그만 만들어두고 안의 내용은 비워둔다.

 

그리고 자바스크립트는 외부에서 파일을 따로 만들어 링크로 연결하였는데, 해당 자바스크립트를 바로 실행시키기 위해 자바스크립트 페이지 연결 링크 아래에 해당 파일에 있는 첫번째 함수를 호출하는 자바스크립트 코드를 추가로 작성해주었다.

 

 

2) 선택지로 넣을 데이터들을 배열 객체로 만들어준다.

const answer1 = ['선택지1', '선택지2', '선택지3']
const answer2 = ['선택지1', '선택지2', '선택지3']
const answer3 = ['선택지1', '선택지2', '선택지3']

문답 페이지가 총 3개, 그러니까 질문이 총 3개이고 거기에 대한 선택지들이 각각 존재하므로 선택지 그룹도 총 3개로 구성해주었다. 그룹 안의 선택지 갯수는 필요한만큼 넣어주면 된다.

 

 

3) 선택지 갯수만큼 버튼을 만들어준다.

//버튼 추가
function begin1() {
	for(let i=0;i<answer1.length;i++){
		addButton(answer1[i]);
	}
}	

function begin2() {
	for(let i=0;i<answer2.length;i++){
		addButton(answer2[i]);
	}
}

function begin3() {
	for(let i=0;i<answer3.length;i++){
		addButton(answer3[i]);
	}
}

배열은 반복문으로 꺼내줘야 한다. 따라서 for 반복문을 이용하여, 버튼을 만드는 함수인 addButton에 매개변수로 선택지들을 차례로 넣어줄 수 있도록 만들어주었다.

 

 

4) html에 버튼 태그를 만들고, 이 버튼 태그들을 abox 태그의 자식요소로 만든다음, 매개변수로 가져온 선택지들을 버튼태그 내의 text 값으로 하나씩 넣어준다.

//버튼에 텍스트 , 클래스명 추가
function addButton(answerText) {
	const button = document.createElement('button'); //버튼 태그 만들기
	$("#abox").append(button); //버튼을 자식 태그로 넣어주기
	button.innerHTML = answerText; //버튼 태그에 가져온 매개변수를 텍스트 값으로 차례로 넣어주기
	button.classList.add('button'); //버튼 태그에 class명으로 'button' 추가하기
}

그리고 이 버튼들을 추후 css 효과를 주거나, 움직일 수 있도록 class명도 추가해준다. 여기서는 그냥 'button'을 각각 클래스명으로 버튼 태그에 추가해주었다.