APK FET
This app, APKFET Maths, is a multi-generational educational platform designed to turn mathematics from a chore into an immersive journey. It features three distinct "multiverse" experiences tailored to the user's age and cognitive stage:
Junior Mode (Ages 5-10): A vibrant, playful environment where arithmetic is brought to life using colorful, bouncing fruit icons and visual sets. It bridges the gap between abstract numbers and physical quantity, making early learning intuitive and fun.
Scholar Mode (Ages 11-16): A sleek, focus-driven interface designed for the "academic athlete." It challenges students with rapid-fire algebra, geometry, and arithmetic, helping build mental agility and exam confidence.
Researcher Mode (Ages 17+): A sophisticated, high-level environment for advanced students and professionals. Utilizing LaTeX-rendered notation, it covers complex calculus and higher-order mathematics in a clean, professional "dark mode" aesthetic.
With a dynamic timer system, accuracy tracking, and a seamless responsive design that works perfectly on mobile or desktop, APKFET Maths (powered by apkfet.com) is the ultimate tool for anyone looking to sharpen their mind, regardless of where they are on their mathematical journey.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APKFET Maths - Educational Multiverse</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Inter:wght@400;700;900&display=swap');
:root {
--primary: #6366f1;
--bg: #020617;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: #f8fafc;
overflow: hidden;
transition: background 0.5s ease, color 0.5s ease;
}
/* Kids Mode Theme */
body.kids-mode {
background: #fdf2f8;
color: #831843;
font-family: 'Fredoka', sans-serif;
}
.kids-mode .glass-panel {
background: white;
border: 4px solid #f9a8d4;
box-shadow: 0 10px 0 #f9a8d4;
}
.kids-mode .topic-card {
background: #fce7f3;
border: 3px solid #f472b6;
color: #9d174d;
}
.glass-panel {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.topic-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
border: 1px solid rgba(255, 255, 255, 0.05);
}
.answer-node {
transition: all 0.2s;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.kids-mode .answer-node {
background: white;
border: 3px solid #f472b6;
color: #be185d;
border-radius: 20px;
}
#timer-ring {
transition: stroke-dashoffset 0.1s linear;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.graphic-container {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
padding: 20px;
max-width: 800px;
}
.fruit-icon {
font-size: 3.5rem;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-15px) scale(1.1); }
}
.screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
transition: all 0.4s ease;
}
.hidden-screen {
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
.brand-link {
transition: transform 0.3s ease;
display: inline-block;
}
.brand-link:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="min-h-screen">
<!-- Global Header -->
<header class="fixed top-0 left-0 right-0 p-6 flex justify-between items-center z-50">
<a href="https://apkfet.com" target="_blank" class="brand-link">
<h1 class="text-3xl font-black tracking-tighter">
<span id="brand-main">APKFET</span> <span class="text-indigo-500" id="brand-sub">MATHS</span>
</h1>
</a>
<div id="top-score" class="hidden glass-panel px-6 py-2 rounded-full font-bold">
Score: <span id="score-val">0</span>
</div>
</header>
<main class="relative h-screen w-full overflow-hidden">
<!-- 1. AGE SELECTION SCREEN -->
<div id="age-screen" class="screen">
<h2 class="text-4xl font-black mb-12 tracking-tighter text-center uppercase">Choose Your Level</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl w-full">
<button onclick="selectAge('kids')" class="topic-card p-8 rounded-3xl bg-pink-500/10 border-pink-500/30 group hover:bg-pink-500/20">
<span class="text-6xl mb-4 block group-hover:scale-110 transition">🍎</span>
<h3 class="text-2xl font-bold text-pink-400">Junior (Ages 5-10)</h3>
<p class="text-sm text-slate-400 mt-2">Fun arithmetic with fruits!</p>
</button>
<button onclick="selectAge('scholar')" class="topic-card p-8 rounded-3xl bg-indigo-500/10 border-indigo-500/30 group hover:bg-indigo-500/20">
<span class="text-6xl mb-4 block group-hover:scale-110 transition">📐</span>
<h3 class="text-2xl font-bold text-indigo-400">Scholar (Ages 11-16)</h3>
<p class="text-sm text-slate-400 mt-2">Geometry & Algebra.</p>
</button>
<button onclick="selectAge('researcher')" class="topic-card p-8 rounded-3xl bg-emerald-500/10 border-emerald-500/30 group hover:bg-emerald-500/20">
<span class="text-6xl mb-4 block group-hover:scale-110 transition">⚛️</span>
<h3 class="text-2xl font-bold text-emerald-400">Researcher (17+)</h3>
<p class="text-sm text-slate-400 mt-2">Calculus & Advanced Stats.</p>
</button>
</div>
</div>
<!-- 2. QUANTITY SCREEN -->
<div id="qty-screen" class="screen hidden-screen">
<h2 class="text-3xl font-black mb-8 uppercase">Session Length</h2>
<div class="flex gap-4">
<button onclick="setLimit(10)" class="qty-btn px-10 py-4 rounded-2xl border-2 border-white/20 font-black text-xl hover:border-indigo-500 transition">10</button>
<button onclick="setLimit(20)" class="qty-btn px-10 py-4 rounded-2xl border-2 border-white/20 font-black text-xl hover:border-indigo-500 transition">20</button>
<button onclick="setLimit(30)" class="qty-btn px-10 py-4 rounded-2xl border-2 border-white/20 font-black text-xl hover:border-indigo-500 transition">30</button>
</div>
<button onclick="startSession()" class="mt-12 px-12 py-4 bg-indigo-600 rounded-full font-bold uppercase tracking-widest hover:scale-105 transition">Start Learning</button>
</div>
<!-- 3. GAME ARENA -->
<div id="game-arena" class="screen hidden-screen">
<!-- Visual aid for kids -->
<div id="visual-aid" class="graphic-container mb-6 min-h-[140px]"></div>
<div id="math-content" class="text-5xl md:text-7xl font-bold mb-12 text-center"></div>
<div id="options-grid" class="grid grid-cols-2 gap-6 w-full max-w-xl"></div>
<div class="mt-12 flex items-center gap-6">
<div class="relative w-16 h-16">
<svg class="w-full h-full"><circle id="timer-ring" cx="32" cy="32" r="28" stroke="#6366f1" stroke-width="4" fill="transparent" stroke-dasharray="176" stroke-dashoffset="0" /></svg>
<div id="timer-text" class="absolute inset-0 flex items-center justify-center font-bold">15</div>
</div>
<div class="text-left">
<div id="progress-text" class="font-black text-xl">1 / 10</div>
<div class="text-[10px] uppercase font-bold text-slate-500 tracking-wider">Academic Progress</div>
</div>
</div>
</div>
<!-- 4. SUMMARY -->
<div id="summary-screen" class="screen hidden-screen z-50 bg-slate-950/90 backdrop-blur-xl">
<div class="text-center p-12 glass-panel rounded-[40px] max-w-lg w-full">
<h2 id="summary-title" class="text-5xl font-black mb-4">BRAVO!</h2>
<div class="text-6xl mb-8">🏆</div>
<div class="flex justify-around mb-8">
<div>
<div class="text-xs uppercase font-bold text-slate-500">Correct</div>
<div id="final-correct" class="text-3xl font-black text-indigo-400">0</div>
</div>
<div>
<div class="text-xs uppercase font-bold text-slate-500">Accuracy</div>
<div id="final-acc" class="text-3xl font-black text-orange-400">0%</div>
</div>
</div>
<button onclick="location.reload()" class="w-full py-5 bg-white text-slate-950 rounded-2xl font-black uppercase tracking-tighter">Try Another Level</button>
<a href="https://apkfet.com" target="_blank" class="mt-4 block text-xs font-bold text-slate-500 uppercase">Visit APKFET.com</a>
</div>
</div>
</main>
<script>
let ageGroup = 'scholar';
let limit = 10;
let currentIdx = 0;
let correctCount = 0;
let score = 0;
let timeLeft = 15;
let timer = null;
let currentAns = null;
let isTransitioning = false;
const emojis = ['🍎', '🍓', '🚗', '⭐', '🍦', '🐧', '🚀', '🍩', '🦊', '🎈'];
function selectAge(age) {
ageGroup = age;
if (age === 'kids') {
document.body.classList.add('kids-mode');
document.getElementById('brand-main').className = 'text-pink-600';
document.getElementById('brand-sub').className = 'text-blue-500';
}
showScreen('qty-screen');
}
function setLimit(n) {
limit = n;
document.querySelectorAll('.qty-btn').forEach(b => {
b.classList.toggle('border-indigo-500', parseInt(b.innerText) === n);
b.classList.toggle('bg-indigo-500/10', parseInt(b.innerText) === n);
});
}
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.add('hidden-screen'));
document.getElementById(id).classList.remove('hidden-screen');
}
function startSession() {
document.getElementById('top-score').classList.remove('hidden');
showScreen('game-arena');
nextProblem();
startTimer();
}
function nextProblem() {
if (currentIdx >= limit) return finish();
isTransitioning = false;
currentIdx++;
document.getElementById('progress-text').innerText = `${currentIdx} / ${limit}`;
const data = generateProblem();
currentAns = data.ans;
const content = document.getElementById('math-content');
content.innerHTML = ageGroup === 'kids' ? data.display : `$$${data.display}$$`;
if (ageGroup !== 'kids') MathJax.Hub.Queue(["Typeset", MathJax.Hub, content]);
// Visual Aid for Kids
const visual = document.getElementById('visual-aid');
visual.innerHTML = '';
if (ageGroup === 'kids' && data.count1 !== undefined) {
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
const set1 = document.createElement('div');
set1.className = 'flex flex-wrap gap-2 justify-center';
for(let i=0; i<data.count1; i++) set1.innerHTML += `<span class="fruit-icon">${emoji}</span>`;
const opText = document.createElement('span');
opText.className = 'text-5xl self-center mx-4 font-bold';
opText.innerText = '+';
const set2 = document.createElement('div');
set2.className = 'flex flex-wrap gap-2 justify-center';
for(let i=0; i<data.count2; i++) set2.innerHTML += `<span class="fruit-icon">${emoji}</span>`;
visual.appendChild(set1);
visual.appendChild(opText);
visual.appendChild(set2);
}
const grid = document.getElementById('options-grid');
grid.innerHTML = '';
data.options.forEach(opt => {
const btn = document.createElement('button');
btn.className = "answer-node p-6 font-black text-2xl shadow-sm rounded-2xl";
btn.innerText = opt;
btn.onclick = () => check(opt, btn);
grid.appendChild(btn);
});
timeLeft = 15;
}
function generateProblem() {
if (ageGroup === 'kids') {
const a = Math.floor(Math.random() * 5) + 1;
const b = Math.floor(Math.random() * 5) + 1;
const ans = a + b;
return {
display: `${a} + ${b} = ?`,
ans: ans,
count1: a, count2: b,
options: shuffle([ans, ans+1, ans-1, a+b+2].filter(n => n > 0))
};
} else if (ageGroup === 'scholar') {
const a = Math.floor(Math.random() * 12) + 2;
const b = Math.floor(Math.random() * 12) + 2;
const ops = ['\\times', '+', '-'];
const op = ops[Math.floor(Math.random()*ops.length)];
let ans = op === '+' ? a+b : (op === '-' ? a-b : a*b);
return {
display: `${a} ${op} ${b}`,
ans: ans,
options: shuffle([ans, ans + (Math.random() > 0.5 ? 2 : -2), ans + 10, a + b + 1])
};
} else {
const c = Math.floor(Math.random() * 4) + 2;
const x = Math.floor(Math.random() * 3) + 1;
const ans = 2 * c * x;
return {
display: `\\frac{d}{dx}(${c}x^2) \\text{ at } x=${x}`,
ans: ans,
options: shuffle([ans, c * x, ans + 2, 0])
};
}
}
function check(val, btn) {
if (isTransitioning) return;
isTransitioning = true;
const correct = val.toString() === currentAns.toString();
if (correct) {
correctCount++;
score += 100;
document.getElementById('score-val').innerText = score;
btn.classList.add('bg-emerald-500', 'text-white', 'border-emerald-500');
} else {
btn.classList.add('bg-red-500', 'text-white', 'border-red-500');
}
setTimeout(() => {
nextProblem();
}, 600);
}
function startTimer() {
timer = setInterval(() => {
if (isTransitioning) return;
timeLeft -= 0.1;
const ring = document.getElementById('timer-ring');
ring.style.strokeDashoffset = 176 - (176 * (Math.max(0, timeLeft)/15));
document.getElementById('timer-text').innerText = Math.ceil(timeLeft);
if (timeLeft <= 0) {
isTransitioning = true;
setTimeout(nextProblem, 500);
}
}, 100);
}
function finish() {
clearInterval(timer);
showScreen('summary-screen');
document.getElementById('final-correct').innerText = correctCount;
document.getElementById('final-acc').innerText = Math.round((correctCount/limit)*100) + '%';
if (ageGroup === 'kids') document.getElementById('summary-title').innerText = "YOU ARE A STAR! ⭐";
}
function shuffle(arr) { return [...new Set(arr)].sort(() => Math.random() - 0.5); }
</script>
</body>
</html>