Javascript Bilgi Yarışması

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style>
        
        .card {
            margin-top: 50px;
        }

        .card-body {
            font-size: 50px;
        }

        button {
            width: 200px;
            height: 120px;
            margin-top: 50px;
            margin-right: 20px;
            margin-left: 20px;
        }
        .gizle{
            display: none;
        }
        .goster{
            display: block;
        }
    </style>
</head>

<body>
    <script>
        var soru = ["İspanyanın Başkenti", "Türkiyenin başkenti", "Romanyanın başkenti"];
        var asikki = ["Madrid", "İstanbul", "Bükreş"];
        var bsikki = ["Barcelona", "Ankara", "Cluj"];
        var csikki = ["Malaga", "Urfa", "Kaloşvar"];
        var dsikki = ["Sevilla", "Bilecik", "Yas"];
        var soru_aciklama =["İspanya şehrinin başkenti ... yılından beri Madriddir.", " Türkiyenin başkenti Ankaradır. .... yılından beri", "Romanyanın Başkenti Bükreştir..... yılından beri"];
var dogru_cevap=["a","b","a"];

function konrol_et(tiklanan) {
    mesaj_alani= document.getElementById("mesaj_alani");

if (tiklanan== dogru_cevap[aktif_soru]) { // class ekleme
    mesaj_alani.classList.add("goster");
    mesaj_alani.innerHTML = soru_aciklama[aktif_soru];

}

        }
        aktif_soru = -1;
        function soru_getir() {
            mesaj_alani= document.getElementById("mesaj_alani");
            mesaj_alani.classList.remove("goster");
            
          
            aktif_soru++;
            soru_yeri = document.getElementById("soru_yeri");
            a_yeri = document.getElementById("a_yeri");
            b_yeri = document.getElementById("b_yeri");
            c_yeri = document.getElementById("c_yeri");
            d_yeri = document.getElementById("d_yeri");

            soru_yeri.innerHTML = soru[aktif_soru];
            a_yeri.innerHTML = asikki[aktif_soru];
            b_yeri.innerHTML = bsikki[aktif_soru];
            c_yeri.innerHTML = csikki[aktif_soru];
            d_yeri.innerHTML = dsikki[aktif_soru];
        }
    </script>
<body>

    
    <div id="mesaj_alani" class="alert alert-primary gizle" role="alert">
        Açıklama:
      </div>



    <div class="container">
        <div class="card">
            <div id="soru_yeri" class="card-body">

            </div>
        </div>
        <button id="a_yeri" onclick="konrol_et('a')" type="button" class="btn btn-info"></button>
        <button id="b_yeri" onclick="konrol_et('b')" type="button" class="btn btn-info"></button>
        <button id="c_yeri" onclick="konrol_et('c')" type="button" class="btn btn-info"></button>
        <button id="d_yeri" onclick="konrol_et('d')" type="button" class="btn btn-info"></button>
    </div>
    <button onclick="soru_getir()" type="button" class="btn btn-dark">Soru Getir</button>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
</body>

</html>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir