projekt/index.html

339 lines
17 KiB
HTML
Raw Normal View History

2024-10-16 08:40:14 +00:00
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ocena Zachowania</title>
2024-10-16 09:11:17 +00:00
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
input[type="number"], input[type="checkbox"] {
transform: scale(1.2);
}
button {
padding: 10px;
margin: 10px 5px;
font-size: 16px;
}
#stats {
margin-top: 20px;
}
.tab {
display: none;
}
.active {
display: block;
}
</style>
2024-10-16 08:40:14 +00:00
</head>
<body>
2024-10-16 09:11:17 +00:00
<h1>Ocena Zachowania</h1>
2024-10-16 08:40:14 +00:00
<div>
2024-10-16 09:11:17 +00:00
<button onclick="showTab('points')">Ustal punkty</button>
<button onclick="showTab('criteria')">Kryteria oceny</button>
<button onclick="showTab('stats')">Statystyka</button>
</div>
<div id="points" class="tab active">
<h2>Ustal punkty dla kryteriów</h2>
<table>
<thead>
<tr>
<th>Kryterium</th>
<th>Punkty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Frekwencja 95-100%</td>
<td><input type="number" id="frekwencja-punkty" value="30" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Brak godzin nieusprawiedliwionych</td>
<td><input type="number" id="brak-godzin-punkty" value="20" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Minimum 85% frekwencja</td>
<td><input type="number" id="min-85-punkty" value="20" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Udział w etapie szkolnym olimpiady</td>
<td><input type="number" id="etap-szkolny-punkty" value="5" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Udział w etapie rejonowym olimpiady</td>
<td><input type="number" id="etap-rejonowy-punkty" value="5" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Udział w etapie wojewódzkim olimpiady</td>
<td><input type="number" id="etap-wojewodzki-punkty" value="10" onchange="calculateStats()"></td>
</tr>
<tr>
<td>Udział w etapie ogólnopolskim olimpiady</td>
<td><input type="number" id="etap-ogolnopolski-punkty" value="10" onchange="calculateStats()"></td>
</tr>
</tbody>
</table>
</div>
<div id="criteria" class="tab">
<h2>Kryteria oceny zachowania - <span id="current-date"></span></h2>
<div>
<button onclick="changeDay(-1)">Poprzedni Dzień</button>
<button onclick="changeDay(1)">Następny Dzień</button>
</div>
<table>
<thead>
<tr>
<th rowSpan="2">Uczeń</th>
<th colspan="3">Frekwencja</th>
<th colspan="4">Olimpiady</th>
<th colspan="2">Konkursy Szkolne</th>
<th colspan="3">Reprezentacja Szkoły</th>
<th colspan="5">Aktywność</th>
</tr>
<tr>
<th>Frekwencja 95-100%</th>
<th>Brak godzin nieusprawiedliwionych</th>
<th>Minimum 85% frekwencja</th>
<th>Etap szkolny</th>
<th>Etap rejonowy</th>
<th>Etap wojewódzki</th>
<th>Etap ogólnopolski</th>
<th>Udział w konkursach</th>
<th>Wyróżnienie w konkursie</th>
<th>Reprezentacja indywidualna</th>
<th>Reprezentacja zespołowa</th>
<th>Udział w zawodach</th>
<th>Organizacja imprez</th>
<th>Funkcje w klasie</th>
<th>Uroczystości okolicznościowe</th>
<th>Udział w poczcie sztandarowym</th>
<th>Pomoc nauczycielowi</th>
<th>Wolontariat</th>
</tr>
</thead>
<tbody id="student-table">
<!-- Dane uczniów będą generowane dynamicznie -->
</tbody>
</table>
</div>
<div id="stats" class="tab">
<h2>Statystyka dla wszystkich dni</h2>
<div id="stats"></div>
2024-10-16 08:40:14 +00:00
</div>
2024-10-16 09:11:17 +00:00
<script>
let currentDay = 0;
const baseDate = new Date();
const studentsData = [
{ name: "Jan Kowalski", behavior: {} },
{ name: "Anna Nowak", behavior: {} },
{ name: "Piotr Wiśniewski", behavior: {} },
{ name: "Katarzyna Zielińska", behavior: {} }
];
function showTab(tabName) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
if (tabName === 'criteria') {
loadDayData();
} else if (tabName === 'points') {
calculateStats();
}
}
function generateTable() {
const table = document.getElementById('student-table');
table.innerHTML = '';
studentsData.forEach(student => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${student.name}</td>
<td><input type="checkbox" id="frekwencja-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="brak-godzin-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="min-85-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="etap-szkolny-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="etap-rejonowy-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="etap-wojewodzki-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="etap-ogolnopolski-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="udzial-konkurs-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="wyroznienie-konkurs-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="reprezentacja-indywidualna-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="reprezentacja-zespolowa-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="udzial-zawody-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="organizacja-imprez-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="funkcja-klasa-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="uroczystosci-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="poczta-sztandar-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="pomoc-nauczyciel-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
<td><input type="checkbox" id="wolontariat-${student.name.replace(' ', '-')}" onchange="calculateStats()"></td>
`;
table.appendChild(row);
});
}
function changeDay(direction) {
saveDayData();
currentDay += direction;
const newDate = new Date(baseDate);
newDate.setDate(baseDate.getDate() + currentDay);
document.getElementById('current-date').innerText = newDate.toLocaleDateString();
loadDayData();
}
function loadDayData() {
studentsData.forEach(student => {
const studentId = student.name.replace(' ', '-');
const behavior = student.behavior[`day${currentDay}`] || {};
document.getElementById(`frekwencja-${studentId}`).checked = behavior.frekwencja || false;
document.getElementById(`brak-godzin-${studentId}`).checked = behavior.brak_godzin || false;
document.getElementById(`min-85-${studentId}`).checked = behavior.min_85 || false;
document.getElementById(`etap-szkolny-${studentId}`).checked = behavior.etap_szkolny || false;
document.getElementById(`etap-rejonowy-${studentId}`).checked = behavior.etap_rejonowy || false;
document.getElementById(`etap-wojewodzki-${studentId}`).checked = behavior.etap_wojewodzki || false;
document.getElementById(`etap-ogolnopolski-${studentId}`).checked = behavior.etap_ogolnopolski || false;
document.getElementById(`udzial-konkurs-${studentId}`).checked = behavior.udzial_konkurs || false;
document.getElementById(`wyroznienie-konkurs-${studentId}`).checked = behavior.wyroznienie_konkurs || false;
document.getElementById(`reprezentacja-indywidualna-${studentId}`).checked = behavior.reprezentacja_indywidualna || false;
document.getElementById(`reprezentacja-zespolowa-${studentId}`).checked = behavior.reprezentacja_zespolowa || false;
document.getElementById(`udzial-zawody-${studentId}`).checked = behavior.udzial_zawody || false;
document.getElementById(`organizacja-imprez-${studentId}`).checked = behavior.organizacja_imprez || false;
document.getElementById(`funkcja-klasa-${studentId}`).checked = behavior.funkcja_klasa || false;
document.getElementById(`uroczystosci-${studentId}`).checked = behavior.uroczystosci || false;
document.getElementById(`poczta-sztandar-${studentId}`).checked = behavior.poczta_sztandar || false;
document.getElementById(`pomoc-nauczyciel-${studentId}`).checked = behavior.pomoc_nauczyciel || false;
document.getElementById(`wolontariat-${studentId}`).checked = behavior.wolontariat || false;
});
calculateStats();
}
function saveDayData() {
studentsData.forEach(student => {
const studentId = student.name.replace(' ', '-');
const behavior = {
frekwencja: document.getElementById(`frekwencja-${studentId}`).checked,
brak_godzin: document.getElementById(`brak-godzin-${studentId}`).checked,
min_85: document.getElementById(`min-85-${studentId}`).checked,
etap_szkolny: document.getElementById(`etap-szkolny-${studentId}`).checked,
etap_rejonowy: document.getElementById(`etap-rejonowy-${studentId}`).checked,
etap_wojewodzki: document.getElementById(`etap-wojewodzki-${studentId}`).checked,
etap_ogolnopolski: document.getElementById(`etap-ogolnopolski-${studentId}`).checked,
udzial_konkurs: document.getElementById(`udzial-konkurs-${studentId}`).checked,
wyroznienie_konkurs: document.getElementById(`wyroznienie-konkurs-${studentId}`).checked,
reprezentacja_indywidualna: document.getElementById(`reprezentacja-indywidualna-${studentId}`).checked,
reprezentacja_zespolowa: document.getElementById(`reprezentacja-zespolowa-${studentId}`).checked,
udzial_zawody: document.getElementById(`udzial-zawody-${studentId}`).checked,
organizacja_imprez: document.getElementById(`organizacja-imprez-${studentId}`).checked,
funkcja_klasa: document.getElementById(`funkcja-klasa-${studentId}`).checked,
uroczystosci: document.getElementById(`uroczystosci-${studentId}`).checked,
poczta_sztandar: document.getElementById(`poczta-sztandar-${studentId}`).checked,
pomoc_nauciciel: document.getElementById(`pomoc-nauczyciel-${studentId}`).checked,
wolontariat: document.getElementById(`wolontariat-${studentId}`).checked
};
student.behavior[`day${currentDay}`] = behavior;
});
}
function calculateStats() {
const frekwencjaPoints = parseInt(document.getElementById('frekwencja-punkty').value);
const brakGodzinPoints = parseInt(document.getElementById('brak-godzin-punkty').value);
const min85Points = parseInt(document.getElementById('min-85-punkty').value);
const etapSzkolnyPoints = parseInt(document.getElementById('etap-szkolny-punkty').value);
const etapRejonowyPoints = parseInt(document.getElementById('etap-rejonowy-punkty').value);
const etapWojewodzkiPoints = parseInt(document.getElementById('etap-wojewodzki-punkty').value);
const etapOgolnopolskiPoints = parseInt(document.getElementById('etap-ogolnopolski-punkty').value);
const udzialKonkursPoints = 5; // stała wartość
const wyroznienieKonkursPoints = 10; // stała wartość
const reprezentacjaIndPoints = 5; // stała wartość
const reprezentacjaZesPoints = 10; // stała wartość
const udzialZawodyPoints = 15; // stała wartość
const organizacjaImprezPoints = 10; // stała wartość
const funkcjaKlasyPoints = 10; // stała wartość
const uroczystosciPoints = 10; // stała wartość
const pocztaSztandarPoints = 20; // stała wartość
const pomocNauczycielaPoints = 10; // stała wartość
const wolontariatPoints = 10; // stała wartość
let stats = '';
studentsData.forEach(student => {
let totalPoints = 0;
Object.keys(student.behavior).forEach(day => {
const behavior = student.behavior[day];
let dayPoints = 0; // Startowa liczba punktów
if (behavior.frekwencja) dayPoints += frekwencjaPoints;
if (behavior.brak_godzin) dayPoints += brakGodzinPoints;
if (behavior.min_85) dayPoints += min85Points;
if (behavior.etap_szkolny) dayPoints += etapSzkolnyPoints;
if (behavior.etap_rejonowy) dayPoints += etapRejonowyPoints;
if (behavior.etap_wojewodzki) dayPoints += etapWojewodzkiPoints;
if (behavior.etap_ogolnopolski) dayPoints += etapOgolnopolskiPoints;
if (behavior.udzial_konkurs) dayPoints += udzialKonkursPoints;
if (behavior.wyroznienie_konkurs) dayPoints += wyroznienieKonkursPoints;
if (behavior.reprezentacja_indywidualna) dayPoints += reprezentacjaIndPoints;
if (behavior.reprezentacja_zespolowa) dayPoints += reprezentacjaZesPoints;
if (behavior.udzial_zawody) dayPoints += udzialZawodyPoints;
if (behavior.organizacja_imprez) dayPoints += organizacjaImprezPoints;
if (behavior.funkcja_klasa) dayPoints += funkcjaKlasyPoints;
if (behavior.uroczystosci) dayPoints += uroczystosciPoints;
if (behavior.poczta_sztandar) dayPoints += pocztaSztandarPoints;
if (behavior.pomoc_nauciciel) dayPoints += pomocNauczycielaPoints;
if (behavior.wolontariat) dayPoints += wolontariatPoints;
totalPoints += dayPoints;
});
stats += `${student.name}: ${totalPoints} punktów (${getGrade(totalPoints)})\n`;
});
document.getElementById('stats').innerText = stats;
}
function getGrade(points) {
if (points >= 250) return "Wzorowe";
if (points >= 180) return "Bardzo dobre";
if (points >= 100) return "Dobre";
if (points >= 50) return "Poprawne";
if (points >= 0) return "Nieodpowiednie";
return "Naganne";
}
// Ustawienie daty na dziś
document.getElementById('current-date').innerText = baseDate.toLocaleDateString();
// Generowanie tabeli przy starcie
generateTable();
</script>
2024-10-16 08:40:14 +00:00
</body>
</html>