Hugging Face's logo

Spaces:
Lashtw
/
Pstyles
Running

App Files Community
Lashtw commited on
Commit
ad20dfc
·
verified ·
1 Parent(s): e081da2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +499 -18
index.html CHANGED
@@ -1,19 +1,500 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-Hant">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>家長教養風格互動測驗</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
12
+ <!-- Chosen Palette: Warm Neutral (Slate, Zinc, Stone) -->
13
+ <!-- Application Structure Plan: The application uses a linear, three-stage structure: Start Screen, Quiz Screen, and Result Screen. This flow is intuitive for a quiz, guiding the user step-by-step. The quiz displays one question at a time to maintain focus and reduce cognitive load. The result screen is designed for clarity, immediately presenting the dominant parenting style, a visual chart of the user's response distribution, and detailed, actionable advice. This structure was chosen because it's a proven, user-friendly pattern for interactive assessments, transforming a static document into an engaging, personal experience. -->
14
+ <!-- Visualization & Content Choices: Report Info: 10 quiz questions & 4 result types -> Goal: Self-assessment and personalized feedback -> Viz/Presentation Method: One-question-at-a-time UI with radio buttons, dynamic result page with text blocks, and a Chart.js doughnut chart -> Interaction: Next/Prev buttons for navigation, selection of answers, and a final "See Results" trigger. The doughnut chart visually summarizes the user's tendencies, complementing the detailed text. -> Justification: This multi-faceted approach presents information clearly, catering to both visual and text-oriented users, and the interactive flow makes the content more digestible than a static document. -> Library/Method: Vanilla JS for logic, Chart.js for data visualization on Canvas. -->
15
+ <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
16
+ <style>
17
+ body {
18
+ font-family: 'Noto Sans TC', sans-serif;
19
+ }
20
+ .chart-container {
21
+ position: relative;
22
+ width: 100%;
23
+ max-width: 400px;
24
+ margin-left: auto;
25
+ margin-right: auto;
26
+ height: 300px;
27
+ max-height: 400px;
28
+ }
29
+ @media (min-width: 768px) {
30
+ .chart-container {
31
+ height: 400px;
32
+ }
33
+ }
34
+ .screen {
35
+ transition: opacity 0.4s ease-in-out;
36
+ }
37
+ .option-button {
38
+ transition: background-color 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.2s;
39
+ }
40
+ .option-button:hover {
41
+ border-color: #94a3b8; /* slate-400 */
42
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
43
+ }
44
+ .option-button.selected {
45
+ border-color: #4338ca; /* indigo-700 */
46
+ background-color: #e0e7ff; /* indigo-100 */
47
+ font-weight: 500;
48
+ }
49
+ .nav-button, .action-button {
50
+ transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
51
+ }
52
+ .nav-button:hover:not(:disabled), .action-button:hover {
53
+ box-shadow: 0 4px 14px 0 rgb(0 0 0 / 0.1);
54
+ transform: translateY(-2px);
55
+ }
56
+ .nav-button:active:not(:disabled), .action-button:active {
57
+ transform: translateY(0px);
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-slate-50 text-slate-800 flex items-center justify-center min-h-screen p-4">
62
+
63
+ <div class="w-full max-w-2xl mx-auto relative">
64
+ <main id="main-container" class="relative">
65
+
66
+ <!-- Start Screen -->
67
+ <div id="start-screen" class="screen w-full bg-white rounded-2xl shadow-lg p-6 md:p-10">
68
+ <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4 text-center">探索您的教養風格</h1>
69
+ <p class="text-slate-600 mb-6 text-center">
70
+ 這個測驗將幫助您了解自己的教養風格傾向。它基於心理學家黛安娜·鮑姆林德 (Diana Baumrind) 的經典理論，將教養風格分為四種類型。透過10個生活情境題，您可以更深入地認識自己，並獲得個人化的教養建議。
71
+ </p>
72
+ <div class="text-center mb-8">
73
+ <button id="start-btn" class="action-button bg-indigo-600 text-white font-bold py-3 px-8 rounded-full hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
74
+ 開始測驗
75
+ </button>
76
+ </div>
77
+ <p class="text-xs text-slate-400 text-center px-4">
78
+ <strong>請注意：</strong>本測驗旨在提供一個自我反思的參考，並非嚴謹的心理學診斷。教養風格會因應孩子的年齡與情境而動態調整，最重要的還是持續的溝通與關愛。
79
+ </p>
80
+ </div>
81
+
82
+ <!-- Quiz Screen -->
83
+ <div id="quiz-screen" class="screen w-full bg-white rounded-2xl shadow-lg p-6 md:p-10 absolute top-0 left-0 opacity-0 pointer-events-none">
84
+ <div class="mb-4">
85
+ <p id="progress-text" class="text-sm font-medium text-indigo-600">問題 1 / 10</p>
86
+ <div class="w-full bg-slate-200 rounded-full h-2.5 mt-1">
87
+ <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 10%; transition: width 0.4s ease-in-out;"></div>
88
+ </div>
89
+ </div>
90
+ <h2 id="question-text" class="text-2xl font-bold text-slate-900 mb-6 min-h-[84px]"></h2>
91
+ <div id="answer-options" class="space-y-4"></div>
92
+ <div class="flex justify-between mt-8">
93
+ <button id="prev-btn" class="nav-button bg-slate-200 text-slate-700 font-bold py-2 px-6 rounded-full hover:bg-slate-300">上一題</button>
94
+ <button id="next-btn" class="nav-button bg-indigo-600 text-white font-bold py-2 px-6 rounded-full hover:bg-indigo-700">下一題</button>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Result Screen -->
99
+ <div id="result-screen" class="screen w-full bg-white rounded-2xl shadow-lg p-6 md:p-10 absolute top-0 left-0 opacity-0 pointer-events-none">
100
+ <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6 text-center">您的教養風格光譜</h1>
101
+
102
+ <div id="result-display" class="bg-indigo-50 border-2 border-indigo-200 rounded-xl p-6 mb-8">
103
+ <div id="result-spectrum" class="text-center mb-4"></div>
104
+ <p id="result-description" class="text-slate-700 text-center"></p>
105
+ </div>
106
+
107
+ <div class="grid md:grid-cols-2 gap-8 items-center">
108
+ <div>
109
+ <h3 id="advice-title" class="text-xl font-bold text-slate-900 mb-4"></h3>
110
+ <ul id="result-advice" class="list-none space-y-4"></ul>
111
+ </div>
112
+ <div class="chart-container">
113
+ <canvas id="result-chart"></canvas>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="text-center mt-10">
118
+ <button id="restart-btn" class="action-button bg-slate-200 text-slate-700 font-bold py-3 px-8 rounded-full hover:bg-slate-300">
119
+ 重新測驗
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </main>
124
+ </div>
125
+
126
+ <script>
127
+ const quizData = {
128
+ questions: [
129
+ {
130
+ text: "當您發現孩子的房間亂七八糟時，您通常會？",
131
+ options: [
132
+ { type: 'A', text: "馬上要求他立刻打掃乾淨，否則就給予懲罰。" },
133
+ { type: 'B', text: "跟他討論一個整理房間的期限，並說明保持整潔的好處。" },
134
+ { type: 'C', text: "覺得沒關係，他想整理的時候自然會整理。" },
135
+ { type: 'D', text: "幾乎沒注意到，或覺得這不是什麼重要的事。" }
136
+ ]
137
+ },
138
+ {
139
+ text: "孩子的考試成績退步了，您的第一反應是？",
140
+ options: [
141
+ { type: 'A', text: "責備他不用功，並取消他接下來的娛樂活動。" },
142
+ { type: 'B', text: "找他聊聊，先同理他的心情，再一起分析退步的原因。" },
143
+ { type: 'C', text: "安慰他說「成績不重要，你開心就好」。" },
144
+ { type: 'D', text: "可能要等到學期末才知道，平時不太過問成績。" }
145
+ ]
146
+ },
147
+ {
148
+ text: "孩子沉迷於手機遊戲，您的處理方式是？",
149
+ options: [
150
+ { type: 'A', text: "直接沒收手機或切斷網路，規定沒有寫完功課前絕對不准碰。" },
151
+ { type: 'B', text: "和孩子討論並約定每天可以玩的時間，以及完成責任（如功課）的前提。" },
152
+ { type: 'C', text: "覺得孩子需要放鬆，只要他自己覺得可以就好，不太干涉。" },
153
+ { type: 'D', text: "只要孩子沒來煩我，他玩多久我通常不太在意。" }
154
+ ]
155
+ },
156
+ {
157
+ text: "孩子比約定好的門禁時間晚回家，您會？",
158
+ options: [
159
+ { type: 'A', text: "非常生氣，嚴厲地處罰他，並規定接下來一個月都要提早回家。" },
160
+ { type: 'B', text: "關心他晚歸的原因，表達擔心的同時，也重申遵守約定的重要性，並執行約定好的後果。" },
161
+ { type: 'C', text: "只要他安全到家就好，不太會追究原因或責備他。" },
162
+ { type: 'D', text: "可能根本沒發現他晚歸了。" }
163
+ ]
164
+ },
165
+ {
166
+ text: "當孩子公開反駁您的觀點時，您會覺得？",
167
+ options: [
168
+ { type: 'A', text: "這是對長輩的挑戰，必須立刻糾正他，讓他知道誰才是對的。" },
169
+ { type: 'B', text: "這是一個很好的溝通機會，會聽聽他的想法，並與他理性討論。" },
170
+ { type: 'C', text: "為了避免衝突，通常會順著他的話或轉移話題。" },
171
+ { type: 'D', text: "他有他的想法，我也有我的，我們各想各的，互不干涉。" }
172
+ ]
173
+ },
174
+ {
175
+ text: "孩子哭著說被好朋友排擠了，您會？",
176
+ options: [
177
+ { type: 'A', text: "告訴他「這點小事有什麼好哭的？堅強一點！」。" },
178
+ { type: 'B', text: "給他一個擁抱，聽他傾訴，並引導他思考可以如何應對這種情況。" },
179
+ { type: 'C', text: "非常心疼，馬上幫他罵那個朋友，並說「我們不跟他好了！」。" },
180
+ { type: 'D', text: "覺得這是孩子之間的事，他們自己會解決，不太介入。" }
181
+ ]
182
+ },
183
+ {
184
+ text: "您交代孩子做的家事，他卻拖拖拉拉不想做，您會？",
185
+ options: [
186
+ { type: 'A', text: "命令他必須馬上完成，並警告他如果不做會有什麼後果。" },
187
+ { type: 'B', text: "提醒他這是身為家裡一份子的責任，並跟他確認完成的時間。" },
188
+ { type: 'C', text: "看他不想做，心疼他功課累，就自己默默做掉了。" },
189
+ { type: 'D', text: "不太會特別要求孩子做家事。" }
190
+ ]
191
+ },
192
+ {
193
+ text: "孩子想染一個很誇張髮色去學校，您的反應是？",
194
+ options: [
195
+ { type: 'A', text: "絕對不行！學生就該有學生的樣子，想都別想。" },
196
+ { type: 'B', text: "了解他想染髮的原因，並與他討論學校的規定、可能面對的後果，以及是否有兩全其美的方式。" },
197
+ { type: 'C', text: "只要他喜歡就可以，全力支持他去嘗試。" },
198
+ { type: 'D', text: "這是他自己的頭髮，他想怎麼做是他的自由。" }
199
+ ]
200
+ },
201
+ {
202
+ text: "孩子跟您要求增加零用錢，您會？",
203
+ options: [
204
+ { type: 'A', text: "直接拒絕，並教訓他應該要懂得知足，不要亂花錢。" },
205
+ { type: 'B', text: "邀請他說明需要增加零用錢的理由，並一起討論他的理財規劃，再做決定。" },
206
+ { type: 'C', text: "覺得只要能讓他開心，多給一點也無妨，就直接給了。" },
207
+ { type: 'D', text: "對於孩子金錢的使用狀況不太清楚，給多少很隨性。" }
208
+ ]
209
+ },
210
+ {
211
+ text: "與孩子討論未來的升學或職業方向時，您傾向於？",
212
+ options: [
213
+ { type: 'A', text: "為他規劃好一條最安穩的道路，並要求他朝著這個方向努力。" },
214
+ { type: 'B', text: "提供他各種資訊與分析，鼓勵他探索自己的興趣，並支持他做出自己的決定。" },
215
+ { type: 'C', text: "告訴他「只要是你喜歡的，爸媽都支持！」，不會給太多具體建議。" },
216
+ { type: 'D', text: "覺得這是他自己的人生，他應該自己去想，很少主動跟他討論這個話題。" }
217
+ ]
218
+ }
219
+ ],
220
+ results: {
221
+ A: { title: "專制權威型", subtitle: "虎爸虎媽型", description: "核心特徵：高要求、低回應。重視紀律、服從與控制，規則嚴格且不容置疑。" },
222
+ B: { title: "權威開明型", subtitle: "民主引導型", description: "核心特徵：高要求、高回應。會為孩子設立明確的規範，但同時也願意傾聽、溝通，並給予孩子溫暖與支持。" },
223
+ C: { title: "寬容溺愛型", subtitle: "朋友型", description: "核心特徵：低要求、高回應。對孩子充滿愛，但很少設立規範或執行紀律，為了避免衝突而容易妥協。" },
224
+ D: { title: "忽視冷漠型", subtitle: "放任型", description: "核心特徵：低要求、低回應。較少投入孩子的教養與生活中，缺乏情感支持與行為上的引導。" }
225
+ },
226
+ combinedAdvice: {
227
+ 'A_B': { title: "給「嚴格監督 + 理性溝通」的您", advice: ["<strong>發揮優勢：</strong> 您對孩子有很高的期望，並致力於為他們規畫最好的道路。", "<strong>溫馨提醒：</strong> 過高的控制感有時會壓抑孩子的自主性。您內心其實也希望能理解孩子。", "<strong>行動建議：</strong> 試著在下次提出要求時，多問一句「你的想法是什麼？」，並真心傾聽，這會是關係破冰的開始。"] },
228
+ 'A_C': { title: "給「紀律嚴明又渴望和諧」的您", advice: ["<strong>發揮優勢：</strong> 您重視規則，但也非常愛孩子，不希望親子關係緊張。", "<strong>溫馨提醒：</strong> 您的管教標準可能因自己的情緒或孩子的反應而搖擺不定，讓孩子感到困惑。", "<strong>行動建議：</strong> 建立幾個「絕不妥協」的核心家庭規則，並堅持執行。在非核心問題上，則可以給予孩子更多彈性與溫暖。"] },
229
+ 'A_D': { title: "給「重視結果卻分身乏術」的您", advice: ["<strong>發揮優勢：</strong> 您為孩子設定了明確的目標與期望。", "<strong>溫馨提醒：</strong> 您可能較多關注孩子的學業或行為表現，而較少投入情感連結。", "<strong>行動建議：</strong> 每天嘗試問一個「關於感受」的問題，例如「今天學校有發生什麼好玩的事嗎？」，而不只是「功課寫完了嗎？」。"] },
230
+ 'B_A': { title: "給「民主引導 + 嚴格監督」的您", advice: ["<strong>發揮優勢：</strong> 您為孩子設立了清晰的界線，也願意溝通，這是非常好的基礎。", "<strong>溫馨提醒：</strong> 當您覺得界線被挑戰時，試著先深呼吸，提醒自己多一些彈性，避免落入「為反對而反對」的權威模式。", "<strong>行動建議：</strong> 邀請孩子一起討論「為什麼這個規定很重要」，將單向要求轉化為雙向的價值觀建立。"] },
231
+ 'B_C': { title: "給「民主引導 + 溫暖支持」的您", advice: ["<strong>發揮優勢：</strong> 您與孩子的關係充滿溫暖與支持，孩子也願意與您溝通。", "<strong>溫馨提醒：</strong> 有時候可能會因為太過同理孩子，而在執行紀律時有所動搖。", "<strong>行動建議：</strong> 堅持執行您們共同討論出的規則與後果，這份「溫柔的堅持」會讓孩子更有安全感。"] },
232
+ 'B_D': { title: "給「民主引導 + 尊重自主」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子清晰的規範，同時也尊重他的獨立性。", "<strong>溫馨提醒：</strong> 確保您的「回應」不僅僅是在問題發生時，平時也要多主動表達情感上的關懷。", "<strong>行動建議：</strong> 嘗試每週安排一次「不談正事」的親子時間，純粹地享受共同的活動，深化情感連結。"] },
233
+ 'C_A': { title: "給「溫暖隨和但有底線」的您", advice: ["<strong>發揮優勢：</strong> 平時您給孩子很多愛與自由，親子關係融洽。", "<strong>溫馨提醒：</strong> 當底線被觸碰時，您可能會突然變得非常嚴厲，這種不一致會讓孩子無所適從。", "<strong>行動建議：</strong> 試著將您的「底線」更清晰、更溫和地在平時就與孩子溝通，而不是等到爆發時才出手。"] },
234
+ 'C_B': { title: "給「溫暖支持 + 嘗試引導」的您", advice: ["<strong>發揮優勢：</strong> 您是孩子心中溫暖的避風港，親子關係緊密。", "<strong>溫馨提醒：</strong> 真正的愛，包含幫助孩子建立面對現實世界的規範與能力。", "<strong>行動建議：</strong> 從一件小事開始，與孩子一起建立一個家庭新規則（例如手機使用時間），並一起努力遵守它。"] },
235
+ 'C_D': { title: "給「愛好和平且尊重自主」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子極大的自由與空間去探索。", "<strong>溫馨提醒：</strong> 孩子可能感受不到足夠的引導與結構，在建立常規或面對挑戰時會感到徬徨。", "<strong>行動建議：</strong> 嘗試與孩子一起建立一個「家庭週末計畫」，包含他想做的事和需要完成的責任，練習在自由與結構中找到平衡。"] },
236
+ 'D_A': { title: "給「尊重獨立但關注重點」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子高度的自主權。", "<strong>溫馨提醒：</strong> 您可能只在自己認為「重要」的事情上（如成績、升學）才會介入，但這種突然的控制會讓孩子感到壓力。", "<strong>行動建議：</strong> 試著將關心擴展到孩子的日常生活與內心感受，建立更全面的情感連結。"] },
237
+ 'D_B': { title: "給「尊重獨立也願意溝通」的您", advice: ["<strong>發揮優勢：</strong> 您信任孩子的能力，也願意在需要時提供建議。", "<strong>溫馨提醒：</strong> 孩子可能感覺到您的情感投入較少，需要更多的主動關懷。", "<strong>行動建議：</strong> 除了被動地等待孩子來問，嘗試主動開啟對話，例如分享您自己一天的工作或心情，引導孩子也分享他的。"] },
238
+ 'D_C': { title: "給「尊重自主且愛好和平」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子極大的自由與空間去探索。", "<strong>溫馨提醒：</strong> 孩子可能感受不到足夠的引導與結構，在建立常規或面對挑戰時會感到徬徨。", "<strong>行動建議：</strong> 嘗試與孩子一起建立一個「家庭週末計畫」，包含他想做的事和需要完成的責任，練習在自由與結構中找到平衡。"] }
239
+ }
240
+ };
241
+
242
+ // Fisher-Yates shuffle to randomize options
243
+ function shuffleArray(array) {
244
+ for (let i = array.length - 1; i > 0; i--) {
245
+ const j = Math.floor(Math.random() * (i + 1));
246
+ [array[i], array[j]] = [array[j], array[i]];
247
+ }
248
+ }
249
+
250
+ let currentQuestionIndex = 0;
251
+ let userAnswers = new Array(quizData.questions.length).fill(null);
252
+ let resultChart = null;
253
+
254
+ const mainContainer = document.getElementById('main-container');
255
+ const screens = {
256
+ start: document.getElementById('start-screen'),
257
+ quiz: document.getElementById('quiz-screen'),
258
+ result: document.getElementById('result-screen')
259
+ };
260
+
261
+ const startBtn = document.getElementById('start-btn');
262
+ const nextBtn = document.getElementById('next-btn');
263
+ const prevBtn = document.getElementById('prev-btn');
264
+ const restartBtn = document.getElementById('restart-btn');
265
+
266
+ const progressText = document.getElementById('progress-text');
267
+ const progressBar = document.getElementById('progress-bar');
268
+ const questionText = document.getElementById('question-text');
269
+ const answerOptionsContainer = document.getElementById('answer-options');
270
+
271
+ function switchScreen(toScreenId) {
272
+ Object.values(screens).forEach(screen => {
273
+ if (screen.id !== toScreenId) {
274
+ screen.classList.add('opacity-0', 'pointer-events-none', 'absolute');
275
+ }
276
+ });
277
+ const targetScreen = screens[toScreenId];
278
+ targetScreen.classList.remove('opacity-0', 'pointer-events-none', 'absolute');
279
+ }
280
+
281
+ function startQuiz() {
282
+ quizData.questions.forEach(question => {
283
+ shuffleArray(question.options);
284
+ });
285
+ currentQuestionIndex = 0;
286
+ userAnswers.fill(null);
287
+ showQuestion();
288
+ switchScreen('quiz');
289
+ }
290
+
291
+ function showQuestion() {
292
+ const question = quizData.questions[currentQuestionIndex];
293
+ questionText.textContent = question.text;
294
+ answerOptionsContainer.innerHTML = '';
295
+
296
+ question.options.forEach(option => {
297
+ const button = document.createElement('button');
298
+ button.textContent = option.text;
299
+ button.classList.add('option-button', 'w-full', 'text-left', 'p-4', 'rounded-lg', 'border-2', 'border-slate-200');
300
+ button.dataset.type = option.type;
301
+ if (userAnswers[currentQuestionIndex] === option.type) {
302
+ button.classList.add('selected');
303
+ }
304
+ button.onclick = () => selectAnswer(option.type);
305
+ answerOptionsContainer.appendChild(button);
306
+ });
307
+
308
+ updateProgress();
309
+ updateNavButtons();
310
+ }
311
+
312
+ function selectAnswer(type) {
313
+ userAnswers[currentQuestionIndex] = type;
314
+ document.querySelectorAll('.option-button').forEach(btn => {
315
+ btn.classList.remove('selected');
316
+ if (btn.dataset.type === type) {
317
+ btn.classList.add('selected');
318
+ }
319
+ });
320
+ updateNavButtons();
321
+ }
322
+
323
+ function updateProgress() {
324
+ const progress = ((currentQuestionIndex + 1) / quizData.questions.length) * 100;
325
+ progressBar.style.width = `${progress}%`;
326
+ progressText.textContent = `問題 ${currentQuestionIndex + 1} / ${quizData.questions.length}`;
327
+ }
328
+
329
+ function updateNavButtons() {
330
+ prevBtn.disabled = currentQuestionIndex === 0;
331
+ prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
332
+ prevBtn.classList.toggle('cursor-not-allowed', prevBtn.disabled);
333
+
334
+ if (currentQuestionIndex === quizData.questions.length - 1) {
335
+ nextBtn.textContent = '看結果';
336
+ nextBtn.onclick = showResults;
337
+ } else {
338
+ nextBtn.textContent = '下一題';
339
+ nextBtn.onclick = nextQuestion;
340
+ }
341
+
342
+ nextBtn.disabled = userAnswers[currentQuestionIndex] === null;
343
+ nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
344
+ nextBtn.classList.toggle('cursor-not-allowed', nextBtn.disabled);
345
+ }
346
+
347
+ function nextQuestion() {
348
+ if (currentQuestionIndex < quizData.questions.length - 1) {
349
+ currentQuestionIndex++;
350
+ showQuestion();
351
+ }
352
+ }
353
+
354
+ function prevQuestion() {
355
+ if (currentQuestionIndex > 0) {
356
+ currentQuestionIndex--;
357
+ showQuestion();
358
+ }
359
+ }
360
+
361
+ function getAdviceIcon(adviceText) {
362
+ if (adviceText.includes('溝通') || adviceText.includes('傾聽') || adviceText.includes('想法') || adviceText.includes('討論') || adviceText.includes('對話')) return '💬';
363
+ if (adviceText.includes('溫暖') || adviceText.includes('支持') || adviceText.includes('情感') || adviceText.includes('關懷') || adviceText.includes('愛') || adviceText.includes('關係') || adviceText.includes('連結') || adviceText.includes('同理')) return '❤️';
364
+ if (adviceText.includes('規則') || adviceText.includes('界線') || adviceText.includes('堅持') || adviceText.includes('監督') || adviceText.includes('後果') || adviceText.includes('規範') || adviceText.includes('責任') || adviceText.includes('安全感')) return '🛡️';
365
+ if (adviceText.includes('自主') || adviceText.includes('獨立') || adviceText.includes('空間') || adviceText.includes('彈性') || adviceText.includes('探索')) return '🌿';
366
+ if (adviceText.includes('建議') || adviceText.includes('行動') || adviceText.includes('方法') || adviceText.includes('練習') || adviceText.includes('調整') || adviceText.includes('建立') || adviceText.includes('邀請') || adviceText.includes('保持')) return '✨';
367
+ return '✓';
368
+ }
369
+
370
+ function showResults() {
371
+ switchScreen('result');
372
+
373
+ const counts = userAnswers.reduce((acc, answer) => {
374
+ acc[answer] = (acc[answer] || 0) + 1;
375
+ return acc;
376
+ }, {});
377
+
378
+ const sortedTypes = Object.entries(counts).sort(([,a],[,b]) => b-a);
379
+
380
+ const primaryType = sortedTypes[0] ? sortedTypes[0][0] : 'B';
381
+ const secondaryType = sortedTypes[1] && sortedTypes[1][1] > 0 ? sortedTypes[1][0] : null;
382
+
383
+ const primaryResult = quizData.results[primaryType];
384
+
385
+ let resultSpectrumHTML = `<h2 class="text-2xl font-bold text-indigo-800 mb-2">${primaryResult.title}</h2><p class="text-indigo-600 font-medium">${primaryResult.subtitle}</p>`;
386
+ let descriptionText = primaryResult.description;
387
+
388
+ if (secondaryType) {
389
+ const secondaryResult = quizData.results[secondaryType];
390
+ resultSpectrumHTML = `<p class="mb-2">您的主要教養風格偏向</p><h2 class="text-2xl font-bold text-indigo-800">${primaryResult.title}</h2><p class="mt-2 mb-1 text-slate-600">同時帶有部分</p><h3 class="text-xl font-semibold text-indigo-700">${secondaryResult.title}</h3><p class="text-indigo-500 font-medium">${secondaryResult.subtitle}</p>`;
391
+ }
392
+
393
+ document.getElementById('result-spectrum').innerHTML = resultSpectrumHTML;
394
+ document.getElementById('result-description').textContent = descriptionText;
395
+
396
+ let adviceData;
397
+ const adviceKey = secondaryType ? `${primaryType}_${secondaryType}` : primaryType;
398
+
399
+ if (quizData.combinedAdvice[adviceKey]) {
400
+ adviceData = quizData.combinedAdvice[adviceKey];
401
+ } else {
402
+ adviceData = {
403
+ title: `給「${primaryResult.title}」的您`,
404
+ advice: []
405
+ };
406
+ switch(primaryType){
407
+ case 'A': adviceData.advice = ["<strong>發揮優勢：</strong> 您對孩子有很高的期望，並致力於為他們規畫最好的道路。", "<strong>溫馨提醒：</strong> 過高的控制感有時會壓抑孩子的自主性。", "<strong>行動建議：</strong> 試著在下次提出要求時，多問一句「你的想法是什麼？」，並真心傾聽。"]; break;
408
+ case 'B': adviceData.advice = ["<strong>繼續保持：</strong> 您的教養方式為孩子提供了穩定且充滿支持的成長環境，請繼續保持這種平衡。", "<strong>動態調整：</strong> 隨著孩子年齡增長，持續調整對他們的期望與賦予的自主權。"]; break;
409
+ case 'C': adviceData.advice = ["<strong>發揮優勢：</strong> 您是孩子心中溫暖的避風港，親子關係緊密。", "<strong>溫馨提醒：</strong> 真正的愛，包含幫助孩子建立面對現實世界的規範與能力。", "<strong>行動建議：</strong> 從一件小事開始，與孩子一起建立一個家庭新規則（例如手機使用時間），並一起努力遵守它。"]; break;
410
+ case 'D': adviceData.advice = ["<strong>從「小連結」開始：</strong> 每天刻意安排10-15分鐘的專屬時間，專心聽孩子說說今天發生的事。", "<strong>表達關心：</strong> 主動詢問孩子在學校的生活、朋友或興趣，讓他們感受到自己被在乎。", "<strong>參與其中：</strong> 嘗試參與一項孩子的活動，例如看他玩遊戲、陪他看一部電影，重建親子關係。"]; break;
411
+ }
412
+ }
413
+
414
+ document.getElementById('advice-title').textContent = adviceData.title;
415
+ const adviceList = document.getElementById('result-advice');
416
+ adviceList.innerHTML = '';
417
+ adviceData.advice.forEach(item => {
418
+ const li = document.createElement('li');
419
+ li.classList.add('flex', 'items-start');
420
+ const icon = getAdviceIcon(item);
421
+ li.innerHTML = `<span class="text-xl mr-3 w-6 inline-block text-center pt-1">${icon}</span><span class="flex-1">${item}</span>`;
422
+ adviceList.appendChild(li);
423
+ });
424
+
425
+ renderChart(counts);
426
+ }
427
+
428
+ function renderChart(counts) {
429
+ const ctx = document.getElementById('result-chart').getContext('2d');
430
+ const data = {
431
+ labels: [
432
+ 'A: 專制權威型',
433
+ 'B: 權威開明型',
434
+ 'C: 寬容溺愛型',
435
+ 'D: 忽視冷漠型'
436
+ ],
437
+ datasets: [{
438
+ label: '您的回答分佈',
439
+ data: [counts.A || 0, counts.B || 0, counts.C || 0, counts.D || 0],
440
+ backgroundColor: [
441
+ '#ef4444',
442
+ '#22c55e',
443
+ '#3b82f6',
444
+ '#64748b'
445
+ ],
446
+ borderColor: '#ffffff',
447
+ borderWidth: 2
448
+ }]
449
+ };
450
+
451
+ if (resultChart) {
452
+ resultChart.destroy();
453
+ }
454
+
455
+ resultChart = new Chart(ctx, {
456
+ type: 'doughnut',
457
+ data: data,
458
+ options: {
459
+ responsive: true,
460
+ maintainAspectRatio: false,
461
+ plugins: {
462
+ legend: {
463
+ position: 'bottom',
464
+ },
465
+ tooltip: {
466
+ callbacks: {
467
+ label: function(context) {
468
+ let label = context.label || '';
469
+ if (label) {
470
+ label += ': ';
471
+ }
472
+ if (context.parsed !== null) {
473
+ label += context.parsed + ' 題';
474
+ }
475
+ return label;
476
+ }
477
+ }
478
+ }
479
+ }
480
+ }
481
+ });
482
+ }
483
+
484
+ function restartQuiz() {
485
+ switchScreen('start');
486
+ }
487
+
488
+ document.addEventListener('DOMContentLoaded', () => {
489
+ switchScreen('start');
490
+ });
491
+
492
+ startBtn.onclick = startQuiz;
493
+ prevBtn.onclick = prevQuestion;
494
+ nextBtn.onclick = nextQuestion;
495
+ restartBtn.onclick = restartQuiz;
496
+
497
+ </script>
498
+ </body>
499
  </html>
500
+