📄 Source: solve.php
<?php
session_start();
require_once 'config.php';
$quizId = $_GET['id'] ?? '';
$quiz = loadQuiz($quizId);
$error = "";
$submitted = false;
$score = 0;
$results = [];
$username = "";
$alreadySubmitted = false;
if (!$quiz) {
$error = "Quiz-ul nu a fost găsit!";
}
if ($_SERVER["REQUEST_METHOD"] === "POST" && $quiz) {
$username = trim($_POST['username'] ?? '');
$answers = $_POST['answers'] ?? [];
if (empty($username)) {
$error = "Te rog introdu un nume!";
} elseif (hasUserSubmitted($quiz, $username)) {
$alreadySubmitted = true;
$error = "Ai mai răspuns deja la acest quiz!";
} else {
$total = count($quiz['questions']);
$userAnswers = [];
foreach ($quiz['questions'] as $idx => $q) {
$userAnswer = $answers[$idx] ?? '';
$isCorrect = false;
if ($q['type'] === 'text') {
$isCorrect = strtolower(trim($userAnswer)) == strtolower(trim($q['correct']));
} else {
if (isset($q['multiple_correct']) && $q['multiple_correct']) {
$userAnswersArray = is_array($userAnswer) ? $userAnswer : explode(',', $userAnswer);
$correctAnswersArray = is_array($q['correct']) ? $q['correct'] : [$q['correct']];
sort($userAnswersArray);
sort($correctAnswersArray);
$isCorrect = $userAnswersArray == $correctAnswersArray;
$userAnswer = implode(', ', $userAnswersArray);
} else {
$isCorrect = $userAnswer == $q['correct'];
}
}
if ($isCorrect) $score++;
$userAnswers[] = [
'question' => $q['text'],
'user_answer' => $userAnswer ?: '(niciun răspuns)',
'correct_answer' => is_array($q['correct']) ? implode(', ', $q['correct']) : $q['correct'],
'is_correct' => $isCorrect
];
}
$submission = [
'username' => $username,
'score' => $score,
'total' => $total,
'answers' => $userAnswers,
'submitted_at' => date('Y-m-d H:i:s')
];
$quiz['submissions'][] = $submission;
saveQuiz($quizId, $quiz);
$submitted = true;
$results = $userAnswers;
}
}
?>
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $quiz ? 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>
.result-card {
background: var(--bg-card);
border-radius: 1rem;
margin-bottom: 1rem;
overflow: hidden;
border: 1px solid var(--border-color);
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
cursor: pointer;
transition: all 0.2s;
}
.result-header:hover {
background: var(--code-bg);
}
.result-header.correct {
border-left: 4px solid var(--success);
}
.result-header.wrong {
border-left: 4px solid var(--error);
}
.result-question {
font-weight: 600;
flex: 1;
}
.result-status {
padding: 0.2rem 0.8rem;
border-radius: 2rem;
font-size: 0.8rem;
}
.result-status.correct {
background: var(--success);
color: white;
}
.result-status.wrong {
background: var(--error);
color: white;
}
.toggle-icon {
font-size: 1.2rem;
margin-left: 0.5rem;
transition: transform 0.2s;
}
.toggle-icon.rotated {
transform: rotate(180deg);
}
.result-details {
display: none;
padding: 1rem;
border-top: 1px solid var(--border-color);
background: var(--code-bg);
}
.result-details.show {
display: block;
}
.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>🎯 <?php echo $quiz ? htmlspecialchars($quiz['title']) : 'Quiz inexistent'; ?></h1>
</header>
<?php if ($error && !$alreadySubmitted): ?>
<div class="error-message">⚠️ <?php echo htmlspecialchars($error); ?></div>
<?php endif; ?>
<?php if ($alreadySubmitted && !$submitted): ?>
<div class="error-message">⚠️ <?php echo htmlspecialchars($error); ?></div>
<div style="text-align: center; margin-top: 1rem;">
<a href="solve.php?id=<?php echo $quizId; ?>" class="back-link">🔄 Vezi leaderboard</a>
</div>
<?php endif; ?>
<?php if ($quiz && !$submitted && !$alreadySubmitted): ?>
<form method="POST" action="" id="quizSolveForm">
<div class="input-field">
<label>👤 Numele tău</label>
<input type="text" name="username" placeholder="Cum te numești?" required>
</div>
<?php foreach ($quiz['questions'] as $idx => $q): ?>
<div class="solve-question" data-qidx="<?php echo $idx; ?>">
<div class="question-text">
<span style="background: var(--info); color: white; padding: 0.2rem 0.6rem; border-radius: 2rem; font-size: 0.8rem;">#<?php echo $idx + 1; ?></span>
<?php echo htmlspecialchars($q['text']); ?>
<?php if (isset($q['multiple_correct']) && $q['multiple_correct']): ?>
<span style="background: var(--warning); color: white; padding: 0.2rem 0.6rem; border-radius: 2rem; font-size: 0.7rem; margin-left: 0.5rem;">📌 Răspuns multiplu</span>
<?php endif; ?>
</div>
<?php if ($q['type'] === 'text'): ?>
<input type="text" class="text-answer" name="answers[<?php echo $idx; ?>]" placeholder="Scrie răspunsul aici...">
<?php else: ?>
<div class="answer-buttons">
<?php foreach ($q['options'] as $optIdx => $option): ?>
<?php if (isset($q['multiple_correct']) && $q['multiple_correct']): ?>
<button type="button" class="answer-btn" data-value="<?php echo htmlspecialchars($option); ?>" data-idx="<?php echo $idx; ?>" onclick="toggleMultipleAnswer(this, <?php echo $idx; ?>)">
<?php echo htmlspecialchars($option); ?>
</button>
<?php else: ?>
<button type="button" class="answer-btn" data-value="<?php echo htmlspecialchars($option); ?>" onclick="selectAnswer(this, <?php echo $idx; ?>)">
<?php echo htmlspecialchars($option); ?>
</button>
<?php endif; ?>
<?php endforeach; ?>
</div>
<input type="hidden" name="answers[<?php echo $idx; ?>]" id="answer_<?php echo $idx; ?>">
<?php endif; ?>
</div>
<?php endforeach; ?>
<button type="submit" class="btn-primary" style="width: 100%; background: var(--btn-success);">✅ Trimite răspunsurile</button>
</form>
<div class="leaderboard">
<h3>🏆 Clasament</h3>
<?php
$sorted = $quiz['submissions'];
usort($sorted, function($a, $b) {
return $b['score'] <=> $a['score'];
});
?>
<?php if (empty($sorted)): ?>
<p>Niciun răspuns încă. Fii primul!</p>
<?php else: ?>
<?php foreach (array_slice($sorted, 0, 10) as $idx => $sub): ?>
<div class="leaderboard-item <?php echo $idx == 0 ? 'rank-1' : ($idx == 1 ? 'rank-2' : ($idx == 2 ? 'rank-3' : '')); ?>">
<span>#<?php echo $idx + 1; ?> <?php echo htmlspecialchars($sub['username']); ?></span>
<span>🎯 <?php echo $sub['score']; ?>/<?php echo $sub['total']; ?></span>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php elseif ($quiz && $submitted): ?>
<div class="score-card">
<div class="score-number"><?php echo $score; ?> / <?php echo count($results); ?></div>
<div>Scorul tău, <?php echo htmlspecialchars($username); ?>!</div>
<?php
$percentage = ($score / count($results)) * 100;
if ($percentage == 100) echo "<div>🎉 Perfect! Ești campion!</div>";
elseif ($percentage >= 80) echo "<div>🌟 Excelent!</div>";
elseif ($percentage >= 60) echo "<div>👍 Bine!</div>";
elseif ($percentage >= 40) echo "<div>📚 Mai studiază!</div>";
else echo "<div>💪 Încearcă din nou!</div>";
?>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="margin: 0;">📋 Corectură detaliată</h3>
<button class="expand-all-btn" onclick="toggleAllResults()">🔓 Arată toate detaliile</button>
</div>
<?php foreach ($results as $idx => $res): ?>
<div class="result-card">
<div class="result-header <?php echo $res['is_correct'] ? 'correct' : 'wrong'; ?>" onclick="toggleResult(this)">
<span class="result-question">
<strong><?php echo ($idx + 1) . '. ' . htmlspecialchars($res['question']); ?></strong>
</span>
<span class="result-status <?php echo $res['is_correct'] ? 'correct' : 'wrong'; ?>">
<?php echo $res['is_correct'] ? '✓ Corect' : '✗ Greșit'; ?>
</span>
<span class="toggle-icon">▼</span>
</div>
<div class="result-details">
<div>📝 Răspunsul tău: <strong><?php echo htmlspecialchars($res['user_answer']); ?></strong></div>
<?php if (!$res['is_correct']): ?>
<div>✅ Răspuns corect: <strong><?php echo htmlspecialchars($res['correct_answer']); ?></strong></div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<div class="leaderboard">
<h3>🏆 Clasament final</h3>
<?php
$sorted = $quiz['submissions'];
usort($sorted, function($a, $b) {
return $b['score'] <=> $a['score'];
});
?>
<?php foreach (array_slice($sorted, 0, 10) as $idx => $sub): ?>
<div class="leaderboard-item <?php echo $idx == 0 ? 'rank-1' : ($idx == 1 ? 'rank-2' : ($idx == 2 ? 'rank-3' : '')); ?>">
<span>#<?php echo $idx + 1; ?> <?php echo htmlspecialchars($sub['username']); ?></span>
<span>🎯 <?php echo $sub['score']; ?>/<?php echo $sub['total']; ?></span>
</div>
<?php endforeach; ?>
</div>
<div style="text-align: center; margin-top: 1rem;">
<a href="solve.php?id=<?php echo $quizId; ?>" class="back-link" style="color: var(--info);">🔄 Vezi leaderboard</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 o întrebare pentru a vedea detaliile | Buton "Arată toate" pentru expansiune rapidă</p>
</footer>
</div>
<script>
let selectedMultipleAnswers = {};
function selectAnswer(btn, qidx) {
const container = btn.closest('.solve-question');
const buttons = container.querySelectorAll('.answer-btn');
buttons.forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
const hiddenInput = document.getElementById(`answer_${qidx}`);
if (hiddenInput) {
hiddenInput.value = btn.getAttribute('data-value');
}
}
function toggleMultipleAnswer(btn, qidx) {
if (!selectedMultipleAnswers[qidx]) {
selectedMultipleAnswers[qidx] = [];
}
const value = btn.getAttribute('data-value');
const index = selectedMultipleAnswers[qidx].indexOf(value);
if (index > -1) {
selectedMultipleAnswers[qidx].splice(index, 1);
btn.classList.remove('selected');
} else {
selectedMultipleAnswers[qidx].push(value);
btn.classList.add('selected');
}
const hiddenInput = document.getElementById(`answer_${qidx}`);
if (hiddenInput) {
hiddenInput.value = selectedMultipleAnswers[qidx].join(',');
}
}
function toggleResult(header) {
const card = header.closest('.result-card');
const details = card.querySelector('.result-details');
const icon = header.querySelector('.toggle-icon');
details.classList.toggle('show');
icon.classList.toggle('rotated');
}
function toggleAllResults() {
const allDetails = document.querySelectorAll('.result-details');
const allIcons = document.querySelectorAll('.result-header .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