{"id":119,"date":"2026-07-22T06:00:23","date_gmt":"2026-07-22T06:00:23","guid":{"rendered":"https:\/\/dev.ympai.org\/mental-health-center\/"},"modified":"2026-09-10T15:41:13","modified_gmt":"2026-09-10T08:41:13","slug":"mentalhealthcenter","status":"publish","type":"page","link":"https:\/\/ympai.org\/en\/mentalhealthcenter\/","title":{"rendered":"Mental Health Center"},"content":{"rendered":"\n<!-- Include Library Chart.js & html2pdf.js via CDN -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n<style>\n.mhc-wrapper {\n  width: 100%;\n  max-width: 800px;\n  margin: 40px auto;\n  padding: 0 20px;\n  font-family: system-ui, -apple-system, sans-serif;\n  box-sizing: border-box;\n}\n\n.mhc-header {\n  text-align: center;\n  margin-bottom: 30px;\n}\n\n.mhc-title {\n  font-size: 30px;\n  font-weight: 700;\n  color: #2d3748;\n  margin-bottom: 8px;\n}\n\n.mhc-subtitle {\n  font-size: 15px;\n  color: #718096;\n  margin: 0;\n}\n\n.mhc-card {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 20px;\n  padding: 32px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n\n.form-group {\n  margin-bottom: 20px;\n  text-align: left;\n}\n\n.form-group label {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: #4a5568;\n  margin-bottom: 8px;\n}\n\n.form-group input {\n  width: 100%;\n  padding: 12px 16px;\n  border: 1px solid #cbd5e0;\n  border-radius: 10px;\n  font-size: 15px;\n  box-sizing: border-box;\n}\n\n.form-group input:focus {\n  outline: none;\n  border-color: #7b94c0;\n  box-shadow: 0 0 0 3px rgba(123, 148, 192, 0.2);\n}\n\n.mhc-btn {\n  background: #7b94c0;\n  color: #fff;\n  border: none;\n  padding: 14px 32px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  width: 100%;\n  transition: 0.2s;\n}\n\n.mhc-btn:hover {\n  background: #637dae;\n}\n\n.quiz-section {\n  display: none;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-radius: 20px;\n  padding: 32px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n\n.btn-back {\n  background: transparent;\n  border: none;\n  color: #718096;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  margin-bottom: 20px;\n}\n\n.question-item {\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid #edf2f7;\n}\n\n.question-item h4 {\n  font-size: 16px;\n  color: #2d3748;\n  margin: 0 0 14px 0;\n  line-height: 1.5;\n}\n\n.options-group {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.option-label {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  color: #4a5568;\n}\n\n.option-label:hover {\n  background: #f7fafc;\n  border-color: #7b94c0;\n}\n<\/style>\n\n<div class=\"mhc-wrapper\">\n  <div class=\"mhc-header\">\n    <h2 class=\"mhc-title\" id=\"mhcTitle\">Mental Health Centre<\/h2>\n    <p class=\"mhc-subtitle\" id=\"mhcSub\">Silakan isi data diri Anda sebelum memulai tes asesmen mandiri.<\/p>\n  <\/div>\n\n  <!-- FORM DATA DIRI -->\n  <div class=\"mhc-card\" id=\"userInfoView\">\n    <form id=\"userDataForm\" onsubmit=\"handleStartQuiz(event)\">\n      <div class=\"form-group\">\n        <label for=\"userName\">Nama Lengkap<\/label>\n        <input type=\"text\" id=\"userName\" placeholder=\"Masukkan nama Anda\" required=\"\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"userEmail\">Alamat Email <\/label>\n        <input type=\"email\" id=\"userEmail\" placeholder=\"contoh@email.com\" required=\"\">\n      <\/div>\n      <div class=\"form-group\">\n        <label for=\"userAge\">Usia (Tahun)<\/label>\n        <input type=\"number\" id=\"userAge\" placeholder=\"Contoh: 17\" min=\"1\" max=\"100\" required=\"\">\n      <\/div>\n      <button type=\"submit\" class=\"mhc-btn\">Mulai Tes Asesmen<\/button>\n    <\/form>\n  <\/div>\n\n  <!-- VIEW SOAL SPA -->\n  <div class=\"quiz-section\" id=\"quizView\">\n    <button class=\"btn-back\" onclick=\"resetForm()\">\u2190 Isi Ulang Data Diri<\/button>\n    <form id=\"quizForm\" onsubmit=\"submitAssessment(event)\">\n      <div id=\"quizQuestionsContainer\">\n        <p style=\"text-align: center; color: #718096;\">Memuat soal dari database&#8230;<\/p>\n      <\/div>\n      <button type=\"submit\" class=\"mhc-btn\" style=\"margin-top: 20px;\">Kirim Jawaban &amp; Lihat Hasil<\/button>\n    <\/form>\n  <\/div>\n\n  <!-- VIEW HASIL & DOWNLOAD PDF -->\n  <div class=\"quiz-section\" id=\"resultView\" style=\"display: none; text-align: center;\">\n    <div id=\"pdfReportArea\" style=\"padding: 20px; background: #fff;\">\n      <h3 id=\"resultName\" style=\"color: #2d3748; font-size: 22px; margin-bottom: 5px;\">Hasil Asesmen Anda<\/h3>\n      <p id=\"resultEmailSub\" style=\"color: #718096; font-size: 14px; margin-bottom: 20px;\"><\/p>\n      <div style=\"max-width: 550px; margin: 0 auto;\">\n        <canvas id=\"scoreChart\"><\/canvas>\n      <\/div>\n    <\/div>\n\n    <div style=\"display: flex; gap: 15px; justify-content: center; margin-top: 25px;\">\n      <button class=\"mhc-btn\" onclick=\"downloadPDF()\" style=\"background: #2b6cb0;\">Download Hasil (PDF)<\/button>\n      <button class=\"mhc-btn\" onclick=\"resetForm()\" style=\"background: #718096;\">Tes Ulang<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nlet dbQuestions = [];\nlet currentUserData = {};\nlet chartInstance = null;\n\n\/\/ Fetch data kuesioner saat awal muat\nwindow.addEventListener(\"load\", async function () {\n  try {\n    const res = await fetch(\"https:\/\/ympai.org\/wp-json\/fclc\/v1\/kuesioner\");\n    if (res.ok) {\n      dbQuestions = await res.json();\n    } else {\n      const fallbackRes = await fetch(\"https:\/\/dev.ympai.org\/wp-json\/fclc\/v1\/kuesioner\");\n      if (fallbackRes.ok) dbQuestions = await fallbackRes.json();\n    }\n  } catch (err) {\n    console.error(\"Error Fetch Soal:\", err);\n  }\n});\n\nfunction handleStartQuiz(event) {\n  event.preventDefault();\n\n  const name  = document.getElementById(\"userName\").value;\n  const email = document.getElementById(\"userEmail\").value;\n  const age   = parseInt(document.getElementById(\"userAge\").value);\n\n  currentUserData = { name: name, email: email, age: age };\n\n  document.getElementById(\"userInfoView\").style.display = \"none\";\n  document.getElementById(\"resultView\").style.display   = \"none\";\n  document.getElementById(\"quizView\").style.display     = \"block\";\n\n  if (age < 18) {\n    document.getElementById(\"mhcTitle\").innerHTML = \"Tes DASS-Y (Anak &#038; Remaja)\";\n    document.getElementById(\"mhcSub\").innerText   = \"Halo \" + name + \", jawablah pertanyaan di bawah ini sesuai yang kamu rasakan.\";\n    renderDbQuestions(\"remaja\");\n  } else {\n    document.getElementById(\"mhcTitle\").innerHTML = \"Tes DASS-42 (Dewasa)\";\n    document.getElementById(\"mhcSub\").innerText   = \"Halo \" + name + \", jawablah pertanyaan di bawah ini berdasarkan kondisi 1 minggu terakhir.\";\n    renderDbQuestions(\"dewasa\");\n  }\n}\n\nfunction renderDbQuestions(targetUsia) {\n  const container = document.getElementById(\"quizQuestionsContainer\");\n  container.innerHTML = \"\";\n\n  if (!dbQuestions || dbQuestions.length === 0) {\n    container.innerHTML = '<p style=\"text-align: center; color: red;\">Belum ada data pertanyaan di database.<\/p>';\n    return;\n  }\n\n  const filtered = dbQuestions.filter((item) => {\n    const u = (item.target_usia || \"\").toLowerCase().trim();\n    return u === targetUsia.toLowerCase().trim();\n  });\n\n  filtered.forEach((q, idx) => {\n    const qText = q.teks_soal || \"Pertanyaan \" + (idx + 1);\n    const qId   = q.id_soal || idx;\n\n    const qBox = document.createElement(\"div\");\n    qBox.className = \"question-item\";\n    qBox.innerHTML = `\n      <h4>${idx + 1}. ${qText}<\/h4>\n      <div class=\"options-group\">\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"0\" required> 0 : Tidak pernah \/ tidak sesuai<\/label>\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"1\"> 1 : Kadang-kadang \/ sampai tingkat tertentu<\/label>\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"2\"> 2 : Lumayan sering \/ batas yang dipertimbangkan<\/label>\n        <label class=\"option-label\"><input type=\"radio\" name=\"q_${qId}\" value=\"3\"> 3 : Sangat sering \/ sangat sesuai<\/label>\n      <\/div>\n    `;\n    container.appendChild(qBox);\n  });\n}\n\nasync function submitAssessment(event) {\n  event.preventDefault();\n\n  const formData = new FormData(document.getElementById(\"quizForm\"));\n  const answers  = {};\n\n  formData.forEach((value, key) => {\n    const qId = key.replace(\"q_\", \"\");\n    answers[qId] = parseInt(value);\n  });\n\n  const payload = {\n    nama: currentUserData.name,\n    email: currentUserData.email,\n    usia: currentUserData.age,\n    answers: answers,\n  };\n\n  try {\n    let res = await fetch(\"https:\/\/ympai.org\/wp-json\/fclc\/v1\/submit-assessment\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify(payload),\n    });\n\n    if (!res.ok) {\n      res = await fetch(\"https:\/\/dev.ympai.org\/wp-json\/fclc\/v1\/submit-assessment\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application\/json\" },\n        body: JSON.stringify(payload),\n      });\n    }\n\n    if (res.ok) {\n      const data = await res.json();\n      renderChartResult(data);\n    }\n  } catch (err) {\n    console.error(\"Error Submit:\", err);\n  }\n}\n\nfunction renderChartResult(data) {\n  document.getElementById(\"quizView\").style.display   = \"none\";\n  document.getElementById(\"resultView\").style.display = \"block\";\n  document.getElementById(\"mhcTitle\").innerText       = \"Hasil Asesmen Mandiri\";\n  document.getElementById(\"mhcSub\").innerText         = \"Berikut adalah grafik tingkat kondisi emosional Anda:\";\n  document.getElementById(\"resultName\").innerText     = \"Hasil Asesmen: \" + data.nama + \" (\" + data.target_usia.toUpperCase() + \")\";\n  document.getElementById(\"resultEmailSub\").innerText = \"Hasil ringkasan juga telah dikirimkan ke email: \" + data.email;\n\n  \/\/ Function Norma DASS\n  function getDASSLevel(type, scale, score) {\n    const isDewasa = (type || '').toLowerCase() === 'dewasa';\n    if (isDewasa) {\n      if (scale === 'depression') {\n        if (score <= 9) return 'Normal';\n        if (score <= 13) return 'Ringan';\n        if (score <= 20) return 'Sedang';\n        if (score <= 27) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'anxiety') {\n        if (score <= 7) return 'Normal';\n        if (score <= 9) return 'Ringan';\n        if (score <= 14) return 'Sedang';\n        if (score <= 19) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'stress') {\n        if (score <= 14) return 'Normal';\n        if (score <= 18) return 'Ringan';\n        if (score <= 25) return 'Sedang';\n        if (score <= 33) return 'Parah';\n        return 'Sangat Parah';\n      }\n    } else {\n      if (scale === 'depression') {\n        if (score <= 6) return 'Normal';\n        if (score <= 8) return 'Ringan';\n        if (score <= 13) return 'Sedang';\n        if (score <= 16) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'anxiety') {\n        if (score <= 5) return 'Normal';\n        if (score <= 7) return 'Ringan';\n        if (score <= 12) return 'Sedang';\n        if (score <= 15) return 'Parah';\n        return 'Sangat Parah';\n      }\n      if (scale === 'stress') {\n        if (score <= 11) return 'Normal';\n        if (score <= 13) return 'Ringan';\n        if (score <= 16) return 'Sedang';\n        if (score <= 18) return 'Parah';\n        return 'Sangat Parah';\n      }\n    }\n    return 'Normal';\n  }\n\n  const lvlDepression = getDASSLevel(data.target_usia, 'depression', data.scores.depression);\n  const lvlAnxiety    = getDASSLevel(data.target_usia, 'anxiety', data.scores.anxiety);\n  const lvlStress     = getDASSLevel(data.target_usia, 'stress', data.scores.stress);\n\n  const ctx = document.getElementById(\"scoreChart\").getContext(\"2d\");\n\n  if (chartInstance) {\n    chartInstance.destroy();\n  }\n\n  chartInstance = new Chart(ctx, {\n    type: \"bar\",\n    data: {\n      labels: [\n        \"Depresi (\" + lvlDepression + \")\", \n        \"Kecemasan (\" + lvlAnxiety + \")\", \n        \"Stres (\" + lvlStress + \")\"\n      ],\n      datasets: [\n        {\n          label: \"Skor Poin\",\n          data: [data.scores.depression, data.scores.anxiety, data.scores.stress],\n          backgroundColor: [\"rgba(239, 68, 68, 0.75)\", \"rgba(245, 158, 11, 0.75)\", \"rgba(59, 130, 246, 0.75)\"],\n          borderColor: [\"#ef4444\", \"#f59e0b\", \"#3b82f6\"],\n          borderWidth: 1.5,\n          borderRadius: 8,\n        },\n      ],\n    },\n    options: {\n      responsive: true,\n      animation: false,\n      scales: {\n        y: { beginAtZero: true, max: (data.target_usia || '').toLowerCase() === 'dewasa' ? 42 : 21 },\n      },\n      plugins: { legend: { display: false } },\n    },\n  });\n\n  \/\/ Sisipkan Kotak Keterangan Rekomendasi\n  let expBox = document.getElementById(\"dassExplanationBox\");\n  if (!expBox) {\n    expBox = document.createElement(\"div\");\n    expBox.id = \"dassExplanationBox\";\n    expBox.style.marginTop = \"25px\";\n    expBox.style.padding = \"18px 20px\";\n    expBox.style.borderRadius = \"12px\";\n    expBox.style.textAlign = \"left\";\n    expBox.style.fontSize = \"14px\";\n    expBox.style.lineHeight = \"1.6\";\n    document.getElementById(\"pdfReportArea\").appendChild(expBox);\n  }\n\n  const allLevels = [lvlDepression, lvlAnxiety, lvlStress];\n\n  if (allLevels.includes('Parah') || allLevels.includes('Sangat Parah')) {\n    expBox.style.backgroundColor = \"#f8d7da\";\n    expBox.style.border = \"1px solid #f5c6cb\";\n    expBox.style.color = \"#721c24\";\n    expBox.innerHTML = \"<strong>Rekomendasi Konseling Profesional:<\/strong><br>Disarankan untuk melakukan sesi konseling ke profesional. Kamu dapat menghubungi <strong>RKKI YMPAI<\/strong> melalui admin offline di <strong>0857-2089-5262<\/strong> atau admin online di <strong>0896-8838-9566<\/strong>.\";\n  } \n  else if (allLevels.includes('Ringan') || allLevels.includes('Sedang')) {\n    expBox.style.backgroundColor = \"#fff3cd\";\n    expBox.style.border = \"1px solid #ffeeba\";\n    expBox.style.color = \"#856404\";\n    expBox.innerHTML = \"<strong>Rekomendasi Tata Kelola Diri:<\/strong><br>Disarankan untuk rutin mengelola diri dengan teknik-teknik tata kelola seperti <em>butterfly hug<\/em>, latihan napas 4x6 atau napas 4-7-8, serta jurnaling yang dilakukan rutin setiap malam sebelum tidur selama 5 menit sambil fokus dan berkesadaran.\";\n  } \n  else {\n    expBox.style.backgroundColor = \"#d4edda\";\n    expBox.style.border = \"1px solid #c3e6cb\";\n    expBox.style.color = \"#155724\";\n    expBox.innerHTML = \"<strong>Kondisi Mental Stabil:<\/strong><br>Selamat, Kamu berada dalam kondisi mental yang stabil! Pertahankan terus kesehatan mentalmu dengan menjaga 4 Pilar Kehidupan (menjaga pola makan, pola tidur, tata kelola emosi & olahraga rutin).\";\n  }\n\n  expBox.style.display = \"block\";\n}\n\nfunction downloadPDF() {\n  const element = document.getElementById(\"pdfReportArea\");\n  const opt = {\n    margin: 10,\n    filename: 'Hasil_Asesmen_' + currentUserData.name.replace(\/\\s+\/g, '_') + '.pdf',\n    image: { type: 'jpeg', quality: 0.98 },\n    html2canvas: { scale: 2 },\n    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }\n  };\n\n  html2pdf().set(opt).from(element).save();\n}\n\nfunction resetForm() {\n  document.getElementById(\"resultView\").style.display   = \"none\";\n  document.getElementById(\"quizView\").style.display     = \"none\";\n  document.getElementById(\"userInfoView\").style.display = \"block\";\n  document.getElementById(\"mhcTitle\").innerText         = \"Mental Health Centre\";\n  document.getElementById(\"mhcSub\").innerText           = \"Silakan isi data diri Anda sebelum memulai tes asesmen mandiri.\";\n  document.getElementById(\"userDataForm\").reset();\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Mental Health Centre Silakan isi data diri Anda sebelum memulai tes asesmen mandiri. Nama Lengkap Alamat Email Usia (Tahun) Mulai Tes Asesmen \u2190 Isi Ulang Data Diri Memuat soal dari database&#8230; Kirim Jawaban &amp; Lihat Hasil Hasil Asesmen Anda Download Hasil (PDF) Tes Ulang<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-119","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":36,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages\/119\/revisions"}],"predecessor-version":[{"id":709,"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/pages\/119\/revisions\/709"}],"wp:attachment":[{"href":"https:\/\/ympai.org\/en\/wp-json\/wp\/v2\/media?parent=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}