qcm.php

<?php
$qcmId = $_GET['id'] ?? '';
$uid = $_GET['uid'] ?? '';

if (empty($qcmId) || empty($uid)) {
    die('Paramètres manquants');
}

// Vérifier que les fichiers existent
$qcmFile = "data/$qcmId/qcm.json";
$studentFile = "data/$qcmId/$uid.json";

if (!file_exists($qcmFile) || !file_exists($studentFile)) {
    die('QCM ou copie étudiant introuvable');
}

// Charger les données
$qcmData = json_decode(file_get_contents($qcmFile), true);
$studentData = json_decode(file_get_contents($studentFile), true);
$nbQuestions = isset($studentData['questions']) ? count($studentData['questions']) : 0;

// État de soumission et messages
$submitted = false;
$error = null;
$displayFirstName = '';
$displayLastName = '';

// Détection d'une soumission déjà existante pour cette copie
$resultFilePath = "data/$qcmId/result_$uid.json";
$alreadySubmitted = file_exists($resultFilePath);
$existingResult = null;
if ($alreadySubmitted) {
    $existingResult = json_decode(file_get_contents($resultFilePath), true);
}

// Traitement de la soumission
if (
    $_SERVER['REQUEST_METHOD'] === 'POST'
    && isset($_POST['action'])
    && $_POST['action'] === 'submit_answers'
) {
    // Bloquer toute nouvelle soumission si un résultat existe déjà
    if ($alreadySubmitted && $existingResult) {
        // Préparer l'affichage des résultats existants
        $score = $existingResult['score'];
        $correctAnswers = $existingResult['correct_answers'];
        $numQuestions = $existingResult['total_questions'];
        $results = $existingResult['results'];
        $submitted = true;
        $displayFirstName = $existingResult['student_firstname'] ?? '';
        $displayLastName = strtoupper($existingResult['student_name'] ?? '');
        $error = "Cette copie a déjà été corrigée le " . date('d/m/Y à H:i', strtotime($existingResult['submitted_at'])) . ". Re-soumission impossible.";
    } else {
        $studentCode = isset($_POST['student_code']) ? trim($_POST['student_code']) : '';
        $numQuestions = count($studentData['questions']);

        // Le code attendu est une suite de chiffres 1-4 de longueur égale au nombre de questions
        if (!preg_match('/^[1-4]{' . $numQuestions . '}$/', $studentCode)) {
            $error = "Code invalide. Entrez exactement $numQuestions chiffres compris entre 1 et 4 (ex: 13241...).";
        } else {
            // Transformer la chaîne en tableau d'entiers
            $studentAnswers = array_map('intval', str_split($studentCode));

            // Calculer la note
            $correctAnswers = 0;
            $results = [];

            foreach ($studentData['mapping'] as $index => $mapping) {
                $studentAnswer = $studentAnswers[$index];
                $correctCode = intval($mapping['correct_response_code']);
                $isCorrect = ($studentAnswer == $correctCode);

                if ($isCorrect) {
                    $correctAnswers++;
                }

                $results[] = [
                    'question_number' => $index + 1,
                    'question' => $studentData['questions'][$index]['question'],
                    'student_answer' => $studentData['questions'][$index]['choices'][$studentAnswer - 1] ?? 'Réponse invalide',
                    'correct_answer' => $studentData['questions'][$index]['choices'][$correctCode - 1],
                    'is_correct' => $isCorrect,
                    'explanation' => $mapping['explanation']
                ];
            }

            $score = round(($correctAnswers / $numQuestions) * 20, 1); // Note sur 20

            // Sauvegarder le résultat
            $resultData = [
                'uid' => $uid,
                'qcm_id' => $qcmId,
                'student_name' => isset($_POST['student_name']) ? trim($_POST['student_name']) : ($studentData['student_name'] ?? ''),
                'student_firstname' => isset($_POST['student_firstname']) ? trim($_POST['student_firstname']) : ($studentData['student_firstname'] ?? ''),
                'copy_number' => $studentData['copy_number'] ?? null,
                'submitted_at' => date('Y-m-d H:i:s'),
                'student_code' => $studentCode,
                'score' => $score,
                'correct_answers' => $correctAnswers,
                'total_questions' => $numQuestions,
                'results' => $results
            ];

            // Écrire le résultat si pas encore existant (double-check)
            if (!file_exists($resultFilePath)) {
                file_put_contents($resultFilePath, json_encode($resultData, JSON_PRETTY_PRINT));
            }

            // Préparer l'affichage
            $displayFirstName = $resultData['student_firstname'] ?? '';
            $displayLastName = strtoupper($resultData['student_name'] ?? '');
            $submitted = true;
        }
    }
}

