LPK Wonosobo Mendunia
Gerbang Sukses Mendunia
🌸
Tema Saat Ini
Haru (Semi)
✨ Keajaiban 4 Musim Jepang
Raih Mimpi Kerja ke
Negeri Sakura
LPK Wonosobo Mendunia memfasilitasi Anda untuk menguasai bahasa Jepang dari dasar hingga mahir. Persiapkan diri Anda untuk program Magang (Ginou Jisshu) atau Kerja Keahlian Khusus (Tokutei Ginou) di Jepang.
Rasakan sensasi belajar yang menakjubkan seperti visual di Negeri Sakura. Ikuzo! (Ayo!)
Pilih Modul Pembelajaran
Pilih menu di bawah ini untuk masuk ke ruang kelas digital.
Mengenal Keajaiban Aksara Jepang
Jepang menggunakan tiga jenis huruf utama dalam sistem penulisannya. Mari pelajari sejarah dan filosofi di baliknya.
Hiragana (ひらがな) dikembangkan pada abad ke-9, pada masa periode Heian. Awalnya, huruf ini disebut *Onnade* (tulisan wanita) karena sering digunakan oleh wanita istana untuk menulis puisi dan sastra, sementara pria lebih banyak menggunakan Kanji resmi.
Bentuk Hiragana berasal dari penyederhanaan bentuk kursif (tulisan cepat/menyambung) dari karakter Kanji. Oleh karena itu, Hiragana memiliki bentuk yang melengkung, lembut, dan mengalir.
あ
Fungsi Utama
Digunakan untuk menulis kata-kata asli Jepang, partikel tata bahasa (seperti wa, ga, o), dan imbuhan kata kerja atau kata sifat (okurigana).
Katakana (カタカナ) juga dikembangkan pada awal periode Heian (sekitar abad ke-9) oleh para biksu Buddha. Mereka menggunakan Katakana sebagai stenografi (tulisan cepat) untuk mencatat cara baca atau terjemahan kitab suci yang ditulis dalam Kanji.
Berbeda dengan Hiragana yang melengkung, Katakana diambil dari sebagian kecil goresan karakter Kanji yang rumit. Sehingga Katakana memiliki ciri khas bentuk yang lurus, bersudut tajam, dan kaku.
ア
Fungsi Utama
Digunakan khusus untuk menulis kata serapan dari bahasa asing (selain bahasa Tiongkok), nama orang asing, nama negara, serta untuk penekanan makna (seperti huruf kapital).
Kanji (漢字) adalah karakter logografik (satu huruf mewakili satu arti/konsep) yang diadopsi dari karakter Hanzi (Tiongkok). Kanji mulai masuk ke Jepang sekitar abad ke-5 melalui Semenanjung Korea beserta penyebaran agama Buddha.
Setiap Kanji umumnya memiliki dua cara baca: Onyomi (cara baca meniru pelafalan asli Tiongkok) dan Kunyomi (cara baca menggunakan bahasa asli Jepang untuk konsep yang sama).
日
Fungsi Utama
Menulis akar/inti dari sebuah kata (kata benda, akar kata kerja/sifat). Penggunaan Kanji membuat kalimat bahasa Jepang lebih singkat dan mudah dibedakan maknanya meskipun homofon (bunyi sama).
${item.char}
${item.roman}
`;
grid.appendChild(card);
});
}
let currentModalChar = "";
function openLetterModal(item, category) {
currentModalChar = item.char;
document.getElementById('modal-char-bg').innerText = item.char;
const charEl = document.getElementById('modal-char');
charEl.innerText = item.char;
charEl.classList.remove('draw-stroke-animation');
void charEl.offsetWidth;
charEl.classList.add('draw-stroke-animation');
document.getElementById('modal-category').innerText = category.replace(/([A-Z])/g, ' $1').trim();
document.getElementById('modal-roman').innerText = item.roman;
document.getElementById('modal-desc').innerText = item.desc;
const modal = document.getElementById('letter-modal');
const content = document.getElementById('letter-modal-content');
modal.classList.remove('hidden');
setTimeout(() => {
modal.classList.remove('opacity-0');
content.classList.remove('scale-95');
playAudioFromModal();
}, 10);
}
function closeLetterModal() {
const modal = document.getElementById('letter-modal');
const content = document.getElementById('letter-modal-content');
modal.classList.add('opacity-0');
content.classList.add('scale-95');
setTimeout(() => modal.classList.add('hidden'), 300);
}
function playAudioFromModal() { if(currentModalChar) playAudio(currentModalChar, false); }
let fcIndex = 0; let fcStatus = {};
function initFlashcard() { fcIndex = 0; updateFcStats(); renderFlashcard(); }
function updateFcStats() {
let tahu = 0, belajar = 0;
vocabData.forEach(v => { if(fcStatus[v.h] === 'tahu') tahu++; else if(fcStatus[v.h] === 'belajar') belajar++; });
document.getElementById('fc-count-tahu').innerText = tahu;
document.getElementById('fc-count-belajar').innerText = belajar;
}
function renderFlashcard() {
if(fcIndex >= vocabData.length) fcIndex = 0;
const vocab = vocabData[fcIndex];
document.getElementById('fc-inner').classList.remove('rotate-y-180');
document.getElementById('fc-index').innerText = fcIndex + 1;
document.getElementById('fc-hangeul').innerText = vocab.h;
document.getElementById('fc-arti').innerText = vocab.a;
document.getElementById('fc-roman').innerText = vocab.r;
const badge = document.getElementById('fc-status-badge');
if(fcStatus[vocab.h] === 'tahu') {
badge.className = 'absolute -top-4 -right-2 sm:-right-6 z-20 px-4 sm:px-6 py-1.5 sm:py-2 rounded-full font-bold text-xs sm:text-sm shadow-lg transform rotate-12 transition-all bg-emerald-100 text-emerald-700 border border-emerald-200';
badge.innerText = '✔ Sudah Tahu';
badge.classList.remove('hidden');
} else if (fcStatus[vocab.h] === 'belajar') {
badge.className = 'absolute -top-4 -right-2 sm:-right-6 z-20 px-4 sm:px-6 py-1.5 sm:py-2 rounded-full font-bold text-xs sm:text-sm shadow-lg transform rotate-12 transition-all bg-amber-100 text-amber-700 border border-amber-200';
badge.innerText = '⏳ Masih Belajar';
badge.classList.remove('hidden');
} else badge.classList.add('hidden');
}
function toggleFlip(el) { el.querySelector('.flashcard-inner').classList.toggle('rotate-y-180'); }
function playVocabAudio() { playAudio(vocabData[fcIndex].h, false); }
function markVocab(status) { fcStatus[vocabData[fcIndex].h] = status; updateFcStats(); fcIndex++; renderFlashcard(); }
let listenIndex = 0; let listenScore = 0;
function initListening() { vocabData.sort(() => 0.5 - Math.random()); listenIndex = 0; listenScore = 0; loadListeningQuestion(); }
function loadListeningQuestion() {
document.getElementById('listen-current-index').innerText = listenIndex + 1;
document.getElementById('listen-score').innerText = `Skor: ${listenScore}`;
document.getElementById('listen-input').value = '';
document.getElementById('listen-input').disabled = false;
document.getElementById('listen-feedback').classList.add('hidden');
document.getElementById('listen-check-btn').classList.remove('hidden');
document.getElementById('listen-next-btn').classList.add('hidden');
}
function playListeningAudio() { playAudio(vocabData[listenIndex].h, false); }
function checkListeningAnswer() {
const input = document.getElementById('listen-input').value.trim();
const correct = vocabData[listenIndex].h;
const fb = document.getElementById('listen-feedback');
if(!input) { showCustomToast("Ketik jawaban terlebih dahulu!"); return; }
fb.classList.remove('hidden');
document.getElementById('listen-input').disabled = true;
document.getElementById('listen-check-btn').classList.add('hidden');
document.getElementById('listen-next-btn').classList.remove('hidden');
if(input === correct) { listenScore++; fb.innerHTML = `Benar Sekali! 🎉`; }
else { fb.innerHTML = `Salah. Jawabannya: ${correct}`; }
}
function nextListeningQuestion() {
listenIndex++;
if(listenIndex >= 50) { showCustomToast(`Latihan selesai! Skor Akhir: ${listenScore}/50`); initListening(); }
else loadListeningQuestion();
}
const canvas = document.getElementById('writing-canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false; let strokesCount = 0;
function initWritingSection() { document.getElementById('write-category').value = 'hiraganaSeion'; updateWritingOptions(); resizeCanvas(); }
function updateWritingOptions() {
const cat = document.getElementById('write-category').value;
const selectChar = document.getElementById('write-char');
selectChar.innerHTML = '';
kanaData[cat].forEach(item => {
const opt = document.createElement('option');
opt.value = JSON.stringify(item); opt.innerText = `${item.char} (${item.roman})`;
selectChar.appendChild(opt);
});
setupCanvasChar();
}
function setupCanvasChar() {
const selectedVal = document.getElementById('write-char').value;
if(!selectedVal) return;
const item = JSON.parse(selectedVal);
document.getElementById('writing-bg-text').innerText = item.char;
document.getElementById('write-roman-desc').innerText = item.roman;
playAudio(item.char, false);
clearCanvas();
}
function resizeCanvas() {
const container = document.getElementById('writing-canvas-container');
if(!container) return;
canvas.width = container.clientWidth; canvas.height = container.clientHeight;
ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 15; ctx.strokeStyle = '#1e293b';
}
function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); strokesCount = 0; }
const startDraw = (e) => { isDrawing = true; strokesCount++; draw(e); };
const endDraw = () => { isDrawing = false; ctx.beginPath(); };
canvas.addEventListener('mousedown', startDraw); canvas.addEventListener('mouseup', endDraw); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseout', endDraw);
canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startDraw(e.touches[0]); }, { passive: false });
canvas.addEventListener('touchend', (e) => { e.preventDefault(); endDraw(); }, { passive: false });
canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e.touches[0]); }, { passive: false });
function draw(e) {
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) * (canvas.width / rect.width);
const y = (e.clientY - rect.top) * (canvas.height / rect.height);
ctx.lineTo(x, y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x, y);
strokesCount++;
}
function checkCanvas() {
const container = document.getElementById('writing-canvas-container');
if (strokesCount < 15) { container.classList.add('animate-shake', 'border-rose-400'); setTimeout(() => container.classList.remove('animate-shake', 'border-rose-400'), 500); }
else { document.getElementById('writing-bg-text').classList.add('animate-pop'); showCustomToast("Hebat, luar biasa! 🎉"); playAudio("よくできました", false); setTimeout(() => { document.getElementById('writing-bg-text').classList.remove('animate-pop'); clearCanvas(); }, 1500); }
}
let kanjiIndex = 0; let kBacaCurrent = null; let kTulisCurrent = null;
function initKanjiMastery() { setKanjiMode('flashcard'); }
function setKanjiMode(mode) {
['flashcard', 'baca', 'tulis'].forEach(m => {
document.getElementById(`kanji-mode-${m}`).classList.add('hidden');
document.getElementById(`ktab-${m}`).className = 'px-3 sm:px-5 py-2 sm:py-2.5 rounded-xl sm:rounded-full font-bold text-xs sm:text-sm transition text-slate-600 hover:bg-white/50 flex-1 sm:flex-none border border-transparent';
});
document.getElementById(`kanji-mode-${mode}`).classList.remove('hidden');
document.getElementById(`kanji-mode-${mode}`).classList.add('animate-fade-in-up');
document.getElementById(`ktab-${mode}`).className = 'px-3 sm:px-5 py-2 sm:py-2.5 rounded-xl sm:rounded-full font-bold text-xs sm:text-sm transition bg-white shadow-sm text-brand-600 border border-white flex-1 sm:flex-none';
kanjiIndex = 0;
if (mode === 'flashcard') loadKanjiFC();
if (mode === 'baca') loadKanjiBaca();
if (mode === 'tulis') loadKanjiTulis();
}
function loadKanjiFC() {
if (kanjiIndex >= kanjiMasteryData.length) kanjiIndex = 0;
const data = kanjiMasteryData[kanjiIndex];
document.getElementById('kfc-index').innerText = kanjiIndex + 1;
document.getElementById('kfc-total').innerText = kanjiMasteryData.length;
document.getElementById('kfc-kanji').innerText = data.k;
document.getElementById('kfc-baca').innerText = data.r;
document.getElementById('kfc-arti').innerText = data.a;
const card = document.querySelector('#kanji-mode-flashcard .flashcard-inner');
if(card) card.classList.remove('rotate-y-180');
}
function nextKanjiFC() { kanjiIndex++; loadKanjiFC(); }
function loadKanjiBaca() {
kBacaCurrent = kanjiMasteryData[Math.floor(Math.random() * kanjiMasteryData.length)];
document.getElementById('kbaca-kanji').innerText = kBacaCurrent.k;
document.getElementById('kbaca-feedback').classList.add('hidden');
document.getElementById('kbaca-next').classList.add('hidden');
const optionsEl = document.getElementById('kbaca-options');
optionsEl.innerHTML = '';
let options = [kBacaCurrent.r];
while(options.length < 4) {
let rdm = kanjiMasteryData[Math.floor(Math.random() * kanjiMasteryData.length)].r;
if(!options.includes(rdm)) options.push(rdm);
}
options.sort(() => 0.5 - Math.random());
options.forEach(opt => {
const btn = document.createElement('button');
btn.className = 'w-full bg-white/80 backdrop-blur-sm border border-slate-200 py-3.5 sm:py-5 px-4 rounded-xl sm:rounded-2xl font-bold shadow-sm hover:bg-brand-50 hover:border-brand-300 transition text-base sm:text-xl text-slate-700';
btn.innerText = opt;
btn.onclick = () => checkKanjiBaca(opt, btn);
optionsEl.appendChild(btn);
});
}
function checkKanjiBaca(selected, btn) {
if(!kBacaCurrent) return;
const fb = document.getElementById('kbaca-feedback');
fb.classList.remove('hidden');
document.getElementById('kbaca-next').classList.remove('hidden');
const allBtns = document.getElementById('kbaca-options').querySelectorAll('button');
allBtns.forEach(b => b.disabled = true);
if (selected === kBacaCurrent.r) {
btn.classList.add('bg-emerald-100', 'text-emerald-700', 'border-emerald-400');
fb.innerHTML = '✨ Jawaban Benar!';
fb.className = 'mt-5 sm:mt-6 p-3 sm:p-4 rounded-xl font-bold text-center max-w-lg mx-auto bg-emerald-100/90 text-emerald-700 border border-emerald-300 backdrop-blur-md';
} else {
btn.classList.add('bg-rose-100', 'text-rose-700', 'border-rose-400');
fb.innerHTML = `❌ Salah. Cara baca yang benar: ${kBacaCurrent.r}`;
fb.className = 'mt-5 sm:mt-6 p-3 sm:p-4 rounded-xl font-bold text-center max-w-lg mx-auto bg-rose-100/90 text-rose-700 border border-rose-300 backdrop-blur-md';
}
kBacaCurrent = null;
}
function loadKanjiTulis() {
kTulisCurrent = kanjiMasteryData[Math.floor(Math.random() * kanjiMasteryData.length)];
document.getElementById('ktulis-kanji').innerText = kTulisCurrent.k;
document.getElementById('ktulis-input').value = '';
document.getElementById('ktulis-input').disabled = false;
document.getElementById('ktulis-feedback').classList.add('hidden');
document.getElementById('ktulis-check').classList.remove('hidden');
document.getElementById('ktulis-next').classList.add('hidden');
}
function checkKanjiTulis() {
const input = document.getElementById('ktulis-input').value.trim().toLowerCase();
if(!input) { showCustomToast("Ketik jawaban terlebih dahulu!"); return; }
const fb = document.getElementById('ktulis-feedback');
fb.classList.remove('hidden');
document.getElementById('ktulis-input').disabled = true;
document.getElementById('ktulis-check').classList.add('hidden');
document.getElementById('ktulis-next').classList.remove('hidden');
const correctMeanings = kTulisCurrent.a.toLowerCase().split(' / ');
const isCorrect = correctMeanings.some(m => input.includes(m) || m.includes(input));
if (isCorrect) {
fb.innerHTML = '✨ Luar Biasa, Jawaban Tepat!';
fb.className = 'mt-5 sm:mt-6 p-3 sm:p-4 rounded-xl font-bold text-center bg-emerald-100/90 text-emerald-700 border border-emerald-300 backdrop-blur-md';
} else {
fb.innerHTML = `❌ Kurang tepat. Arti sebenarnya: ${kTulisCurrent.a}`;
fb.className = 'mt-5 sm:mt-6 p-3 sm:p-4 rounded-xl font-bold text-center bg-rose-100/90 text-rose-700 border border-rose-300 backdrop-blur-md';
}
}
let quizQuestions = []; let currentQIndex = 0; let correctCount = 0; let wrongCount = 0; let isQuestionAnswered = false; const TOTAL_QUESTIONS = 100;
function startQuiz() {
correctCount = 0; wrongCount = 0; currentQIndex = 0;
document.getElementById('quiz-question-container').classList.remove('hidden');
document.getElementById('quiz-result-container').classList.add('hidden');
generateQuestions(); loadQuizQuestion();
}
function generateQuestions() {
quizQuestions = []; let pool = [];
while(pool.length < TOTAL_QUESTIONS) pool = pool.concat([...allKanaCharacters].sort(() => 0.5 - Math.random()));
pool = pool.slice(0, TOTAL_QUESTIONS);
pool.forEach((charItem, idx) => {
let type = idx < 10 ? (Math.random() > 0.5 ? 1 : 2) : Math.floor(Math.random() * 3) + 1;
quizQuestions.push({ targetChar: charItem, type: type });
});
}
function updateScoreUI() {
document.getElementById('score-correct').innerText = correctCount;
document.getElementById('score-wrong').innerText = wrongCount;
document.getElementById('quiz-progress-bar').style.width = `${(currentQIndex / TOTAL_QUESTIONS) * 100}%`;
document.getElementById('quiz-progress-text').innerText = `Menyelesaikan: ${currentQIndex + 1} / ${TOTAL_QUESTIONS} Soal`;
}
function loadQuizQuestion() {
isQuestionAnswered = false; updateScoreUI();
const q = quizQuestions[currentQIndex]; const t = q.targetChar;
const contentEl = document.getElementById('question-content'); const optionsEl = document.getElementById('quiz-options');
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('next-btn').classList.add('hidden');
optionsEl.innerHTML = '';
let correctOpt, optKey, isJap;
let distractors = allKanaCharacters.filter(c => c.char !== t.char).sort(() => 0.5 - Math.random()).slice(0, 3);
let options = [t, ...distractors].sort(() => 0.5 - Math.random());
if (q.type === 1) {
document.getElementById('question-instruction').innerText = "Pilih romaji yang tepat!";
contentEl.innerHTML = `${t.char}
`;
correctOpt = t.roman; optKey = 'roman'; isJap = false;
} else if (q.type === 2) {
document.getElementById('question-instruction').innerText = "Pilih karakter Kana yang tepat!";
contentEl.innerHTML = `${t.roman}
`;
correctOpt = t.char; optKey = 'char'; isJap = true;
} else {
document.getElementById('question-instruction').innerText = "Dengarkan audio dan pilih hurufnya!";
contentEl.innerHTML = ``;
correctOpt = t.char; optKey = 'char'; isJap = true;
setTimeout(() => playAudio(t.char, false), 500);
}
options.forEach(opt => {
const btn = document.createElement('button');
btn.className = `quiz-option w-full bg-white/80 backdrop-blur-sm border-2 border-slate-200 py-4 sm:py-6 px-4 sm:px-6 rounded-2xl font-bold shadow-sm hover:bg-brand-50 hover:border-brand-300 flex flex-col items-center hover:-translate-y-1 transition-all ${isJap ? 'font-japanese text-4xl sm:text-5xl' : 'text-xl sm:text-3xl'}`;
btn.innerText = opt[optKey];
btn.onclick = () => handleAnswer(opt[optKey], correctOpt, btn, t.char);
optionsEl.appendChild(btn);
});
}
function handleAnswer(selected, correct, btn, charForAudio) {
if (isQuestionAnswered) return;
isQuestionAnswered = true;
const fb = document.getElementById('quiz-feedback');
if (selected === correct) {
btn.classList.add('bg-emerald-100', 'border-emerald-500', 'text-emerald-700'); correctCount++;
if(charForAudio) playAudio(charForAudio, false);
fb.innerHTML = `Benar Sekali!`; fb.className = 'mt-8 p-4 sm:p-5 rounded-2xl font-bold text-lg text-center bg-emerald-100 text-emerald-700 border border-emerald-200 max-w-3xl mx-auto w-full';
} else {
btn.classList.add('bg-rose-100', 'border-rose-500', 'text-rose-700'); wrongCount++;
fb.innerHTML = `Salah. Jawabannya adalah '${correct}'.`; fb.className = 'mt-8 p-4 sm:p-5 rounded-2xl font-bold text-lg text-center bg-rose-100 text-rose-700 border border-rose-200 max-w-3xl mx-auto w-full';
}
updateScoreUI(); fb.classList.remove('hidden');
const nextBtn = document.getElementById('next-btn');
if (currentQIndex === TOTAL_QUESTIONS - 1) nextBtn.innerText = "Lihat Hasil Akhir";
nextBtn.classList.remove('hidden');
}
function nextQuestion() {
currentQIndex++;
if (currentQIndex < TOTAL_QUESTIONS) loadQuizQuestion(); else endQuiz();
}
function endQuiz() {
document.getElementById('quiz-question-container').classList.add('hidden');
document.getElementById('quiz-result-container').classList.remove('hidden');
document.getElementById('final-correct').innerText = correctCount;
document.getElementById('final-wrong').innerText = wrongCount;
const icon = document.getElementById('result-icon'); const title = document.getElementById('result-title');
const pct = (correctCount / (correctCount+wrongCount || 1)) * 100;
if (pct >= 80) {
icon.className = "w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-6 sm:mb-8 rounded-full flex items-center justify-center bg-emerald-100 text-emerald-600 ring-4 ring-emerald-200 shadow-xl";
icon.innerHTML = ``;
title.innerText = "Luar Biasa! Sugoi!";
} else {
icon.className = "w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-6 sm:mb-8 rounded-full flex items-center justify-center bg-rose-100 text-rose-500 ring-4 ring-rose-200 shadow-xl";
icon.innerHTML = ``;
title.innerText = "Ganbatte! Terus Belajar";
}
}
window.onload = () => {
// Kita sudah menggunakan CSS untuk menyembunyikan form secara permanen,
// sehingga script sembunyi manual di sini tidak lagi diperlukan.
resizeCanvases();
initParticles(seasons[0]);
drawParticles();
// Auto Ganti Musim setiap 30 detik
setInterval(switchSeason, 30000);
switchSeason(); // Trigger musim pertama
// Check auth (bypass visual only)
if(!localStorage.getItem('mendunia_user')) {
setTimeout(() => showRegistrationModal(), 1500);
}
}
