jeu de réponses

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 May 2025

Une page d'accueil créée avec des annuaires

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>General Knowledge Quiz</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .question-container {
            margin-bottom: 20px;
        }
        .question {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }
        .option {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .option:hover {
            background-color: #2980b9;
        }
        .timer {
            text-align: center;
            font-size: 24px;
            margin: 20px 0;
            color: #e74c3c;
        }
        .progress {
            margin-bottom: 20px;
            font-weight: bold;
        }
        .result {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
            padding: 20px;
            border-radius: 5px;
            display: none;
        }
        .score {
            font-size: 28px;
            font-weight: bold;
            margin: 10px 0;
        }
        .start-btn, .next-btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            display: block;
            margin: 0 auto;
            transition: background-color 0.3s;
        }
        .start-btn:hover, .next-btn:hover {
            background-color: #27ae60;
        }
        .next-btn {
            display: none;
        }
        .correct {
            background-color: #2ecc71 !important;
        }
        .wrong {
            background-color: #e74c3c !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>General Knowledge Quiz</h1>
        
        <div id="start-screen">
            <p>Total of 20 questions will be asked.</p>
            <p>You have 15 seconds for each question.</p>
            <p>Good luck!</p>
            <button class="start-btn" onclick="startQuiz()">Start</button>
        </div>
        
        <div id="quiz-screen" style="display: none;">
            <div class="progress">
                Question <span id="question-number">1</span>/20 - Score: <span id="score">0</span>
            </div>
            <div class="timer" id="timer">15</div>
            <div class="question-container">
                <div class="question" id="question"></div>
                <div class="options" id="options"></div>
            </div>
            <button class="next-btn" id="next-btn" onclick="nextQuestion()">Next Question</button>
        </div>
        
        <div id="result-screen" class="result" style="display: none;">
            <h2>Quiz Finished!</h2>
            <div class="score">Your Score: <span id="final-score">0</span>/100</div>
            <p id="result-message"></p>
            <button class="start-btn" onclick="resetQuiz()">Play Again</button>
        </div>
    </div>

let currentQuestion = 0;
        let score = 0;
        let timer;
        let timeLeft = 15;
        let shuffledQuestions = [];

function startQuiz() {
            document.getElementById('start-screen').style.display = 'none';
            document.getElementById('quiz-screen').style.display = 'block';
            
            // Shuffle questions
            shuffledQuestions = [...questions].sort(() => Math.random() - 0.5);
            
            showQuestion();
            startTimer();
        }

function showQuestion() {
            if (currentQuestion >= 20) {
                showResult();
                return;
            }

const question = shuffledQuestions[currentQuestion];
            document.getElementById('question').textContent = question.question;
            document.getElementById('question-number').textContent = currentQuestion + 1;
            document.getElementById('score').textContent = score;

const optionsContainer = document.getElementById('options');
            optionsContainer.innerHTML = '';

question.options.forEach(option => {
                const button = document.createElement('button');
                button.className = 'option';
                button.textContent = option;
                button.onclick = () => selectAnswer(option[0]);
                optionsContainer.appendChild(button);
            });

document.getElementById('next-btn').style.display = 'none';
        }

if (selectedOption === question.answer) {
                score += 5;
                document.getElementById('score').textContent = score;
            }

document.getElementById('next-btn').style.display = 'block';
        }

function resetQuiz() {
            currentQuestion = 0;
            score = 0;
            timeLeft = 15;
            
            document.getElementById('result-screen').style.display = 'none';
            document.getElementById('start-screen').style.display = 'block';
        }
    </script>
</body>
</html>

jeu de réponses

Recommandé

Un code par codex

Un code par alejandrokundrah

Une page d'accueil créée avec des annuaires

HTML

CSS

JS

Recommandé

Un code par codex

Un code par alejandrokundrah

Une page d'accueil créée avec des annuaires

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS