Jannik/Quizalarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Refresh & Logic Updates: New answer color scheme, improved Boolean/Number handling for results, and localized formatting.

Browse Source
This commit is contained in:
Jannik
2026-04-16 20:40:27 +02:00
parent 604d23bcdf
commit 2c352b2392
5 changed files with 41 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/admin.js
+20 -30
View File
@@ -158,8 +158,9 @@ function StatsPage() {
const u = a['Nutzername'] || 'Unbekannt';
if (!users[u]) users[u] = { total: 0, correct: 0, points: 0 };
users[u].total++;
if (a['Richtig']) users[u].correct++;
users[u].points += a['Punkte'] || 0;
const richtig = a['Richtig'];
if (richtig === true || richtig === 'true' || richtig === 1) users[u].correct++;
users[u].points += Number(a['Punkte']) || 0;
});
return (
@@ -167,21 +168,11 @@ function StatsPage() {
<div className="bg-white rounded-xl shadow p-6">
<h2 className="text-xl font-bold mb-4">📊 Übersicht</h2>
<div className="grid grid-cols-3 gap-4 text-center">
<div className="bg-red-50 rounded-lg p-4">
<div className="text-2xl font-bold text-red-600">{Object.keys(sessions).length}</div>
<div className="text-sm text-gray-500">Sessions</div>
</div>
<div className="bg-amber-50 rounded-lg p-4">
<div className="text-2xl font-bold text-amber-600">{Object.keys(users).length}</div>
<div className="text-sm text-gray-500">Teilnehmer</div>
</div>
<div className="bg-orange-50 rounded-lg p-4">
<div className="text-2xl font-bold text-orange-600">{data.answers.length}</div>
<div className="text-sm text-gray-500">Antworten</div>
</div>
<div className="bg-red-50 rounded-lg p-4"><div className="text-2xl font-bold text-red-600">{Object.keys(sessions).length}</div><div className="text-sm text-gray-500">Sessions</div></div>
<div className="bg-amber-50 rounded-lg p-4"><div className="text-2xl font-bold text-amber-600">{Object.keys(users).length}</div><div className="text-sm text-gray-500">Teilnehmer</div></div>
<div className="bg-orange-50 rounded-lg p-4"><div className="text-2xl font-bold text-orange-600">{data.answers.length}</div><div className="text-sm text-gray-500">Antworten</div></div>
</div>
</div>
<div className="bg-white rounded-xl shadow p-6">
<h3 className="text-lg font-bold mb-3">👤 Pro Teilnehmer</h3>
<input className="w-full p-2 border rounded-lg mb-3 focus:border-red-500 outline-none" placeholder="Filtern..." value={filter} onChange={(e) => setFilter(e.target.value)} />
@@ -189,28 +180,27 @@ function StatsPage() {
<table className="w-full text-sm">
<thead><tr className="border-b"><th className="text-left py-2">Name</th><th>Richtig</th><th>Gesamt</th><th>Quote</th><th>Punkte</th></tr></thead>
<tbody>
{Object.entries(users)
.filter(([u]) => !filter || u.toLowerCase().includes(filter.toLowerCase()))
.sort(([, a], [, b]) => b.points - a.points)
.map(([u, v]) => (
<tr key={u} className="border-b last:border-0">
<td className="py-2 font-medium">{u}</td>
<td className="text-center text-green-600">{v.correct}</td>
<td className="text-center">{v.total}</td>
<td className="text-center">{Math.round((v.correct / v.total) * 100)}%</td>
<td className="text-center font-bold">{v.points}</td>
</tr>
))}
{Object.entries(users).filter(([u]) => !filter || u.toLowerCase().includes(filter.toLowerCase())).sort(([, a], [, b]) => b.points - a.points).map(([u, v]) => (
<tr key={u} className="border-b last:border-0">
<td className="py-2 font-medium">{u}</td>
<td className="text-center text-green-600">{v.correct}</td>
<td className="text-center">{v.total}</td>
<td className="text-center">{Math.round((v.correct / v.total) * 100)}%</td>
<td className="text-center font-bold">{v.points.toLocaleString('de')}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="bg-white rounded-xl shadow p-6">
<h3 className="text-lg font-bold mb-3">📁 Sessions</h3>
{Object.entries(sessions).reverse().map(([sid, s]) => {
const total = s.answers.length;
const correct = s.answers.filter((a) => a['Richtig']).length;
const correct = s.answers.filter((a) => {
const v = a['Richtig'];
return v === true || v === 'true' || v === 1;
}).length;
const uniqueUsers = new Set(s.answers.map((a) => a['Nutzername'])).size;
return (
<div key={sid} className="border-b last:border-0 py-3">
@@ -485,7 +475,7 @@ function LiveControlPage({ token, code, ws, initialSession }) {
{result?.stats && (
<div className="grid grid-cols-2 gap-2 mb-4">
{Object.entries(result.stats).map(([k, v]) => (
<div key={k} className={`p-2 rounded-lg text-white text-center ${k === 'A' ? 'bg-red-500' : k === 'B' ? 'bg-blue-500' : k === 'C' ? 'bg-amber-500' : 'bg-green-500'}`}>
<div key={k} className={`p-2 rounded-lg text-white text-center ${k === 'A' ? 'bg-blue-500' : k === 'B' ? 'bg-purple-500' : k === 'C' ? 'bg-amber-500' : 'bg-cyan-500'}`}>
{k}: <strong>{v}</strong>
</div>
))}