Project Structure
This application uses a modular architecture with clear separation between logic, presentation, and data.
├── index.html # Main application page
├── about.html # About page
├── docs.html # Documentation page
├── css/
│ └── style.css # Custom styles and animations
├── js/
│ ├── questions.js # Question data and categories
│ ├── spk.js # Main SPK logic (SAW method)
│ ├── export-pdf.js # PDF export functionality
│ ├── lang.js # Multi-language support
│ └── lang-switcher.js # Language switching logic
└── php/
└── save.php # Optional server-side saving
Adding New Questions
To add new questions, modify the QUESTIONS array in questions.js:
{
id: 16,
category: 'social_media',
title: 'New Question Title',
question: 'Your question text here',
weight: 0.8
}
Core Functions
The system uses SAW (Simple Additive Weighting) method for score calculation.
SAW Method Implementation
calculateScores() {
// Initialize category totals
const categoryTotals = {
social_media: { score: 0, maxScore: 0 },
mental_health: { score: 0, maxScore: 0 },
friendship: { score: 0, maxScore: 0 }
};
// Calculate weighted scores
questions.forEach(question => {
const answer = this.answers[question.id] || 0;
const weightedScore = answer * question.weight;
categoryTotals[question.category].score += weightedScore;
categoryTotals[question.category].maxScore += 5 * question.weight;
});
// Normalize to 0-100 scale
Object.keys(categoryTotals).forEach(category => {
const total = categoryTotals[category];
this.scores[category] = Math.round((total.score / total.maxScore) * 100);
});
}
Category Weights
const CATEGORY_WEIGHTS = {
social_media: 0.35, // 35% weight
mental_health: 0.40, // 40% weight
friendship: 0.25 // 25% weight
};
Export System
PDF export uses jsPDF and html2canvas to generate professional reports.
PDF Generation
generatePDF(userName, scores, recommendations) {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// Add title
doc.setFontSize(20);
doc.text('Digital Habits Report', 20, 30);
// Add user name
if (userName) {
doc.setFontSize(14);
doc.text(`Report for: ${userName}`, 20, 50);
}
// Add scores and recommendations
// ... rest of PDF generation logic
}
Adding New Export Formats
To add new export formats, create a new method in export-pdf.js:
exportToCSV(scores) {
const csvContent = "Category,Score\n" +
Object.entries(scores)
.map(([key, value]) => `${key},${value}`)
.join("\n");
const blob = new Blob([csvContent], { type: 'text/csv' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'digital-habits-report.csv';
a.click();
}
Multi-Language System
Language support uses JavaScript objects with dynamic toggle system.
Language Structure
const LANGUAGES = {
en: {
nav: {
home: 'Home',
about: 'About',
docs: 'Documentation'
},
welcome: {
title: 'Digital Habits Evaluation',
description: 'Evaluate your digital lifestyle...'
}
// ... other sections
},
id: {
nav: {
home: 'Beranda',
about: 'Tentang',
docs: 'Dokumentasi'
}
// ... Indonesian translations
}
};
Adding New Languages
To add a new language, add a new language object to lang.js:
// Add to LANGUAGES object
es: {
nav: {
home: 'Inicio',
about: 'Acerca de',
docs: 'Documentación'
},
// ... Spanish translations
}