New Cheat Sheet Request - [Cheat Sheet Title] #576
Description
Add more details about the requested Cheat Sheet like reference links etc.,
<title>តារាងផែនការនិទ្ទេសសិស្សប្រចាំខែ</title> <style> * { box-sizing: border-box; } body { font-family: "Khmer OS Battambang", sans-serif; background: #f5f5f5; padding: 15px; } .container { max-width: 1600px; margin: 0 auto; } h2 { color: #0d47a1; margin-bottom: 15px; } .filter-box { background: white; padding: 15px; border-radius: 4px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } input, select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-family: "Khmer OS Battambang", sans-serif; font-size: 14px; } button { background: #1976d2; color: white; border: none; cursor: pointer; font-weight: bold; } button:hover { background: #0d47a1; } button.danger { background: #d32f2f; } button.danger:hover { background: #b71c1c; } button.success { background: #388e3c; } button.success:hover { background: #2e7d32; }.message {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
display: none;
}
.message.success {
background: #c8e6c9;
color: #2e7d32;
display: block;
}
.message.error {
background: #ffcdd2;
color: #c62828;
display: block;
}
.table-wrapper {
overflow-x: auto;
background: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 0;
font-size: 12px;
}
th, td {
border: 1px solid #ccc;
padding: 6px;
text-align: center;
}
th {
background: #0d47a1;
color: white;
font-weight: bold;
white-space: nowrap;
}
th.month-header {
background: #1565c0;
font-size: 11px;
padding: 4px;
}
th.sub-header {
background: #1976d2;
font-size: 10px;
padding: 3px;
}
select {
width: 60px;
padding: 4px;
font-size: 12px;
}
input {
padding: 4px 8px;
font-size: 11px;
margin: 2px;
}
.grade-A { background: #c8e6c9; }
.grade-B { background: #fff9c4; }
.grade-C { background: #ffe0b2; }
.grade-D { background: #ffccbc; }
.grade-E { background: #ffcdd2; }
.grade-F { background: #f8bbd0; }
📊 តារាងវាយតម្លៃសិស្ស
1
2
3
4
5
6
ថ្នាក់:
-- ទាំងអស់ --
1A
1B
2A
2B
3A
3B
4A
4B
5A
5B
6A
6B
<button onclick="filterData()">🔍 ចម្រាញ់</button>
<button class="success" onclick="addNewStudent()">➕ បន្ថែមសិស្ស</button>
<button class="danger" onclick="clearAllData()">🗑️ លុបទាំងអស់</button>
<button onclick="downloadData()">⬇️ ទាញយក CSV</button>
</div>
ល.រ
គោត្តនាម
នាម
ភេទ
ថ្នាក់
មុខវិជ្ជា
ពិន្ទុតាមខែ
សកម្មភាព
មករា
កុម្ភៈ
មិនា
មេសា
ឧសភា
មិថុនា
កក្កដា
សីហា
កញ្ញា
តុលា
វិច្ឆិកា
ធ្នូ
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
ដើម
ចុង
<script>
const STORAGE_KEY = 'student_grades_data';
const months = ['មករា', 'កុម្ភៈ', 'មិនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ'];
const subjects = ['ភាសាខ្មែរ', 'គណិតវិទ្យា', 'វិទ្យាសាស្ត្រ', 'សង្គមសាស្ត្រ'];
const grades = ['A', 'B', 'C', 'D', 'E', 'F'];
function loadData() {
const data = localStorage.getItem(STORAGE_KEY);
return data ? JSON.parse(data) : [];
}
function saveData(data) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
showMessage('✓ រក្សាទុកបានគ្រប់គ្រាន់', 'success');
}
function showMessage(text, type) {
const msg = document.getElementById('message');
msg.textContent = text;
msg.className = 'message ' + type;
setTimeout(() => { msg.className = 'message'; }, 3000);
}
function addNewStudent() {
const family = prompt('គោត្តនាម:');
if (!family) return;
const name = prompt('នាម:');
if (!name) return;
const gender = prompt('ភេទ (ប្រុស/ស្រី):');
if (!gender) return;
const studentClass = prompt('ថ្នាក់ (1A, 1B, 2A, 2B):');
if (!studentClass) return;
const data = loadData();
const studentId = Date.now();
// Create 4 subjects × 12 months × 2 (ដើម/ចុង)
const gradeData = {};
subjects.forEach(subject => {
gradeData[subject] = {};
months.forEach(month => {
gradeData[subject][month] = { start: 'A', end: 'A' };
});
});
data.push({
id: studentId,
family: family,
name: name,
gender: gender,
class: studentClass,
grades: gradeData
});
saveData(data);
filterData();
}
function updateGrade(studentId, subject, month, type, value) {
const data = loadData();
const student = data.find(s => s.id === studentId);
if (student) {
student.grades[subject][month][type] = value;
saveData(data);
}
}
function deleteStudent(studentId) {
if (!confirm('តើលុបសិស្សនេះដែរទេ?')) return;
const data = loadData();
const filtered = data.filter(s => s.id !== studentId);
localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered));
showMessage('✓ លុបបានគ្រប់គ្រាន់', 'success');
filterData();
}
function clearAllData() {
if (!confirm('តើលុបទិន្នន័យទាំងអស់ដែរទេ? វាមិនអាចត្រឡប់វិញបានទេ!')) return;
localStorage.removeItem(STORAGE_KEY);
showMessage('✓ លុបទាំងអស់បានគ្រប់គ្រាន់', 'success');
filterData();
}
function generateTabs() {
const data = loadData();
const classes = ['1A', '1B', '2A', '2B'].filter(c => data.some(s => s.class === c));
const tabsContainer = document.getElementById('tabsContainer');
let html = '';
html += 'ទាំងអស់';
classes.forEach(cls => {
html += 'ថ្នាក់ ' + cls + '';
});
html += '';
tabsContainer.innerHTML = html;
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(btn => {
btn.addEventListener('click', function() {
tabBtns.forEach(b => b.classList.remove('active'));
this.classList.add('active');
document.getElementById('classFilter').value = this.dataset.class;
filterData();
});
});
}
function filterData() {
const classFilter = document.getElementById('classFilter').value;
let data = loadData();
if (classFilter) {
data = data.filter(s => s.class === classFilter);
}
renderTable(data);
}
function renderTable(data) {
const tbody = document.getElementById('tableBody');
tbody.innerHTML = '';
if (data.length === 0) {
tbody.innerHTML = 'គ្មានទិន្នន័យ';
return;
}
data.forEach((student, studentIdx) => {
subjects.forEach((subject, subIdx) => {
const tr = document.createElement('tr');
let gradeCells = '';
months.forEach(month => {
const gradeStart = student.grades[subject][month].start;
const gradeEnd = student.grades[subject][month].end;
gradeCells += `
A
B
C
D
E
F
A
B
C
D
E
F
`;
});
let rowHTML = '';
// Add rowspan for first subject only
if (subIdx === 0) {
rowHTML = `
${studentIdx + 1}
$ {student.family}
${student.name}
$ {student.gender}
${student.class}
`;
}
rowHTML += `
$ {subject}
${gradeCells}
$ {subIdx === 0 ? `លុប` : ''}
`;
tr.innerHTML = rowHTML;
tbody.appendChild(tr);
});
});
}
function downloadData() {
const data = loadData();
if (data.length === 0) {
showMessage('គ្មានទិន្នន័យដែលត្រូវទាញយក', 'error');
return;
}
let csv = 'គោត្តនាម,នាម,ភេទ,ថ្នាក់,មុខវិជ្ជា,';
// Header with months
months.forEach(month => {
csv += month + ' ដើម,' + month + ' ចុង,';
});
csv = csv.slice(0, -1) + '\n';
// Data rows
data.forEach(student => {
subjects.forEach(subject => {
const row = [student.family, student.name, student.gender, student.class, subject];
months.forEach(month => {
const grade = student.grades[subject][month];
row.push(grade.start);
row.push(grade.end);
});
csv += '"' + row.join('","') + '"\n';
});
});
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'student_grades_' + new Date().toISOString().slice(0,10) + '.csv';
link.click();
showMessage('✓ ទាញយកបានគ្រប់គ្រាន់', 'success');
}
// Initialize with sample data
function initializeSampleData() {
const existingData = localStorage.getItem(STORAGE_KEY);
if (existingData) return; // Don't overwrite if data exists
const sampleStudents = [
{
id: 1000,
family: 'រង្វង់',
name: 'ឆាយ',
gender: 'ប្រុស',
class: '1A',
grades: createEmptyGrades(['A','B','A','B','A','B','A','B','A','B','A','B'])
},
{
id: 1001,
family: 'កម្ពុល',
name: 'ស៉ូម',
gender: 'ស្រី',
class: '1A',
grades: createEmptyGrades(['A','A','B','B','A','A','B','B','A','A','B','B'])
},
{
id: 1002,
family: 'ដេវ',
name: 'ធារា',
gender: 'ស្រី',
class: '1B',
grades: createEmptyGrades(['B','C','B','C','B','C','B','C','B','C','B','C'])
},
{
id: 1003,
family: 'សឹម',
name: 'ថាម',
gender: 'ប្រុស',
class: '1B',
grades: createEmptyGrades(['C','D','C','D','C','D','C','D','C','D','C','D'])
},
}
id: 1000,
family: 'រង្វង់',
name: 'ឆាយ',
gender: 'ប្រុស',
class: '1',
grades: createEmptyGrades(['A','B','A','B','A','B','A','B','A','B','A','B'])
},
{
id: 1001,
family: 'កម្ពុល',
name: 'ស៉ូម',
gender: 'ស្រី',
class: '1',
grades: createEmptyGrades(['A','A','B','B','A','A','B','B','A','A','B','B'])
},
{
id: 1002,
family: 'ដេវ',
name: 'ធារា',
gender: 'ស្រី',
class: '2',
grades: createEmptyGrades(['B','C','B','C','B','C','B','C','B','C','B','C'])
},
{
id: 1003,
family: 'សឹម',
name: 'ថាម',
gender: 'ប្រុស',
class: '2',
grades: createEmptyGrades(['C','D','C','D','C','D','C','D','C','D','C','D'])
}
];
localStorage.setItem(STORAGE_KEY, JSON.stringify(sampleStudents));
}
function createEmptyGrades(grades) {
const gradeData = {};
subjects.forEach(subject => {
gradeData[subject] = {};
months.forEach((month, idx) => {
gradeData[subject][month] = {
start: grades[idx * 2 % grades.length],
end: grades[(idx * 2 + 1) % grades.length]
};
});
});
return gradeData;
}
// Initial render
document.addEventListener('DOMContentLoaded', () => {
initializeSampleData();
generateTabs();
filterData();
});
</script>
ថ្នាក់:
-- ទាំងអស់ --
1A
1B
2A
2B
3A
3B
4A
4B
5A
5B
6A
6B
<button onclick="filterData()">🔍 ចម្រាញ់</button>
<button class="success" onclick="addNewStudent()">➕ បន្ថែមសិស្ស</button>
<button class="danger" onclick="clearAllData()">🗑️ លុបទាំងអស់</button>
<button onclick="downloadData()">⬇️ ទាញយក CSV</button>
</div>
| ល.រ | គោត្តនាម | នាម | ភេទ | ថ្នាក់ | មុខវិជ្ជា | ពិន្ទុតាមខែ | សកម្មភាព | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| មករា | កុម្ភៈ | មិនា | មេសា | ឧសភា | មិថុនា | កក្កដា | សីហា | កញ្ញា | តុលា | វិច្ឆិកា | ធ្នូ | |||||||||||||||||||
| ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | ដើម | ចុង | |||||||