`;
document.getElementById('start-btn').addEventListener('click', () => {
renderQuestion(currentQuestionIndex);
});
}
function renderQuestion(index) {
const question = questions[index];
let answersHtml = '';
question.answers.forEach((answer, i) => {
answersHtml += `
`;
});
quizContainer.innerHTML = `
Question ${index + 1} of ${questions.length}
${question.text}
${answersHtml}
`;
// Add event listeners
document.getElementById('prev-btn').addEventListener('click', () => renderQuestion(index - 1));
document.getElementById('next-btn').addEventListener('click', () => handleNext(index));
// Re-select previously chosen answer if exists
if(userAnswers[index]) {
document.querySelector(`input[value="${userAnswers[index]}"]`).checked = true;
}
}
function handleNext(index) {
const selectedAnswer = document.querySelector('input[name="answer"]:checked');
if (!selectedAnswer) {
alert('Please select an answer.');
return;
}
userAnswers[index] = selectedAnswer.value;
if (index < questions.length - 1) {
renderQuestion(index + 1);
} else {
showResults();
}
}
function showResults() {
quizContainer.classList.add('hidden');
resultsContainer.classList.remove('hidden');
// Calculate scores
const scores = { V: 0, A: 0, R: 0, K: 0 };
userAnswers.forEach(answer => scores[answer]++);
const sortedScores = Object.entries(scores).sort((a, b) => b[1] - a[1]);
const dominantStyle = sortedScores[0][0];
const dominantData = resultsData[dominantStyle];
// Render results on screen
resultsContainer.innerHTML = `
Your Dominant Learning Style is:
${dominantData.title}
${dominantData.description}
Recommended Strategies:
${dominantData.strategies.map(s => `- ${s}
`).join('')}
`;
// Render Chart
const ctx = document.getElementById('resultsChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Visual', 'Auditory', 'Reading/Writing', 'Kinesthetic'],
datasets: [{
label: 'Style Score',
data: [scores.V, scores.A, scores.R, scores.K],
backgroundColor: ['#60a5fa', '#a78bfa', '#f87171', '#fbbf24'],
borderColor: ['#2563eb', '#7c3aed', '#dc2626', '#d97706'],
borderWidth: 1
}]
},
options: {
scales: { y: { beginAtZero: true, max: questions.length } },
plugins: { legend: { display: false } }
}
});
// Prepare PDF content and add event listener
preparePdfContent(scores, dominantData);
document.getElementById('download-pdf-btn').addEventListener('click', generatePdf);
}
function preparePdfContent(scores, dominantData) {
let strategiesHtml = dominantData.strategies.map(s => `
${s}`).join('');
pdfTemplate.innerHTML = `
Learning Style Assessment
Your Personalized Profile & Strategies
Your Dominant Style: ${dominantData.title}
${dominantData.description}
Your Style Breakdown
This chart shows your score for each of the four primary learning styles. While you have a dominant style, you likely use a mix of all four.
Tailored Study Strategies
`;
// Render chart for PDF (must be done while element is technically in DOM)
const pdfCtx = document.getElementById('pdfChart').getContext('2d');
new Chart(pdfCtx, {
type: 'bar',
data: {
labels: ['Visual', 'Auditory', 'Reading/Writing', 'Kinesthetic'],
datasets: [{
label: 'Score',
data: [scores.V, scores.A, scores.R, scores.K],
backgroundColor: ['#60a5fa', '#a78bfa', '#f87171', '#fbbf24']
}]
},
options: {
indexAxis: 'y',
elements: { bar: { borderWidth: 2, } },
responsive: true,
plugins: { legend: { display: false } },
scales: { x: { beginAtZero: true, max: questions.length } }
}
});
}
async function generatePdf() {
const downloadBtn = document.getElementById('download-pdf-btn');
if (!downloadBtn) return;
downloadBtn.innerText = 'Generating PDF...';
downloadBtn.disabled = true;
const element = document.getElementById('pdf-template');
element.classList.remove('invisible', 'absolute', '-left-full');
element.style.position = 'absolute';
element.style.left = '0'; // Render in viewport for better canvas capture
element.style.top = '0';
element.style.zIndex = '-1'; // Hide behind other content
try {
// Wait for chart animations to complete
await new Promise(resolve => setTimeout(resolve, 500));
const { jsPDF } = window.jspdf;
const canvas = await html2canvas(element.querySelector('.assessment-report'), {
scale: 3,
backgroundColor: '#ffffff'
});
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('My-Learning-Style-Report.pdf');
} catch(err) {
console.error("PDF generation failed:", err);
alert("Sorry, an error occurred while creating the PDF.");
} finally {
element.classList.add('invisible', 'absolute', '-left-full');
element.style.position = '';
element.style.left = '';
element.style.top = '';
element.style.zIndex = '';
downloadBtn.innerText = 'Download Full Report';
downloadBtn.disabled = false;
}
}
// --- Initial State ---
startQuiz();
});
