HTML/CSS ve Javascript İle Quiz Uygulaması

Bu yazımızda HTML/CSS ve Javascript ile quiz uygulaması yapacağız. Hemen kodlara geçelim.

HTML :

    <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>  

Bu kısmı yazdıktan sonra sayfamız bu şekilde gözükecek :

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;  
}

Bu kısmı yazdıktan sonra sayfamız bu şekilde gözükecek :

Javascript:

        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>  
                    ` 
                }  
            }  
        }); 

Bu kısmı yazdıktan sonra sayfamız bu şekilde gözükecek :

Bu yazımızda HTML/CSS ve Javascript ile quiz uygulaması yaptık. Diğer HTML ve CSS örneklerini görmek için buraya, Javascript örneklerini görmek için buraya tıklayabilirsiniz.