psy.gnu.pf25/test1.html at Link0726-patch-1 · Link0726/psy.gnu.pf25 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>스트레스 검사</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gradient-to-b from-white to-pink-50 text-gray-800">
    <div class="max-w-4xl mx-auto px-5 py-10">
      <header class="text-center mb-8">
        <h1
          class="text-2xl sm:text-3xl md:text-4xl font-extrabold tracking-tight"
        >
          스트레스 검사
        </h1>
        <p class="mt-3 text-sm text-gray-600">
          지난 한 달 동안의 경험을 기준으로 응답해주세요.
        </p>
        <p class="text-xs sm:text-sm text-gray-500">
          0점(전혀 그렇지 않다) · 1점(그렇지 않다) · 2점(보통이다) · 3점(그렇다)
          · 4점(매우 그렇다)
        </p>
      </header>

      <div
        class="rounded-2xl overflow-hidden border border-pink-200 shadow bg-white"
      >
        <div
          class="grid grid-cols-6 items-center bg-pink-100/70 text-gray-700 font-semibold text-sm"
        >
          <div class="py-3 pl-4 text-left">문항</div>
          <div class="py-3 text-center">0점(전혀 그렇지 않다)</div>
          <div class="py-3 text-center">1점(그렇지 않다)</div>
          <div class="py-3 text-center">2점(보통이다)</div>
          <div class="py-3 text-center">3점(그렇다)</div>
          <div class="py-3 text-center">4점(매우 그렇다)</div>
        </div>

        <form id="stressForm" class="divide-y divide-gray-100"></form>
      </div>

      <div class="mt-8 text-center">
        <button
          type="submit"
          form="stressForm"
          class="px-5 py-3 rounded-xl bg-pink-500 text-white font-semibold hover:bg-pink-600 shadow"
        >
          결과 보기
        </button>
      </div>
    </div>

    <script>
      const questions = [
        "예상치 못한 일이 생겨서 기분 나빠진 적이 얼마나 있었나요?",
        "중요한 일들을 통제할 수 없다고 느낀 적은 얼마나 있었나요?",
        "초조하거나 스트레스가 쌓인다고 느낀 적은 얼마나 있었나요?",
        "짜증나고 성가신 일들을 처리하는 데 어려움을 겪은 적이 얼마나 있었나요?",
        "생활 속 중요한 변화에 적응하기 어려웠던 적이 얼마나 있었나요?",
        "개인적인 문제를 처리하는 능력에 대해 자신감을 느낀 적은 얼마나 있었나요?",
        "자신의 뜻대로 일이 잘 진행되지 않다고 느낀 적은 얼마나 있었나요?",
        "매사를 잘 컨트롤하고 있지 못하다고 느낀 적이 얼마나 있었나요?",
        "당신이 통제할 수 없는 범위에서 발생한 일 때문에 화가 난 적이 얼마나 있었나요?",
        "어려운 일이 너무 많이 쌓여서 극복할 수 없다고 느낀 적이 얼마나 있었나요?",
      ];

      const form = document.getElementById("stressForm");

      function renderRow(text, index) {
        const row = document.createElement("div");
        row.className =
          "grid grid-cols-6 items-center p-3 md:p-4 hover:bg-pink-50/60 transition-colors";

        const qCell = document.createElement("div");
        qCell.className = "pr-3 text-sm md:text-base";
        qCell.innerHTML = `<span class="text-gray-400 mr-1">${
          index + 1
        }.</span>${text}`;
        row.appendChild(qCell);

        for (let score = 0; score <= 4; score++) {
          const label = document.createElement("label");
          label.className =
            "flex justify-center py-1 cursor-pointer select-none";
          label.innerHTML = `
            <input type="radio" name="q${index}" value="${score}"
                   class="sr-only peer" required>
            <span class="h-9 w-9 md:h-10 md:w-10 flex items-center justify-center rounded-full border border-gray-300
                         text-sm md:text-base
                         peer-checked:bg-pink-600 peer-checked:text-white peer-checked:border-pink-600
                         peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-pink-300
                         transition">
              ${score}
            </span>
          `;
          row.appendChild(label);
        }

        return row;
      }

      questions.forEach((q, i) => form.appendChild(renderRow(q, i)));

      form.addEventListener("submit", (e) => {
        e.preventDefault();

        let total = 0;
        for (let i = 0; i < questions.length; i++) {
          const checked = form.querySelector(`input[name="q${i}"]:checked`);
          if (!checked) {
            const firstRow = form.children[i];
            firstRow.scrollIntoView({ behavior: "smooth", block: "center" });

            firstRow.classList.add("ring-2", "ring-pink-300");
            setTimeout(
              () => firstRow.classList.remove("ring-2", "ring-pink-300"),
              800
            );
            return;
          }
          total += parseInt(checked.value, 10);
        }

        window.location.href = `result.html?score=${total}`;
      });
    </script>
  </body>
</html>