// Si un résultat existe déjà et qu'on arrive en GET, afficher directement le résultat et masquer le formulaire
if (!$submitted && $alreadySubmitted && $existingResult) {
    $score = $existingResult['score'];
    $correctAnswers = $existingResult['correct_answers'];
    $numQuestions = $existingResult['total_questions'];
    $results = $existingResult['results'];
    $submitted = true;
    $displayFirstName = $existingResult['student_firstname'] ?? '';
    $displayLastName = strtoupper($existingResult['student_name'] ?? '');
}
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>QCM - <?php echo htmlspecialchars($qcmData['title']); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel="icon" href="favicon.ico" />
    <link type="image/png" sizes="16x16" rel="icon" href="./icons/icons8-mangue-clr-gls-16.png">
    <link type="image/png" sizes="32x32" rel="icon" href="./icons/icons8-mangue-clr-gls-32.png">
    <link type="image/png" sizes="96x96" rel="icon" href="./icons/icons8-mangue-clr-gls-96.png">
    <link type="image/png" sizes="120x120" rel="icon" href="./icons/icons8-mangue-clr-gls-120.png">
    <style>
        :root { --space: 16px; --radius: 12px; --bg: #fff8ee; --text: #1f2937; --muted: #6b7280; --accent: #f59e0b; --success: #16a34a; --danger: #dc2626; }
        html, body { height: 100%; }
        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; margin: 0; padding: 0; background: var(--bg); color: var(--text); }
        .container { max-width: 840px; margin: 0 auto; padding: clamp(12px, 2vw, 24px); }
        .card { background: #fff; border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: clamp(16px, 2.5vw, 28px); }
        
        .header { text-align: center; margin-bottom: clamp(16px, 3vw, 28px); padding-bottom: 12px; border-bottom: 1px solid #eee; }
        
        .student-info { background: #f0f9ff; padding: 14px; border-radius: 10px; margin-bottom: 18px; }
        
    .code-input-section { background: #fff7ed; padding: clamp(14px,2.5vw,20px); border-radius: 10px; margin-bottom: 20px; border-left: 4px solid #f59e0b; }
        
        .code-input { font-size: clamp(16px, 3.6vw, 20px); padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px; width: min(260px, 100%); text-align: center; letter-spacing: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; }
        
        .submit-btn { background: var(--success); color: #fff; border: none; padding: 14px 20px; font-size: 16px; border-radius: 10px; cursor: pointer; width: 100%; max-width: 380px; }
        .submit-btn:hover { filter: brightness(0.95); }
        
        .error { background: #fee2e2; color: #991b1b; padding: 12px; border-radius: 10px; margin: 12px 0; border: 1px solid #fecaca; }
        
        .results {
            margin-top: 30px;
        }
        
    .score-display { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); color: white; padding: clamp(18px, 3vw, 26px); border-radius: 14px; text-align: center; margin-bottom: 20px; }
        
        .score-number { font-size: clamp(36px, 8vw, 56px); font-weight: 800; margin: 8px 0; }
        
        .question-result { border: 1px solid #e5e7eb; border-radius: 12px; margin: 12px 0; overflow: hidden; }
        
        .question-header { padding: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: 15px; }
        
        .question-header.correct {
            background: #d4edda;
            color: #155724;
        }
        
        .question-header.incorrect {
            background: #f8d7da;
            color: #721c24;
        }
        
        .question-content { padding: 14px; background: #f9fafb; }
        
        .answer-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
        
        .answer-box { padding: 12px; border-radius: 10px; border: 1px solid #e5e7eb; font-size: 14px; }
        
        .student-answer { background: #fff7ed; border-color: #fed7aa; }
        .correct-answer { background: #ecfccb; border-color: #bbf7d0; }
        
        .explanation { background: #eef2ff; padding: 12px; border-radius: 10px; margin-top: 12px; font-style: italic; }
        
        .status-icon { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; font-weight: 800; color: white; font-size: 14px; }
        .status-icon.correct { background: #16a34a; }
        .status-icon.incorrect { background: #dc2626; }
        
        @media (max-width: 640px) {
            .card { padding: 14px; border-radius: 12px; }
            .answer-comparison { grid-template-columns: 1fr; }
            .submit-btn { width: 100%; }
            .code-input-section div[style*="grid"] { grid-template-columns: 1fr !important; }
        }
    </style>
</head>
<body>
    <div class="container card">
        <div class="header">
            <h1><?php echo htmlspecialchars($qcmData['title']); ?></h1>
            <p>Auto-correction par QR Code</p>
        </div>
        
        <div class="student-info">
            <h3>📝 Votre copie</h3>
            <?php if (!empty($studentData['student_name']) && !empty($studentData['student_firstname'])): ?>
                <p><strong><?php echo htmlspecialchars($studentData['student_firstname'] . ' ' . $studentData['student_name']); ?></strong></p>
            <?php else: ?>
                <p><strong>Copie #<?php echo htmlspecialchars($studentData['copy_number'] ?? 'Anonyme'); ?></strong></p>
            <?php endif; ?>
            <p><small>UID: <?php echo htmlspecialchars($uid); ?></small></p>
        </div>
        
        <?php if (!$submitted): ?>
            <div class="code-input-section">
                <h3>🔢 Saisie de vos informations</h3>
                <p>Entrez vos informations et le code formé par vos réponses :</p>
                
                <form method="POST">
                    <input type="hidden" name="action" value="submit_answers">
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                        <div>
                            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Nom :</label>
                            <input type="text" name="student_name" style="width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 5px; text-transform: uppercase;" placeholder="MARTIN" required>
                        </div>
                        <div>
                            <label style="display: block; font-weight: bold; margin-bottom: 5px;">Prénom :</label>
                            <input type="text" name="student_firstname" style="width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 5px;" placeholder="Jean" required>
                        </div>
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        <label style="display: block; font-weight: bold; margin-bottom: 5px;">Votre code (suite de chiffres 1 à 4) :</label>
                        <input type="text" name="student_code" id="student-code" class="code-input" placeholder="Ex: <?php echo str_repeat('1', max(1, min(6, $nbQuestions))); ?>..." required maxlength="<?php echo $nbQuestions; ?>" pattern="[1-4]{<?php echo $nbQuestions; ?>}">
                        <div style="margin-top:6px; font-size:12px; color:#555;">
                            Longueur attendue : <strong><?php echo $nbQuestions; ?></strong> caractères (1 à 4).
                            <span id="code-counter" style="margin-left:8px;">0/<?php echo $nbQuestions; ?></span>
                        </div>
                    </div>
                    
                    <button type="submit" class="submit-btn" aria-label="Corriger mon QCM">Corriger mon QCM</button>
                </form>
                
                <?php if (isset($error)): ?>
                    <div class="error">
                        ⚠️ <?php echo htmlspecialchars($error); ?>
                    </div>
                <?php endif; ?>
            </div>
            
            <div style="background: #e8f4f8; padding: 15px; border-radius: 5px; margin-top: 20px;">
                <h4>💡 Instructions</h4>
                <p><strong>1. Saisissez vos nom et prénom</strong> (obligatoire pour que votre professeur puisse reporter la note)</p>
                <p><strong>2. Formez votre code :</strong></p>
                <ul>
                    <li>Pour chaque question, relevez le <strong>chiffre</strong> correspondant à votre réponse (1, 2, 3 ou 4) tel qu'indiqué sur la copie.</li>
                    <li>Écrivez à la suite tous les chiffres, dans l'ordre des questions, pour former un <strong>code unique</strong>.</li>
                </ul>
                <p><em>Exemple : pour 12 questions, un code valide peut ressembler à <strong>132142314212</strong>.</em></p>
            </div>
            
        <?php else: ?>
            <div class="results">
                <div class="score-display">
                    <h2>🎯 Votre résultat</h2>
                    <p><strong><?php echo htmlspecialchars(trim($displayFirstName . ' ' . $displayLastName)); ?></strong></p>
                    <div class="score-number"><?php echo $score; ?>/20</div>
                    <p><?php echo $correctAnswers; ?> bonne(s) réponse(s) sur <?php echo $numQuestions; ?> questions</p>
                    <p><?php echo round(($correctAnswers / $numQuestions) * 100, 1); ?>% de réussite</p>
                </div>
                
                <h3>📋 Correction détaillée</h3>
                
                <?php foreach ($results as $result): ?>
                    <div class="question-result">
                        <div class="question-header <?php echo $result['is_correct'] ? 'correct' : 'incorrect'; ?>">
                            <span class="status-icon <?php echo $result['is_correct'] ? 'correct' : 'incorrect'; ?>">
                                <?php echo $result['is_correct'] ? '✓' : '✗'; ?>
                            </span>
                            Question <?php echo $result['question_number']; ?>
                            <?php if ($result['is_correct']): ?>
                                - Bonne réponse !
                            <?php else: ?>
                                - Réponse incorrecte
                            <?php endif; ?>
                        </div>
                        
                        <div class="question-content">
                            <p><strong>Question :</strong> <?php echo htmlspecialchars($result['question']); ?></p>
                            
                            <div class="answer-comparison">
                                <div class="answer-box student-answer">
                                    <strong>📝 Votre réponse :</strong><br>
                                    <?php echo htmlspecialchars($result['student_answer']); ?>
                                </div>
                                
                                <div class="answer-box correct-answer">
                                    <strong>✅ Bonne réponse :</strong><br>
                                    <?php echo htmlspecialchars($result['correct_answer']); ?>
                                </div>
                            </div>
                            
                            <div class="explanation">
                                <strong>💡 Explication :</strong><br>
                                <?php echo htmlspecialchars($result['explanation']); ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
                
                <div style="text-align: center; margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
                    <p><strong>✅ Résultat enregistré !</strong></p>
                    <p>Votre professeur peut consulter vos résultats avec son code d'accès.</p>
                    <p><small>Correction effectuée le <?php echo date('d/m/Y à H:i'); ?></small></p>
                </div>
            </div>
        <?php endif; ?>
    </div>
    <script>
    // Aide de saisie: limiter aux chiffres 1-4 et afficher un compteur x/N
    (function(){
        const input = document.getElementById('student-code');
        if (!input) return;
        const counter = document.getElementById('code-counter');
        const maxLen = <?php echo (int)$nbQuestions; ?>;
        input.addEventListener('input', function(){
            // Supprimer tout caractère non 1-4
            this.value = this.value.replace(/[^1-4]/g, '').slice(0, maxLen);
            if (counter) counter.textContent = this.value.length + '/' + maxLen;
        });
    })();
    </script>
</body>
</html>