|
|
<!DOCTYPE html> |
|
|
<html lang="zh-Hant"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>家長教養風格互動測驗</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
body { |
|
|
font-family: 'Noto Sans TC', sans-serif; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
max-width: 400px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
height: 300px; |
|
|
max-height: 400px; |
|
|
} |
|
|
@media (min-width: 768px) { |
|
|
.chart-container { |
|
|
height: 400px; |
|
|
} |
|
|
} |
|
|
.screen { |
|
|
transition: opacity 0.4s ease-in-out; |
|
|
} |
|
|
.option-button { |
|
|
transition: background-color 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.2s; |
|
|
} |
|
|
.option-button:hover { |
|
|
border-color: #94a3b8; |
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
|
|
} |
|
|
.option-button.selected { |
|
|
border-color: #4338ca; |
|
|
background-color: #e0e7ff; |
|
|
font-weight: 500; |
|
|
} |
|
|
.nav-button, .action-button { |
|
|
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; |
|
|
} |
|
|
.nav-button:hover:not(:disabled), .action-button:hover { |
|
|
box-shadow: 0 4px 14px 0 rgb(0 0 0 / 0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.nav-button:active:not(:disabled), .action-button:active { |
|
|
transform: translateY(0px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-slate-50 text-slate-800 flex items-center justify-center min-h-screen p-4"> |
|
|
|
|
|
<div class="w-full max-w-2xl mx-auto relative"> |
|
|
<main id="main-container" class="relative"> |
|
|
|
|
|
|
|
|
<div id="start-screen" class="screen w-full bg-white rounded-2xl shadow-lg p-6 md:p-10"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4 text-center">探索您的教養風格</h1> |
|
|
<p class="text-slate-600 mb-6 text-center"> |
|
|
這個測驗將幫助您了解自己的教養風格傾向。它基於心理學家黛安娜·鮑姆林德 (Diana Baumrind) 的經典理論，將教養風格分為四種類型。透過10個生活情境題，您可以更深入地認識自己，並獲得個人化的教養建議。 |
|
|
</p> |
|
|
<div class="text-center mb-8"> |
|
|
<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"> |
|
|
開始測驗 |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-slate-400 text-center px-4"> |
|
|
<strong>請注意：</strong>本測驗旨在提供一個自我反思的參考，並非嚴謹的心理學診斷。教養風格會因應孩子的年齡與情境而動態調整，最重要的還是持續的溝通與關愛。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<div class="mb-4"> |
|
|
<p id="progress-text" class="text-sm font-medium text-indigo-600">問題 1 / 10</p> |
|
|
<div class="w-full bg-slate-200 rounded-full h-2.5 mt-1"> |
|
|
<div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 10%; transition: width 0.4s ease-in-out;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<h2 id="question-text" class="text-2xl font-bold text-slate-900 mb-6 min-h-[84px]"></h2> |
|
|
<div id="answer-options" class="space-y-4"></div> |
|
|
<div class="flex justify-between mt-8"> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6 text-center">您的教養風格光譜</h1> |
|
|
|
|
|
<div id="result-display" class="bg-indigo-50 border-2 border-indigo-200 rounded-xl p-6 mb-8"> |
|
|
<div id="result-spectrum" class="text-center mb-4"></div> |
|
|
<p id="result-description" class="text-slate-700 text-center"></p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div> |
|
|
<h3 id="advice-title" class="text-xl font-bold text-slate-900 mb-4"></h3> |
|
|
<ul id="result-advice" class="list-none space-y-4"></ul> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="result-chart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<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"> |
|
|
重新測驗 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const quizData = { |
|
|
questions: [ |
|
|
{ |
|
|
text: "當您發現孩子的房間亂七八糟時，您通常會？", |
|
|
options: [ |
|
|
{ type: 'A', text: "馬上要求他立刻打掃乾淨，否則就給予懲罰。" }, |
|
|
{ type: 'B', text: "跟他討論一個整理房間的期限，並說明保持整潔的好處。" }, |
|
|
{ type: 'C', text: "覺得沒關係，他想整理的時候自然會整理。" }, |
|
|
{ type: 'D', text: "幾乎沒注意到，或覺得這不是什麼重要的事。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "孩子的考試成績退步了，您的第一反應是？", |
|
|
options: [ |
|
|
{ type: 'A', text: "責備他不用功，並取消他接下來的娛樂活動。" }, |
|
|
{ type: 'B', text: "找他聊聊，先同理他的心情，再一起分析退步的原因。" }, |
|
|
{ type: 'C', text: "安慰他說「成績不重要，你開心就好」。" }, |
|
|
{ type: 'D', text: "可能要等到學期末才知道，平時不太過問成績。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "孩子沉迷於手機遊戲，您的處理方式是？", |
|
|
options: [ |
|
|
{ type: 'A', text: "直接沒收手機或切斷網路，規定沒有寫完功課前絕對不准碰。" }, |
|
|
{ type: 'B', text: "和孩子討論並約定每天可以玩的時間，以及完成責任（如功課）的前提。" }, |
|
|
{ type: 'C', text: "覺得孩子需要放鬆，只要他自己覺得可以就好，不太干涉。" }, |
|
|
{ type: 'D', text: "只要孩子沒來煩我，他玩多久我通常不太在意。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "孩子比約定好的門禁時間晚回家，您會？", |
|
|
options: [ |
|
|
{ type: 'A', text: "非常生氣，嚴厲地處罰他，並規定接下來一個月都要提早回家。" }, |
|
|
{ type: 'B', text: "關心他晚歸的原因，表達擔心的同時，也重申遵守約定的重要性，並執行約定好的後果。" }, |
|
|
{ type: 'C', text: "只要他安全到家就好，不太會追究原因或責備他。" }, |
|
|
{ type: 'D', text: "可能根本沒發現他晚歸了。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "當孩子公開反駁您的觀點時，您會覺得？", |
|
|
options: [ |
|
|
{ type: 'A', text: "這是對長輩的挑戰，必須立刻糾正他，讓他知道誰才是對的。" }, |
|
|
{ type: 'B', text: "這是一個很好的溝通機會，會聽聽他的想法，並與他理性討論。" }, |
|
|
{ type: 'C', text: "為了避免衝突，通常會順著他的話或轉移話題。" }, |
|
|
{ type: 'D', text: "他有他的想法，我也有我的，我們各想各的，互不干涉。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "孩子哭著說被好朋友排擠了，您會？", |
|
|
options: [ |
|
|
{ type: 'A', text: "告訴他「這點小事有什麼好哭的？堅強一點！」。" }, |
|
|
{ type: 'B', text: "給他一個擁抱，聽他傾訴，並引導他思考可以如何應對這種情況。" }, |
|
|
{ type: 'C', text: "非常心疼，馬上幫他罵那個朋友，並說「我們不跟他好了！」。" }, |
|
|
{ type: 'D', text: "覺得這是孩子之間的事，他們自己會解決，不太介入。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "您交代孩子做的家事，他卻拖拖拉拉不想做，您會？", |
|
|
options: [ |
|
|
{ type: 'A', text: "命令他必須馬上完成，並警告他如果不做會有什麼後果。" }, |
|
|
{ type: 'B', text: "提醒他這是身為家裡一份子的責任，並跟他確認完成的時間。" }, |
|
|
{ type: 'C', text: "看他不想做，心疼他功課累，就自己默默做掉了。" }, |
|
|
{ type: 'D', text: "不太會特別要求孩子做家事。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "孩子想染一個很誇張髮色去學校，您的反應是？", |
|
|
options: [ |
|
|
{ type: 'A', text: "絕對不行！學生就該有學生的樣子，想都別想。" }, |
|
|
{ type: 'B', text: "了解他想染髮的原因，並與他討論學校的規定、可能面對的後果，以及是否有兩全其美的方式。" }, |
|
|
{ type: 'C', text: "只要他喜歡就可以，全力支持他去嘗試。" }, |
|
|
{ type: 'D', text: "這是他自己的頭髮，他想怎麼做是他的自由。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "孩子跟您要求增加零用錢，您會？", |
|
|
options: [ |
|
|
{ type: 'A', text: "直接拒絕，並教訓他應該要懂得知足，不要亂花錢。" }, |
|
|
{ type: 'B', text: "邀請他說明需要增加零用錢的理由，並一起討論他的理財規劃，再做決定。" }, |
|
|
{ type: 'C', text: "覺得只要能讓他開心，多給一點也無妨，就直接給了。" }, |
|
|
{ type: 'D', text: "對於孩子金錢的使用狀況不太清楚，給多少很隨性。" } |
|
|
] |
|
|
}, |
|
|
{ |
|
|
text: "與孩子討論未來的升學或職業方向時，您傾向於？", |
|
|
options: [ |
|
|
{ type: 'A', text: "為他規劃好一條最安穩的道路，並要求他朝著這個方向努力。" }, |
|
|
{ type: 'B', text: "提供他各種資訊與分析，鼓勵他探索自己的興趣，並支持他做出自己的決定。" }, |
|
|
{ type: 'C', text: "告訴他「只要是你喜歡的，爸媽都支持！」，不會給太多具體建議。" }, |
|
|
{ type: 'D', text: "覺得這是他自己的人生，他應該自己去想，很少主動跟他討論這個話題。" } |
|
|
] |
|
|
} |
|
|
], |
|
|
results: { |
|
|
A: { title: "專制權威型", subtitle: "虎爸虎媽型", description: "核心特徵：高要求、低回應。重視紀律、服從與控制，規則嚴格且不容置疑。" }, |
|
|
B: { title: "權威開明型", subtitle: "民主引導型", description: "核心特徵：高要求、高回應。會為孩子設立明確的規範，但同時也願意傾聽、溝通，並給予孩子溫暖與支持。" }, |
|
|
C: { title: "寬容溺愛型", subtitle: "朋友型", description: "核心特徵：低要求、高回應。對孩子充滿愛，但很少設立規範或執行紀律，為了避免衝突而容易妥協。" }, |
|
|
D: { title: "忽視冷漠型", subtitle: "放任型", description: "核心特徵：低要求、低回應。較少投入孩子的教養與生活中，缺乏情感支持與行為上的引導。" } |
|
|
}, |
|
|
combinedAdvice: { |
|
|
'A_B': { title: "給「嚴格監督 + 理性溝通」的您", advice: ["<strong>發揮優勢：</strong> 您對孩子有很高的期望，並致力於為他們規畫最好的道路。", "<strong>溫馨提醒：</strong> 過高的控制感有時會壓抑孩子的自主性。您內心其實也希望能理解孩子。", "<strong>行動建議：</strong> 試著在下次提出要求時，多問一句「你的想法是什麼？」，並真心傾聽，這會是關係破冰的開始。"] }, |
|
|
'A_C': { title: "給「紀律嚴明又渴望和諧」的您", advice: ["<strong>發揮優勢：</strong> 您重視規則，但也非常愛孩子，不希望親子關係緊張。", "<strong>溫馨提醒：</strong> 您的管教標準可能因自己的情緒或孩子的反應而搖擺不定，讓孩子感到困惑。", "<strong>行動建議：</strong> 建立幾個「絕不妥協」的核心家庭規則，並堅持執行。在非核心問題上，則可以給予孩子更多彈性與溫暖。"] }, |
|
|
'A_D': { title: "給「重視結果卻分身乏術」的您", advice: ["<strong>發揮優勢：</strong> 您為孩子設定了明確的目標與期望。", "<strong>溫馨提醒：</strong> 您可能較多關注孩子的學業或行為表現，而較少投入情感連結。", "<strong>行動建議：</strong> 每天嘗試問一個「關於感受」的問題，例如「今天學校有發生什麼好玩的事嗎？」，而不只是「功課寫完了嗎？」。"] }, |
|
|
'B_A': { title: "給「民主引導 + 嚴格監督」的您", advice: ["<strong>發揮優勢：</strong> 您為孩子設立了清晰的界線，也願意溝通，這是非常好的基礎。", "<strong>溫馨提醒：</strong> 當您覺得界線被挑戰時，試著先深呼吸，提醒自己多一些彈性，避免落入「為反對而反對」的權威模式。", "<strong>行動建議：</strong> 邀請孩子一起討論「為什麼這個規定很重要」，將單向要求轉化為雙向的價值觀建立。"] }, |
|
|
'B_C': { title: "給「民主引導 + 溫暖支持」的您", advice: ["<strong>發揮優勢：</strong> 您與孩子的關係充滿溫暖與支持，孩子也願意與您溝通。", "<strong>溫馨提醒：</strong> 有時候可能會因為太過同理孩子，而在執行紀律時有所動搖。", "<strong>行動建議：</strong> 堅持執行您們共同討論出的規則與後果，這份「溫柔的堅持」會讓孩子更有安全感。"] }, |
|
|
'B_D': { title: "給「民主引導 + 尊重自主」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子清晰的規範，同時也尊重他的獨立性。", "<strong>溫馨提醒：</strong> 確保您的「回應」不僅僅是在問題發生時，平時也要多主動表達情感上的關懷。", "<strong>行動建議：</strong> 嘗試每週安排一次「不談正事」的親子時間，純粹地享受共同的活動，深化情感連結。"] }, |
|
|
'C_A': { title: "給「溫暖隨和但有底線」的您", advice: ["<strong>發揮優勢：</strong> 平時您給孩子很多愛與自由，親子關係融洽。", "<strong>溫馨提醒：</strong> 當底線被觸碰時，您可能會突然變得非常嚴厲，這種不一致會讓孩子無所適從。", "<strong>行動建議：</strong> 試著將您的「底線」更清晰、更溫和地在平時就與孩子溝通，而不是等到爆發時才出手。"] }, |
|
|
'C_B': { title: "給「溫暖支持 + 嘗試引導」的您", advice: ["<strong>發揮優勢：</strong> 您是孩子心中溫暖的避風港，親子關係緊密。", "<strong>溫馨提醒：</strong> 真正的愛，包含幫助孩子建立面對現實世界的規範與能力。", "<strong>行動建議：</strong> 從一件小事開始，與孩子一起建立一個家庭新規則（例如手機使用時間），並一起努力遵守它。"] }, |
|
|
'C_D': { title: "給「愛好和平且尊重自主」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子極大的自由與空間去探索。", "<strong>溫馨提醒：</strong> 孩子可能感受不到足夠的引導與結構，在建立常規或面對挑戰時會感到徬徨。", "<strong>行動建議：</strong> 嘗試與孩子一起建立一個「家庭週末計畫」，包含他想做的事和需要完成的責任，練習在自由與結構中找到平衡。"] }, |
|
|
'D_A': { title: "給「尊重獨立但關注重點」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子高度的自主權。", "<strong>溫馨提醒：</strong> 您可能只在自己認為「重要」的事情上（如成績、升學）才會介入，但這種突然的控制會讓孩子感到壓力。", "<strong>行動建議：</strong> 試著將關心擴展到孩子的日常生活與內心感受，建立更全面的情感連結。"] }, |
|
|
'D_B': { title: "給「尊重獨立也願意溝通」的您", advice: ["<strong>發揮優勢：</strong> 您信任孩子的能力，也願意在需要時提供建議。", "<strong>溫馨提醒：</strong> 孩子可能感覺到您的情感投入較少，需要更多的主動關懷。", "<strong>行動建議：</strong> 除了被動地等待孩子來問，嘗試主動開啟對話，例如分享您自己一天的工作或心情，引導孩子也分享他的。"] }, |
|
|
'D_C': { title: "給「尊重自主且愛好和平」的您", advice: ["<strong>發揮優勢：</strong> 您給予孩子極大的自由與空間去探索。", "<strong>溫馨提醒：</strong> 孩子可能感受不到足夠的引導與結構，在建立常規或面對挑戰時會感到徬徨。", "<strong>行動建議：</strong> 嘗試與孩子一起建立一個「家庭週末計畫」，包含他想做的事和需要完成的責任，練習在自由與結構中找到平衡。"] } |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
function shuffleArray(array) { |
|
|
for (let i = array.length - 1; i > 0; i--) { |
|
|
const j = Math.floor(Math.random() * (i + 1)); |
|
|
[array[i], array[j]] = [array[j], array[i]]; |
|
|
} |
|
|
} |
|
|
|
|
|
let currentQuestionIndex = 0; |
|
|
let userAnswers = new Array(quizData.questions.length).fill(null); |
|
|
let resultChart = null; |
|
|
|
|
|
const mainContainer = document.getElementById('main-container'); |
|
|
const screens = { |
|
|
start: document.getElementById('start-screen'), |
|
|
quiz: document.getElementById('quiz-screen'), |
|
|
result: document.getElementById('result-screen') |
|
|
}; |
|
|
|
|
|
const startBtn = document.getElementById('start-btn'); |
|
|
const nextBtn = document.getElementById('next-btn'); |
|
|
const prevBtn = document.getElementById('prev-btn'); |
|
|
const restartBtn = document.getElementById('restart-btn'); |
|
|
|
|
|
const progressText = document.getElementById('progress-text'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const questionText = document.getElementById('question-text'); |
|
|
const answerOptionsContainer = document.getElementById('answer-options'); |
|
|
|
|
|
function switchScreen(toScreenId) { |
|
|
Object.values(screens).forEach(screen => { |
|
|
if (screen.id !== toScreenId) { |
|
|
screen.classList.add('opacity-0', 'pointer-events-none', 'absolute'); |
|
|
} |
|
|
}); |
|
|
const targetScreen = screens[toScreenId]; |
|
|
targetScreen.classList.remove('opacity-0', 'pointer-events-none', 'absolute'); |
|
|
} |
|
|
|
|
|
function startQuiz() { |
|
|
quizData.questions.forEach(question => { |
|
|
shuffleArray(question.options); |
|
|
}); |
|
|
currentQuestionIndex = 0; |
|
|
userAnswers.fill(null); |
|
|
showQuestion(); |
|
|
switchScreen('quiz'); |
|
|
} |
|
|
|
|
|
function showQuestion() { |
|
|
const question = quizData.questions[currentQuestionIndex]; |
|
|
questionText.textContent = question.text; |
|
|
answerOptionsContainer.innerHTML = ''; |
|
|
|
|
|
question.options.forEach(option => { |
|
|
const button = document.createElement('button'); |
|
|
button.textContent = option.text; |
|
|
button.classList.add('option-button', 'w-full', 'text-left', 'p-4', 'rounded-lg', 'border-2', 'border-slate-200'); |
|
|
button.dataset.type = option.type; |
|
|
if (userAnswers[currentQuestionIndex] === option.type) { |
|
|
button.classList.add('selected'); |
|
|
} |
|
|
button.onclick = () => selectAnswer(option.type); |
|
|
answerOptionsContainer.appendChild(button); |
|
|
}); |
|
|
|
|
|
updateProgress(); |
|
|
updateNavButtons(); |
|
|
} |
|
|
|
|
|
function selectAnswer(type) { |
|
|
userAnswers[currentQuestionIndex] = type; |
|
|
document.querySelectorAll('.option-button').forEach(btn => { |
|
|
btn.classList.remove('selected'); |
|
|
if (btn.dataset.type === type) { |
|
|
btn.classList.add('selected'); |
|
|
} |
|
|
}); |
|
|
updateNavButtons(); |
|
|
} |
|
|
|
|
|
function updateProgress() { |
|
|
const progress = ((currentQuestionIndex + 1) / quizData.questions.length) * 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
progressText.textContent = `問題 ${currentQuestionIndex + 1} / ${quizData.questions.length}`; |
|
|
} |
|
|
|
|
|
function updateNavButtons() { |
|
|
prevBtn.disabled = currentQuestionIndex === 0; |
|
|
prevBtn.classList.toggle('opacity-50', prevBtn.disabled); |
|
|
prevBtn.classList.toggle('cursor-not-allowed', prevBtn.disabled); |
|
|
|
|
|
if (currentQuestionIndex === quizData.questions.length - 1) { |
|
|
nextBtn.textContent = '看結果'; |
|
|
nextBtn.onclick = showResults; |
|
|
} else { |
|
|
nextBtn.textContent = '下一題'; |
|
|
nextBtn.onclick = nextQuestion; |
|
|
} |
|
|
|
|
|
nextBtn.disabled = userAnswers[currentQuestionIndex] === null; |
|
|
nextBtn.classList.toggle('opacity-50', nextBtn.disabled); |
|
|
nextBtn.classList.toggle('cursor-not-allowed', nextBtn.disabled); |
|
|
} |
|
|
|
|
|
function nextQuestion() { |
|
|
if (currentQuestionIndex < quizData.questions.length - 1) { |
|
|
currentQuestionIndex++; |
|
|
showQuestion(); |
|
|
} |
|
|
} |
|
|
|
|
|
function prevQuestion() { |
|
|
if (currentQuestionIndex > 0) { |
|
|
currentQuestionIndex--; |
|
|
showQuestion(); |
|
|
} |
|
|
} |
|
|
|
|
|
function getAdviceIcon(adviceText) { |
|
|
if (adviceText.includes('溝通') || adviceText.includes('傾聽') || adviceText.includes('想法') || adviceText.includes('討論') || adviceText.includes('對話')) return '💬'; |
|
|
if (adviceText.includes('溫暖') || adviceText.includes('支持') || adviceText.includes('情感') || adviceText.includes('關懷') || adviceText.includes('愛') || adviceText.includes('關係') || adviceText.includes('連結') || adviceText.includes('同理')) return '❤️'; |
|
|
if (adviceText.includes('規則') || adviceText.includes('界線') || adviceText.includes('堅持') || adviceText.includes('監督') || adviceText.includes('後果') || adviceText.includes('規範') || adviceText.includes('責任') || adviceText.includes('安全感')) return '🛡️'; |
|
|
if (adviceText.includes('自主') || adviceText.includes('獨立') || adviceText.includes('空間') || adviceText.includes('彈性') || adviceText.includes('探索')) return '🌿'; |
|
|
if (adviceText.includes('建議') || adviceText.includes('行動') || adviceText.includes('方法') || adviceText.includes('練習') || adviceText.includes('調整') || adviceText.includes('建立') || adviceText.includes('邀請') || adviceText.includes('保持')) return '✨'; |
|
|
return '✓'; |
|
|
} |
|
|
|
|
|
function showResults() { |
|
|
switchScreen('result'); |
|
|
|
|
|
const counts = userAnswers.reduce((acc, answer) => { |
|
|
acc[answer] = (acc[answer] || 0) + 1; |
|
|
return acc; |
|
|
}, {}); |
|
|
|
|
|
const sortedTypes = Object.entries(counts).sort(([,a],[,b]) => b-a); |
|
|
|
|
|
const primaryType = sortedTypes[0] ? sortedTypes[0][0] : 'B'; |
|
|
const secondaryType = sortedTypes[1] && sortedTypes[1][1] > 0 ? sortedTypes[1][0] : null; |
|
|
|
|
|
const primaryResult = quizData.results[primaryType]; |
|
|
|
|
|
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>`; |
|
|
let descriptionText = primaryResult.description; |
|
|
|
|
|
if (secondaryType) { |
|
|
const secondaryResult = quizData.results[secondaryType]; |
|
|
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>`; |
|
|
} |
|
|
|
|
|
document.getElementById('result-spectrum').innerHTML = resultSpectrumHTML; |
|
|
document.getElementById('result-description').textContent = descriptionText; |
|
|
|
|
|
let adviceData; |
|
|
const adviceKey = secondaryType ? `${primaryType}_${secondaryType}` : primaryType; |
|
|
|
|
|
if (quizData.combinedAdvice[adviceKey]) { |
|
|
adviceData = quizData.combinedAdvice[adviceKey]; |
|
|
} else { |
|
|
adviceData = { |
|
|
title: `給「${primaryResult.title}」的您`, |
|
|
advice: [] |
|
|
}; |
|
|
switch(primaryType){ |
|
|
case 'A': adviceData.advice = ["<strong>發揮優勢：</strong> 您對孩子有很高的期望，並致力於為他們規畫最好的道路。", "<strong>溫馨提醒：</strong> 過高的控制感有時會壓抑孩子的自主性。", "<strong>行動建議：</strong> 試著在下次提出要求時，多問一句「你的想法是什麼？」，並真心傾聽。"]; break; |
|
|
case 'B': adviceData.advice = ["<strong>繼續保持：</strong> 您的教養方式為孩子提供了穩定且充滿支持的成長環境，請繼續保持這種平衡。", "<strong>動態調整：</strong> 隨著孩子年齡增長，持續調整對他們的期望與賦予的自主權。"]; break; |
|
|
case 'C': adviceData.advice = ["<strong>發揮優勢：</strong> 您是孩子心中溫暖的避風港，親子關係緊密。", "<strong>溫馨提醒：</strong> 真正的愛，包含幫助孩子建立面對現實世界的規範與能力。", "<strong>行動建議：</strong> 從一件小事開始，與孩子一起建立一個家庭新規則（例如手機使用時間），並一起努力遵守它。"]; break; |
|
|
case 'D': adviceData.advice = ["<strong>從「小連結」開始：</strong> 每天刻意安排10-15分鐘的專屬時間，專心聽孩子說說今天發生的事。", "<strong>表達關心：</strong> 主動詢問孩子在學校的生活、朋友或興趣，讓他們感受到自己被在乎。", "<strong>參與其中：</strong> 嘗試參與一項孩子的活動，例如看他玩遊戲、陪他看一部電影，重建親子關係。"]; break; |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('advice-title').textContent = adviceData.title; |
|
|
const adviceList = document.getElementById('result-advice'); |
|
|
adviceList.innerHTML = ''; |
|
|
adviceData.advice.forEach(item => { |
|
|
const li = document.createElement('li'); |
|
|
li.classList.add('flex', 'items-start'); |
|
|
const icon = getAdviceIcon(item); |
|
|
li.innerHTML = `<span class="text-xl mr-3 w-6 inline-block text-center pt-1">${icon}</span><span class="flex-1">${item}</span>`; |
|
|
adviceList.appendChild(li); |
|
|
}); |
|
|
|
|
|
renderChart(counts); |
|
|
} |
|
|
|
|
|
function renderChart(counts) { |
|
|
const ctx = document.getElementById('result-chart').getContext('2d'); |
|
|
const data = { |
|
|
labels: [ |
|
|
'A: 專制權威型', |
|
|
'B: 權威開明型', |
|
|
'C: 寬容溺愛型', |
|
|
'D: 忽視冷漠型' |
|
|
], |
|
|
datasets: [{ |
|
|
label: '您的回答分佈', |
|
|
data: [counts.A || 0, counts.B || 0, counts.C || 0, counts.D || 0], |
|
|
backgroundColor: [ |
|
|
'#ef4444', |
|
|
'#22c55e', |
|
|
'#3b82f6', |
|
|
'#64748b' |
|
|
], |
|
|
borderColor: '#ffffff', |
|
|
borderWidth: 2 |
|
|
}] |
|
|
}; |
|
|
|
|
|
if (resultChart) { |
|
|
resultChart.destroy(); |
|
|
} |
|
|
|
|
|
resultChart = new Chart(ctx, { |
|
|
type: 'doughnut', |
|
|
data: data, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'bottom', |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
let label = context.label || ''; |
|
|
if (label) { |
|
|
label += ': '; |
|
|
} |
|
|
if (context.parsed !== null) { |
|
|
label += context.parsed + ' 題'; |
|
|
} |
|
|
return label; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function restartQuiz() { |
|
|
switchScreen('start'); |
|
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
switchScreen('start'); |
|
|
}); |
|
|
|
|
|
startBtn.onclick = startQuiz; |
|
|
prevBtn.onclick = prevQuestion; |
|
|
nextBtn.onclick = nextQuestion; |
|
|
restartBtn.onclick = restartQuiz; |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
