Worksheets > Spelling > Grade 4 > Spelling Words > 4th Grade Spelling Words Charts

4th Grade Spelling Words Charts

Update 14th, August, 2025 : We have added a super cool flashcard app for Grade 4 Words Vocabulary, so students can learn from them.

We have prepared a list of "100 Important Spelling Words for 4th Grade". It contains 2 pages. You can below,

Download:

4th Grade Vocabulary Flashcards - Interactive Learning Tool

Progress
0/6

Tap to reveal definition

* {
box-sizing: border-box;
}

#flashcard-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
position: relative;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

#flashcard-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shimmer 3s infinite;
pointer-events: none;
}

@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

#stats-panel {
display: flex;
justify-content: center;
margin-bottom: 30px;
}

.stat {
background: rgba(255,255,255,0.2);
padding: 15px 40px;
border-radius: 15px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.stat-label {
display: block;
color: rgba(255,255,255,0.8);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}

.stat span:last-child {
color: white;
font-size: 24px;
font-weight: bold;
}

#three-container {
height: 400px;
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px;
position: relative;
background: rgba(0,0,0,0.1);
}

#card-content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 500px;
z-index: 10;
pointer-events: none;
}

.card-face {
background: rgba(255,255,255,0.95);
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.3);
opacity: 0;
transform: rotateY(-90deg) scale(0.8);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
width: 100%;
pointer-events: auto;
}

.card-face.active {
opacity: 1;
transform: rotateY(0deg) scale(1);
}

.word-header {
margin-bottom: 30px;
}

#word {
font-size: 42px;
font-weight: 700;
color: #2d3748;
margin: 0 0 10px 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#pos {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.tap-hint {
color: #718096;
font-size: 16px;
font-style: italic;
margin-top: 20px;
opacity: 0.7;
}

#definition {
font-size: 20px;
color: #2d3748;
margin-bottom: 25px;
line-height: 1.6;
font-weight: 500;
}

#example {
background: linear-gradient(135deg, #f7fafc, #edf2f7);
padding: 20px;
border-radius: 15px;
border-left: 4px solid #667eea;
font-style: italic;
color: #4a5568;
font-size: 16px;
line-height: 1.5;
}

#example::before {
content: '"';
font-size: 24px;
color: #667eea;
font-weight: bold;
}

#example::after {
content: '"';
font-size: 24px;
color: #667eea;
font-weight: bold;
}

#controls {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin-top: 30px;
}

.control-btn {
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}

.control-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.1) translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.control-btn svg {
width: 24px;
height: 24px;
color: white;
}

#knowledge-buttons {
display: flex;
gap: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#knowledge-buttons.visible {
opacity: 1;
transform: translateY(0);
}

.knowledge-btn {
padding: 15px 30px;
border: none;
border-radius: 25px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
border: 2px solid transparent;
}

.dont-know {
background: linear-gradient(135deg, #fc8181, #f56565);
color: white;
}

.dont-know:hover {
transform: scale(1.05) translateY(-3px);
box-shadow: 0 8px 25px rgba(245, 101, 101, 0.4);
}

.know {
background: linear-gradient(135deg, #68d391, #48bb78);
color: white;
}

.know:hover {
transform: scale(1.05) translateY(-3px);
box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4);
}

@keyframes cardFlip {
0% { transform: rotateY(0deg) scale(1); }
50% { transform: rotateY(-90deg) scale(0.8); }
100% { transform: rotateY(0deg) scale(1); }
}

@keyframes scoreUpdate {
0% { transform: scale(1); }
50% { transform: scale(1.2); color: #48bb78; }
100% { transform: scale(1); }
}

.score-animation {
animation: scoreUpdate 0.5s ease-out;
}

@keyframes particleFloat {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.particle {
position: absolute;
width: 10px;
height: 10px;
background: radial-gradient(circle, #ffd700, #ffed4e);
border-radius: 50%;
pointer-events: none;
animation: particleFloat 1s ease-out forwards;
}

@media (max-width: 768px) {
#flashcard-container {
padding: 15px;
}

#three-container {
height: 300px;
}

.card-face {
padding: 25px;
}

#word {
font-size: 32px;
}

#definition {
font-size: 18px;
}

#controls {
flex-wrap: wrap;
gap: 20px;
}

.knowledge-btn {
padding: 12px 25px;
font-size: 14px;
}
}

