{"id":2400,"date":"2023-10-07T09:14:41","date_gmt":"2023-10-07T01:14:41","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2400"},"modified":"2025-05-08T01:30:43","modified_gmt":"2025-05-07T17:30:43","slug":"love-in-near-future","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/love-in-near-future","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u8fd1\u671f\u4f60\u4f1a\u9047\u89c1\u7231\u60c5\u5417"},"content":{"rendered":"<!-- \u611b\u60c5\u6e2c\u9a57 - \u53ef\u5d4c\u5165WordPress\u7684\u4ee3\u78bc -->\n<div id=\"love-test-app\" class=\"lta-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div id=\"lta-intro-page\" class=\"lta-page lta-intro active\">\n    <h2 class=\"lta-title\">\u8fd1\u671f\u4f60\u4f1a\u9047\u89c1\u7231\u60c5\u5417<\/h2>\n    <div class=\"lta-intro-content\">\n      <div class=\"lta-feature-icons\">\n        <div class=\"lta-icon-item\">\n          <div class=\"lta-icon\">\u2764\ufe0f<\/div>\n          <div class=\"lta-icon-text\">\u7231\u60c5\u9884\u6d4b<\/div>\n        <\/div>\n        <div class=\"lta-icon-item\">\n          <div class=\"lta-icon\">\ud83d\udd2e<\/div>\n          <div class=\"lta-icon-text\">\u7cbe\u51c6\u5206\u6790<\/div>\n        <\/div>\n        <div class=\"lta-icon-item\">\n          <div class=\"lta-icon\">\ud83d\udcca<\/div>\n          <div class=\"lta-icon-text\">\u53ef\u89c6\u5316\u7ed3\u679c<\/div>\n        <\/div>\n      <\/div>\n      <p class=\"lta-description\">\u5bf9\u4e8e\u5355\u8eab\u72d7\u6765\u8bf4\uff0c\u6709\u4e00\u79cd\u5c34\u5c2c\u53eb\u505a\u4e0e\u7231\u60c5\u540c\u6846\uff0c\u5f53\u770b\u5230\u5468\u906d\u7684\u670b\u53cb\u5728\u81ea\u5df1\u9762\u524d\u79c0\u6069\u7231\u7684\u65f6\u5019\uff0c\u5185\u5fc3\u603b\u662f\u4f1a\u4ea7\u751f\u4e00\u79cd\u6068\u4e0d\u5f97\u5bf9\u65b9\u539f\u5730\u7206\u70b8\u7684\u6028\u5ff5\u3002\u5982\u679c\u4f60\u73b0\u5728\u8fd8\u662f\u5355\u8eab\uff0c\u60f3\u77e5\u9053\u81ea\u5df1\u8fd1\u671f\u4f1a\u9047\u89c1\u7231\u60c5\u5417\uff1f\u8ba9\u6d4b\u8bd5\u4e3a\u4f60\u63ed\u6653\u7b54\u6848\u5427\u3002<\/p>\n      <button id=\"lta-start-btn\" class=\"lta-btn lta-start-btn\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div id=\"lta-quiz-page\" class=\"lta-page lta-quiz\">\n    <h2 class=\"lta-title\">\u7231\u60c5\u6d4b\u9a8c<\/h2>\n    <div class=\"lta-quiz-container\">\n      <div class=\"lta-question\">\n        <h3 id=\"lta-question-text\">\u6700\u8fd1\u4e00\u6bb5\u65f6\u95f4\uff0c\u5bf9\u4ee5\u4e0b\u54ea\u4ef6\u4e8b\u6bd4\u8f83\u611f\u5174\u8da3\uff1f<\/h3>\n        <div class=\"lta-options\">\n          <button class=\"lta-option-btn\" data-option=\"A\">\u5b66\u4e60\u67d0\u9879\u6280\u80fd<\/button>\n          <button class=\"lta-option-btn\" data-option=\"B\">\u8ffd\u5267\uff0c\u8ffd\u7efc\u827a<\/button>\n          <button class=\"lta-option-btn\" data-option=\"C\">\u770b\u4e66<\/button>\n          <button class=\"lta-option-btn\" data-option=\"D\">\u4e70\u4e70\u4e70<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div id=\"lta-result-page\" class=\"lta-page lta-result\">\n    <h2 class=\"lta-title\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <div class=\"lta-result-container\">\n      <div class=\"lta-result-header\">\n        <h3 id=\"lta-result-title\"><\/h3>\n      <\/div>\n      <div class=\"lta-chart-container\">\n        <canvas id=\"lta-result-chart\"><\/canvas>\n      <\/div>\n      <div class=\"lta-result-content\">\n        <p id=\"lta-result-text\"><\/p>\n      <\/div>\n      <button id=\"lta-restart-btn\" class=\"lta-btn lta-restart-btn\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  \/\/ \u4f7f\u7528\u7acb\u5373\u57f7\u884c\u51fd\u6578\u78ba\u4fdd\u8b8a\u91cf\u4e0d\u6703\u6c61\u67d3\u5168\u5c40\u547d\u540d\u7a7a\u9593\n  const LoveTestApp = (function() {\n    \/\/ \u79c1\u6709\u8b8a\u91cf\n    const quizData = {\n      question: \"\u6700\u8fd1\u4e00\u6bb5\u6642\u9593\uff0c\u5c0d\u4ee5\u4e0b\u54ea\u4ef6\u4e8b\u6bd4\u8f03\u611f\u8208\u8da3\uff1f\",\n      options: [\n        {id: \"A\", text: \"\u5b78\u7fd2\u67d0\u9805\u6280\u80fd\"},\n        {id: \"B\", text: \"\u8ffd\u5287\uff0c\u8ffd\u7d9c\u85dd\"},\n        {id: \"C\", text: \"\u770b\u66f8\"},\n        {id: \"D\", text: \"\u8cb7\u8cb7\u8cb7\"}\n      ],\n      results: {\n        \"A\": {\n          title: \"\u4f60\u8fd1\u671f\u9047\u898b\u611b\u60c5\u7684\u53ef\u80fd\u6027\u70ba90%\",\n          text: \"\u8fd1\u671f\u4f60\u53ef\u80fd\u6703\u5728\u793e\u4ea4\u5834\u5408\u4e2d\u9047\u898b\u611b\u60c5\uff0c\u9047\u5230\u5c0d\u7684\u90a3\u500b\u4eba\u6642\uff0c\u4f60\u6703\u89ba\u5f97\u7de3\u5206\u771f\u7684\u5f88\u5947\u5999\uff0c\u6216\u8a31\u4f60\u5f9e\u6c92\u6709\u60f3\u904e\uff0c\u5c0d\u65b9\u6703\u8207\u90a3\u7a2e\u7279\u6b8a\u7684\u5f62\u5f0f\u51fa\u73fe\u3002\u4f60\u751a\u81f3\u4e0d\u9858\u610f\u8ddf\u5c0d\u65b9\u5f9e\u670b\u53cb\u505a\u8d77\uff0c\u53ea\u60f3\u8fc5\u901f\u958b\u555f\u6200\u60c5\uff0c\u8ac7\u6200\u611b\u7684\u6e34\u671b\u88ab\u5c0d\u7684\u4eba\u7acb\u523b\u6fc0\u767c\u51fa\u4f86\uff0c\u56e0\u70ba\u9047\u898b\u4e86\u611b\u60c5\uff0c\u4f60\u7684\u72c0\u614b\u4e5f\u8b8a\u5f97\u5f88\u597d\uff0c\u6574\u500b\u4eba\u6eff\u9762\u6625\u98a8\uff0c\u770b\u8d77\u4f86\u5f88\u6709\u6d3b\u529b\u7684\u6a23\u5b50\u3002\",\n          percentage: 90\n        },\n        \"B\": {\n          title: \"\u4f60\u8fd1\u671f\u9047\u898b\u611b\u60c5\u7684\u53ef\u80fd\u6027\u70ba60%\",\n          text: \"\u8fd1\u671f\u5982\u679c\u4f60\u9858\u610f\u591a\u53c3\u52a0\u793e\u4ea4\u6d3b\u52d5\uff0c\u4e5f\u6709\u53ef\u80fd\u6703\u9047\u898b\u611b\u60c5\uff0c\u4e0d\u904e\u9047\u898b\u611b\u60c5\u7684\u6982\u7387\u4e0d\u662f\u5f88\u9ad8\uff0c\u53ef\u80fd\u56e0\u70ba\u4f60\u4e26\u6c92\u6709\u628a\u5fc3\u601d\u653e\u5728\u611f\u60c5\u4e0a\uff0c\u611b\u60c5\u51fa\u73fe\u6642\uff0c\u4f60\u6703\u5ffd\u7565\u5b83\u7684\u5b58\u5728\u3002\u4f60\u8a8d\u70ba\u81ea\u5df1\u9084\u6c92\u6709\u505a\u597d\u8ac7\u6200\u611b\u7684\u6e96\u5099\uff0c\u4f60\u671f\u671b\u611b\u60c5\u662f\u4e00\u7a2e\u6d6a\u6f2b\u800c\u6d6a\u6f2b\u7684\u65b9\u5f0f\u964d\u81e8\u7684\uff0c\u6240\u4ee5\uff0c\u4f60\u4e0d\u6703\u523b\u610f\u53bb\u5c0b\u627e\u611b\u60c5\uff0c\u9019\u5c31\u662f\u4f60\u6613\u932f\u904e\u611b\u60c5\u7684\u539f\u56e0\u3002\",\n          percentage: 60\n        },\n        \"C\": {\n          title: \"\u4f60\u8fd1\u671f\u9047\u898b\u611b\u60c5\u7684\u53ef\u80fd\u6027\u70ba40%\",\n          text: \"\u8fd1\u671f\u5982\u679c\u4f60\u80fd\u63a5\u53d7\u89aa\u53cb\u7d66\u4f60\u5b89\u6392\u7684\u76f8\u89aa\u6d3b\u52d5\uff0c\u6709\u53ef\u80fd\u6703\u9047\u898b\u611b\u60c5\u3002\u4e0d\u904e\u73fe\u5728\u7684\u4f60\u975e\u5e38\u6e34\u671b\u6200\u611b\uff0c\u81ea\u5df1\u5c31\u5f97\u591a\u4e0a\u9ede\u5fc3\u3002\u5229\u7528\u5ee3\u6492\u7db2\u65b9\u5f0f\u5c0b\u627e\u6200\u4eba\uff0c\u6210\u529f\u7684\u6982\u7387\u6bd4\u8f03\u5927\uff0c\u4f46\u5982\u679c\u4f60\u5e0c\u671b\u80fd\u8207\u771f\u5fc3\u4eba\u5728\u67d0\u500b\u7279\u6b8a\u7684\u5834\u5408\u9082\u9005\uff0c\u9019\u500b\u9858\u671b\u57fa\u672c\u4e0d\u53ef\u80fd\u5728\u8fd1\u671f\u5be6\u73fe\u3002\u5176\u5be6\u4e0d\u5fc5\u70ba\u4e86\u6200\u611b\u800c\u6200\u611b\uff0c\u82e5\u4f60\u9858\u610f\u7b49\u5f85\uff0c\u904e\u4e86\u9019\u6bb5\u6843\u82b1\u6666\u6697\u7684\u6642\u671f\uff0c\u611b\u60c5\u81ea\u7136\u6703\u51fa\u73fe\u5728\u4f60\u9762\u524d\u3002\",\n          percentage: 40\n        },\n        \"D\": {\n          title: \"\u4f60\u8fd1\u671f\u9047\u898b\u611b\u60c5\u7684\u53ef\u80fd\u6027\u70ba10%\",\n          text: \"\u8fd1\u671f\u4f60\u4e0d\u592a\u6709\u53ef\u80fd\u9047\u898b\u611b\u60c5\uff0c\u5468\u906d\u7684\u7570\u6027\u670b\u53cb\u90fd\u662f\u4f60\u719f\u6089\u7684\u4eba\uff0c\u4f60\u7e3d\u4e0d\u6703\u5728\u9019\u4e9b\u4eba\u7576\u4e2d\u5c0b\u627e\u53e6\u4e00\u534a\u5427\uff0c\u5982\u679c\u6709\u6a5f\u6703\u53c3\u52a0\u793e\u4ea4\u6d3b\u52d5\uff0c\u4f60\u7684\u8868\u73fe\u4e5f\u4e0d\u662f\u5f88\u597d\uff0c\u4e0d\u6703\u7d66\u7570\u6027\u7559\u4e0b\u6df1\u523b\u7684\u5370\u8c61\uff0c\u53ef\u80fd\u4f60\u4e0d\u60f3\u92d2\u8292\u7562\u9732\uff0c\u8868\u73fe\u7684\u592a\u904e\u9a55\u50b2\uff0c\u6240\u4ee5\u4f60\u4ee5\u81ea\u5df1\u6700\u666e\u901a\u7684\u5f62\u8c61\u51fa\u73fe\u5728\u773e\u4eba\u9762\u524d\uff0c\u7576\u7136\u6c92\u53ef\u80fd\u5438\u5f15\u611b\u60c5\u3002\",\n          percentage: 10\n        }\n      }\n    };\n\n    let userAnswers = [];\n    let currentQuestionIndex = 0;\n    \n    \/\/ DOM \u5143\u7d20\n    const DOM = {};\n    \n    \/\/ \u521d\u59cb\u5316\n    function init() {\n      cacheDOMElements();\n      bindEvents();\n      ensureChartJsLoaded().then(() => {\n        console.log(\"\u611b\u60c5\u6e2c\u9a57\u5df2\u6e96\u5099\u5c31\u7dd2\");\n      });\n    }\n    \n    \/\/ \u7de9\u5b58 DOM \u5143\u7d20\u5f15\u7528\n    function cacheDOMElements() {\n      DOM.app = document.getElementById('love-test-app');\n      DOM.introPage = document.getElementById('lta-intro-page');\n      DOM.quizPage = document.getElementById('lta-quiz-page');\n      DOM.resultPage = document.getElementById('lta-result-page');\n      DOM.startBtn = document.getElementById('lta-start-btn');\n      DOM.restartBtn = document.getElementById('lta-restart-btn');\n      DOM.questionText = document.getElementById('lta-question-text');\n      DOM.options = document.querySelector('.lta-options');\n      DOM.resultTitle = document.getElementById('lta-result-title');\n      DOM.resultText = document.getElementById('lta-result-text');\n      DOM.chartContainer = document.getElementById('lta-result-chart');\n    }\n    \n    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n    function bindEvents() {\n      DOM.startBtn.addEventListener('click', startQuiz);\n      DOM.restartBtn.addEventListener('click', restartQuiz);\n      \n      \/\/ \u70ba\u9078\u9805\u6309\u9215\u6dfb\u52a0\u4e8b\u4ef6\u59d4\u8a17\n      DOM.options.addEventListener('click', function(e) {\n        if (e.target.classList.contains('lta-option-btn')) {\n          handleOptionClick(e.target);\n        }\n      });\n    }\n    \n    \/\/ \u78ba\u4fdd Chart.js \u5df2\u52a0\u8f09\n    function ensureChartJsLoaded() {\n      return new Promise((resolve, reject) => {\n        if (window.Chart) {\n          resolve();\n          return;\n        }\n        \n        \/\/ \u9996\u5148\u52a0\u8f09 Chart.js\n        const chartScript = document.createElement('script');\n        chartScript.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js';\n        chartScript.integrity = 'sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==';\n        chartScript.crossOrigin = 'anonymous';\n        chartScript.onload = resolve;\n        chartScript.onerror = reject;\n        document.head.appendChild(chartScript);\n      });\n    }\n    \n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    function startQuiz() {\n      switchPage(DOM.introPage, DOM.quizPage);\n      currentQuestionIndex = 0;\n      userAnswers = [];\n      updateQuestion();\n    }\n    \n    \/\/ \u91cd\u65b0\u6e2c\u9a57\n    function restartQuiz() {\n      switchPage(DOM.resultPage, DOM.introPage);\n    }\n    \n    \/\/ \u8655\u7406\u9078\u9805\u9ede\u64ca\n    function handleOptionClick(optionBtn) {\n      const selectedOption = optionBtn.getAttribute('data-option');\n      userAnswers[currentQuestionIndex] = selectedOption;\n      \n      \/\/ \u6dfb\u52a0\u9078\u4e2d\u6a23\u5f0f\n      document.querySelectorAll('.lta-option-btn').forEach(btn => {\n        btn.classList.remove('selected');\n      });\n      optionBtn.classList.add('selected');\n      \n      \/\/ \u7531\u65bc\u53ea\u6709\u4e00\u500b\u554f\u984c\uff0c\u9ede\u64ca\u5f8c\u76f4\u63a5\u986f\u793a\u7d50\u679c\n      setTimeout(() => {\n        showResult();\n      }, 500);\n    }\n    \n    \/\/ \u986f\u793a\u7d50\u679c\n    function showResult() {\n      const selectedOption = userAnswers[0]; \/\/ \u53ea\u6709\u4e00\u500b\u554f\u984c\uff0c\u53d6\u7b2c\u4e00\u500b\u56de\u7b54\n      const result = quizData.results[selectedOption];\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u9801\u9762\u5167\u5bb9\n      DOM.resultTitle.textContent = result.title;\n      DOM.resultText.textContent = result.text;\n      \n      \/\/ \u5207\u63db\u5230\u7d50\u679c\u9801\n      switchPage(DOM.quizPage, DOM.resultPage);\n      \n      \/\/ \u7e6a\u88fd\u7d50\u679c\u5716\u8868\n      setTimeout(() => {\n        drawResultChart(result);\n      }, 300);\n    }\n    \n    \/\/ \u7e6a\u88fd\u7d50\u679c\u5716\u8868\n    function drawResultChart(result) {\n      const ctx = DOM.chartContainer.getContext('2d');\n      \n      \/\/ \u6e05\u9664\u53ef\u80fd\u5b58\u5728\u7684\u820a\u5716\u8868\n      if (window.resultChart) {\n        window.resultChart.destroy();\n      }\n      \n      \/\/ \u70ba\u5716\u8868\u751f\u6210\u6f38\u8b8a\u8272\n      const gradientFill = ctx.createLinearGradient(0, 0, 0, 400);\n      gradientFill.addColorStop(0, 'rgba(255, 107, 149, 0.6)');\n      gradientFill.addColorStop(1, 'rgba(138, 43, 226, 0.4)');\n      \n      \/\/ \u5275\u5efa\u96f7\u9054\u5716\u6578\u64da\n      const data = {\n        labels: ['\u611b\u60c5\u6a5f\u6703', '\u793e\u4ea4\u80fd\u529b', '\u6200\u611b\u7a4d\u6975\u5ea6', '\u6843\u82b1\u904b', '\u6200\u611b\u671f\u5f85'],\n        datasets: [{\n          label: '\u611b\u60c5\u6307\u6578',\n          data: generateChartData(result.percentage),\n          backgroundColor: gradientFill,\n          borderColor: 'rgba(255, 107, 149, 1)',\n          borderWidth: 2,\n          pointBackgroundColor: '#8a2be2',\n          pointBorderColor: '#fff',\n          pointHoverBackgroundColor: '#ff6b95',\n          pointHoverBorderColor: 'white',\n          pointRadius: 5,\n          pointHoverRadius: 7\n        }]\n      };\n      \n      \/\/ \u914d\u7f6e\u9078\u9805\n      const options = {\n        scales: {\n          r: {\n            angleLines: {\n              display: true,\n              color: 'rgba(255, 107, 149, 0.2)'\n            },\n            grid: {\n              color: 'rgba(138, 43, 226, 0.1)'\n            },\n            suggestedMin: 0,\n            suggestedMax: 100,\n            ticks: {\n              stepSize: 20,\n              backdropColor: 'rgba(0, 0, 0, 0)',\n              color: '#555',\n              font: {\n                size: 12,\n                family: '\"Microsoft JhengHei\", \"Heiti TC\", sans-serif'\n              }\n            },\n            pointLabels: {\n              color: '#333',\n              font: {\n                size: 14,\n                family: '\"Microsoft JhengHei\", \"Heiti TC\", sans-serif',\n                weight: 'bold'\n              }\n            }\n          }\n        },\n        plugins: {\n          legend: {\n            display: true,\n            position: 'top',\n            labels: {\n              font: {\n                size: 16,\n                family: '\"Microsoft JhengHei\", \"Heiti TC\", sans-serif',\n                weight: 'bold'\n              },\n              color: '#ff6b95',\n              boxWidth: 20,\n              padding: 20\n            }\n          },\n          tooltip: {\n            backgroundColor: 'rgba(255, 255, 255, 0.9)',\n            titleColor: '#ff6b95',\n            bodyColor: '#333',\n            borderColor: '#ff6b95',\n            borderWidth: 1,\n            cornerRadius: 8,\n            displayColors: false,\n            padding: 12,\n            titleFont: {\n              size: 16,\n              weight: 'bold',\n              family: '\"Microsoft JhengHei\", \"Heiti TC\", sans-serif'\n            },\n            bodyFont: {\n              size: 14,\n              family: '\"Microsoft JhengHei\", \"Heiti TC\", sans-serif'\n            },\n            callbacks: {\n              label: function(context) {\n                return `${context.label}: ${context.raw}%`;\n              }\n            }\n          }\n        },\n        responsive: true,\n        maintainAspectRatio: false,\n        animation: {\n          duration: 1500,\n          easing: 'easeOutQuart'\n        }\n      };\n      \n      \/\/ \u5275\u5efa\u5716\u8868\n      window.resultChart = new Chart(ctx, {\n        type: 'radar',\n        data: data,\n        options: options\n      });\n      \n      \/\/ \u6dfb\u52a0\u767e\u5206\u6bd4\u986f\u793a\u5728\u7d50\u679c\u9801\u4e0a\u65b9\n      const percentDisplay = document.createElement('div');\n      percentDisplay.className = 'lta-percent-display';\n      percentDisplay.innerHTML = `<span class=\"lta-percent-value\">${result.percentage}%<\/span><span class=\"lta-percent-label\">\u611b\u60c5\u9047\u898b\u6a5f\u7387<\/span>`;\n      \n      \/\/ \u5c07\u767e\u5206\u6bd4\u986f\u793a\u63d2\u5165\u5230\u7d50\u679c\u6a19\u984c\u4e0b\u65b9\n      const resultHeader = document.querySelector('.lta-result-header');\n      if (resultHeader.querySelector('.lta-percent-display')) {\n        resultHeader.querySelector('.lta-percent-display').remove();\n      }\n      resultHeader.appendChild(percentDisplay);\n    }\n    \n    \/\/ \u751f\u6210\u5716\u8868\u6578\u64da\n    function generateChartData(baseValue) {\n      \/\/ \u6839\u64da\u57fa\u672c\u503c\u751f\u6210\u5176\u4ed6\u76f8\u95dc\u6307\u6a19\uff0c\u4fdd\u6301\u4e00\u5b9a\u96a8\u6a5f\u6027\u4f46\u8207\u57fa\u672c\u503c\u76f8\u95dc\n      const variance = 15; \/\/ \u6700\u5927\u504f\u5dee\u503c\n      \n      return [\n        baseValue, \/\/ \u611b\u60c5\u6a5f\u6703\n        Math.min(100, Math.max(0, baseValue + randomVariance(variance))), \/\/ \u793e\u4ea4\u80fd\u529b\n        Math.min(100, Math.max(0, baseValue + randomVariance(variance))), \/\/ \u6200\u611b\u7a4d\u6975\u5ea6\n        Math.min(100, Math.max(0, baseValue + randomVariance(variance))), \/\/ \u6843\u82b1\u904b\n        Math.min(100, Math.max(0, baseValue + randomVariance(variance)))  \/\/ \u6200\u611b\u671f\u5f85\n      ];\n    }\n    \n    \/\/ \u751f\u6210\u96a8\u6a5f\u504f\u5dee\n    function randomVariance(maxVariance) {\n      return Math.floor(Math.random() * maxVariance * 2) - maxVariance;\n    }\n    \n    \/\/ \u66f4\u65b0\u554f\u984c\n    function updateQuestion() {\n      DOM.questionText.textContent = quizData.question;\n      \n      \/\/ \u91cd\u7f6e\u9078\u9805\u72c0\u614b\n      document.querySelectorAll('.lta-option-btn').forEach(btn => {\n        btn.classList.remove('selected');\n      });\n      \n      \/\/ \u5982\u679c\u7528\u6236\u4e4b\u524d\u5df2\u56de\u7b54\uff0c\u5247\u986f\u793a\u9078\u4e2d\u72c0\u614b\n      if (userAnswers[currentQuestionIndex]) {\n        const selectedBtn = document.querySelector(`.lta-option-btn[data-option=\"${userAnswers[currentQuestionIndex]}\"]`);\n        if (selectedBtn) selectedBtn.classList.add('selected');\n      }\n    }\n    \n    \/\/ \u9801\u9762\u5207\u63db\n    function switchPage(fromPage, toPage) {\n      fromPage.classList.remove('active');\n      void fromPage.offsetWidth; \/\/ \u89f8\u767c\u91cd\u7e6a\u4ee5\u78ba\u4fdd\u52d5\u756b\u6548\u679c\n      toPage.classList.add('active');\n      \n      \/\/ \u6efe\u52d5\u5230\u8996\u7a97\u9802\u90e8\n      window.scrollTo({\n        top: DOM.app.offsetTop - 20,\n        behavior: 'smooth'\n      });\n    }\n    \n    \/\/ \u8fd4\u56de\u516c\u5171\u65b9\u6cd5\n    return {\n      init: init\n    };\n  })();\n\n  \/\/ \u7576 DOM \u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\u61c9\u7528\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', LoveTestApp.init);\n  } else {\n    LoveTestApp.init();\n  }\n})();\n<\/script>\n\n<style>\n\/* \u611b\u60c5\u6e2c\u9a57\u6a23\u5f0f - \u4f7f\u7528\u7368\u7279\u7684\u524d\u7db4\u907f\u514d\u8207WordPress\u885d\u7a81 *\/\n.lta-container {\n  --lta-primary-color: #ff6b95;\n  --lta-secondary-color: #8a2be2;\n  --lta-accent-color: #ff9e80;\n  --lta-background-color: #fff7fc;\n  --lta-text-color: #333333;\n  --lta-border-radius: 12px;\n  --lta-transition: all 0.3s ease;\n  \n  font-family: \"Microsoft JhengHei\", \"Heiti TC\", sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  color: var(--lta-text-color);\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n}\n\n.lta-container * {\n  box-sizing: border-box;\n}\n\n\/* \u9801\u9762\u8f49\u63db *\/\n.lta-page {\n  display: none;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n  background-color: var(--lta-background-color);\n  border-radius: var(--lta-border-radius);\n  padding: 30px;\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);\n  margin-bottom: 40px;\n}\n\n.lta-page.active {\n  display: block;\n  opacity: 1;\n}\n\n\/* \u6a19\u984c\u6a23\u5f0f *\/\n.lta-title {\n  font-size: 28px;\n  font-weight: bold;\n  text-align: center;\n  margin-bottom: 30px;\n  background: linear-gradient(45deg, var(--lta-primary-color), var(--lta-secondary-color));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  padding: 5px 0;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.lta-intro-content {\n  text-align: center;\n  position: relative;\n}\n\n.lta-intro {\n  background: url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css'), linear-gradient(135deg, #fff8fa, #f8f0ff);\n  position: relative;\n  overflow: hidden;\n}\n\n.lta-intro::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 8px;\n  background: linear-gradient(90deg, var(--lta-primary-color), var(--lta-secondary-color), var(--lta-accent-color), var(--lta-secondary-color), var(--lta-primary-color));\n  background-size: 400% 400%;\n  animation: gradientBorder 6s ease infinite;\n}\n\n.lta-intro::after {\n  content: \"\";\n  position: absolute;\n  bottom: -50px;\n  right: -50px;\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(255,107,149,0.1) 0%, rgba(255,107,149,0) 70%);\n  z-index: 0;\n}\n\n.lta-feature-icons {\n  display: flex;\n  justify-content: center;\n  gap: 30px;\n  margin: 40px 0;\n  flex-wrap: wrap;\n  position: relative;\n  z-index: 1;\n}\n\n.lta-icon-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  animation: float 3s ease-in-out infinite;\n  position: relative;\n}\n\n.lta-icon-item:nth-child(2) {\n  animation-delay: 0.5s;\n}\n\n.lta-icon-item:nth-child(3) {\n  animation-delay: 1s;\n}\n\n.lta-icon-item::after {\n  content: \"\";\n  position: absolute;\n  width: 120%;\n  height: 20px;\n  bottom: -10px;\n  background: radial-gradient(ellipse at center, rgba(255,107,149,0.2) 0%, rgba(255,107,149,0) 70%);\n  border-radius: 50%;\n  filter: blur(5px);\n  z-index: -1;\n}\n\n.lta-icon {\n  font-size: 50px;\n  width: 100px;\n  height: 100px;\n  background: linear-gradient(135deg, var(--lta-primary-color), var(--lta-secondary-color));\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 15px;\n  box-shadow: 0 15px 30px rgba(255, 107, 149, 0.3), 0 5px 15px rgba(138, 43, 226, 0.2);\n  color: white;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.5s ease;\n}\n\n.lta-icon::before {\n  content: \"\";\n  position: absolute;\n  top: -20px;\n  left: -20px;\n  width: 60px;\n  height: 60px;\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 50%;\n  filter: blur(2px);\n}\n\n.lta-icon::after {\n  content: \"\";\n  position: absolute;\n  bottom: -10px;\n  right: -10px;\n  width: 40px;\n  height: 40px;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 50%;\n  filter: blur(2px);\n}\n\n.lta-icon-item:hover .lta-icon {\n  transform: scale(1.05) translateY(-5px);\n  box-shadow: 0 20px 40px rgba(255, 107, 149, 0.4), 0 10px 20px rgba(138, 43, 226, 0.3);\n}\n\n.lta-icon-text {\n  font-weight: bold;\n  font-size: 18px;\n  background: linear-gradient(45deg, var(--lta-primary-color), var(--lta-secondary-color));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  letter-spacing: 0.5px;\n  margin-top: 5px;\n  text-shadow: 0 1px 2px rgba(0,0,0,0.05);\n}\n\n.lta-description {\n  font-size: 18px;\n  line-height: 1.8;\n  margin: 35px 0;\n  text-align: left;\n  position: relative;\n  z-index: 1;\n  padding: 25px;\n  background: rgba(255, 255, 255, 0.7);\n  border-radius: 15px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n  border-left: 4px solid var(--lta-primary-color);\n}\n\n@keyframes gradientBorder {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.lta-btn {\n  background: linear-gradient(45deg, var(--lta-primary-color), var(--lta-secondary-color));\n  color: white;\n  border: none;\n  border-radius: 30px;\n  padding: 14px 32px;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: var(--lta-transition);\n  box-shadow: 0 5px 15px rgba(255, 107, 149, 0.4);\n  min-width: 160px;\n  min-height: 50px;\n}\n\n.lta-btn:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 25px rgba(255, 107, 149, 0.5);\n}\n\n.lta-btn:active {\n  transform: translateY(1px);\n}\n\n.lta-start-btn {\n  margin-top: 30px;\n  font-size: 20px;\n  padding: 16px 40px;\n}\n\n.lta-back-btn {\n  background: linear-gradient(45deg, #a0a0a0, #c0c0c0);\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.lta-back-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n  box-shadow: none;\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.lta-quiz-container {\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n}\n\n.lta-question h3 {\n  font-size: 22px;\n  font-weight: bold;\n  margin-bottom: 25px;\n  line-height: 1.4;\n}\n\n.lta-options {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.lta-option-btn {\n  background-color: white;\n  border: 2px solid var(--lta-primary-color);\n  border-radius: var(--lta-border-radius);\n  padding: 16px 22px;\n  font-size: 18px;\n  text-align: left;\n  cursor: pointer;\n  transition: var(--lta-transition);\n  color: var(--lta-text-color);\n  position: relative;\n  overflow: hidden;\n  min-height: 60px;\n  display: flex;\n  align-items: center;\n}\n\n.lta-option-btn::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(45deg, var(--lta-primary-color), var(--lta-secondary-color));\n  opacity: 0;\n  transition: var(--lta-transition);\n  z-index: -1;\n}\n\n.lta-option-btn:hover {\n  color: white;\n  border-color: transparent;\n}\n\n.lta-option-btn:hover::before {\n  opacity: 1;\n}\n\n.lta-option-btn.selected {\n  color: white;\n  border-color: transparent;\n  background: linear-gradient(45deg, var(--lta-primary-color), var(--lta-secondary-color));\n}\n\n.lta-controls {\n  display: flex;\n  justify-content: center;\n  margin-top: 20px;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.lta-result {\n  background: linear-gradient(135deg, #fff8fa, #f9f0ff);\n  position: relative;\n  overflow: hidden;\n}\n\n.lta-result::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 8px;\n  background: linear-gradient(90deg, var(--lta-primary-color), var(--lta-secondary-color), var(--lta-accent-color), var(--lta-secondary-color), var(--lta-primary-color));\n  background-size: 400% 400%;\n  animation: gradientBorder 6s ease infinite;\n}\n\n.lta-result::after {\n  content: \"\";\n  position: absolute;\n  top: 20%;\n  right: -50px;\n  width: 150px;\n  height: 150px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(255,158,128,0.15) 0%, rgba(255,158,128,0) 70%);\n  z-index: 0;\n}\n\n.lta-result-container {\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n  position: relative;\n  z-index: 1;\n}\n\n.lta-result-header {\n  text-align: center;\n  padding-bottom: 15px;\n  position: relative;\n}\n\n.lta-result-header::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80px;\n  height: 3px;\n  background: linear-gradient(to right, var(--lta-primary-color), var(--lta-secondary-color));\n  border-radius: 3px;\n}\n\n.lta-result-header h3 {\n  font-size: 26px;\n  font-weight: bold;\n  background: linear-gradient(45deg, var(--lta-primary-color), var(--lta-secondary-color));\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  margin: 0 0 20px 0;\n  letter-spacing: 1px;\n}\n\n.lta-percent-display {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 25px 0 10px;\n  position: relative;\n}\n\n.lta-percent-value {\n  font-size: 60px;\n  font-weight: bold;\n  color: var(--lta-primary-color);\n  line-height: 1;\n  position: relative;\n  display: inline-block;\n}\n\n.lta-percent-value::after {\n  content: \"\";\n  position: absolute;\n  width: 110%;\n  height: 8px;\n  left: -5%;\n  bottom: 0;\n  background: linear-gradient(to right, rgba(255,107,149,0.2), rgba(138,43,226,0.2));\n  border-radius: 4px;\n  z-index: -1;\n}\n\n.lta-percent-label {\n  font-size: 18px;\n  color: var(--lta-secondary-color);\n  margin-top: 10px;\n  font-weight: 500;\n}\n\n.lta-chart-container {\n  height: 350px;\n  margin: 10px auto 30px;\n  width: 100%;\n  max-width: 550px;\n  padding: 20px;\n  background: rgba(255, 255, 255, 0.7);\n  border-radius: 20px;\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);\n  border: 1px solid rgba(255, 107, 149, 0.1);\n  position: relative;\n}\n\n.lta-chart-container::before {\n  content: \"\";\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  right: 10px;\n  bottom: 10px;\n  border: 1px dashed rgba(138, 43, 226, 0.15);\n  border-radius: 15px;\n  pointer-events: none;\n}\n\n.lta-result-content {\n  background-color: white;\n  border-radius: var(--lta-border-radius);\n  padding: 30px;\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);\n  position: relative;\n  border-left: 4px solid var(--lta-primary-color);\n}\n\n.lta-result-content::before {\n  content: \"\"\";\n  position: absolute;\n  top: -10px;\n  left: 20px;\n  font-size: 80px;\n  line-height: 1;\n  color: rgba(255, 107, 149, 0.1);\n  font-family: serif;\n}\n\n.lta-result-content p {\n  font-size: 18px;\n  line-height: 1.8;\n  margin: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.lta-restart-btn {\n  margin: 30px auto 10px;\n  display: block;\n  padding: 16px 38px;\n  font-size: 18px;\n  position: relative;\n  overflow: hidden;\n}\n\n.lta-restart-btn::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));\n  transition: all 0.6s ease;\n}\n\n.lta-restart-btn:hover::before {\n  left: 100%;\n}\n\n\/* \u52d5\u756b\u6548\u679c *\/\n@keyframes float {\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 768px) {\n  .lta-container {\n    padding: 15px;\n  }\n  \n  .lta-page {\n    padding: 20px 15px;\n  }\n  \n  .lta-title {\n    font-size: 24px;\n  }\n  \n  .lta-question h3 {\n    font-size: 20px;\n  }\n  \n  .lta-option-btn {\n    padding: 14px 16px;\n    font-size: 16px;\n  }\n  \n  .lta-btn {\n    padding: 12px 28px;\n    font-size: 16px;\n  }\n  \n  .lta-feature-icons {\n    gap: 15px;\n  }\n  \n  .lta-icon {\n    font-size: 40px;\n    width: 70px;\n    height: 70px;\n  }\n  \n  .lta-chart-container {\n    height: 250px;\n  }\n}\n<\/style>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u5f53\u770b\u5230\u5468\u906d\u7684\u670b\u53cb\u5728\u81ea\u5df1\u9762\u524d\u79c0\u6069\u7231\u7684\u65f6\u5019\uff0c\u5185\u5fc3\u603b\u662f\u4f1a\u4ea7\u751f\u4e00\u79cd\u6068\u4e0d\u5f97\u5bf9\u65b9\u539f\u5730\u7206\u70b8\u7684\u6028\u5ff5\u3002\u5982\u679c\u4f60\u73b0\u5728\u8fd8\u662f\u5355\u8eab\u3002\u60f3\u77e5\u9053\u81ea\u5df1\u8fd1\u671f\u4f1a\u9047\u89c1\u7231\u60c5\u5417\uff1f\u8ba9\u6d4b\u8bd5\u4e3a\u4f60\u63ed\u6653\u7b54\u6848\u5427\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","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":"","ast-disable-related-posts":"","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":"","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":""},"categories":[178],"tags":[],"class_list":["post-2400","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=2400"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2400\/revisions"}],"predecessor-version":[{"id":10377,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2400\/revisions\/10377"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}