.elementor-flashcard-container { font-family: 'Segoe UI', sans-serif; max-width: 600px; margin: 0 auto; } .elementor-flashcard { position: relative; width: 100%; height: 400px; perspective: 1000px; margin-bottom: 20px; cursor: pointer; } .elementor-card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; padding: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.6s; text-align: center; } .elementor-card-front { background: linear-gradient(135deg, #667eea, #764ba2); color: white; } .elementor-card-back { background: #fff; color: #333; transform: rotateY(180deg); } .elementor-flipped .elementor-card-front { transform: rotateY(180deg); } .elementor-flipped .elementor-card-back { transform: rotateY(0deg); } .elementor-card-title { font-size: 1.5rem; margin-bottom: 15px; } .elementor-card-content { font-size: 1.1rem; } .elementor-card-counter { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.2); padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; color: white; } .elementor-progress-container { width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; margin: 20px 0; } .elementor-progress-bar { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 3px; width: 0%; } .elementor-navigation { display: flex; justify-content: center; gap: 20px; } .elementor-nav-btn { background: #667eea; color: white; border: none; font-size: 1 rem; cursor: pointer; } .elementor-nav-btn:disabled { background: #ccc; cursor: not-allowed; } const elementorFlashcards = [ { question: "What is microgravity?", answer: "Microgravity is the condition in which people or objects appear to be weightless. The effects of microgravity can be seen when astronauts and objects float in space." }, { question: "How does microgravity affect the human body?", answer: "Microgravity causes muscle atrophy, bone density loss, fluid redistribution, and can affect balance and coordination. Astronauts must exercise regularly to counteract these effects." }, { question: "What causes microgravity in space?", answer: "Microgravity occurs in space because objects are in continuous free-fall around the Earth. The spacecraft and everything inside it are falling at the same rate, creating the sensation of weightlessness." }, { question: "How is microgravity different from zero gravity?", answer: "Microgravity refers to very small gravitational forces (not zero), while zero gravity implies the complete absence of gravity. True zero gravity doesn't exist in space; microgravity is the correct term." }, { question: "What are some experiments conducted in microgravity?", answer: "Scientists conduct experiments in microgravity to study fluid physics, material science, biology, combustion, and fundamental physics phenomena that are difficult or impossible to observe on Earth." } ]; let elementorCurrentCardIndex = 0; const cardContainer = document.querySelector('.elementor-flashcard'); const cardCounterEls = document.querySelectorAll('.elementor-card-counter'); const prevBtn = document.querySelector('.elementor-nav-btn:first-child'); const nextBtn = document.querySelector('.elementor-nav-btn:last-child'); const progressBar = document.querySelector('.elementor-progress-bar'); const cardTitleFront = document.querySelector('.elementor-card-front .elementor-card-title'); const cardContentFront = document.querySelector('.elementor-card-front .elementor-card-content'); const cardContentBack = document.querySelector('.elementor-card-back .elementor-card-content'); function updateCard() { const card = elementorFlashcards[elementorCurrentCardIndex]; cardTitleFront.textContent = card.question; cardContentFront.textContent = "Click to flip"; cardContentBack.textContent = card.answer; cardCounterEls.forEach(el => el.textContent = `Card ${elementorCurrentCardIndex + 1} of ${elementorFlashcards.length}`); progressBar.style.width = `${((elementorCurrentCardIndex + 1) / elementorFlashcards.length) * 100}%`; prevBtn.disabled = elementorCurrentCardIndex === 0; nextBtn.disabled = elementorCurrentCardIndex === elementorFlashcards.length - 1; cardContainer.classList.remove('elementor-flipped'); } prevBtn.addEventListener('click', () => { if (elementorCurrentCardIndex > 0) { elementorCurrentCardIndex--; updateCard(); } }); nextBtn.addEventListener('click', () => { if (elementorCurrentCardIndex { cardContainer.classList.toggle('elementor-flipped'); }); updateCard();