HTML/CSS ve Javascript İle Quiz Uygulaması

[turkmedia]

  <div class="quiz-container" id="quiz"> 
        <div class="quiz-header"> 
            <h2 id="question">Soru yükleniyor...</h2> 
            <ul> 
                <li> 
                    <input type="radio" name="answer" id="a" class="answer" /> 
                    <label for="a" id="a_text">Cevap...</label> 
                </li> 
                <li> 
                    <input type="radio" name="answer" id="b" class="answer" /> 
                    <label for="b" id="b_text">Cevap...</label> 
                </li> 
                <li> 
                    <input type="radio" name="answer" id="c" class="answer" /> 
                    <label for="c" id="c_text">Cevap...</label> 
                </li> 
                <li> 
                    <input type="radio" name="answer" id="d" class="answer" /> 
                    <label for="d" id="d_text">Cevap...</label> 
                </li> 
            </ul> 
        </div> 
        <button id="submit">Gönder</button> 
    </div>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); 
 * { 
    box-sizing: border-box; 
 } 
 body { 
    background-color: #b8c6db; 
    background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); 
    font-family: "Poppins", sans-serif; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
    overflow: hidden; 
    margin: 0; 
 } 
 .quiz-container { 
    background-color: #fff; 
    border-radius: 10px; 
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); 
    width: 600px; 
    max-width: 95vw; 
    overflow: hidden; 
 } 
 .quiz-header { 
    padding: 4rem; 
 } 
 h2 { 
    padding: 1rem; 
    text-align: center; 
    margin: 0; 
 } 
 ul { 
    list-style-type: none; 
    padding: 0; 
 } 
 ul li { 
    font-size: 1.2rem; 
    margin: 1rem 0; 
 } 
 ul li label { 
    cursor: pointer; 
 } 
 button { 
    background-color: #f16f66; 
    color: #fff; 
    border: none; 
    display: block; 
    width: 100%; 
    cursor: pointer; 
    font-size: 1.1rem; 
    font-family: inherit; 
    padding: 1.3rem; 
} 
 button:hover { 
    background-color: #f16f66; 
} 
 button:focus { 
    outline: none; 
    background-color: #f16f66; 
}

       const quizData = [ 
            { 
            question: "Hangi dil daha eskidir ?", 
            a: "Java", 
            b: "C", 
            c: "Python", 
            d: "JavaScript", 
            correct: "b", 
            }, 
            { 
            question: "CSS'in açılımı nedir ?", 
            a: "Central Style Sheets", 
            b: "Cascading Style Sheets", 
            c: "Cascading Simple Sheets", 
            d: "Cars SUVs Sailboats", 
            correct: "b", 
            }, 
            { 
            question: "HTML'in açılımı nedir ?", 
            a: "Hypertext Markup Language", 
            b: "Hypertext Markdown Language", 
            c: "Hyperloop Machine Language", 
            d: "Helicopters Terminals Motorboats Lamborginis", 
            correct: "a", 
            }, 
            { 
            question: "Javascript hangi yılda çıkmıştır ?", 
            a: "1996", 
            b: "1995", 
            c: "1994", 
            d: "none of the above", 
            correct: "b", 
            }, 
        ]; 

        const quiz = document.getElementById("quiz"); 
        const answerElements = document.querySelectorAll(".answer"); 
        const questionElement = document.getElementById("question"); 
        const a_text = document.getElementById("a_text"); 
        const b_text = document.getElementById("b_text"); 
        const c_text = document.getElementById("c_text"); 
        const d_text = document.getElementById("d_text"); 
        const submitButton = document.getElementById("submit"); 

        let currentQuiz = 0; 
        let score = 0; 

        const deselectAnswers = () => { 
            answerElements.forEach((answer) => (answer.checked = false)); 
        }; 

        const getSelected = () => { 
            let answer; 
            answerElements.forEach((answerElement) => { 
            if (answerElement.checked) answer = answerElement.id; 
            }); 
            return answer; 
        }; 

        const loadQuiz = () => { 
            deselectAnswers(); 
            const currentQuizData = quizData[currentQuiz]; 
            questionElement.innerText = currentQuizData.question; 
            a_text.innerText = currentQuizData.a; 
            b_text.innerText = currentQuizData.b; 
            c_text.innerText = currentQuizData.c; 
            d_text.innerText = currentQuizData.d; 
        }; 

        loadQuiz(); 

        submitButton.addEventListener("click", () => { 
            const answer = getSelected(); 
            if (answer) { 
                if (answer === quizData[currentQuiz].correct) score++; 
                currentQuiz++; 
                if (currentQuiz < quizData.length) loadQuiz(); 
                else { 
                    quiz.innerHTML = ` 
                    <h2>${quizData.length} sorudan ${score} tanesini bildin.</h2> 
                    <button onclick="history.go(0)">Baştan Başla</button> 
                    `
                } 
            } 
        });