Seberapa Kenal Anda dengan Imam Al-Albani?

:root { --forest:#103c39; --forest-2:#1f5a51; --mint:#e9f3ec; --gold:#d6a84d; --ink:#18312f; --muted:#60716f; --line:#d8e2db; --paper:#ffffff; --bg:#f1f5ef; --good:#166645; --bad:#a73535; } * { box-sizing:border-box; } body { margin:0; background:radial-gradient(ellipse at top left,#d8e9dc 0%,transparent 42%),var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.55; } .shell { max-width:760px; margin:0 auto; padding:22px 16px 50px; } .hero { position:relative; isolation:isolate; overflow:hidden; border-radius:24px; background:linear-gradient(125deg,#0e3836,#276050); padding:32px 28px; color:#fff; box-shadow:0 18px 35px #153c3325; } .hero:after { content:""; position:absolute; z-index:-1; width:230px; height:230px; right:-60px; top:-65px; border:34px solid #ffffff13; border-radius:50%; } .eyebrow { margin:0 0 12px; color:#eec974; text-transform:uppercase; letter-spacing:.14em; font-size:.77rem; font-weight:800; } h1 { margin:0; line-height:1.25; letter-spacing:-.02em; font-size:clamp(1.5rem,4.7vw,2.25rem); } .subtitle { max-width:570px; margin:12px 0 0; color:#e4f0e9; font-size:.97rem; } .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; } .chip { padding:7px 12px; border:1px solid #ffffff42; background:#ffffff16; border-radius:100px; font-size:.82rem; font-weight:650; } .card { margin-top:18px; background:var(--paper); border:1px solid var(--line); box-shadow:0 6px 22px #19352c0d; border-radius:21px; padding:clamp(20px,4.5vw,32px); } .topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:.87rem; font-weight:700; color:var(--muted); } .progressbar { width:100%; height:9px; background:#e7efe8; border-radius:999px; overflow:hidden; } .progress { height:100%; width:10%; background:linear-gradient(90deg,var(--forest-2),#cba75b); border-radius:999px; transition:width .25s ease; } h2 { font-size:clamp(1.12rem,3.2vw,1.4rem); line-height:1.47; margin:25px 0 22px; } .options { display:grid; gap:11px; margin:0; padding:0; border:0; } .option { display:flex; gap:12px; align-items:center; width:100%; text-align:left; padding:14px 15px; background:#fff; color:var(--ink); border:1.5px solid var(--line); border-radius:13px; cursor:pointer; transition:background .16s,border-color .16s,transform .16s; font:inherit; } .option:hover { background:#f7faf5; border-color:#9cb8a4; } .option:focus-visible,button:focus-visible { outline:3px solid #d3ae55; outline-offset:3px; } .option.selected { background:#eef5ed; border-color:#216d58; } .option-letter { display:grid; place-items:center; flex-shrink:0; width:31px; height:31px; border-radius:9px; background:#eef1eb; font-size:.88rem; font-weight:800; } .selected .option-letter { background:var(--forest-2); color:#fff; } .controls { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:27px; } button { font:inherit; font-weight:800; } .btn { min-height:46px; padding:10px 20px; border-radius:12px; border:1.5px solid transparent; cursor:pointer; } .btn-primary { background:var(--forest); color:#fff; } .btn-primary:hover:not(:disabled) { background:#246357; } .btn-secondary { background:#fff; color:var(--forest); border-color:#aac2b4; } .btn-secondary:hover { background:#eff5f0; } .btn:disabled { opacity:.45; cursor:not-allowed; } .hint { font-size:.82rem; color:var(--muted); margin:16px 0 0; } .hidden { display:none !important; } .result-score { text-align:center; padding:8px 0 4px; } .score-circle { display:grid; place-items:center; width:145px; height:145px; border-radius:50%; margin:0 auto 18px; border:8px solid #d7eadd; color:var(--forest); background:var(--mint); } .score-num { font-weight:900; font-size:2.8rem; line-height:1; } .score-small { color:var(--muted); font-size:.79rem; } .result-score h2 { margin:0 0 7px; } .result-score p { color:var(--muted); margin:0 0 19px; } .review-title { border-top:1px solid var(--line); padding-top:22px; margin:28px 0 14px; font-size:1.15rem; } .review-item { border:1px solid var(--line); border-radius:13px; padding:16px; margin-bottom:11px; background:#fff; } .review-header { display:flex; gap:8px; justify-content:space-between; align-items:flex-start; } .review-header strong { flex:1; } .status { display:inline-flex; padding:3px 9px; border-radius:30px; font-size:.76rem; font-weight:750; white-space:nowrap; } .status.correct { color:var(--good); background:#e3f4e8; } .status.incorrect { color:var(--bad); background:#fff0ed; } .review-item p { margin:9px 0 0; font-size:.91rem; } .review-item .explanation { color:var(--muted); } .footer { margin:22px 5px 0; text-align:center; font-size:.78rem; color:var(--muted); } .footer a { color:#23634e; text-underline-offset:3px; } @media(max-width:460px) { .hero{padding:26px 21px} .option{padding:12px} .controls .btn{flex:1} .review-header{flex-wrap:wrap} } @media(prefers-reduced-motion:reduce) { *{transition:none !important} } Markaz Inayah · Kuis Pengetahuan Seberapa Kenal Anda dengan Imam Al-Albani? Uji pemahaman tentang perjalanan hidup, pendidikan, guru, karya, dan warisan ilmiah Syekh Muhammad Nashiruddin Al-Albani رحمه الله. Soal 1 dari 100/10 terjawab ← Sebelumnya Berikutnya → Pilih satu jawaban. Anda dapat kembali ke soal sebelumnya sebelum mengirimkan jawaban. 0 dari 100 poin Hasil Kuis ↻ Ulangi kuis Pembahasan 10 Soal Disusun berdasarkan artikel “Biografi Al-‘Allamah Al-Imam Muhammad Nashiruddin Al-Albani rahimahullah”, Berian Muntaqo Fatkhuri, Lc., M.A., Markaz Inayah (7 September 2026).Materi ini bersifat edukatif. 'use strict'; const questions = [ { question: 'Siapakah nama dan nasab Syekh Al-Albani yang disebutkan dalam biografi?', options: ['Muhammad bin Nuh Najati', 'Muhammad bin Shalih Al-Utsaimin', 'Abdul Aziz bin Abdullah', 'Muhammad bin Abdullah At-Tabrizi'], answer: 0, explanation: 'Nama beliau adalah Muhammad bin Nuh Najati, dikenal dengan Muhammad Nashiruddin Al-Albani, berkunyah Abu Abdurrahman.' }, { question: 'Di kota manakah Syekh Al-Albani dilahirkan?', options: ['Damaskus, Suriah', 'Amman, Yordania', 'Shkodra, Albania', 'Istanbul, Turki'], answer: 2, explanation: 'Beliau dilahirkan di Shkodra, Albania, pada 1332 H/1914 M.' }, { question: 'Apa alasan utama ayah Syekh Al-Albani membawa keluarganya hijrah ke Damaskus?', options: ['Untuk mencari pekerjaan di istana', 'Untuk menjaga agama keluarga dari kebijakan sekularisasi', 'Untuk mengikuti pendidikan militer', 'Untuk mendirikan sekolah perdagangan'], answer: 1, explanation: 'Ayah beliau mengkhawatirkan kebijakan sekularisasi di Albania dan memilih berhijrah demi menjaga agama serta pendidikan anak-anaknya.' }, { question: 'Mazhab fikih apakah yang pertama kali dipelajari Syekh Al-Albani dari ayahnya?', options: ['Mazhab Maliki', 'Mazhab Syafi‘i', 'Mazhab Hanbali', 'Mazhab Hanafi'], answer: 3, explanation: 'Beliau mempelajari fikih mazhab Hanafi, selain Al-Qur’an, tajwid, bahasa Arab, dan ilmu alat.' }, { question: 'Bacaan apakah yang menjadi salah satu awal kecintaan Syekh Al-Albani terhadap ilmu hadis?', options: ['Majalah Al-Manar karya Rasyid Ridha', 'Majalah Al-Azhar', 'Kitab Al-Muwaththa’ karya Imam Malik', 'Kitab Ihya’ Ulumiddin'], answer: 0, explanation: 'Ketika berusia sekitar dua puluh tahun, beliau banyak membaca majalah Al-Manar karya Rasyid Ridha yang memuat pembahasan hadis.' }, { question: 'Siapakah guru yang memberikan ijazah hadis kepada Syekh Al-Albani?', options: ['Syekh Abdul Aziz bin Baz', 'Syekh Muhammad Raghib Ath-Thabbakh', 'Syekh Muhammad Jamil Zainu', 'Syekh Ali Hasan Al-Halabi'], answer: 1, explanation: 'Syekh Muhammad Raghib Ath-Thabbakh, ulama Aleppo, disebut sebagai salah seorang guru Syekh Al-Albani melalui jalur ijazah hadis.' }, { question: 'Siapakah di antara nama berikut yang disebut sebagai murid Syekh Al-Albani?', options: ['Imam An-Nawawi', 'Imam Ibnu Hajar Al-Asqalani', 'Syekh Muqbil bin Hadi Al-Wadi‘i', 'Imam Al-Bukhari'], answer: 2, explanation: 'Syekh Muqbil bin Hadi Al-Wadi‘i termasuk tokoh yang disebut di antara murid beliau dalam artikel.' }, { question: 'Kitab manakah yang merupakan salah satu karya terkenal Syekh Al-Albani dalam kajian hadis sahih?', options: ['Al-Umm', 'Al-Majmu‘ Syarh Al-Muhadzdzab', 'Fath Al-Bari', 'Silsilah Al-Ahadits Ash-Shahihah'], answer: 3, explanation: 'Silsilah Al-Ahadits Ash-Shahihah adalah salah satu karya penting Syekh Al-Albani yang disebutkan dalam biografi.' }, { question: 'Ulama manakah yang dalam artikel dikutip memuji keluasan ilmu hadis Syekh Al-Albani dan menyatakan belum melihat orang yang lebih mengetahui hadis pada zaman modern?', options: ['Syekh Abdul Aziz bin Baz', 'Syekh Sa‘id Al-Burhani', 'Syekh Muhammad Raghib Ath-Thabbakh', 'Syekh Ibrahim Syaqrah'], answer: 0, explanation: 'Pujian tersebut dinukil dari Syekh Abdul Aziz bin Abdullah bin Baz رحمه الله.' }, { question: 'Kapan Syekh Muhammad Nashiruddin Al-Albani wafat menurut artikel?', options: ['2 Oktober 1989 M', '2 Oktober 1999 M', '7 September 2006 M', '22 Jumadil Akhir 1430 H'], answer: 1, explanation: 'Beliau wafat pada Sabtu, 22 Jumadil Akhir 1420 H, bertepatan dengan 2 Oktober 1999 M, di Amman, Yordania.' } ]; let current = 0; let answers = Array(questions.length).fill(null); const $ = (id) => document.getElementById(id); const letters = ['A', 'B', 'C', 'D']; function renderQuestion() { const q = questions[current]; $('counter').textContent = `Soal ${current + 1} dari ${questions.length}`; $('answered').textContent = `${answers.filter(a => a !== null).length}/${questions.length} terjawab`; $('progress').style.width = `${((current + 1) / questions.length) * 100}%`; $('progressWrapper').setAttribute('aria-valuenow', String(current + 1)); $('question').textContent = `${current + 1}. ${q.question}`; $('options').replaceChildren(); q.options.forEach((option, i) => { const button = document.createElement('button'); button.type = 'button'; button.className = 'option' + (answers[current] === i ? ' selected' : ''); button.setAttribute('aria-pressed', String(answers[current] === i)); const letter = document.createElement('span'); letter.className = 'option-letter'; letter.textContent = letters[i]; const label = document.createElement('span'); label.textContent = option; button.append(letter, label); button.addEventListener('click', () => { answers[current] = i; renderQuestion(); }); $('options').appendChild(button); }); $('prev').disabled = current === 0; $('next').disabled = answers[current] === null; $('next').textContent = current === questions.length - 1 ? 'Lihat Nilai ✓' : 'Berikutnya →'; } function showResults() { const correct = questions.reduce((sum, q, i) => sum + (answers[i] === q.answer ? 1 : 0), 0); const score = correct * 10; $('score').textContent = String(score); $('resultTitle').textContent = score === 100 ? 'Masya Allah, sempurna!' : score >= 80 ? 'Bagus sekali!' : score >= 60 ? 'Terus tingkatkan!' : 'Mari belajar lagi!'; $('resultMessage').textContent = `Anda menjawab benar ${correct} dari ${questions.length} soal. Berikut pembahasan setiap jawaban.`; $('review').replaceChildren(); questions.forEach((q, i) => { const correctAnswer = answers[i] === q.answer; const item = document.createElement('article'); item.className = 'review-item'; const head = document.createElement('div'); head.className = 'review-header'; const title = document.createElement('strong'); title.textContent = `${i + 1}. ${q.question}`; const status = document.createElement('span'); status.className = 'status ' + (correctAnswer ? 'correct' : 'incorrect'); status.textContent = correctAnswer ? 'Benar ✓' : 'Belum tepat ✕'; head.append(title, status); const yourAnswer = document.createElement('p'); yourAnswer.textContent = `Jawaban Anda: ${letters[answers[i]]}. ${q.options[answers[i]]}`; const key = document.createElement('p'); key.textContent = `Jawaban benar: ${letters[q.answer]}. ${q.options[q.answer]}`; const explain = document.createElement('p'); explain.className = 'explanation'; explain.textContent = q.explanation; item.append(head, yourAnswer, key, explain); $('review').appendChild(item); }); $('quiz').classList.add('hidden'); $('result').classList.remove('hidden'); window.scrollTo({top:0,behavior:'smooth'}); } $('prev').addEventListener('click', () => { if (current > 0) { current--; renderQuestion(); } }); $('next').addEventListener('click', () => { if (answers[current] === null) return; if (current { current = 0; answers = Array(questions.length).fill(null); $('result').classList.add('hidden'); $('quiz').classList.remove('hidden'); renderQuestion(); window.scrollTo({top:0,behavior:'smooth'}); }); renderQuestion(); Artikel Rujukan Klik