Learning Style Assessment
Discover your dominant learning style to study more effectively.
Your Learning Style is:
Recommended Study Strategies
${index + 1}. ${q.text}
${optionsHTML}
`;
questionContainer.appendChild(questionEl);
});
};
const calculateResults = () => {
const scores = { visual: 0, auditory: 0, kinesthetic: 0 };
const totalQuestions = questions.length;
let answeredCount = 0;
for (let i = 0; i < totalQuestions; i++) {
const selected = document.querySelector(`input[name="question-${i}"]:checked`);
if (selected) {
scores[selected.value]++;
answeredCount++;
}
}
if (answeredCount < totalQuestions) {
alert("Please answer all questions before submitting.");
return null;
}
let dominantStyle = 'visual';
if (scores.auditory > scores[dominantStyle]) dominantStyle = 'auditory';
if (scores.kinesthetic > scores[dominantStyle]) dominantStyle = 'kinesthetic';
return { scores, dominantStyle };
};
const displayResults = (result) => {
quizSection.classList.add('hidden');
resultsSection.classList.remove('hidden');
const data = resultsData[result.dominantStyle];
resultTitle.textContent = data.title;
resultDescription.textContent = data.description;
tipsList.innerHTML = '';
data.tips.forEach(tip => {
const li = document.createElement('li');
li.textContent = tip;
tipsList.appendChild(li);
});
// Chart.js
if (resultsChart) {
resultsChart.destroy();
}
resultsChart = new Chart(resultsChartCanvas, {
type: 'doughnut',
data: {
labels: ['Visual', 'Auditory', 'Kinesthetic'],
datasets: [{
label: 'Learning Style Score',
data: [result.scores.visual, result.scores.auditory, result.scores.kinesthetic],
backgroundColor: ['#3b82f6', '#10b981', '#f97316'],
hoverOffset: 4
}]
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' },
title: { display: true, text: 'Your Learning Style Profile' }
}
}
});
};
// --- EVENT LISTENERS ---
submitBtn.addEventListener('click', () => {
const result = calculateResults();
if (result) {
displayResults(result);
}
});
retakeBtn.addEventListener('click', () => {
resultsSection.classList.add('hidden');
quizSection.classList.remove('hidden');
loadQuestions();
});
// --- PDF DOWNLOAD ---
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const result = calculateResults();
const data = resultsData[result.dominantStyle];
doc.setFontSize(22);
doc.text('Learning Style Assessment Results', 105, 20, { align: 'center' });
doc.setFontSize(16);
doc.text(`Your Dominant Style: ${data.title}`, 14, 40);
doc.setFontSize(11);
const descLines = doc.splitTextToSize(data.description, 180);
doc.text(descLines, 14, 48);
let finalY = 48 + (descLines.length * 6) + 10;
doc.setFontSize(16);
doc.text('Recommended Study Strategies', 14, finalY);
doc.autoTable({
body: data.tips.map(tip => [tip]),
startY: finalY + 5,
theme: 'plain',
styles: { fontSize: 11 }
});
// Add chart image
const chartImage = resultsChartCanvas.toDataURL('image/png');
doc.addPage();
doc.setFontSize(16);
doc.text('Your Profile Breakdown', 105, 20, { align: 'center' });
doc.addImage(chartImage, 'PNG', 40, 30, 130, 130);
doc.save('learning-style-assessment.pdf');
});
// --- INITIALIZATION ---
loadQuestions();
});