class FlashcardApp {
constructor() {
this.currentIndex = 0;
this.showingBack = false;
this.knownCards = new Set();
this.activeCards = [...flashcards]; // Copy of cards still being studied
this.totalCards = flashcards.length;

this.initThreeJS();
this.initElements();
this.bindEvents();
this.loadCard();
this.updateStats();
}

initThreeJS() {
const container = document.getElementById('three-container');

// Scene setup
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(container.offsetWidth, container.offsetHeight);
this.renderer.setClearColor(0x000000, 0);
container.appendChild(this.renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
this.scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
this.scene.add(directionalLight);

// Create floating particles
this.createParticles();

// Create rotating geometry
this.createRotatingGeometry();

this.camera.position.z = 5;

// Start animation loop
this.animate();

// Handle resize
window.addEventListener('resize', () => this.onWindowResize());
}

createParticles() {
const particleCount = 100;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);

for (let i = 0; i this.animate());

const time = Date.now() * 0.001;

// Rotate particles
if (this.particles) {
this.particles.rotation.y = time * 0.1;
this.particles.rotation.x = time * 0.05;
}

// Rotate geometry
if (this.rotatingMesh) {
this.rotatingMesh.rotation.x = time * 0.3;
this.rotatingMesh.rotation.y = time * 0.2;
}

// Camera gentle movement
this.camera.position.x = Math.sin(time * 0.5) * 0.5;
this.camera.position.y = Math.cos(time * 0.3) * 0.3;
this.camera.lookAt(this.scene.position);

this.renderer.render(this.scene, this.camera);
}

onWindowResize() {
const container = document.getElementById('three-container');
this.camera.aspect = container.offsetWidth / container.offsetHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(container.offsetWidth, container.offsetHeight);
}

initElements() {
this.wordEl = document.getElementById('word');
this.posEl = document.getElementById('pos');
this.definitionEl = document.getElementById('definition');
this.exampleEl = document.getElementById('example');
this.frontContent = document.getElementById('front-content');
this.backContent = document.getElementById('back-content');
this.progressEl = document.getElementById('progress');
this.knowledgeButtons = document.getElementById('knowledge-buttons');
}

bindEvents() {
// Card flip on click
this.frontContent.addEventListener('click', () => this.flipCard());
this.backContent.addEventListener('click', () => this.flipCard());

// Navigation
document.getElementById('prev-btn').addEventListener('click', () => this.previousCard());
document.getElementById('next-btn').addEventListener('click', () => this.nextCard());

// Knowledge buttons
document.getElementById('dont-know').addEventListener('click', () => this.markAnswer(false));
document.getElementById('know').addEventListener('click', () => this.markAnswer(true));

// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
switch(e.key) {
case ' ':
e.preventDefault();
this.flipCard();
break;
case 'ArrowLeft':
e.preventDefault();
this.previousCard();
break;
case 'ArrowRight':
e.preventDefault();
this.nextCard();
break;
case '1':
if (this.showingBack) this.markAnswer(false);
break;
case '2':
if (this.showingBack) this.markAnswer(true);
break;
}
});
}

loadCard() {
if (this.activeCards.length === 0) {
this.showCompletionMessage();
return;
}

// Ensure currentIndex is within bounds
if (this.currentIndex >= this.activeCards.length) {
this.currentIndex = 0;
}

const card = this.activeCards[this.currentIndex];

this.wordEl.textContent = card.w;
this.posEl.textContent = card.pos;
this.definitionEl.textContent = card.def;
this.exampleEl.textContent = card.ex;

// Reset to front
this.showingBack = false;
this.frontContent.classList.add('active');
this.backContent.classList.remove('active');
this.knowledgeButtons.classList.remove('visible');

// Add loading animation
this.frontContent.style.animation = 'cardFlip 0.6s ease-in-out';
setTimeout(() => {
this.frontContent.style.animation = '';
}, 600);
}

flipCard() {
this.showingBack = !this.showingBack;

if (this.showingBack) {
this.frontContent.classList.remove('active');
setTimeout(() => {
this.backContent.classList.add('active');
this.knowledgeButtons.classList.add('visible');
}, 300);
} else {
this.backContent.classList.remove('active');
this.knowledgeButtons.classList.remove('visible');
setTimeout(() => {
this.frontContent.classList.add('active');
}, 300);
}

// Create flip particles
this.createFlipParticles();
}

createFlipParticles() {
const container = document.getElementById('card-content');
const rect = container.getBoundingClientRect();

for (let i = 0; i particle.remove(), 1000);
}
}

markAnswer(correct) {
if (correct) {
// Remove the card from active cards when they know it
this.activeCards.splice(this.currentIndex, 1);
this.knownCards.add(this.totalCards - this.activeCards.length);
this.createSuccessParticles();

// Adjust current index if needed
if (this.currentIndex >= this.activeCards.length && this.activeCards.length > 0) {
this.currentIndex = 0;
}
} else {
// Move to next card for "don't know"
this.nextCard();
return;
}

this.updateStats();

// Load next card or show completion
setTimeout(() => {
this.loadCard();
}, 500);
}

createSuccessParticles() {
const container = document.getElementById('flashcard-container');
const rect = container.getBoundingClientRect();

for (let i = 0; i particle.remove(), 1000);
}
}

previousCard() {
if (this.activeCards.length === 0) return;
this.currentIndex = (this.currentIndex - 1 + this.activeCards.length) % this.activeCards.length;
this.loadCard();
}

nextCard() {
if (this.activeCards.length === 0) return;
this.currentIndex = (this.currentIndex + 1) % this.activeCards.length;
this.loadCard();
}

updateStats() {
const mastered = this.totalCards - this.activeCards.length;
this.progressEl.textContent = `${mastered}/${this.totalCards}`;
}

showCompletionMessage() {
this.frontContent.classList.remove('active');
this.backContent.classList.remove('active');

// Create completion message
const completionDiv = document.createElement('div');
completionDiv.className = 'card-face active';
completionDiv.innerHTML = `

🎉

Well Done!

You've mastered all the vocabulary!

document.getElementById('card-content').appendChild(completionDiv);

// Hide navigation controls
document.getElementById('controls').style.opacity = '0.5';
document.getElementById('controls').style.pointerEvents = 'none';

// Celebration particles
this.createCelebrationParticles();
}

createCelebrationParticles() {
const container = document.getElementById('flashcard-container');
const rect = container.getBoundingClientRect();

for (let i = 0; i particle.remove(), 2000);
}
}
}

// Initialize the app when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
new FlashcardApp();
});

// Handle page visibility change
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// Pause animations when tab is not visible
} else {
// Resume animations when tab becomes visible
}
});

Downloads 1

4th Grade Spelling Words ChartsDownload