<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>우울증 자가 진단</title>
<script src="js/jquery.min.js"></script>
<script>
var problem = 1; // 몇 번 문제인지를 설정하는 인덱스 변수
var total = 0; // 점수를 저장하는 변수
var test_check = null; // 문제가 모두 체크되었는지 확인하는 변수 (문제의 개수만큼 배열로 동적할당됨)
var num_of_test = 20; // 문제의 총 개수를 저장하는 변수
var all_problem_created = false; // 문제가 모두 만들어졌는지 여부를 확인하는 boolean 변수
// 문자열 배열을 선언하여 각 문항들을 저장함
// 첫 번째 데이터가 공백인 이유는 배열 인덱스 관리를 1부터 20까지 직관적으로 하기 위함
var test_text = [
[" "],
["1.평소에는 아무렇지도 않던 일들이 귀찮았다."],
["2.입맛도 없었고, 먹고 싶지도 않았다."],
["3.가족이나 친구가 도와줘도 우울한 기분이 나아지지 않았다."],
["4.나도 다른 사람들만큼 능력 있다고 느꼈다."],
["5.어떤 일을 하든 집중하기 힘들었다."],
["6.우울했다."],
["7.하는 일마다 힘들다고 느껴졌다."],
["8.앞일이 암담하게 느껴졌다."],
["9.내 인생은 실패작이라고 느꼈다."],
["10.두려웠다."],
["11.잠을 설쳤다, 잠이 안 왔다."],
["12.비교적 잘 지냈다."],
["13.평소보다 말을 적게 했다, 말수가 줄었다."],
["14.세상에 홀로 있는 것처럼 외로웠다."],
["15.사람들이 나를 차갑게 대하는 것 같았다."],
["16.생활에 큰 불만이 있었다."],
["17.갑자기 울음이 나왔다."],
["18.슬펐다."],
["19.사람들이 나를 싫어하는 것 같았다."],
["20.도무지 뭘 시작할 기운이 안 났다."]
];
// 문제의 개수만큼 배열을 동적할당
// 이 배열은 각 문제가 체크되었는지를 확인하는 용도
function create_check_array() {
test_check = new Array();
for (var i = 1; i <= num_of_test + 1; i++) {
test_check.push(false);
}
}
function create_radio_button() {
if (all_problem_created == false) { // 문제가 만들어져있지 않다면 -> 문제 생성
create_check_array();
all_problem_created = true;
$("#radio_area").slideDown(); // 설문지를 펼침
$("#end_btn").show(); // 종료 버튼을 표시함
for (var i = 0; i < num_of_test; i++) { // 문제의 개수만큼 반복
var newText = document.createTextNode(test_text[problem]); // 질문 텍스트를 가져와서 저장함
document.getElementById("text_area").appendChild(newText); // 질문을 출력
for (var j = 0; j <= 3; j++) {
// 각 질문마다 라디오 버튼 생성 (0점 ~ 3점 총 4개)
var radioInput = document.createElement("input"); // <input>을 만들고 변수에 지정함
// 각 속성들을 지정함
radioInput.setAttribute("type", "radio"); // = radioInput.type = "radio";
radioInput.setAttribute("name", "problem" + problem);
radioInput.setAttribute("value", "answer" + j);
document.getElementById("btn_area").appendChild(radioInput); // 속성을 지정한 <input>을 출력 (라디오 버튼 출력)
}
problem++; // 각 문제의 출력이 끝나면 다음 문제로 넘어감
// 문제 출력이 끝나고 나면 줄바꿈
// 텍스트와 라디오 버튼에 각각 따로 지정해야 레이아웃 오류가 발생하지 않음
var hr1 = document.createElement("hr");
document.getElementById("text_area").appendChild(hr1);
var hr2 = document.createElement("hr");
document.getElementById("btn_area").appendChild(hr2);
}
}
else { // 문제가 만들어져 있다면 -> 생성하지 않음
alert("진행 중인 진단이 있습니다.");
}
}
function check_gloomy() { // 총점 체크
total = 0;
for (var i = 1; i <= problem; i++) { // 문제의 개수만큼 반복
var radio_btn = document.getElementsByName("problem" + i); // 문제의 개수만큼 라디오 버튼을 저장함
for (var j = 0; j < radio_btn.length; j++) { // 저장된 라디오 버튼의 체크 여부 확인
if (radio_btn[j].checked) { // 버튼이 체크되었다면 해당 점수만큼을 총점에 더함
total += j;
// 배열에 표시
test_check[i] = true; // 해당 문제 체크 여부를 저장함
}
}
}
if (all_problem_check() == true) { // test_check 배열을 통해 모든 문제가 체크되었는지 확인함
alert("총점 : " + total); // 총점 표시
// 각 점수의 구간에 따라 우울증의 정도를 출력
if (total >= 0 && total <= 20) {
alert("정상적인 우울감.");
}
else if (total >= 21 && total <= 40) {
alert("주의가 필요한 우울감.");
}
else if (total >= 41 && total <= 60) {
alert("심각한 우울증.");
}
}
else { // 체크되지 않은 문제가 있으면 오류 출력
alert("확인하지 않은 문항이 있습니다.");
}
}
// test_check 배열을 통해 모든 문제가 체크되었는지 확인함
function all_problem_check() {
for (var i = 1; i < num_of_test + 1; i++) {
if (test_check[i] == false) {
return false;
}
}
return true;
}
</script>
<style>
#radio_area {
width: 600px;
height: 820px;
background-color: lightgray;
padding: 10px;
display: none;
}
#text_area {
width: 80%;
float: left;
display: block;
}
#btn_area {
width: 20%;
float: right;
text-align: right;
display: block;
}
.display_score {
float: right;
font-size: 0.7em;
font-style: italic;
text-align: right;
}
#end_btn {
display: none;
}
</style>
</head>
<body>
<h2>우울증 자가 진단</h2>
<button id="start_btn" onclick="create_radio_button()">진단 시작</button>
<br><br>
<div id="radio_area">
<div class="display_score">
* 답변 방법<br>
전혀 아니다(0) / 아니다(1) / 그렇다(2) / 매우 그렇다(3)
</div>
<br><br>
<div id="text_area"></div> <!-- 문제 출력 div -->
<div id="btn_area"></div> <!-- 라디오 버튼 출력 div -->
</div>
<br>
<button id="end_btn" onclick="check_gloomy()">결과 보기</button>
</body>
</html>
