|
@ -0,0 +1,167 @@ |
|
|
|
|
|
/** |
|
|
|
|
|
* 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); |
|
|
|
|
|
} |