{"id":140,"date":"2024-12-23T15:56:31","date_gmt":"2024-12-23T20:56:31","guid":{"rendered":"https:\/\/zhangweb.ca\/anli\/?page_id=140"},"modified":"2026-01-27T03:29:47","modified_gmt":"2026-01-27T08:29:47","slug":"score","status":"publish","type":"page","link":"https:\/\/zhangweb.ca\/anli\/","title":{"rendered":"Career Questionnaire"},"content":{"rendered":"\n<style>\n  .question-group.active { animation: fadeIn 0.5s ease-in-out; }\n  @keyframes fadeIn { from { opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }\n\n  #languageScoreForm { max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; }\n  h3, h4 { text-align: center; }\n\n  .question-group { display:none; margin-bottom:20px; }\n  .question-group.active { display:block; }\n\n  .options { display:flex; justify-content:space-around; gap:12px; margin-top:10px; flex-wrap:wrap; }\n  .option-btn{\n    padding:12px 14px; border:1px solid #ddd; border-radius:8px; background:#f4f4f4;\n    cursor:pointer; font-size:16px; transition:background-color .2s, transform .05s;\n    flex:1 1 240px; text-align:center; user-select:none;\n  }\n  .option-btn:hover{ background:#e0e0e0; }\n  .option-btn:active{ transform:translateY(1px); }\n  .option-btn.selected{ background:#4CAF50; color:#fff; border-color:#4CAF50; }\n\n  .progress-container{ margin:20px 0; text-align:center; }\n  .progress-bar{ width:100%; background:#ddd; border-radius:10px; overflow:hidden; }\n  .progress{ height:20px; background:#4CAF50; width:0%; color:#fff; line-height:20px; font-size:12px; }\n\n  .navigation-buttons{ display:flex; justify-content:space-between; margin-top:8px; }\n  .navigation-buttons button{\n    padding:10px 20px; font-size:16px; border:none; border-radius:8px;\n    background:#4CAF50; color:#fff; cursor:pointer; transition:background-color .2s;\n  }\n  .navigation-buttons button:disabled{ background:#ddd; cursor:not-allowed; }\n\n  \/* \u63d0\u4ea4\u4e2d\u906e\u7f69\uff08\u53ef\u9009\uff09 *\/\n  .submitting-mask{\n    display:none; position:fixed; inset:0; background:rgba(0,0,0,.25);\n    align-items:center; justify-content:center; z-index:9999;\n  }\n  .submitting-mask .box{\n    background:#fff; padding:16px 18px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.2);\n    font-size:16px;\n  }\n<\/style>\n\n<div class=\"submitting-mask\" id=\"submittingMask\">\n  <div class=\"box\">Submitting\u2026<\/div>\n<\/div>\n\n<form id=\"languageScoreForm\">\n  <h3>Career Questionnaire<\/h3>\n\n  <div class=\"progress-container\">\n    <div class=\"progress-bar\"><div class=\"progress\" id=\"progress\"><\/div><\/div>\n  <\/div>\n\n  <div class=\"question-group active\" data-question=\"1\">\n    <h4>What kind of work style do you prefer?<\/h4>\n    <div class=\"options\">\n      <div class=\"option-btn\" data-score=\"0|Collaborating with a team to complete tasks\">Collaborating with a team to complete tasks<\/div>\n      <div class=\"option-btn\" data-score=\"10|Working independently and controlling your own progress\">Working independently and controlling your own progress<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"question-group\" data-question=\"2\">\n    <h4>What aspect of a job do you value more?<\/h4>\n    <div class=\"options\">\n      <div class=\"option-btn\" data-score=\"0|Creativity and flexibility in the work\">Creativity and flexibility in the work<\/div>\n      <div class=\"option-btn\" data-score=\"10|Stability and security in the position\">Stability and security in the position<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"question-group\" data-question=\"3\">\n    <h4>What type of work do you see yourself pursuing in the future?<\/h4>\n    <div class=\"options\">\n      <div class=\"option-btn\" data-score=\"0|Data analysis, technical, or programming-related fields\">Data analysis, technical, or programming-related fields<\/div>\n      <div class=\"option-btn\" data-score=\"10|Customer communication, sales, or marketing-related fields\">Customer communication, sales, or marketing-related fields<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"question-group\" data-question=\"4\">\n    <h4>Which skills do you prefer to develop?<\/h4>\n    <div class=\"options\">\n      <div class=\"option-btn\" data-score=\"0|Diving deeper into technical tools to become a specialist\">Diving deeper into technical tools to become a specialist<\/div>\n      <div class=\"option-btn\" data-score=\"10|Expanding management and communication abilities to become a generalist\">Expanding management and communication abilities to become a generalist<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"navigation-buttons\">\n    <button type=\"button\" id=\"prevButton\" disabled>Previous<\/button>\n  <\/div>\n<\/form>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  \/\/ \u2705 \u6539\u6210\u4f60\u7684 Web App exec URL\n  const WEB_APP_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbxWPAGOqWVf-NSaj0F24nLuRj9vPk4mhS1iXxeRgm8lv6Ryw4Jxvzt-mR4dfzcI4Z2e\/exec\";\n\n  const questions = document.querySelectorAll(\".question-group\");\n  const progress = document.getElementById(\"progress\");\n  const prevButton = document.getElementById(\"prevButton\");\n  const mask = document.getElementById(\"submittingMask\");\n\n  let currentQuestionIndex = 0;\n  let totalScore = 0;\n\n  function updateProgress() {\n    const progressPercent = Math.round((currentQuestionIndex \/ questions.length) * 100);\n    progress.style.width = progressPercent + \"%\";\n  }\n\n  function showQuestion(index) {\n    questions.forEach((q, i) => q.classList.toggle(\"active\", i === index));\n    prevButton.disabled = index === 0;\n    updateProgress();\n  }\n\n  function collectAnswers() {\n    const answers = {};\n    questions.forEach(group => {\n      const qn = group.dataset.question;\n      const selected = group.querySelector(\".option-btn.selected\");\n      if (selected) {\n        const [score, text] = selected.dataset.score.split(\"|\");\n        answers[\"Q\" + qn] = { score: Number(score), text };\n      }\n    });\n    return answers;\n  }\n\n  function resetQuestionnaire() {\n    document.querySelectorAll(\".option-btn.selected\").forEach(el => el.classList.remove(\"selected\"));\n    questions.forEach(g => delete g.dataset.score);\n\n    currentQuestionIndex = 0;\n    totalScore = 0;\n    progress.style.width = \"0%\";\n    showQuestion(currentQuestionIndex);\n  }\n\n  async function submitToSheet() {\n  mask.style.display = \"flex\";\n\n  const payload = {\n    total_score: String(totalScore),\n    answers: JSON.stringify(collectAnswers()),\n    ua: navigator.userAgent\n  };\n\n  try {\n    \/\/ \u2705 \u7528 x-www-form-urlencoded\uff0c\u4e0d\u89e6\u53d1\u9884\u68c0\n    const body = new URLSearchParams(payload).toString();\n\n    const res = await fetch(WEB_APP_URL, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/x-www-form-urlencoded;charset=UTF-8\" },\n      body\n    });\n\n    const result = await res.json();\n\n    if (result.ok) {\n      alert(\"Thank you! Your response has been saved successfully.\");\n      resetQuestionnaire();\n    } else {\n      alert(\"Submission failed: \" + (result.error || \"Unknown error\"));\n    }\n  } catch (e) {\n    alert(\"Network error: \" + e.message);\n  } finally {\n    mask.style.display = \"none\";\n  }\n}\n\n\n  prevButton.addEventListener(\"click\", function () {\n    if (currentQuestionIndex > 0) {\n      currentQuestionIndex--;\n      showQuestion(currentQuestionIndex);\n    }\n  });\n\n  document.querySelectorAll(\".option-btn\").forEach(option => {\n    option.addEventListener(\"click\", function () {\n      const parent = option.closest(\".question-group\");\n\n      const prevScore = parseInt(parent.dataset.score || \"0\", 10);\n      const [score] = option.dataset.score.split(\"|\");\n\n      parent.querySelectorAll(\".option-btn\").forEach(btn => btn.classList.remove(\"selected\"));\n      option.classList.add(\"selected\");\n\n      totalScore += parseInt(score, 10) - prevScore;\n      parent.dataset.score = score;\n\n      if (currentQuestionIndex === questions.length - 1) {\n        currentQuestionIndex++;\n        updateProgress(); \/\/ 100%\n        submitToSheet();  \/\/ \u2705 fetch \u5199\u5165 Sheets\uff08\u4e0d\u8df3\u8f6c\uff09\n      } else {\n        currentQuestionIndex++;\n        showQuestion(currentQuestionIndex);\n      }\n    });\n  });\n\n  progress.style.width = \"0%\";\n  showQuestion(currentQuestionIndex);\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Submitting\u2026 Career Questionnaire What kind of work style do you prefer? Collaborating with a team to complete tasks Working independently [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-140","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/pages\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":37,"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":426,"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/pages\/140\/revisions\/426"}],"wp:attachment":[{"href":"https:\/\/zhangweb.ca\/anli\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}