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

8) 선택된 값들을 저장하고 이를 각각에 맞는 결과 페이지로 전송해주기 위해 함수(아래 코드의 result 함수)를 새로 만든다. 그리고 그 안에서 첫 번째로, 앞에서 로컬스토리지에 저장한 클릭된 버튼들의 인덱스를 JSON의 parse 함수를 통해 변환하여 새로운 객체에 각각 저장해준다.

function result() {
	const r1 = JSON.parse(localStorage.getItem('a1'));
	const r2= JSON.parse(localStorage.getItem('a2'));
	const r3= JSON.parse(localStorage.getItem('a3'));

r1, r2, r3은 각각 질문1에 대한 답, 질문2에 대한 답, 질문3에 대한 답으로 선택한 버튼의 인덱스다. 물론 저장된 형태는 JSON 데이터 형태다.

 

 

9) r1,r2,r,3을 모아 하나의 배열 객체(result)에 담아주고, 선택된 버튼에 따른 결과 페이지들을 나타내는 객체들(result1, result2, result3 ...)을 모두 만들어준다.

function result() {
	const r1 = JSON.parse(localStorage.getItem('a1'));
	const r2= JSON.parse(localStorage.getItem('a2'));
	const r3= JSON.parse(localStorage.getItem('a3'));
	
	const result = [r1.a1, r2.a2, r3.a3];;
	const result1 = ['0', '0', '0'];
	const result2 = ['0', '0', '1'];
	const result3 = ['0', '1', '0'];
	const result4 = ['0', '1', '1'];
	const result5 = ['1', '0', '0'];
	const result6 = ['1', '0', '1'];
	const result7 = ['1', '1', '0'];
	const result8 = ['1', '1', '1'];
	const result9 = ['2', '0', '0'];
	const result10 = ['2', '0', '1'];
	const result11 = ['2', '1', '0'];
	const result12 = ['2', '1', '1'];
	const result13 = ['3', '0', '0'];
	const result14 = ['3', '0', '1'];
	const result15 = ['3', '1', '0'];
	const result16 = ['3', '1', '1'];

사실 위 부분을 순열이나 조합의 알고리즘 혹은 for 반복문이나 if 조건문으로 적용하여 해결해보려 했으나, 어쩔 수 없이 이렇게 나열하게 되었다. 그 이유는 위 케이스의 경우는 각각의 선택에 따른 결과가 모두 다르게 나타나며, 이것을 각각 다른 페이지로 연결해주어야 하기 때문에(이래서 처음부터 하나의 페이지 안에서 내용만 바뀌는 형태 혹은 DB로 데이터를 연결하여 서버와 연동할 걸 그랬다는 후회를 했다) 각각을 다룰 수 있도록 하나씩 객체로 모두 표현해주어야 했기 때문이다.

 

그리고 위 케이스의 경우는 질문1에 대한 답이 4가지, 질문2에 대한 답이 2가지, 질문3에 대한 답이 2가지로 4X2X2 = 총 16가지의 변수를 만들어 준 것이다.

 

 

10) 마지막으로 이들 결과 객체들을 사용자가 선택한 결과를 담은 result 배열 객체의 내용과 하나씩 비교하여 일치하는 결과 객체를 찾고 그에 해당하는 결과 페이지로 이동하도록 작성해준다.

	if(JSON.stringify(result) == JSON.stringify(result1)) {
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result2)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result3)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result4)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result5)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result6)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result7)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result8)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result9)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result10)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result11)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result12)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result13)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result14)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result15)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result16)){
		location.href="결과페이지";
	}else {
		return;
	}

배열 값을 비교하려면 result 배열 객체의 내용이 JSON 객체 형태이므로 이를 stringify 함수를 통해 문자열로 다시 변환해주는 과정이 필요했다. 비교는 동등한 형식을 가진 것들끼리 이루어지는 것이므로 미리 결과값으로 지정해 놓은 결과 객체들도 마찬가지로 stringify를 통해 변환해준다.

 

이렇게 경우의 수에 맞게 if 조건문도 만들어주면, 마무리가 된다.