{"id":103549,"date":"2025-09-16T13:21:58","date_gmt":"2025-09-16T06:21:58","guid":{"rendered":"https:\/\/evermos.com\/home\/?page_id=103549"},"modified":"2025-12-01T14:55:14","modified_gmt":"2025-12-01T07:55:14","slug":"quran-testing","status":"publish","type":"page","link":"https:\/\/evermos.com\/home\/quran-testing\/","title":{"rendered":"quran testing"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"103549\" class=\"elementor elementor-103549\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-13b62a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13b62a3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e3fad18\" data-id=\"e3fad18\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-beec5c9 elementor-widget elementor-widget-html\" data-id=\"beec5c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"quran-app\" style=\"font-family: 'Arial', sans-serif; background:#cdfa96; padding:20px; border-radius:12px; max-width:800px; margin:auto;\">\r  <h2 style=\"margin-top:0; text-align:center;\">\ud83d\udcd6 Baca Al-Qur'an \u2013 Arab + Terjemahan Indonesia<\/h2>\r\r  <!-- Dropdown daftar surat -->\r  <label for=\"surahSelect\" style=\"font-weight:bold;\">Pilih Surat:<\/label>\r  <select id=\"surahSelect\" onchange=\"loadSurah(this.value)\" style=\"width:100%; padding:10px; border-radius:8px; margin:10px 0; font-size:16px;\">\r    <option value=\"\">-- Pilih Surat --<\/option>\r  <\/select>\r<style>\r    select {\r  font-size: 16px;         \/* Perbesar ukuran font *\/\r  color: #000;             \/* Warna teks hitam *\/\r  background-color: #fff;  \/* Latar belakang putih *\/\r  padding: 8px 12px;       \/* Tambahkan jarak dalam *\/\r  border-radius: 6px;      \/* Biar lebih rapi *\/\r  border: 1px solid #ccc;  \/* Kasih border tipis *\/\r}\r\rselect option {\r  color: #000;             \/* Warna teks untuk setiap option *\/\r  background: #fff;        \/* Background jelas *\/\r}\r\r<\/style>\r  <!-- Container ayat -->\r  <div id=\"quran-ayat\"><\/div>\r<\/div>\r\r<script>\r  const arabEdition = \"quran-uthmani\";  \/\/ teks Arab standar\r  const indoEdition = \"id.indonesian\";   \/\/ ganti dengan identifier terjemahan Indonesia yg tersedia di edition\r\r  async function loadSurahList() {\r    try {\r      const response = await fetch(\"https:\/\/api.alquran.cloud\/v1\/surah\");\r      const result = await response.json();\r      const surahList = result.data;\r\r      let options = '<option value=\"\">-- Pilih Surat --<\/option>';\r      surahList.forEach(surah => {\r        options += `<option value=\"${surah.number}\">${surah.number}. ${surah.englishName} (${surah.englishNameTranslation})<\/option>`;\r      });\r      document.getElementById(\"surahSelect\").innerHTML = options;\r    } catch (error) {\r      alert(\"\u274c Gagal memuat daftar surat.\");\r    }\r  }\r\r  async function loadSurah(surahNumber) {\r    if (!surahNumber) {\r      document.getElementById(\"quran-ayat\").innerHTML = \"\";\r      return;\r    }\r\r    document.getElementById(\"quran-ayat\").innerHTML = \"<p>Sedang memuat...<\/p>\";\r\r    try {\r      \/\/ Ambil Arab\r      const arabResp = await fetch(`https:\/\/api.alquran.cloud\/v1\/surah\/${surahNumber}\/${arabEdition}`);\r      const arabResult = await arabResp.json();\r      const surahArab = arabResult.data;  \/\/ ada property .ayahs : array, teks Arab\r\r      \/\/ Ambil Terjemahan Indonesia\r      const indoResp = await fetch(`https:\/\/api.alquran.cloud\/v1\/surah\/${surahNumber}\/${indoEdition}`);\r      let surahIndo = null;\r      if (indoResp.ok) {\r        const indoResult = await indoResp.json();\r        surahIndo = indoResult.data;\r      }\r\r      let html = `\r        <h3 style=\"text-align:center; margin-top:20px;\">\r          ${surahArab.englishName} (${surahArab.englishNameTranslation})\r        <\/h3>\r        <p style=\"text-align:center; color:#666;\">\r          ${surahArab.revelationType} \u2022 ${surahArab.numberOfAyahs} ayat\r        <\/p>\r        <hr\/>\r      `;\r\r      \/\/ Gabungkan per ayat\r      surahArab.ayahs.forEach((ayat, index) => {\r        const arabText = ayat.text;\r        const indoText = (surahIndo && surahIndo.ayahs[index]) ? surahIndo.ayahs[index].text : \"\"; \/\/ cek ada tidak\r\r        html += `\r          <div style=\"margin-bottom:15px; padding:15px; background:white; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.1);\">\r            <p style=\"font-size:22px; text-align:right; margin:0; line-height:2;\">${arabText}<\/p>\r            ${indoText ? `<p style=\"font-size:14px; color:#333; margin:5px 0;\">${indoText}<\/p>` : \"\"}\r          <\/div>\r        `;\r      });\r\r      document.getElementById(\"quran-ayat\").innerHTML = html;\r\r    } catch (error) {\r      console.error(error);\r      document.getElementById(\"quran-ayat\").innerHTML = \"\u274c Gagal memuat surat \/ terjemahan.\";\r    }\r  }\r\r  \/\/ Jalankan saat halaman dibuka\r  loadSurahList();\r<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcd6 Baca Al-Qur&#8217;an \u2013 Arab + Terjemahan Indonesia Pilih Surat: &#8212; Pilih Surat &#8212;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-103549","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages\/103549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/comments?post=103549"}],"version-history":[{"count":81,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages\/103549\/revisions"}],"predecessor-version":[{"id":110695,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages\/103549\/revisions\/110695"}],"wp:attachment":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/media?parent=103549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/categories?post=103549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/tags?post=103549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}