';
if(stepData.element === 'Result') {
content += `
`;
}
stepEl.innerHTML = content;
quizContainer.appendChild(stepEl);
});
};
const showStep = (stepIndex) => {
document.querySelectorAll('.wizard-step').forEach(el => el.classList.remove('active'));
document.getElementById(`step-${stepIndex}`).classList.add('active');
currentStep = stepIndex;
updateUI();
};
const updateUI = () => {
prevBtn.style.visibility = currentStep > 0 ? 'visible' : 'hidden';
const isLastStep = currentStep === QUIZ_DATA.length - 1;
nextBtn.textContent = isLastStep ? 'Finish' : 'Next';
nextBtn.style.display = isLastStep ? 'none' : 'block';
stepIndicator.textContent = isLastStep ? 'Results' : `Step ${currentStep} of ${QUIZ_DATA.length - 2}`;
};
const handleNavigate = (direction) => {
if (direction === 1 && !validateAndStoreAnswers()) {
alert('Please answer all questions to continue.');
return;
}
const nextStepIndex = currentStep + direction;
if (nextStepIndex >= 0 && nextStepIndex < QUIZ_DATA.length) {
if (nextStepIndex === QUIZ_DATA.length - 1) {
calculateResults();
renderResults();
}
showStep(nextStepIndex);
}
};
const validateAndStoreAnswers = () => {
const stepData = QUIZ_DATA[currentStep];
if (!stepData.questions) return true;
for (let i = 0; i < stepData.questions.length; i++) {
const q = stepData.questions[i];
const questionId = `q_${currentStep}_${i}`;
if (q.type === 'text') {
userAnswers[q.id] = document.getElementById(questionId).value;
} else {
const selected = document.querySelector(`input[name="${questionId}"]:checked`);
if (!selected) return false;
userAnswers[questionId] = parseInt(selected.value);
}
}
return true;
};
const calculateResults = () => {
const scores = { Wood: 0, Fire: 0, Earth: 0, Metal: 0, Water: 0 };
let totalScore = 0;
let maxPossibleScore = 0;
for (let i = 1; i < QUIZ_DATA.length - 1; i++) { // Skip Intro and Result steps
const stepData = QUIZ_DATA[i];
stepData.questions.forEach((q, qIndex) => {
const questionId = `q_${i}_${qIndex}`;
scores[stepData.element] += userAnswers[questionId];
totalScore += userAnswers[questionId];
maxPossibleScore += 3; // Max score for any question is 3
});
}
// Health score is inverse of imbalance score
const healthScore = 100 - Math.round(((totalScore - (maxPossibleScore/3)) / (maxPossibleScore - (maxPossibleScore/3))) * 100);
const dominantElement = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
finalResult = {
scores,
healthScore,
dominantElement,
userName: userAnswers.user_name || "User"
};
};
const renderResults = () => {
const resultContentEl = document.getElementById('result-content');
const advice = WELLNESS_ADVICE[finalResult.dominantElement];
resultContentEl.innerHTML = `
Overall Health Score
${finalResult.healthScore}%
Elemental Balance
Dominant Element: ${finalResult.dominantElement}
${advice.description}
Wellness Advice:
Diet: ${advice.diet}
Lifestyle: ${advice.lifestyle}
`;
document.getElementById('download-pdf-btn').addEventListener('click', handlePdfDownload);
renderChart();
};
const renderChart = () => {
const ctx = document.getElementById('resultChart').getContext('2d');
new Chart(ctx, {
type: 'radar',
data: {
labels: Object.keys(finalResult.scores),
datasets: [{
label: 'Elemental Imbalance Score (Higher is more imbalanced)',
data: Object.values(finalResult.scores),
backgroundColor: 'rgba(87, 83, 78, 0.2)',
borderColor: 'rgba(87, 83, 78, 1)',
borderWidth: 2
}]
},
options: {
scales: {
r: {
beginAtZero: true,
max: 9 // Each element has 3 questions, max score 3 each
}
}
}
});
};
const handlePdfDownload = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const advice = WELLNESS_ADVICE[finalResult.dominantElement];
doc.setFillColor('#44403c').rect(0, 0, 210, 30, 'F');
doc.setFont('helvetica', 'bold').setFontSize(20).setTextColor('#FFFFFF');
doc.text('TCM Wellness Report', 105, 18, { align: 'center' });
doc.setFontSize(12).setFont('helvetica', 'normal').setTextColor('#1f2937');
doc.text(`For: ${finalResult.userName}`, 14, 45);
doc.text(`Date: ${new Date().toLocaleDateString()}`, 14, 51);
doc.setFontSize(16).setFont('helvetica', 'bold').text('Overall Health Score:', 14, 65);
doc.setFontSize(26).setTextColor('#44403c').text(`${finalResult.healthScore}%`, 70, 65);
doc.setFontSize(16).setFont('helvetica', 'bold').setTextColor('#1f2937').text('Dominant Element Profile: ' + finalResult.dominantElement, 14, 80);
const descLines = doc.splitTextToSize(advice.description, 180);
doc.setFontSize(11).setFont('helvetica', 'normal').text(descLines, 14, 88);
let yPos = 88 + (descLines.length * 5) + 5;
doc.setFontSize(12).setFont('helvetica', 'bold').text('Wellness Recommendations', 14, yPos);
yPos += 7;
const dietLines = doc.splitTextToSize(`Diet: ${advice.diet}`, 180);
doc.setFontSize(11).setFont('helvetica', 'normal').text(dietLines, 14, yPos);
yPos += (dietLines.length * 5) + 2;
const lifeLines = doc.splitTextToSize(`Lifestyle: ${advice.lifestyle}`, 180);
doc.setFontSize(11).setFont('helvetica', 'normal').text(lifeLines, 14, yPos);
doc.save(`${finalResult.userName}_TCM_Report.pdf`);
};
const addEventListeners = () => {
nextBtn.addEventListener('click', () => handleNavigate(1));
prevBtn.addEventListener('click', () => handleNavigate(-1));
};
init();
});
