📄 Source: dashboard.php
<?php
// dashboard.php - Analiză rezultate quiz cu toggle
session_start();
require_once 'config.php';
$quizId = $_GET['id'] ?? '';
$quiz = loadQuiz($quizId);
$error = "";
$authenticated = false;
if (!$quiz) {
$error = "Quiz-ul nu a fost găsit! Verifică ID-ul: " . htmlspecialchars($quizId);
}
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['password'])) {
if ($_POST['password'] === $quiz['master_password']) {
$authenticated = true;
} else {
$error = "Parolă incorectă!";
}
}
$totalParticipants = count($quiz['submissions'] ?? []);
$averageScore = 0;
$questionStats = [];
if ($totalParticipants > 0) {
$totalScoreSum = 0;
foreach ($quiz['submissions'] as $sub) {
$totalScoreSum += $sub['score'];
}
$averageScore = round($totalScoreSum / $totalParticipants, 2);
foreach ($quiz['questions'] as $qIdx => $q) {
$correctCount = 0;
foreach ($quiz['submissions'] as $sub) {
if (isset($sub['answers'][$qIdx]) && $sub['answers'][$qIdx]['is_correct']) {
$correctCount++;
}
}
$questionStats[] = [
'text' => $q['text'],
'correct_count' => $correctCount,
'percentage' => $totalParticipants > 0 ? round(($correctCount / $totalParticipants) * 100) : 0
];
}
}
?>
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard | <?php echo htmlspecialchars($quiz['title'] ?? 'Quiz'); ?></title>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
.participant-card {
background: var(--bg-card);
border-radius: 1rem;
margin-bottom: 1rem;
overflow: hidden;
border: 1px solid var(--border-color);
}
.participant-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--code-bg);
cursor: pointer;
transition: all 0.2s;
}
.participant-header:hover {
background: var(--option-bg);
}
.participant-info {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.participant-name {
font-weight: 700;
font-size: 1.1rem;
}
.participant-score {
background: var(--info);
color: white;
padding: 0.2rem 0.8rem;
border-radius: 2rem;
font-size: 0.8rem;
}
.toggle-icon {
font-size: 1.2rem;
transition: transform 0.2s;
}
.toggle-icon.rotated {
transform: rotate(180deg);
}
.participant-details {
display: none;
padding: 1rem;
border-top: 1px solid var(--border-color);
}
.participant-details.show {
display: block;
}
.answer-summary {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.summary-badge {
padding: 0.3rem 0.8rem;
border-radius: 2rem;
font-size: 0.8rem;
}
.summary-correct {
background: var(--success);
color: white;
}
.summary-wrong {
background: var(--error);
color: white;
}
.answer-item {
margin-bottom: 0.5rem;
padding: 0.5rem;
background: var(--code-bg);
border-radius: 0.5rem;
}
.answer-question {
font-weight: 600;
margin-bottom: 0.3rem;
}
.answer-user {
font-size: 0.85rem;
}
.answer-correct {
color: var(--success);
}
.answer-wrong {
color: var(--error);
}
.expand-all-btn {
background: var(--btn-primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 2rem;
cursor: pointer;
margin-bottom: 1rem;
font-size: 0.8rem;
}
</style>
</head>
<body>
<div class="theme-switcher">
<button class="theme-btn" data-theme="light">☀️</button>
<button class="theme-btn" data-theme="dark">🌙</button>
<button class="theme-btn" data-theme="ocean">🌊</button>
<button class="theme-btn" data-theme="sunset">🌅</button>
</div>
<div class="container">
<header class="header">
<h1>👑 Dashboard Master</h1>
<p class="subhead"><?php echo htmlspecialchars($quiz['title'] ?? ''); ?></p>
</header>
<?php if ($error): ?>
<div class="error-message">⚠️ <?php echo htmlspecialchars($error); ?></div>
<?php endif; ?>
<?php if (!$authenticated && $quiz && !$error): ?>
<div class="form-card">
<form method="POST" action="">
<div class="input-field">
<label>🔐 Parola master</label>
<input type="password" name="password" placeholder="Introdu parola setată la creare" required>
</div>
<button type="submit" class="btn-primary" style="margin-top: 1rem;">📊 Accesează dashboard</button>
</form>
</div>
<?php elseif ($authenticated && $quiz): ?>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number"><?php echo $totalParticipants; ?></div>
<div>participanți</div>
</div>
<div class="stat-card">
<div class="stat-number"><?php echo $averageScore; ?>/<?php echo count($quiz['questions']); ?></div>
<div>scor mediu</div>
</div>
<div class="stat-card">
<div class="stat-number"><?php echo count($quiz['questions']); ?></div>
<div>întrebări</div>
</div>
</div>
<h3>📊 Statistici pe întrebări</h3>
<?php foreach ($questionStats as $idx => $qs): ?>
<div class="question-progress">
<div><strong><?php echo ($idx + 1) . '. ' . htmlspecialchars($qs['text']); ?></strong></div>
<div><?php echo $qs['correct_count']; ?>/<?php echo $totalParticipants; ?> corecte (<?php echo $qs['percentage']; ?>%)</div>
<div class="progress-bar">
<div class="progress-fill" style="width: <?php echo $qs['percentage']; ?>%;"></div>
</div>
</div>
<?php endforeach; ?>
<div style="display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0 1rem 0; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="margin: 0;">📋 Răspunsuri participanți</h3>
<button class="expand-all-btn" onclick="toggleAllParticipants()">🔓 Arată toate detaliile</button>
</div>
<?php
$sortedSubmissions = $quiz['submissions'];
usort($sortedSubmissions, function($a, $b) {
return $b['score'] <=> $a['score'];
});
?>
<?php if (empty($sortedSubmissions)): ?>
<div class="empty-state">
<p>📭 Niciun participant încă. Partajează link-ul!</p>
</div>
<?php else: ?>
<?php foreach ($sortedSubmissions as $idx => $sub):
$totalQuestions = count($sub['answers']);
$correctCount = $sub['score'];
$wrongCount = $totalQuestions - $correctCount;
?>
<div class="participant-card" data-participant="<?php echo $idx; ?>">
<div class="participant-header" onclick="toggleParticipant(this)">
<div class="participant-info">
<span class="participant-name">👤 <?php echo htmlspecialchars($sub['username']); ?></span>
<span class="participant-score">🎯 <?php echo $sub['score']; ?>/<?php echo $sub['total']; ?></span>
<span class="summary-badge summary-correct">✓ <?php echo $correctCount; ?> corecte</span>
<span class="summary-badge summary-wrong">✗ <?php echo $wrongCount; ?> greșite</span>
<span style="font-size: 0.7rem; color: var(--text-secondary);">📅 <?php echo $sub['submitted_at']; ?></span>
</div>
<span class="toggle-icon">▼</span>
</div>
<div class="participant-details">
<?php foreach ($sub['answers'] as $aidx => $ans): ?>
<div class="answer-item">
<div class="answer-question">
<?php echo ($aidx + 1) . '. ' . htmlspecialchars($ans['question']); ?>
<?php if ($ans['is_correct']): ?>
<span style="color: var(--success);">✓</span>
<?php else: ?>
<span style="color: var(--error);">✗</span>
<?php endif; ?>
</div>
<div class="answer-user">
Răspuns: <span class="<?php echo $ans['is_correct'] ? 'answer-correct' : 'answer-wrong'; ?>">
<?php echo htmlspecialchars($ans['user_answer'] ?: '(niciun răspuns)'); ?>
</span>
<?php if (!$ans['is_correct']): ?>
<span style="font-size: 0.7rem;"> (corect: <?php echo htmlspecialchars($ans['correct_answer']); ?>)</span>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
<div style="text-align: center; margin-top: 1rem;">
<a href="solve.php?id=<?php echo $quizId; ?>" class="back-link" style="color: var(--info);">🎯 Vezi quiz-ul</a>
<a href="index.php" class="back-link" style="color: var(--info); margin-left: 1rem;">🏠 Creează alt quiz</a>
</div>
<?php endif; ?>
<footer class="footer">
<p>👑 Click pe participant pentru a vedea detaliile | Buton "Arată toate" pentru expansiune rapidă</p>
</footer>
</div>
<script>
function toggleParticipant(header) {
const card = header.closest('.participant-card');
const details = card.querySelector('.participant-details');
const icon = header.querySelector('.toggle-icon');
details.classList.toggle('show');
icon.classList.toggle('rotated');
}
function toggleAllParticipants() {
const allDetails = document.querySelectorAll('.participant-details');
const allIcons = document.querySelectorAll('.toggle-icon');
const button = document.querySelector('.expand-all-btn');
const isExpanded = button.textContent.includes('Ascunde');
if (isExpanded) {
allDetails.forEach(details => details.classList.remove('show'));
allIcons.forEach(icon => icon.classList.remove('rotated'));
button.textContent = '🔓 Arată toate detaliile';
} else {
allDetails.forEach(details => details.classList.add('show'));
allIcons.forEach(icon => icon.classList.add('rotated'));
button.textContent = '🔒 Ascunde toate detaliile';
}
}
// Teme
(function() {
const savedTheme = localStorage.getItem('quiz-theme');
if (savedTheme) document.documentElement.setAttribute('data-theme', savedTheme);
else document.documentElement.setAttribute('data-theme', 'light');
document.querySelectorAll('.theme-btn').forEach(btn => {
btn.addEventListener('click', function() {
const theme = this.getAttribute('data-theme');
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('quiz-theme', theme);
});
});
})();
</script>
</body>
</html>
← Back