Html ve Jquery ile Bilgi Yarışması

soncizgi · 13 Mart 2024

Arkadaşlar html ve jquery kullanarak basit düzeyde bir bilgi yarışması yaptım. Şuan çok sade geliştirilebilir. Sorular resim dosyası şeklinde ekranda gözüküyor. Resim üzerinde sorunun kalan zamanı gösteriliyor. Zaman bitince resim kapanıp sonraki soru ve cevap göster butonları aktif oluyor. Soru sayıları ve süreleri jquery kodları içinde belirtiyorsunuz. Belki birilerininde işine yarar. Dediğim gibi şuan çok sade, ama yinede iş görür.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bilgi Yarışması</title>
    <link rel="stylesheet" href="bulma.css">
    <style>
#question-container {
    text-align: center;
}

#image-container {
    position: relative;
    display: inline-block;
}

#question-image {
    max-width: 100%;
    max-height: 100%;
}

#timer {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
}
    </style>
</head>
<body>
<div class="container" style="padding-top:25px ;">
      <div id="question-container">
        <div id="image-container">
            <img id="question-image" src="">
            <div id="timer" style="display:none;">Kalan Süre: <span id="countdown">--:--</span></div>
        </div>
    </div>
    <button id="start-btn" class="button is-info is-large">Başlat</button>
    <button id="next-btn" style="display: none;" class="button is-link is-large">Sonraki Soru</button>
    <button id="answer-btn" style="display: none;" class="button is-success is-large">Cevabı Göster</button>
    <div id="answer-container" style="width:300px;margin: 50px auto;" ></div>
    <div id="son" style="display: none;" class="notification is-danger has-text-centered"><h1 class="title">YARIŞMA BİTTİ!</h1></div>
</div>
<script src="jquery.js"></script>
<script>
    $(document).ready(function() {
    var questions = [
        { image: "img/1.jpg", answer: "img/a.png", time: 3 },
        { image: "img/2.jpg", answer: "img/b.png", time: 3 },
        { image: "img/3.jpg", answer: "img/c.png", time: 3 },
        { image: "img/4.jpg", answer: "img/a.png", time: 3 },
        { image: "img/5.jpg", answer: "img/d.png", time: 3 }
        // Diğer soruları buraya ekleyin...
    ];
var currentQuestionIndex = 0;
    var countdownTimer;

    function displayQuestion() {
        $("#question-image").attr("src", questions[currentQuestionIndex].image);
        $("#question-image").show();
        $("#timer").show();
        startCountdown(questions[currentQuestionIndex].time);
    }

    function showAnswer() {
        var answerImage = questions[currentQuestionIndex].answer;
        $("#answer-container").html("<img src='" + answerImage + "' alt='Cevap'>");
    }

    function startCountdown(seconds) {
        var timer = seconds;
        $("#countdown").text(formatTime(timer));
        countdownTimer = setInterval(function() {
            timer--;
            $("#countdown").text(formatTime(timer));
            if (timer <= 0) {
                clearInterval(countdownTimer);
                $("#next-btn").show();
                $("#answer-btn").show();
                $("#question-image").hide();
                $("#timer").hide();
            }
        }, 1000);
    }

    function formatTime(seconds) {
        var min = Math.floor(seconds / 60);
        var sec = seconds % 60;
        return min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0");
    }

    $("#start-btn").click(function() {
        displayQuestion();
        $(this).hide();
       
    });

    $("#next-btn").click(function() {
        clearInterval(countdownTimer);
        $("#answer-container").empty();
        if (currentQuestionIndex < questions.length - 1) {
            currentQuestionIndex++;
             $("#next-btn").hide();
             $("#answer-btn").hide();
            displayQuestion();
        } else {
            $("#next-btn").hide();
            $("#answer-btn").hide();
            $("#son").show();
        }
    });

    $("#answer-btn").click(function() {
        showAnswer();
    });
});

</script>
</body>
</html>

Html ve Jquery ile Bilgi Yarışması

soncizgi

Aktif Üye

Ekli dosyalar