Membuat Game Edukasi Menggunakan Jquery

28/08/2019    Shelli Ripati    65     Website

Hallo teman-teman Dumet School. Kemablia lagi dengan saya Shelli Ripati. Pada kesempatan kali ini saya akan membahas tentang cara Membuat Game Edukasi Menggunakan Jquery. Dimana game edukasi ini berisi tentang operasi matematika seperti penjumlahan, perkalian, pembagian dan pengurangan. Nah pada kasus ini saya akan membuat operasi penjumlahan dimana terdapat dua angka yang akan dijumlah. Kedua angka tersebut akan saya random menggunakan Math.floor((Math.random()) untuk melakukan pengacakan.

Langkah pertama untuk Membuat Game Edukasi Menggunakan Jquery teman-teman buat struktur html terlebih dahulu untuk dapat menampilkan kedua angka yang akan dijumlahkan dan kemudia satu tag input untuk mengisi jawaban dan satu tombol submit untuk mengecek jawaban tersebut benar atau salah.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Game Edukasi Menggunakan Jquery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <h3>Membuat Game Edukasi Menggunakan Jquery</h3>
                <p>Pertanyaan : <span id="number1" class="badge badge-primary"></span> + <span id="number2" class="badge badge-primary"></span></p>
                <label for="">Silahkan masukkan jawaban kamu !</label>
                <br>
                <input type="text" id="total">
                <button onclick="result()" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>

</body>

</html>

Jika sudah maka di file yang sama, teman-teman buat script jquery yang berisi dua fungsi. fungsi pertama dibuat untuk membuat random angka dengan nama myFunction() dan fungsi kedua dibuat untuk melakukan pengecekan hasil atau total dari penjumlahan angka pertama dan angka kedua seperti script di bawah ini.

    <script>
    function myFunction() {
      var x = Math.floor((Math.random() * 10) + 1);
      var y = Math.floor((Math.random() * 10) + 1);
      $("#number1").text(x);
      $("#number2").text(y);
    }
    myFunction()
    function result(){
        var num1 = $("#number1").text();
          var num2 = $("#number2").text();
          var result = parseInt(num1)+parseInt(num2);
          var total = $("#total").val();
          if(total==result){
              alert("Yeay. Jawaban Kamu Benar !");
              $("#total").val("");
          }else{
              alert("Yah. Jawaban Kamu Salah, Coba Lagi ya!")
          }
    }
    </script>

Nah jika sudah selesai maka teman-teman buka di halaman browser untuk dapat melihat dan mencoba game edukasinya. maka akan tampak seperti pada gambar di bawah ini.

Membuat Game Edukasi Menggunakan Jquery

Membuat Game Edukasi Menggunakan Jquery

Demikian artikel tentang cara Membuat Game Edukasi Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More