🕌
KUIS
KOSAKATA
BAHASA ARAB
Tebak kosakata Bahasa Arab dari emoji.
✅ 10 soal acak
✅ Nilai maksimal 100
😀
Apa bahasa Arab dari gambar ini?
🎯
Permainan Selesai
100
/* ==========================================================
BAGIAN 2 : CSS MODERN BLOGGER
========================================================== */
/* ==========================================================
BAGIAN 3A : BANK SOAL (1-50)
========================================================== */
const vocabBank = [
/* Hewan */
{word:"كَلْبٌ",emoji:"🐶"},
{word:"قِطَّةٌ",emoji:"🐱"},
{word:"طَائِرٌ",emoji:"🐦"},
{word:"سَمَكَةٌ",emoji:"🐟"},
{word:"نَمِرٌ",emoji:"🐯"},
{word:"أَسَدٌ",emoji:"🦁"},
{word:"فِيلٌ",emoji:"🐘"},
{word:"حِصَانٌ",emoji:"🐴"},
{word:"بَقَرَةٌ",emoji:"🐮"},
{word:"خَرُوفٌ",emoji:"🐑"},
{word:"دَجَاجَةٌ",emoji:"🐔"},
{word:"بَطَّةٌ",emoji:"🦆"},
{word:"ثُعْبَانٌ",emoji:"🐍"},
{word:"ضِفْدَعٌ",emoji:"🐸"},
{word:"قِرْدٌ",emoji:"🐵"},
{word:"بَانْدَا",emoji:"🐼"},
{word:"دُبٌّ",emoji:"🐻"},
{word:"أَرْنَبٌ",emoji:"🐰"},
{word:"فَأْرٌ",emoji:"🐭"},
{word:"دُلْفِينٌ",emoji:"🐬"},
{word:"حُوتٌ",emoji:"🐳"},
{word:"قِرْشٌ",emoji:"🦈"},
{word:"تِمْسَاحٌ",emoji:"🐊"},
{word:"سُلَحْفَاةٌ",emoji:"🐢"},
{word:"عَنْكَبُوتٌ",emoji:"🕷️"},
{word:"نَمْلَةٌ",emoji:"🐜"},
{word:"نَحْلَةٌ",emoji:"🐝"},
{word:"فَرَاشَةٌ",emoji:"🦋"},
{word:"حَلَزُونٌ",emoji:"🐌"},
{word:"جَمَلٌ",emoji:"🐫"},
/* Alam */
{word:"شَمْسٌ",emoji:"☀️"},
{word:"قَمَرٌ",emoji:"🌙"},
{word:"نَجْمٌ",emoji:"⭐"},
{word:"سَحَابَةٌ",emoji:"☁️"},
{word:"مَطَرٌ",emoji:"🌧️"},
{word:"بَرْقٌ",emoji:"⚡"},
{word:"ثَلْجٌ",emoji:"❄️"},
{word:"نَارٌ",emoji:"🔥"},
{word:"مَاءٌ",emoji:"💧"},
{word:"جَبَلٌ",emoji:"⛰️"},
{word:"شَجَرَةٌ",emoji:"🌳"},
{word:"زَهْرَةٌ",emoji:"🌸"},
{word:"وَرَقَةٌ",emoji:"🍃"},
{word:"أَرْضٌ",emoji:"🌍"},
{word:"بَحْرٌ",emoji:"🌊"},
{word:"شَاطِئٌ",emoji:"🏖️"},
{word:"بَيْتٌ",emoji:"🏠"},
{word:"مَدْرَسَةٌ",emoji:"🏫"},
{word:"مُسْتَشْفَى",emoji:"🏥"},
{word:"مَسْجِدٌ",emoji:"🕌"}
];
,
/* ==========================================================
MAKANAN & MINUMAN (51–80)
========================================================== */
{word:"تُفَّاحَةٌ",emoji:"🍎"},
{word:"مَوْزٌ",emoji:"🍌"},
{word:"بُرْتُقَالٌ",emoji:"🍊"},
{word:"بِطِّيخٌ",emoji:"🍉"},
{word:"عِنَبٌ",emoji:"🍇"},
{word:"فَرَاوِلَةٌ",emoji:"🍓"},
{word:"كَرَزٌ",emoji:"🍒"},
{word:"أَنَانَاسٌ",emoji:"🍍"},
{word:"مَانْجُو",emoji:"🥭"},
{word:"جَوْزُ الْهِنْدِ",emoji:"🥥"},
{word:"طَمَاطِمٌ",emoji:"🍅"},
{word:"بَاذِنْجَانٌ",emoji:"🍆"},
{word:"بَطَاطِسٌ",emoji:"🥔"},
{word:"جَزَرٌ",emoji:"🥕"},
{word:"ذُرَةٌ",emoji:"🌽"},
{word:"خُبْزٌ",emoji:"🍞"},
{word:"جُبْنٌ",emoji:"🧀"},
{word:"بَيْضَةٌ",emoji:"🥚"},
{word:"لَحْمٌ",emoji:"🥩"},
{word:"دَجَاجٌ",emoji:"🍗"},
{word:"رُزٌّ",emoji:"🍚"},
{word:"هَمْبُرْغَر",emoji:"🍔"},
{word:"مُثَلَّجَاتٌ",emoji:"🍨"},
{word:"كَعْكَةٌ",emoji:"🍰"},
{word:"شُوكُولَاتَةٌ",emoji:"🍫"},
{word:"حَلْوَى",emoji:"🍬"},
{word:"قَهْوَةٌ",emoji:"☕"},
{word:"شَايٌ",emoji:"🍵"},
{word:"حَلِيبٌ",emoji:"🥛"},
{word:"عَصِيرٌ",emoji:"🧃"},
/* ==========================================================
BENDA & TRANSPORTASI (81–100)
========================================================== */
{word:"سَيَّارَةٌ",emoji:"🚗"},
{word:"حَافِلَةٌ",emoji:"🚌"},
{word:"قِطَارٌ",emoji:"🚂"},
{word:"طَائِرَةٌ",emoji:"✈️"},
{word:"سَفِينَةٌ",emoji:"🚢"},
{word:"دَرَّاجَةٌ",emoji:"🚲"},
{word:"دَرَّاجَةٌ نَارِيَّةٌ",emoji:"🏍️"},
{word:"سَاعَةٌ",emoji:"⌚"},
{word:"نَظَّارَةٌ",emoji:"👓"},
{word:"حِذَاءٌ",emoji:"👟"},
{word:"قَمِيصٌ",emoji:"👕"},
{word:"بِنْطَالٌ",emoji:"👖"},
{word:"قُبَّعَةٌ",emoji:"🧢"},
{word:"حَقِيبَةٌ",emoji:"🎒"},
{word:"مِظَلَّةٌ",emoji:"☂️"},
{word:"كِتَابٌ",emoji:"📖"},
{word:"قَلَمٌ",emoji:"✏️"},
{word:"حَاسُوبٌ",emoji:"💻"},
{word:"هَاتِفٌ",emoji:"📱"},
{word:"سَرِيرٌ",emoji:"🛏️"}
];
/* ==========================================================
BAGIAN 4A
MESIN KUIS
========================================================== */
// ----------------------------
// Variabel Global
// ----------------------------
let currentQuestions = [];
let currentQuestion = 0;
let score = 0;
let isAnswered = false;
// ----------------------------
// Ambil Elemen HTML
// ----------------------------
const loadingScreen = document.getElementById("quizLoading");
const startScreen = document.getElementById("startScreen");
const quizScreen = document.getElementById("quizScreen");
const resultScreen = document.getElementById("resultScreen");
const startBtn = document.getElementById("startBtn");
const playAgainBtn = document.getElementById("playAgainBtn");
const emojiDisplay = document.getElementById("emojiDisplay");
const optionContainer = document.getElementById("optionContainer");
const questionNumber = document.getElementById("questionNumber");
const currentScore = document.getElementById("currentScore");
const progressFill = document.getElementById("progressFill");
const finalScore = document.getElementById("finalScore");
const resultMessage = document.getElementById("resultMessage");
const resultIcon = document.getElementById("resultIcon");
// ----------------------------
// Loading
// ----------------------------
window.addEventListener("load", function () {
setTimeout(function () {
loadingScreen.style.display = "none";
startScreen.style.display = "block";
},600);
});
// ----------------------------
// Acak Array (Fisher-Yates)
// ----------------------------
function shuffle(array){
let currentIndex = array.length;
while(currentIndex !== 0){
let randomIndex = Math.floor(Math.random()*currentIndex);
currentIndex--;
[
array[currentIndex],
array[randomIndex]
] = [
array[randomIndex],
array[currentIndex]
];
}
return array;
}
// ----------------------------
// Mulai Permainan
// ----------------------------
function startGame(){
score = 0;
currentQuestion = 0;
isAnswered = false;
currentScore.textContent = "0";
progressFill.style.width = "10%";
resultScreen.style.display = "none";
startScreen.style.display = "none";
quizScreen.style.display = "block";
// Mengacak seluruh bank soal
const bank = shuffle([...vocabBank]);
// Ambil 10 soal pertama
currentQuestions = bank.slice(0,10);
// Muat soal pertama
loadQuestion();
}
// ----------------------------
// Event Listener
// ----------------------------
startBtn.addEventListener("click",startGame);
playAgainBtn.addEventListener("click",startGame);
/* ==========================================================
BAGIAN 4B
LOAD QUESTION
========================================================== */
function loadQuestion(){
isAnswered = false;
// Bersihkan pilihan lama
optionContainer.innerHTML = "";
// Ambil soal aktif
const question = currentQuestions[currentQuestion];
// Nomor soal
questionNumber.textContent = currentQuestion + 1;
// Progress bar
progressFill.style.width =
((currentQuestion + 1) / 10 * 100) + "%";
// Emoji
emojiDisplay.textContent = question.emoji;
// Animasi emoji
emojiDisplay.classList.remove("pop");
void emojiDisplay.offsetWidth;
emojiDisplay.classList.add("pop");
// ====================================
// Membuat Pilihan Jawaban
// ====================================
let options = [];
// Jawaban benar
options.push(question.word);
// Ambil jawaban salah
const wrongAnswers = shuffle(
vocabBank.filter(function(item){
return item.word !== question.word;
})
);
options.push(wrongAnswers[0].word);
options.push(wrongAnswers[1].word);
options.push(wrongAnswers[2].word);
// Acak urutan pilihan
options = shuffle(options);
// ====================================
// Tampilkan Tombol
// ====================================
options.forEach(function(answer){
const button =
document.createElement("button");
button.className = "optionBtn";
button.textContent = answer;
button.dataset.answer = answer;
button.addEventListener(
"click",
function(){
checkAnswer(
answer,
question.word,
button
);
}
);
optionContainer.appendChild(button);
});
}
/* ==========================================================
BAGIAN 4C-1
CHECK ANSWER
========================================================== */
function checkAnswer(selectedAnswer, correctAnswer, clickedButton){
// Mencegah klik dua kali
if(isAnswered) return;
isAnswered = true;
const allButtons =
document.querySelectorAll(".optionBtn");
// ----------------------------
// Jawaban Benar
// ----------------------------
if(selectedAnswer === correctAnswer){
score += 10;
currentScore.textContent = score;
clickedButton.classList.add("correct");
if(typeof playCorrectSound === "function"){
playCorrectSound();
}
}
// ----------------------------
// Jawaban Salah
// ----------------------------
else{
clickedButton.classList.add("wrong");
clickedButton.classList.add("shake");
if(typeof playWrongSound === "function"){
playWrongSound();
}
// Tandai jawaban benar
allButtons.forEach(function(btn){
if(btn.textContent === correctAnswer){
btn.classList.add("correct");
}
});
}
// ----------------------------
// Nonaktifkan semua tombol
// ----------------------------
allButtons.forEach(function(btn){
btn.disabled = true;
btn.style.pointerEvents = "none";
});
// ----------------------------
// Lanjut ke soal berikutnya
// ----------------------------
setTimeout(function(){
currentQuestion++;
if(currentQuestion < 10){
loadQuestion();
}else{
showResult();
}
},1200);
}
/* ==========================================================
BAGIAN 4C-2
HASIL AKHIR
========================================================== */
function showResult(){
// Sembunyikan layar kuis
quizScreen.style.display = "none";
// Tampilkan hasil
resultScreen.style.display = "block";
// Nilai akhir
finalScore.textContent = score;
// Reset icon
resultIcon.classList.remove("pop");
// -----------------------------
// Pesan sesuai nilai
// -----------------------------
if(score === 100){
resultIcon.textContent = "🏆";
resultMessage.innerHTML =
"
Luar Biasa!Kamu menjawab semua soal dengan benar.";
if(typeof playHooraySound === "function"){
playHooraySound();
}
}
else if(score >= 80){
resultIcon.textContent = "🥇";
resultMessage.innerHTML =
"
Hebat!Sedikit lagi mendapatkan nilai sempurna.";
if(typeof playCorrectSound === "function"){
playCorrectSound();
}
}
else if(score >= 60){
resultIcon.textContent = "👏";
resultMessage.innerHTML =
"
Bagus!Terus berlatih agar semakin mahir.";
if(typeof playCorrectSound === "function"){
playCorrectSound();
}
}
else if(score >= 40){
resultIcon.textContent = "🙂";
resultMessage.innerHTML =
"
Cukup BaikMasih perlu latihan lagi.";
}
else{
resultIcon.textContent = "💪";
resultMessage.innerHTML =
"
Jangan Menyerah!Coba main lagi agar nilainya lebih tinggi.";
}
// Animasi icon
setTimeout(function(){
resultIcon.classList.add("pop");
},100);
}
