<!– Add this div where you want to render the flashcards –>
<div id=”vocabulary-flashcards”></div>
<!– Add the React, ReactDOM, and Babel CDN –>
<script src=”https://unpkg.com/react@18/umd/react.production.min.js” crossorigin></script>
<script src=”https://unpkg.com/react-dom@18/umd/react-dom.production.min.js” crossorigin></script>
<script src=”https://unpkg.com/@babel/standalone/babel.min.js” crossorigin></script>
<!– Your React Code –>
<script type=”text/babel”>
const { useState } = React;
// Sample vocabulary data
const initialVocabulary = [
{ word: “Ephemeral”, definition: “Lasting for a very short time” },
{ word: “Ubiquitous”, definition: “Present, appearing, or found everywhere” },
{ word: “Paradigm”, definition: “A typical example or pattern of something” },
{ word: “Serendipity”, definition: “The occurrence of finding pleasant things by chance” },
{ word: “Eloquent”, definition: “Fluent or persuasive in speaking or writing” }
];
function VocabularyFlashcards() {
const [vocabulary] = useState(initialVocabulary);
const [currentIndex, setCurrentIndex] = useState(0);
const [isFlipped, setIsFlipped] = useState(false);
const handleNext = () => {
setIsFlipped(false);
setCurrentIndex((prevIndex) => (prevIndex + 1) % vocabulary.length);
};
const handlePrevious = () => {
setIsFlipped(false);
setCurrentIndex((prevIndex) => (prevIndex – 1 + vocabulary.length) % vocabulary.length);
};
const handleFlip = () => {
setIsFlipped(!isFlipped);
};
const handleShuffle = () => {
setCurrentIndex(0);
setIsFlipped(false);
};
return (
<div style={{ display: ‘flex’, flexDirection: ‘column’, alignItems: ‘center’, justifyContent: ‘center’, minHeight: ‘400px’, padding: ’20px’, backgroundColor: ‘#f0f0f0′, borderRadius: ’10px’ }}>
<div style={{ marginBottom: ’20px’, fontSize: ’20px’, fontWeight: ‘bold’ }}>
Card {currentIndex + 1} of {vocabulary.length}
</div>
<div
style={{
width: ‘100%’,
maxWidth: ‘400px’,
height: ‘150px’,
marginBottom: ’20px’,
cursor: ‘pointer’,
perspective: ‘1000px’ // To create the 3D effect
}}
onClick={handleFlip}
>
<div style={{
width: ‘100%’,
height: ‘100%’,
position: ‘relative’,
transition: ‘transform 0.6s’,
transformStyle: ‘preserve-3d’,
transform: isFlipped ? ‘rotateY(180deg)’ : ‘rotateY(0deg)’
}}>
{/* Front Side */}
<div style={{
position: ‘absolute’,
width: ‘100%’,
height: ‘100%’,
backfaceVisibility: ‘hidden’,
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘center’,
textAlign: ‘center’,
backgroundColor: ‘white’,
borderRadius: ’10px’,
boxShadow: ‘0px 4px 8px rgba(0, 0, 0, 0.1)’,
fontSize: ’24px’,
fontWeight: ‘bold’
}}>
{vocabulary[currentIndex].word}
</div>
{/* Back Side */}
<div style={{
position: ‘absolute’,
width: ‘100%’,
height: ‘100%’,
backfaceVisibility: ‘hidden’,
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘center’,
textAlign: ‘center’,
backgroundColor: ‘white’,
borderRadius: ’10px’,
boxShadow: ‘0px 4px 8px rgba(0, 0, 0, 0.1)’,
fontSize: ’24px’,
fontWeight: ‘bold’,
transform: ‘rotateY(180deg)’ // Flip the back side
}}>
{vocabulary[currentIndex].definition}
</div>
</div>
</div>
<div style={{ display: ‘flex’, gap: ’10px’, marginBottom: ’20px’ }}>
<button onClick={handlePrevious} style={{ padding: ’10px 20px’, fontSize: ’16px’ }}>Previous</button>
<button onClick={handleFlip} style={{ padding: ’10px 20px’, fontSize: ’16px’ }}>Flip</button>
<button onClick={handleNext} style={{ padding: ’10px 20px’, fontSize: ’16px’ }}>Next</button>
</div>
<button onClick={handleShuffle} style={{ padding: ’10px 20px’, fontSize: ’16px’, border: ‘1px solid black’, display: ‘flex’, alignItems: ‘center’, gap: ‘5px’ }}>
Shuffle
</button>
</div>
);
}
// Render the VocabularyFlashcards component
ReactDOM.createRoot(document.getElementById(‘vocabulary-flashcards’)).render(<VocabularyFlashcards />);
</script>
