Jquery 를 이용하여 간단한 심리테스트 만들기

요즘 페이스북이나 카카오스토리를 보면 심리테스트 웹컨텐츠들이 많이 생긴걸 알 수 있다. 이러한 테스트들은 간단하게 재미로 볼 수 있는 것들이다. 믿고, 안믿고는 본인에 따라 다르고, 대부분 재미로 넘기기 때문에, 어느정도 알맞게 작성해도 그럭저럭 심리테스트가 완성된다.

아래는 간단하게 Jquery 를 이용하여 만든 심리테스트이다. 별다른 설명이 없기때문에 아래의 예제를 이용하여, 자신만의 테스트 결과를 만들어도 좋다.  

 jquery 를 이용한 심리테스트 프로그램 예제

---

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
/* 리스트 중 하나를 선택했을 시 */
$('#sel').change(function(){
/* 선택된 값을 저장 (숫자로 형변환을 해준다) */
var sel_val=Number($(this).val());
/* 선택값에 따라 작동 */
switch(sel_val)
{
      case 1: result='당신은 평소 외로움을 많이 타는 사람입니다.'; break;
    case 2: result='당신은 현재 사랑받고 싶어합니다.'; break;
    case 3: result='당신은 평소 자유로운걸 좋아하는 사람입니다.'; break;
    case 4: result='당신은 다시 태어나고 싶어합니다.'; break;
    default : result='잘못된 선택입니다.'; break;
}
    /* 결과값을 텍스트로 표시*/
$('.result').text(result);
})

})
</script>

<p>만약 다음 생에 아래의 리스트중 한가지로 환생할 수 있다면, 환생하고 싶은 리스트중 하나를 선택해주세요</p>

<b>선택 : </b>
<select id='sel'>
<option value=0 selected>-리스트-</option>
<option value=1>바퀴벌레</option>
<option value=2>개</option>
<option value=3>고양이</option>
<option value=4>사람</option>
</select>

<p class='result'>결과가 표시되는 곳입니다.</p>

 실행결과

---