latihan-penjumlahan-pengurangan/js/app.js

/**
 *  Inisialisasi variabel global / konfigurasi
 */
var level = 1,            // level awal
    max_digit = 2,        // digit jawaban maksimal
    delay = 3,            // delay dalam detik jika benar
    strike, kunci, jawab; // variabel global

/**
 *  Main function
 */
$(function() {

  /**
   *  Inisialisasi program
   */
  strikeZero();
  kunci = initialize();
  
  /**
   *  Mencegah fokus keluar dari input jawaban
   */
  $('#jawaban').blur(function(){
    $(this).focus();
  });

  /**
   *  Cek yang diketik oleh user
   */
  $("#jawaban").on('keyup', function(e) {
    var string_val = $(this).val();

    /**
     *  Menyembunyikan tanda cek jawaban jika jawaban dihapus
     */
    if(string_val.length<1) {
      $('#sign img').hide();
    }

    /**
     *  Memastikan jawaban tidak melebihi maksimal digit
     */
    if(string_val.length>max_digit) {
      $('#jawaban').val(string_val.substring(0,max_digit));
    }

    /**
     *  User menekan tombol enter
     */
    if (e.keyCode === 13) {
      jawab = parseInt(string_val);
      
      /**
       *  Jawaban benar
       */
      if(kunci==jawab) {
        $('#cross-sign').hide();
        $('#check-sign').show();
        $('#footer').append('<img src="img/check.png">');
        strike++;

        setTimeout(function() {

          /**
           *  Naik level
           */
          if(strike>=rules[level-1].strike) {
            level++;
            strikeZero();
          }

          kunci = initialize();
        }, (delay * 1000));

      /**
       *  Jawaban salah
       */
      } else {
        $('#cross-sign').show();
        strikeZero();
      }
    };

    /**
     *  Ulang dari awal
     */
    $(document).on('click', '#restart', function(){
      location.reload();
    });
  });

});

/**
 *  Fungsi inisialisasi program
 *  @returns {Number} kunci jawaban
 */
function initialize() {

  /**
   *  Membuat soal
   */
  var bil01 = randomInt(rules[level-1].min, rules[level-1].max),
      bil02 = randomInt(rules[level-1].min, rules[level-1].max),
      bil03;  // kunci jawaban

  /**
   *  Soal penjumlahan
   */
  if(rules[level-1].type) {
    $('#soal').text(bil01 + ' + ' + bil02 + ' = ');
    bil03 = bil01 + bil02;
  
  /**
   *  Soal pengurangan
   */
  } else {
    if(bil01<bil02) {
      var tmp=bil01;bil01=bil02;bil02=tmp;
    }
    $('#soal').text(bil01 + ' - ' + bil02 + ' = ');
    bil03 = bil01 - bil02;
  }

  /**
   *  Set tampilan awal
   */
  $('#sign img').hide();
  $('#level').text('Level ' + level);
  $('#jawaban').focus().val('');
  
  return bil03;
}

/**
 *  Fungsi mereset strike, sekaligus pengecekan level maksimal
 *  @returns {void}
 */
function strikeZero() {

  /**
   *  Level maksimal
   */
  if(level>rules.length) {
    $('body').css('background-color', '#000');
    $('#container').html('<img id="fireworks" src="img/fireworks.gif">');
    $('#footer').html('<button id="restart">RESTART</button>');
    level = 1;

  /**
   *  Reset strike
   */
  } else {
    $('#footer').html('<div id="level">Level ' + level + '</div>');
    strike = 0;  
  }
}

/**
 *  Fungsi membuat angka acak
 *  @param {Number} min nilai minimum
 *  @param {Number} max nilai maksimum
 *  @returns {Number} nilai acak
 */
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}