Work Style Analyzer
Discover your dominant work style and gain insights into your professional habits.
Complete the Questionnaire
Your Work Style Analysis
${index + 1}. ${escapeHTML(item.question)}
${answersHtml}
`;
quizQuestionsContainer.appendChild(questionCard);
});
}
function handleSubmitQuiz() {
const answers = new FormData(quizForm);
const scores = { Collaborator: 0, Innovator: 0, Executor: 0, Analyzer: 0 };
let answeredQuestions = 0;
for (let [key, value] of answers.entries()) {
scores[value]++;
answeredQuestions++;
}
if (answeredQuestions < analyzerData.length) {
alert("Please answer all questions before submitting.");
return;
}
const maxScore = Math.max(...Object.values(scores));
const dominantStyle = Object.keys(scores).find(key => scores[key] === maxScore);
displayResults(dominantStyle, scores);
}
function displayResults(style, scores) {
quizView.classList.add('hidden');
resultsView.classList.remove('hidden');
const styleInfo = workStyles[style];
resultTitle.textContent = styleInfo.title;
resultDescription.textContent = styleInfo.description;
const chartData = {
labels: Object.keys(scores),
datasets: [{
label: 'Your Work Style Scores',
data: Object.values(scores),
backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'],
borderColor: '#ffffff',
borderWidth: 2
}]
};
if (resultsChart) {
resultsChart.destroy();
}
resultsChart = new Chart(resultsChartCanvas, {
type: 'doughnut',
data: chartData,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Your Work Style Profile'
}
}
},
});
}
function retakeQuiz() {
resultsView.classList.add('hidden');
quizView.classList.remove('hidden');
renderQuizQuestions(); // Re-render to clear selections
}
// --- Data Configuration UI ---
function renderConfigQuestions() {
questionsConfigContainer.innerHTML = '';
analyzerData.forEach((item, index) => {
const container = document.createElement('div');
container.className = 'p-4 border border-slate-200 rounded-lg';
container.dataset.index = index;
let answersHtml = item.answers.map((ans, ansIndex) => `
${answersHtml}
`;
questionsConfigContainer.appendChild(container);
});
addConfigEventListeners();
}
function addConfigEventListeners() {
document.querySelectorAll('.remove-question-btn').forEach(btn => {
btn.onclick = (e) => {
const index = e.target.closest('[data-index]').dataset.index;
analyzerData.splice(index, 1);
renderConfigQuestions();
renderQuizQuestions();
};
});
// Add listeners for input changes to update analyzerData in real-time
document.querySelectorAll('.question-text-input, .answer-text-input, .answer-style-select').forEach(input => {
input.onchange = (e) => {
updateAnalyzerDataFromConfig();
renderQuizQuestions();
};
});
}
function updateAnalyzerDataFromConfig() {
const newAnalyzerData = [];
document.querySelectorAll('#questions-config-container > div').forEach(qContainer => {
const questionText = qContainer.querySelector('.question-text-input').value;
const answers = [];
qContainer.querySelectorAll('.answer-text-input').forEach((ansInput, index) => {
const styleSelect = qContainer.querySelectorAll('.answer-style-select')[index];
answers.push({
text: ansInput.value,
style: styleSelect.value
});
});
newAnalyzerData.push({ question: questionText, answers });
});
analyzerData = newAnalyzerData;
}
function handleAddQuestion() {
analyzerData.push({
question: "New Question...",
answers: [
{ text: "Answer 1", style: "Collaborator" },
{ text: "Answer 2", style: "Innovator" },
{ text: "Answer 3", style: "Executor" },
{ text: "Answer 4", style: "Analyzer" }
]
});
renderConfigQuestions();
renderQuizQuestions();
}
// --- PDF Generation ---
async function generatePdf() {
const { jsPDF } = window.jspdf;
if (!resultsChart) {
alert("Please complete the analyzer first.");
return;
}
downloadPdfBtn.textContent = 'Generating PDF...';
downloadPdfBtn.disabled = true;
try {
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
pdf.setFontSize(22);
pdf.setFont("helvetica", "bold");
pdf.text("Work Style Analysis Report", pdf.internal.pageSize.getWidth() / 2, 40, { align: 'center' });
pdf.setFontSize(16);
pdf.setFont("helvetica", "bold");
pdf.setTextColor(59, 130, 246);
pdf.text(resultTitle.textContent, 40, 80);
pdf.setFontSize(11);
pdf.setFont("helvetica", "normal");
pdf.setTextColor(51, 65, 85);
const descLines = pdf.splitTextToSize(resultDescription.textContent, pdf.internal.pageSize.getWidth() - 80);
pdf.text(descLines, 40, 100);
const chartImage = resultsChart.toBase64Image();
const imgProps = pdf.getImageProperties(chartImage);
const pdfImgWidth = 300;
const pdfImgHeight = (imgProps.height * pdfImgWidth) / imgProps.width;
const chartY = 120 + descLines.length * 12;
pdf.addImage(chartImage, 'PNG', (pdf.internal.pageSize.getWidth() - pdfImgWidth) / 2, chartY, pdfImgWidth, pdfImgHeight);
pdf.save('Work_Style_Analysis.pdf');
} catch (error) {
console.error("Error generating PDF:", error);
alert("Could not generate PDF. Please try again.");
} finally {
downloadPdfBtn.textContent = 'Download Report as PDF';
downloadPdfBtn.disabled = false;
}
}
function escapeHTML(str) {
return str.replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''})[m]);
}
// --- Initial Setup ---
document.addEventListener('DOMContentLoaded', () => {
loadSampleData();
changeTab(0);
prevBtn.addEventListener('click', () => { if (currentTab > 0) changeTab(currentTab - 1); });
nextBtn.addEventListener('click', () => { if (currentTab < tabs.length - 1) changeTab(currentTab + 1); });
submitQuizBtn.addEventListener('click', handleSubmitQuiz);
retakeQuizBtn.addEventListener('click', retakeQuiz);
downloadPdfBtn.addEventListener('click', generatePdf);
addQuestionBtn.addEventListener('click', handleAddQuestion);
});