HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>PHQ-9 Survey</title>
</head>
<body>
<div class="container">
<h1>PHQ-9 Survey</h1>
<form id="phq9-form">
<!-- Questions will be generated by JavaScript -->
</form>
<button id="submit-btn">Submit</button>
<div id="result" class="hidden"></div>
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS
body {
font-family: 'Avenir', 'Helvetica', 'Arial', 'sans-serif';
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
.container {
background-color: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 600px;
}
h1 {
text-align: center;
margin-bottom: 2rem;
}
.question {
margin-bottom: 1.5rem;
}
.question p {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
input[type="radio"] {
margin-right: 0.5rem;
margin-left: 0.5rem;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
.hidden {
display: none;
}
#result {
margin-top: 1rem;
text-align: center;
}
JAVASCRIPT
const questions = [
"Little interest or pleasure in doing things",
"Feeling down, depressed, or hopeless",
"Trouble falling or staying asleep, or sleeping too much",
"Feeling tired or having little energy",
"Poor appetite or overeating",
"Feeling bad about yourself - or that you are a failure or have let yourself or your family down",
"Trouble concentrating on things, such as reading the newspaper or watching television",
"Moving or speaking so slowly that other people could have noticed? Or the opposite - being so fidgety or restless that you have been moving around a lot more than usual",
"Thoughts that you would be better off dead or of hurting yourself in some way"
];
const form = document.getElementById("phq9-form");
const submitBtn = document.getElementById("submit-btn");
const resultDiv = document.getElementById("result");
function generateQuestions() {
questions.forEach((question, index) => {
const questionDiv = document.createElement("div");
questionDiv.classList.add("question");
const questionText = document.createElement("p");
questionText.textContent = `${index + 1}. ${question}`;
questionDiv.appendChild(questionText);
const scale = ["Not at all", "Several days", "More than half the days", "Nearly every day"];
for (let i = 0; i < 4; i++) {
const input = document.createElement("input");
input.type = "radio";
input.name = `question-${index + 1}`;
input.value = i;
input.required = true;
const label = document.createElement("label");
label.textContent = `${scale[i]}`;
label.prepend(input);
questionDiv.appendChild(label);
}
form.appendChild(questionDiv);
});
}
function calculateScore() {
let score = 0;
for (let i = 0; i < questions.length; i++) {
const radios = document.getElementsByName(`question-${i + 1}`);
for (const radio of radios) {
if (radio.checked) {
score += parseInt(radio.value);
break;
}
}
}
return score;
}
submitBtn.addEventListener("click", () => {
const score = calculateScore();
resultDiv.textContent = `Your PHQ-9 score is: ${score}`;
resultDiv.classList.remove("hidden");
});
generateQuestions();
