Skip to content
Our best students
Refer a Friend
Team
login
Facebook
Twitter
Instagram
Youtube
Home
Edu Games
Quran & Tajweed games
Noorani Qaida games
Arabic games
Islamic games
Gallery
Teachers Gallery
Students Gallery
Others Gallery
Pricing
Library
Quizzes
Free Islamic Books
Media
Blog
Contact
Get Free Trial
Home
Edu Games
Quran & Tajweed games
Noorani Qaida games
Arabic games
Islamic games
Gallery
Teachers Gallery
Students Gallery
Others Gallery
Pricing
Library
Quizzes
Free Islamic Books
Media
Blog
Contact
Get Free Trial
Islamic games
Home
»
Islamic games
5 Names related to Al-Hajj
quiz of Hajj
hajj steps
Hajj
Quizz about hajj
Hajj Wordbank
if(typeof ewww_webp_supported==="undefined"){var ewww_webp_supported=!1}if(ewww_webp_supported){document.body.classList.add("webp-support")}</script> <div id='app'> <div id='welcome-screen' class='screen active'> <div class='stars'>๐โจ</div> <h1>Welcome to the Game</h1> <h2 class='arabic-title'>ุฃุณุฑุฉ ุงูุฑุณูู ๏ทบ</h2> <p class='instructions'>Learn about the family of Prophet Muhammad ๏ทบ in a fun way!</p> <button class='btn' onclick='showScreen("instructions-screen")'>Play ๐</button> </div> <div id='instructions-screen' class='screen'> <div class='stars'>๐</div> <h1>How to Play</h1> <p class='instructions'>Read the name or relationship in Arabic.<br><br>Choose the correct matching word from the 4 options.</p> <button class='btn btn-gold' onclick='startGame()'>Start Game ๐</button> </div> <div id='game-screen' class='screen' style='justify-content: flex-start;'> <div class='top-bar'> <span id='question-counter'>Q: 1/32</span> <span id='score-counter'>Score: 0</span> <span id='timer-counter'>โฐ 30s</span> </div> <div class='progress-container'><div id='progress-bar' class='progress-bar'></div></div> <div class='question-card' id='question-card'> <div id='main-word' class='main-word'>ุนูุจูุฏู ุงูู ูุทููููุจู</div> <div id='sub-word' class='sub-word'>What is the relationship?</div> </div> <div class='options-grid' id='options-grid'></div> <div id='feedback-msg' class='feedback-msg'></div> </div> <div id='result-screen' class='screen'> <div class='stars' id='result-icon'>๐</div> <h1>Final Score</h1> <div id='final-score' class='score-display'>32 / 32</div> <h2 id='final-message' class='arabic-title' style='color: var(--text-main);'>Excellent! ๐</h2> <button class='btn btn-gold' onclick='resetGame()'>Play Again ๐</button> </div> </div> <script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1"> let currentScreen = 'welcome-screen'; let currentQuestionIndex = 0; let score = 0; let shuffledQuestions = []; let isAnimating = false; let audioContext = null; let timerInterval = null; let timeLeft = 30; const allQuestions = [ { q: 'ุขู ูููุฉู', sub: 'What is the relationship?', options: ['His mother', 'His aunt', 'His wife', 'His daughter'], answer: 0 }, { q: 'His mother', sub: 'Who is she?', options: ['ุขู ูููุฉู', 'ุฎูุฏููุฌูุฉู', 'ุตููููููุฉู', 'ููุงุทูู ูุฉู'], answer: 0 }, { q: 'ุนูุจูุฏู ุงูู ูุทููููุจู', sub: 'What is the relationship?', options: ['His grandfather', 'His uncle', 'His father', 'His son'], answer: 0 }, { q: 'His grandfather', sub: 'Who is he?', options: ['ุนูุจูุฏู ุงูู ูุทููููุจู', 'ุฃูุจูู ุทูุงููุจู', 'ุญูู ูุฒูุฉู', 'ุงูุนูุจููุงุณู'], answer: 0 }, { q: 'ุญูู ูุฒูุฉู', sub: 'What is the relationship?', options: ['His uncle', 'His grandfather', 'His son', 'His father'], answer: 0 }, { q: 'ุตููููููุฉู', sub: 'What is the relationship?', options: ['His aunt', 'His wife', 'His mother', 'His daughter'], answer: 0 }, { q: 'His aunt', sub: 'Who is she?', options: ['ุตููููููุฉู', 'ุนูุงุฆูุดูุฉู', 'ุฒูููููุจู', 'ุฑููููููุฉู'], answer: 0 }, { q: 'ููุงุทูู ูุฉู', sub: 'What is the relationship?', options: ['His daughter', 'His aunt', 'His wife', 'His mother'], answer: 0 }, { q: 'His daughter', sub: 'Who is she?', options: ['ููุงุทูู ูุฉู', 'ุขู ูููุฉู', 'ุฎูุฏููุฌูุฉู', 'ุตููููููุฉู'], answer: 0 }, { q: 'ุฃูู ูู ููููุซููู ู', sub: 'What is the relationship?', options: ['His daughter', 'His wife', 'His aunt', 'His mother'], answer: 0 }, { q: 'ุฒูููููุจู', sub: 'What is the relationship?', options: ['His daughter', 'His wife', 'His aunt', 'His mother'], answer: 0 }, { q: 'ุฑููููููุฉู', sub: 'What is the relationship?', options: ['His daughter', 'His aunt', 'His wife', 'His mother'], answer: 0 }, { q: 'ุฎูุฏููุฌูุฉู', sub: 'What is the relationship?', options: ['His wife', 'His aunt', 'His daughter', 'His mother'], answer: 0 }, { q: 'His wife', sub: 'Who is she?', options: ['ุฎูุฏููุฌูุฉู', 'ุขู ูููุฉู', 'ููุงุทูู ูุฉู', 'ุตููููููุฉู'], answer: 0 }, { q: 'ุนูุงุฆูุดูุฉู', sub: 'What is the relationship?', options: ['His wife', 'His daughter', 'His aunt', 'His mother'], answer: 0 }, { q: 'His wife', sub: 'Who is she?', options: ['ุนูุงุฆูุดูุฉู', 'ุฑููููููุฉู', 'ุฒูููููุจู', 'ุฃูู ูู ููููุซููู ู'], answer: 0 }, { q: 'ุงูููุงุณูู ู', sub: 'What is the relationship?', options: ['His son', 'His uncle', 'His grandfather', 'His father'], answer: 0 }, { q: 'His son', sub: 'Who is he?', options: ['ุงูููุงุณูู ู', 'ุญูู ูุฒูุฉู', 'ุงูุนูุจููุงุณู', 'ุฃูุจูู ุทูุงููุจู'], answer: 0 }, { q: 'ุฅูุจูุฑูุงูููู ู', sub: 'What is the relationship?', options: ['His son', 'His father', 'His grandfather', 'His uncle'], answer: 0 }, { q: 'His son', sub: 'Who is he?', options: ['ุฅูุจูุฑูุงูููู ู', 'ุนูุจูุฏู ุงูู ูุทููููุจู', 'ุญูู ูุฒูุฉู', 'ุงูุนูุจููุงุณู'], answer: 0 }, { q: 'ุงูุนูุจููุงุณู', sub: 'What is the relationship?', options: ['His uncle', 'His grandfather', 'His son', 'His father'], answer: 0 }, { q: 'His uncle', sub: 'Who is he?', options: ['ุงูุนูุจููุงุณู', 'ุนูุจูุฏู ุงูู ูุทููููุจู', 'ุงูููุงุณูู ู', 'ุฅูุจูุฑูุงูููู ู'], answer: 0 }, { q: 'ุฃูุจูู ุทูุงููุจู', sub: 'What is the relationship?', options: ['His uncle', 'His grandfather', 'His son', 'His father'], answer: 0 }, { q: 'His uncle', sub: 'Who is he?', options: ['ุฃูุจูู ุทูุงููุจู', 'ุงูููุงุณูู ู', 'ุฅูุจูุฑูุงูููู ู', 'ุนูุจูุฏู ุงูู ูุทููููุจู'], answer: 0 }, { q: 'His uncle', sub: 'Who is he?', options: ['ุญูู ูุฒูุฉู', 'ุนูุจูุฏู ุงูู ูุทููููุจู', 'ุงูููุงุณูู ู', 'ุฅูุจูุฑูุงูููู ู'], answer: 0 }, { q: 'His son', sub: 'Who is he?', options: ['ุนูุจูุฏู ุงูููู', 'ุญูู ูุฒูุฉู', 'ุงูุนูุจููุงุณู', 'ุฃูุจูู ุทูุงููุจู'], answer: 0 }, { q: 'His father', sub: 'Who is he?', options: ['ุนูุจูุฏู ุงูููู', 'ุญูู ูุฒูุฉู', 'ุงูุนูุจููุงุณู', 'ุฃูุจูู ุทูุงููุจู'], answer: 0 }, { q: 'ุนูุจูุฏู ุงูููู', sub: 'What is the relationship?', options: ['His father', 'His uncle', 'His grandfather', 'His wife'], answer: 0 }, { q: 'ุนูุจูุฏู ุงูููู', sub: 'What is the relationship?', options: ['His son', 'His uncle', 'His grandfather', 'His wife'], answer: 0 }, { q: 'His daughter', sub: 'Who is she?', options: ['ุฒูููููุจู', 'ุฎูุฏููุฌูุฉู', 'ุตููููููุฉู', 'ุขู ูููุฉู'], answer: 0 }, { q: 'His daughter', sub: 'Who is she?', options: ['ุฑููููููุฉู', 'ุนูุงุฆูุดูุฉู', 'ุตููููููุฉู', 'ุขู ูููุฉู'], answer: 0 }, { q: 'His daughter', sub: 'Who is she?', options: ['ุฃูู ูู ููููุซููู ู', 'ุฎูุฏููุฌูุฉู', 'ุตููููููุฉู', 'ุขู ูููุฉู'], answer: 0 } ]; function initAudio() { if (!audioContext) { audioContext = new (window.AudioContext || window.webkitAudioContext)(); } if (audioContext.state === 'suspended') { audioContext.resume(); } } function playTone(freq, type, duration, vol = 0.1) { if (!audioContext) return; const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.type = type; oscillator.frequency.setValueAtTime(freq, audioContext.currentTime); gainNode.gain.setValueAtTime(vol, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.start(); oscillator.stop(audioContext.currentTime + duration); } function playCorrectSound() { playTone(523.25, 'sine', 0.15); setTimeout(() => playTone(659.25, 'sine', 0.15), 100); setTimeout(() => playTone(783.99, 'sine', 0.3), 200); } function playWrongSound() { playTone(300, 'triangle', 0.2, 0.2); setTimeout(() => playTone(250, 'triangle', 0.3, 0.2), 150); } function shuffleArray(array) { const arr = [...array]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } function showScreen(screenId) { document.querySelectorAll('.screen').forEach(s => s.classList.remove('active')); document.getElementById(screenId).classList.add('active'); currentScreen = screenId; } function startTimer() { clearInterval(timerInterval); timeLeft = 30; updateTimerUI(); timerInterval = setInterval(() => { timeLeft--; updateTimerUI(); if (timeLeft <= 0) { clearInterval(timerInterval); document.querySelectorAll('.option-btn').forEach(btn => btn.disabled = true); const feedbackBox = document.getElementById('feedback-msg'); feedbackBox.innerText = 'โฐ Time\'s up!'; feedbackBox.style.color = 'var(--wrong-color)'; feedbackBox.classList.add('show'); setTimeout(() => { currentQuestionIndex++; if (currentQuestionIndex < shuffledQuestions.length) { loadQuestion(); updateUI(); } else { endGame(); } }, 2000); } }, 1000); } function updateTimerUI() { document.getElementById('timer-counter').innerText = `โฐ ${timeLeft}s`; } function startGame() { initAudio(); shuffledQuestions = shuffleArray(allQuestions); currentQuestionIndex = 0; score = 0; updateUI(); showScreen('game-screen'); loadQuestion(); } function loadQuestion() { isAnimating = false; const qData = shuffledQuestions[currentQuestionIndex]; const card = document.getElementById('question-card'); card.style.animation = 'none'; card.offsetHeight; card.style.animation = 'popIn 0.4s ease-out'; document.getElementById('main-word').innerText = qData.q; document.getElementById('sub-word').innerText = qData.sub; const optionsContainer = document.getElementById('options-grid'); optionsContainer.innerHTML = ''; const correctText = qData.options[qData.answer]; const displayOptions = shuffleArray(qData.options); displayOptions.forEach((optText) => { const btn = document.createElement('button'); btn.className = 'option-btn'; btn.innerText = optText; btn.onclick = () => handleAnswer(btn, optText === correctText); optionsContainer.appendChild(btn); }); startTimer(); document.getElementById('feedback-msg').classList.remove('show'); } function updateUI() { document.getElementById('question-counter').innerText = `Q: ${currentQuestionIndex + 1}/${shuffledQuestions.length}`; document.getElementById('score-counter').innerText = `Score: ${score}`; const progressPercent = (currentQuestionIndex / shuffledQuestions.length) * 100; document.getElementById('progress-bar').style.width = `${progressPercent}%`; } function handleAnswer(selectedBtn, isCorrect) { if (isAnimating) return; isAnimating = true; clearInterval(timerInterval); document.querySelectorAll('.option-btn').forEach(btn => btn.disabled = true); const feedbackBox = document.getElementById('feedback-msg'); if (isCorrect) { selectedBtn.classList.add('correct'); playCorrectSound(); score++; feedbackBox.innerText = 'Great job! Correct answer ๐'; feedbackBox.style.color = 'var(--correct-color)'; } else { selectedBtn.classList.add('wrong'); playWrongSound(); feedbackBox.innerText = 'Focus more on the next question โจ'; feedbackBox.style.color = 'var(--wrong-color)'; } updateUI(); feedbackBox.classList.add('show'); setTimeout(() => { currentQuestionIndex++; if (currentQuestionIndex < shuffledQuestions.length) { loadQuestion(); updateUI(); } else { endGame(); } }, 2000); } function endGame() { clearInterval(timerInterval); showScreen('result-screen'); document.getElementById('final-score').innerText = `${score} / ${shuffledQuestions.length}`; const msgEl = document.getElementById('final-message'); const iconEl = document.getElementById('result-icon'); if (score >= 28) { msgEl.innerText = 'Excellent! ๐'; iconEl.innerText = '๐'; } else if (score >= 16) { msgEl.innerText = 'Great work ๐'; iconEl.innerText = 'โญ'; } else { msgEl.innerText = 'Try again ๐ก'; iconEl.innerText = '๐ช'; } document.getElementById('progress-bar').style.width = '100%'; } function resetGame() { showScreen('welcome-screen'); } </script> <script id="perfmatters-delayed-scripts-js">const pmDelayClick=true;const pmDelayTimer=setTimeout(pmTriggerDOMListener,10*1000);const pmUserInteractions=["keydown","mousedown","mousemove","wheel","touchmove","touchstart","touchend"],pmDelayedScripts={normal:[],defer:[],async:[]},jQueriesArray=[],pmInterceptedClicks=[];var pmDOMLoaded=!1,pmClickTarget="";function pmTriggerDOMListener(){"undefined"!=typeof pmDelayTimer&&clearTimeout(pmDelayTimer),pmUserInteractions.forEach(function(e){window.removeEventListener(e,pmTriggerDOMListener,{passive:!0})}),document.removeEventListener("visibilitychange",pmTriggerDOMListener),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",pmTriggerDelayedScripts):pmTriggerDelayedScripts()}async function pmTriggerDelayedScripts(){pmDelayEventListeners(),pmDelayJQueryReady(),pmProcessDocumentWrite(),pmSortDelayedScripts(),pmPreloadDelayedScripts(),await pmLoadDelayedScripts(pmDelayedScripts.normal),await pmLoadDelayedScripts(pmDelayedScripts.defer),await pmLoadDelayedScripts(pmDelayedScripts.async),await pmTriggerEventListeners(),document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),window.dispatchEvent(new Event("perfmatters-allScriptsLoaded")),pmReplayClicks()}function pmDelayEventListeners(){let e={};function t(t,r){function n(r){return e[t].delayedEvents.indexOf(r)>=0?"perfmatters-"+r:r}e[t]||(e[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},delayedEvents:[]},t.addEventListener=function(){arguments[0]=n(arguments[0]),e[t].originalFunctions.add.apply(t,arguments)},t.removeEventListener=function(){arguments[0]=n(arguments[0]),e[t].originalFunctions.remove.apply(t,arguments)}),e[t].delayedEvents.push(r)}function r(e,t){let r=e[t];Object.defineProperty(e,t,{get:r||function(){},set:function(r){e["perfmatters"+t]=r}})}t(document,"DOMContentLoaded"),t(window,"DOMContentLoaded"),t(window,"load"),t(window,"pageshow"),t(document,"readystatechange"),r(document,"onreadystatechange"),r(window,"onload"),r(window,"onpageshow")}function pmDelayJQueryReady(){let e=window.jQuery;Object.defineProperty(window,"jQuery",{get:()=>e,set(t){if(t&&t.fn&&!jQueriesArray.includes(t)){t.fn.ready=t.fn.init.prototype.ready=function(e){pmDOMLoaded?e.bind(document)(t):document.addEventListener("perfmatters-DOMContentLoaded",function(){e.bind(document)(t)})};let r=t.fn.on;t.fn.on=t.fn.init.prototype.on=function(){if(this[0]===window){function e(e){return e=(e=(e=e.split(" ")).map(function(e){return"load"===e||0===e.indexOf("load.")?"perfmatters-jquery-load":e})).join(" ")}"string"==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=e(arguments[0]):"object"==typeof arguments[0]&&Object.keys(arguments[0]).forEach(function(t){delete Object.assign(arguments[0],{[e(t)]:arguments[0][t]})[t]})}return r.apply(this,arguments),this},jQueriesArray.push(t)}e=t}})}function pmProcessDocumentWrite(){let e=new Map;document.write=document.writeln=function(t){var r=document.currentScript,n=document.createRange();let a=e.get(r);void 0===a&&(a=r.nextSibling,e.set(r,a));var i=document.createDocumentFragment();n.setStart(i,0),i.appendChild(n.createContextualFragment(t)),r.parentElement.insertBefore(i,a)}}function pmSortDelayedScripts(){document.querySelectorAll("script[type=pmdelayedscript]").forEach(function(e){e.hasAttribute("src")?e.hasAttribute("defer")&&!1!==e.defer?pmDelayedScripts.defer.push(e):e.hasAttribute("async")&&!1!==e.async?pmDelayedScripts.async.push(e):pmDelayedScripts.normal.push(e):pmDelayedScripts.normal.push(e)})}function pmPreloadDelayedScripts(){var e=document.createDocumentFragment();[...pmDelayedScripts.normal,...pmDelayedScripts.defer,...pmDelayedScripts.async].forEach(function(t){var r=t.getAttribute("src");if(r){var n=document.createElement("link");n.href=r,n.rel="preload",n.as="script",e.appendChild(n)}}),document.head.appendChild(e)}async function pmLoadDelayedScripts(e){var t=e.shift();return t?(await pmReplaceScript(t),pmLoadDelayedScripts(e)):Promise.resolve()}async function pmReplaceScript(e){return await pmNextFrame(),new Promise(function(t){let r=document.createElement("script");[...e.attributes].forEach(function(e){let t=e.nodeName;"type"!==t&&("data-type"===t&&(t="type"),r.setAttribute(t,e.nodeValue))}),e.hasAttribute("src")?(r.addEventListener("load",t),r.addEventListener("error",t)):(r.text=e.text,t()),e.parentNode.replaceChild(r,e)})}async function pmTriggerEventListeners(){pmDOMLoaded=!0,await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-readystatechange")),await pmNextFrame(),document.perfmattersonreadystatechange&&document.perfmattersonreadystatechange(),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-load")),await pmNextFrame(),window.perfmattersonload&&window.perfmattersonload(),await pmNextFrame(),jQueriesArray.forEach(function(e){e(window).trigger("perfmatters-jquery-load")});let e=new Event("perfmatters-pageshow");e.persisted=window.pmPersisted,window.dispatchEvent(e),await pmNextFrame(),window.perfmattersonpageshow&&window.perfmattersonpageshow({persisted:window.pmPersisted})}async function pmNextFrame(){return new Promise(function(e){requestAnimationFrame(e)})}function pmClickHandler(e){e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmInterceptedClicks.push(e),e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation()}function pmReplayClicks(){window.removeEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.removeEventListener("mousedown",pmTouchStartHandler),pmInterceptedClicks.forEach(e=>{e.target.outerHTML===pmClickTarget&&e.target.dispatchEvent(new MouseEvent("click",{view:e.view,bubbles:!0,cancelable:!0}))})}function pmTouchStartHandler(e){"HTML"!==e.target.tagName&&(pmClickTarget||(pmClickTarget=e.target.outerHTML),window.addEventListener("touchend",pmTouchEndHandler),window.addEventListener("mouseup",pmTouchEndHandler),window.addEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.addEventListener("mousemove",pmTouchMoveHandler),e.target.addEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"onclick","pm-onclick"))}function pmTouchMoveHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler),e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick")}function pmTouchEndHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler)}function pmRenameDOMAttribute(e,t,r){e.hasAttribute&&e.hasAttribute(t)&&(event.target.setAttribute(r,event.target.getAttribute(t)),event.target.removeAttribute(t))}window.addEventListener("pageshow",e=>{window.pmPersisted=e.persisted}),pmUserInteractions.forEach(function(e){window.addEventListener(e,pmTriggerDOMListener,{passive:!0})}),pmDelayClick&&(window.addEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.addEventListener("mousedown",pmTouchStartHandler)),document.addEventListener("visibilitychange",pmTriggerDOMListener);var pmeDeviceMode,pmeAnimationSettingsKeys,pmeCurrentAnimation;function pmeAnimation(){(pmeDeviceMode=document.createElement("span")).id="elementor-device-mode",pmeDeviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(pmeDeviceMode),requestAnimationFrame(pmeDetectAnimations)}function pmeDetectAnimations(){pmeAnimationSettingsKeys=pmeListAnimationSettingsKeys(getComputedStyle(pmeDeviceMode,":after").content.replace(/"/g,"")),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(a=>{let b=a.getBoundingClientRect();if(b.bottom>=0&&b.top<=window.innerHeight)try{pmeAnimateElement(a)}catch(c){}})}function pmeAnimateElement(a){let b=JSON.parse(a.dataset.settings),d=b._animation_delay||b.animation_delay||0,c=b[pmeAnimationSettingsKeys.find(a=>b[a])];if("none"===c)return void a.classList.remove("elementor-invisible");a.classList.remove(c),pmeCurrentAnimation&&a.classList.remove(pmeCurrentAnimation),pmeCurrentAnimation=c;let e=setTimeout(()=>{a.classList.remove("elementor-invisible"),a.classList.add("animated",c),pmeRemoveAnimationSettings(a,b)},d);window.addEventListener("perfmatters-startLoading",function(){clearTimeout(e)})}function pmeListAnimationSettingsKeys(b="mobile"){let a=[""];switch(b){case"mobile":a.unshift("_mobile");case"tablet":a.unshift("_tablet");case"desktop":a.unshift("_desktop")}let c=[];return["animation","_animation"].forEach(b=>{a.forEach(a=>{c.push(b+a)})}),c}function pmeRemoveAnimationSettings(a,b){pmeListAnimationSettingsKeys().forEach(a=>delete b[a]),a.dataset.settings=JSON.stringify(b)}document.addEventListener("DOMContentLoaded",pmeAnimation)</script></body> </html>" style="width: 100%; height: 650px; border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);" allow="autoplay">
5 Names related to Al-Hajj