APK FET
APK FET English: The Ultimate A-Z Fun Learning Adventure for Kids
Transform Screen Time into Learning Time! APK FET English is a vibrant, interactive educational app designed specifically for toddlers, preschoolers, and kindergarteners. Our "Play-to-Learn" philosophy ensures that children master the English alphabet, phonics, and basic spelling through high-engagement activities and visual rewards.
Key Features Designed for Early Learners:
Complete A-Z Phonics Library: Every letter comes to life! From "A for Apple" to "Z for Zebra," kids can tap to hear crystal-clear pronunciations, helping them build a strong foundation in phonetics and vocabulary.
Interactive "Draw & Match" Game: Our innovative canvas-based matching system allows children to physically draw lines between letters and objects. This improves hand-eye coordination and fine motor skills while reinforcing association logic.
Smart Quiz (MCQ) Challenges: Engaging visual quizzes challenge kids to identify objects based on their starting letters, building critical thinking and memory retention.
Spelling & Fill-in-the-Blanks: Introduce your child to spelling with our intuitive letter-placement games. It’s the perfect bridge between alphabet recognition and reading.
Kid-Safe & Responsive UI: Whether on a smartphone or a large tablet, the app scales perfectly. With high-contrast colors, large touch targets, and a "No-Shuffle" gameplay mode, children can focus on completing tasks at their own pace without frustration.
Positive Reinforcement: Every correct answer earns a "Gold Star," encouraging children to keep learning through a gamified reward system.
Why Parents and Teachers Love APK FET English:
No Confusion: Games stay stable until the task is complete—perfect for short attention spans.
Multisensory Learning: Combines visual emojis, audio feedback, and tactile drawing.
Clean Design: A distraction-free environment that focuses purely on educational growth.
Download APK FET English today and watch your child’s confidence in English soar!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>APK FET English - Kids Learning Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Quicksand', sans-serif;
background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
min-height: 100vh;
touch-action: manipulation;
}
.heading-font { font-family: 'Fredoka One', cursive; }
.card-bounce:hover { transform: scale(1.05); }
.match-dot { width: 15px; height: 15px; background: #3b82f6; border-radius: 50%; display: inline-block; }
canvas { pointer-events: none; position: absolute; top: 0; left: 0; z-index: 10; }
.draggable-area { touch-action: none; position: relative; }
.matched { opacity: 0.5; filter: grayscale(1); pointer-events: none; }
</style>
</head>
<body class="p-2 md:p-6 overflow-x-hidden">
<div id="app" class="max-w-5xl mx-auto">
<!-- Header -->
<header class="text-center mb-6">
<h1 class="heading-font text-4xl md:text-5xl text-blue-600 drop-shadow-md mb-2">APK FET English</h1>
<div id="score-panel" class="bg-white inline-block px-6 py-2 rounded-full shadow-md font-bold text-orange-500 text-lg">
Stars: <span id="star-count">0</span> ⭐
</div>
</header>
<!-- Navigation -->
<nav class="flex flex-wrap justify-center gap-2 mb-6">
<button onclick="switchTab('abc')" class="bg-pink-500 text-white px-4 py-2 rounded-xl shadow hover:bg-pink-600 transition text-sm md:text-base">A-Z Sounds</button>
<button onclick="switchTab('match')" class="bg-yellow-500 text-white px-4 py-2 rounded-xl shadow hover:bg-yellow-600 transition text-sm md:text-base">Match Lines</button>
<button onclick="switchTab('mcq')" class="bg-green-500 text-white px-4 py-2 rounded-xl shadow hover:bg-green-600 transition text-sm md:text-base">Quizzes</button>
<button onclick="switchTab('fill')" class="bg-purple-500 text-white px-4 py-2 rounded-xl shadow hover:bg-purple-600 transition text-sm md:text-base">Spelling</button>
</nav>
<!-- Main Workspace -->
<main id="game-container" class="bg-white/90 backdrop-blur rounded-3xl p-4 md:p-8 shadow-xl min-h-[500px] relative overflow-hidden">
<!-- Dynamic Content -->
</main>
</div>
<!-- UI Overlay for success -->
<div id="success-overlay" class="fixed inset-0 bg-white/90 z-50 flex flex-col items-center justify-center hidden">
<h2 class="heading-font text-6xl text-green-500 mb-4">AWESOME!</h2>
<div class="text-8xl">🌟🌟🌟</div>
<button onclick="closeOverlay()" class="mt-8 bg-blue-500 text-white px-10 py-4 rounded-full text-2xl font-bold shadow-lg">NEXT</button>
</div>
<script>
let currentStars = 0;
let activeTab = 'abc';
let matchState = {
activeLine: null,
lines: [],
currentPairs: [],
matchedCount: 0
};
const alphabetData = [
{ char: 'A', word: 'Apple', emoji: '🍎', color: 'bg-red-100' },
{ char: 'B', word: 'Ball', emoji: '⚽', color: 'bg-blue-100' },
{ char: 'C', word: 'Cat', emoji: '🐱', color: 'bg-orange-100' },
{ char: 'D', word: 'Dog', emoji: '🐶', color: 'bg-yellow-100' },
{ char: 'E', word: 'Egg', emoji: '🥚', color: 'bg-gray-100' },
{ char: 'F', word: 'Fish', emoji: '🐟', color: 'bg-cyan-100' },
{ char: 'G', word: 'Grapes', emoji: '🍇', color: 'bg-purple-100' },
{ char: 'H', word: 'Hat', emoji: '🎩', color: 'bg-indigo-100' },
{ char: 'I', word: 'Igloo', emoji: '🛖', color: 'bg-blue-50' },
{ char: 'J', word: 'Jam', emoji: '🍯', color: 'bg-red-50' },
{ char: 'K', word: 'Kite', emoji: '🪁', color: 'bg-pink-100' },
{ char: 'L', word: 'Lion', emoji: '🦁', color: 'bg-yellow-200' },
{ char: 'M', word: 'Monkey', emoji: '🐒', color: 'bg-amber-100' },
{ char: 'N', word: 'Nest', emoji: '🪺', color: 'bg-emerald-100' },
{ char: 'O', word: 'Orange', emoji: '🍊', color: 'bg-orange-200' },
{ char: 'P', word: 'Panda', emoji: '🐼', color: 'bg-slate-100' },
{ char: 'Q', word: 'Queen', emoji: '👸', color: 'bg-purple-200' },
{ char: 'R', word: 'Rabbit', emoji: '🐰', color: 'bg-gray-200' },
{ char: 'S', word: 'Sun', emoji: '☀️', color: 'bg-yellow-300' },
{ char: 'T', word: 'Tiger', emoji: '🐯', color: 'bg-orange-300' },
{ char: 'U', word: 'Umbrella', emoji: '⛱️', color: 'bg-blue-300' },
{ char: 'V', word: 'Van', emoji: '🚐', color: 'bg-zinc-200' },
{ char: 'W', word: 'Watch', emoji: '⌚', color: 'bg-slate-200' },
{ char: 'X', word: 'Xylophone', emoji: '🎹', color: 'bg-rose-100' },
{ char: 'Y', word: 'Yo-Yo', emoji: '🪀', color: 'bg-green-100' },
{ char: 'Z', word: 'Zebra', emoji: '🦓', color: 'bg-stone-200' }
];
function switchTab(tab) {
activeTab = tab;
render();
}
function addStar(points = 10) {
currentStars += points;
document.getElementById('star-count').textContent = currentStars;
}
function speak(text) {
const utter = new SpeechSynthesisUtterance(text);
utter.rate = 0.9;
window.speechSynthesis.speak(utter);
}
function render() {
const container = document.getElementById('game-container');
container.innerHTML = '';
if (activeTab === 'abc') {
container.innerHTML = `
<h2 class="heading-font text-2xl text-pink-600 text-center mb-6">Learn Your A-Z Sounds!</h2>
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-7 gap-3">
${alphabetData.map(item => `
<div onclick="speak('${item.word}')" class="${item.color} p-4 rounded-2xl text-center cursor-pointer card-bounce shadow shadow-black/5 flex flex-col items-center">
<span class="text-2xl font-black">${item.char}</span>
<span class="text-3xl my-1">${item.emoji}</span>
<span class="text-xs font-bold text-gray-500 uppercase">${item.word}</span>
</div>
`).join('')}
</div>
`;
} else if (activeTab === 'match') {
setupMatchGame();
} else if (activeTab === 'mcq') {
const q = alphabetData[Math.floor(Math.random() * alphabetData.length)];
const others = alphabetData.filter(x => x.char !== q.char).sort(() => 0.5 - Math.random()).slice(0, 2);
const options = [q, ...others].sort(() => 0.5 - Math.random());
container.innerHTML = `
<h2 class="heading-font text-2xl text-green-600 text-center mb-8">What starts with ${q.char}?</h2>
<div class="grid gap-4 max-w-md mx-auto">
${options.map(opt => `
<button onclick="checkMCQ('${opt.char}', '${q.char}')" class="bg-white border-4 border-green-100 p-6 rounded-3xl text-4xl shadow-md hover:bg-green-50 flex items-center justify-center gap-4">
${opt.emoji} <span class="text-xl font-bold">${opt.word}</span>
</button>
`).join('')}
</div>
`;
} else if (activeTab === 'fill') {
const f = alphabetData[Math.floor(Math.random() * alphabetData.length)];
const wordArr = f.word.toUpperCase().split('');
const missingIdx = Math.floor(Math.random() * wordArr.length);
const missingChar = wordArr[missingIdx];
wordArr[missingIdx] = '_';
container.innerHTML = `
<h2 class="heading-font text-2xl text-purple-600 text-center mb-8">Fill the missing letter!</h2>
<div class="text-center mb-10">
<div class="text-6xl mb-6">${f.emoji}</div>
<div class="text-6xl font-black tracking-widest text-gray-800">${wordArr.join('')}</div>
</div>
<div class="flex flex-wrap justify-center gap-3">
${[missingChar, ...['A','E','O','S','T'].filter(x=>x!==missingChar)].sort(() => 0.5 - Math.random()).slice(0, 4).map(l => `
<button onclick="checkFill('${l}', '${missingChar}')" class="bg-purple-500 text-white w-20 h-20 rounded-2xl text-4xl font-black shadow-xl active:scale-90 transition">
${l}
</button>
`).join('')}
</div>
`;
}
}
// Matching Logic
function setupMatchGame() {
const container = document.getElementById('game-container');
const set = alphabetData.sort(() => 0.5 - Math.random()).slice(0, 4);
const leftItems = [...set];
const rightItems = [...set].sort(() => 0.5 - Math.random());
matchState = { activeLine: null, lines: [], currentPairs: set, matchedCount: 0 };
container.innerHTML = `
<h2 class="heading-font text-2xl text-yellow-600 text-center mb-4">Draw lines to match!</h2>
<div class="draggable-area flex justify-between items-center h-full max-w-lg mx-auto py-10 relative">
<div class="flex flex-col gap-10">
${leftItems.map(item => `
<div id="dot-L-${item.char}" class="match-point-L bg-white border-2 border-blue-400 p-4 rounded-xl text-3xl font-bold flex items-center gap-2" onmousedown="startLine(event, '${item.char}', 'L')" ontouchstart="startLine(event, '${item.char}', 'L')">
${item.char} <div class="match-dot"></div>
</div>
`).join('')}
</div>
<div class="flex flex-col gap-10">
${rightItems.map(item => `
<div id="dot-R-${item.char}" class="match-point-R bg-white border-2 border-green-400 p-4 rounded-xl text-4xl flex items-center gap-2" onmouseup="endLine('${item.char}', 'R')" ontouchend="handleTouchEnd(event, '${item.char}')">
<div class="match-dot"></div> ${item.emoji}
</div>
`).join('')}
</div>
<canvas id="match-canvas"></canvas>
</div>
`;
setTimeout(initCanvas, 100);
}
let canvas, ctx;
function initCanvas() {
canvas = document.getElementById('match-canvas');
if (!canvas) return;
const container = document.querySelector('.draggable-area');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
ctx = canvas.getContext('2d');
// Mouse/Touch Listeners for drawing
window.addEventListener('mousemove', drawLine);
window.addEventListener('touchmove', drawLine, { passive: false });
window.addEventListener('mouseup', () => matchState.activeLine = null);
}
function startLine(e, id, side) {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
matchState.activeLine = {
startX: clientX - rect.left,
startY: clientY - rect.top,
currentX: clientX - rect.left,
currentY: clientY - rect.top,
id: id,
side: side
};
}
function drawLine(e) {
if (!matchState.activeLine) return;
if (e.touches) e.preventDefault();
const rect = canvas.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
matchState.activeLine.currentX = clientX - rect.left;
matchState.activeLine.currentY = clientY - rect.top;
redrawLines();
}
function endLine(targetId, side) {
if (!matchState.activeLine) return;
if (matchState.activeLine.side === 'L' && side === 'R') {
if (matchState.activeLine.id === targetId) {
// Correct match
const startEl = document.getElementById(`dot-L-${targetId}`);
const endEl = document.getElementById(`dot-R-${targetId}`);
startEl.classList.add('matched');
endEl.classList.add('matched');
matchState.lines.push({...matchState.activeLine, endX: matchState.activeLine.currentX, endY: matchState.activeLine.currentY});
matchState.matchedCount++;
addStar(20);
speak("Great!");
if (matchState.matchedCount === 4) {
setTimeout(() => document.getElementById('success-overlay').classList.remove('hidden'), 500);
}
} else {
speak("Try again");
}
}
matchState.activeLine = null;
redrawLines();
}
// Special helper for touch devices to find the element under finger
function handleTouchEnd(e, id) {
const touch = e.changedTouches[0];
const target = document.elementFromPoint(touch.clientX, touch.clientY);
const parent = target ? target.closest('.match-point-R') : null;
if (parent) {
const targetId = parent.id.split('-')[2];
endLine(targetId, 'R');
} else {
matchState.activeLine = null;
redrawLines();
}
}
function redrawLines() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 5;
ctx.lineCap = 'round';
// Draw completed matches
matchState.lines.forEach(line => {
ctx.strokeStyle = '#22c55e';
ctx.beginPath();
ctx.moveTo(line.startX, line.startY);
ctx.lineTo(line.endX, line.endY);
ctx.stroke();
});
// Draw active dragging line
if (matchState.activeLine) {
ctx.strokeStyle = '#3b82f6';
ctx.beginPath();
ctx.moveTo(matchState.activeLine.startX, matchState.activeLine.startY);
ctx.lineTo(matchState.activeLine.currentX, matchState.activeLine.currentY);
ctx.stroke();
}
}
function checkMCQ(selected, correct) {
if (selected === correct) {
addStar(15);
speak("Correct!");
document.getElementById('success-overlay').classList.remove('hidden');
} else {
speak("Wrong, try again!");
}
}
function checkFill(selected, correct) {
if (selected === correct) {
addStar(25);
speak("You spelled it!");
document.getElementById('success-overlay').classList.remove('hidden');
} else {
speak("Oops!");
}
}
function closeOverlay() {
document.getElementById('success-overlay').classList.add('hidden');
render();
}
// Handle resizing for the canvas
window.addEventListener('resize', () => {
if (activeTab === 'match') setupMatchGame();
});
window.onload = render;
</script>
</body>
</html>