<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title></title>
	<atom:link href="https://kidcourses.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://kidcourses.com/</link>
	<description>Creative mini-courses + content for kids.</description>
	<lastBuildDate>Sun, 08 Feb 2026 22:51:05 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://kidcourses.com/wp-content/uploads/2013/11/logo250x250-100x100.png</url>
	<title></title>
	<link>https://kidcourses.com/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>MathLibs™ Factor Trees #2</title>
		<link>https://kidcourses.com/mathlibs-factor-trees-2/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sun, 08 Feb 2026 22:50:13 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[Taking it Offline]]></category>
		<category><![CDATA[Grade 4 Math]]></category>
		<category><![CDATA[Grade 4 math games]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10823</guid>

					<description><![CDATA[<p>MathLibs — Factor Trees MathLibsTM Factor Trees Think, then reveal! 👥 Enter 5 names (comma-separated) 🌳 Choose difficulty Easy (up to 30)Medium (up to 60)Hard (up to 100) 🚀 Lets Play! Question 1 of 5 ⭐ 0 Flip to Check &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-factor-trees-2/"> <span class="screen-reader-text">MathLibs™ Factor Trees #2</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-factor-trees-2/">MathLibs™ Factor Trees #2</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Factor Trees</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--secondary), var(--sky), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="mf-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:#4ECDC4;background:none;-webkit-background-clip:unset">TM</sup> Factor Trees</h1>
    <p class="subtitle">Think, then reveal!</p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="mf-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (comma-separated)</label>
      <input type="text" id="mf-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f333.png" alt="🌳" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Choose difficulty</label>
      <select id="mf-inp-diff" style="width:100%;padding:14px 18px;font-family:Nunito,sans-serif;font-size:18px;font-weight:600;border:3px solid #E8DFD0;border-radius:14px;background:#FFFCF7;color:#2D1B0E;outline:none"><option value="1" selected>Easy (up to 30)</option><option value="2">Medium (up to 60)</option><option value="3">Hard (up to 100)</option></select>
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="mf-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Lets Play!</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="mf-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="mf-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="mf-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="mf-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="mf-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="mf-answer-input" placeholder="?" autocomplete="off" inputmode="numeric" style="display:none">
      <button type="button" class="btn btn-secondary" id="mf-btn-submit">Flip to Check Your Work</button>
    </div>
    <div class="feedback-area" id="mf-feedback-area"></div>
    <div id="mf-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="mf-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="mf-results-screen">
    <div class="results-trophy" id="mf-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="mf-results-title">Great Job!</div>
    <div class="stars-row" id="mf-results-stars"></div>
    <div class="results-score" id="mf-results-score"></div>
    <div class="results-msg" id="mf-results-msg"></div>
    <button type="button" class="btn btn-primary" id="mf-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let difficulty = 1;
  let questions = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('mf-setup-screen');
  const quizScreen    = _el('mf-quiz-screen');
  const resultsScreen = _el('mf-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('mf-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== RANDOM NUMBER ===== */
  function randNum(){
    if(difficulty===1) return Math.floor(Math.random()*9)+1;
    if(difficulty===2) return Math.floor(Math.random()*41)+10;
    return Math.floor(Math.random()*401)+100;
  }

  function maxN(){
    if(difficulty===1) return 30;
    if(difficulty===2) return 60;
    return 100;
  }
  function rr(a,b){ return Math.floor(Math.random()*(b-a+1))+a; }
  function shuf(a){
    for(var i=a.length-1;i>0;i--){
      var j=Math.floor(Math.random()*(i+1));
      var t=a[i];a[i]=a[j];a[j]=t;
    }
    return a;
  }
  function gf(n){
    var f=[];
    for(var i=1;i<=n;i++){ if(n%i===0) f.push(i); }
    return f;
  }

  /* ===== FACTOR QUESTIONS ===== */
  function qFactor(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qMultiple();
    return {
      text:names[rr(0,4)]+' found '+n+' seashells. Draw a factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qMultiple(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qPair();
    return {
      text:names[rr(0,4)]+' ate '+n+' gummy bears. Can you make a factor tree for '+n+'?',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qPair(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qPrime();
    return {
      text:names[rr(0,4)]+' has '+n+' stickers. Draw a factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qPrime(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qNotFactor();
    return {
      text:names[rr(0,4)]+' spotted '+n+' butterflies. Factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qNotFactor(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qFactor();
    return {
      text:names[rr(0,4)]+' baked '+n+' cookies. Draw a factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  /* ===== BUILD QUESTIONS ===== */
  function buildQuestions(){
    questions=[];
    var gens=shuf([qFactor,qMultiple,qPair,qPrime,qNotFactor]);
    for(var i=0;i<5;i++){
      questions.push(gens[i]());
    }
  }

  /* ===== SHOW ANSWER ===== */
  function showAnswer(q){
    const container = _el('mf-emoji-grid-container');
    container.innerHTML = '';
    if(!q.num||q.num<=1) return;
    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';
    const quote = document.createElement('div');
    quote.style.fontStyle = 'italic';
    quote.style.color = '#8B7355';
    quote.style.fontSize = '14px';
    quote.style.marginBottom = '10px';
    quote.textContent = 'Multiples are many, factors are few... You can always finish finding factors.';
    wrap.appendChild(quote);
    var factors = gf(q.num);
    var pTitle = document.createElement('div');
    pTitle.style.fontFamily = 'Baloo 2, cursive';
    pTitle.style.fontSize = '18px';
    pTitle.style.fontWeight = '700';
    pTitle.style.color = '#A78BFA';
    pTitle.style.marginBottom = '6px';
    pTitle.textContent = 'Factor pairs of ' + q.num + ':';
    wrap.appendChild(pTitle);
    var pairRow = document.createElement('div');
    pairRow.style.display = 'flex';
    pairRow.style.flexWrap = 'wrap';
    pairRow.style.gap = '8px';
    pairRow.style.justifyContent = 'center';
    pairRow.style.marginBottom = '14px';
    var colors = ['#D5F5F2','#FFE0D0','#E8DDFF','#FFF3CD','#DBEAFE','#FCE7F3'];
    var bords = ['#9EDCD6','#FFAA88','#C4B5FD','#FFD966','#93C5FD','#F9A8D4'];
    var shown = {};
    for(var i=0;i<factors.length;i++){
      var f1=factors[i], f2=q.num/f1;
      var key=Math.min(f1,f2)+','+Math.max(f1,f2);
      if(shown[key]) continue;
      shown[key]=true;
      var pill=document.createElement('span');
      pill.style.display='inline-block';
      pill.style.padding='6px 14px';
      pill.style.borderRadius='20px';
      pill.style.background=colors[i%colors.length];
      pill.style.border='2px solid '+bords[i%bords.length];
      pill.style.fontFamily='Baloo 2, cursive';
      pill.style.fontSize='16px';
      pill.style.fontWeight='700';
      pill.textContent=f1+' x '+f2;
      pairRow.appendChild(pill);
    }
    wrap.appendChild(pairRow);
    var pairs = [];
    for(var pi=0;pi<factors.length;pi++){
      var fa=factors[pi]; var fb=q.num/fa;
      if(fa<2||fb<2) continue;
      if(fa>fb) continue;
      pairs.push([fa,fb]);
    }
    if(pairs.length===0) pairs.push([1,q.num]);
    var tTitle = document.createElement('div');
    tTitle.style.fontFamily = 'Baloo 2, cursive';
    tTitle.style.fontSize = '18px';
    tTitle.style.fontWeight = '700';
    tTitle.style.color = '#4ECDC4';
    tTitle.style.marginBottom = '16px';
    if(pairs.length>1){
      tTitle.textContent = 'Is your tree here? ('+pairs.length+' ways to start)';
    } else {
      tTitle.textContent = 'Here is the factor tree for '+q.num+':';
    }
    wrap.appendChild(tTitle);
    for(var t=0;t<pairs.length;t++){
      if(t>0){
        var divider = document.createElement('div');
        divider.style.display = 'flex';
        divider.style.alignItems = 'center';
        divider.style.gap = '12px';
        divider.style.margin = '20px auto';
        divider.style.maxWidth = '240px';
        var lineL = document.createElement('div');
        lineL.style.flex = '1';
        lineL.style.height = '3px';
        lineL.style.borderRadius = '2px';
        lineL.style.background = '#FFE66D';
        var orText = document.createElement('span');
        orText.style.fontFamily = 'Baloo 2, cursive';
        orText.style.fontSize = '13px';
        orText.style.fontWeight = '700';
        orText.style.color = '#A78BFA';
        orText.textContent = 'OR';
        var lineR = document.createElement('div');
        lineR.style.flex = '1';
        lineR.style.height = '3px';
        lineR.style.borderRadius = '2px';
        lineR.style.background = '#FFE66D';
        divider.appendChild(lineL);
        divider.appendChild(orText);
        divider.appendChild(lineR);
        wrap.appendChild(divider);
      }
      var treeRoot = {val:q.num, left:buildTree(pairs[t][0]), right:buildTree(pairs[t][1]), prime:false};
      var treeEl = renderTreeNode(treeRoot, 0);
      treeEl.style.display = 'inline-block';
      treeEl.style.marginBottom = '8px';
      wrap.appendChild(treeEl);
    }
    container.appendChild(wrap);
  }

  function buildTree(n){
    if(n<=1) return {val:n, prime:true};
    var primes=[2,3,5,7,11,13,17,19,23,29,31,37,41,43,47];
    for(var i=0;i<primes.length;i++){
      var p=primes[i];
      if(p>=n) break;
      if(n%p===0){
        return {val:n, left:buildTree(p), right:buildTree(n/p), prime:false};
      }
    }
    return {val:n, prime:true};
  }



  function renderTreeNode(node, depth){
    var box = document.createElement('div');
    box.style.textAlign = 'center';
    box.style.position = 'relative';
    var numEl = document.createElement('div');
    numEl.style.display = 'inline-block';
    numEl.style.padding = '4px 14px';
    numEl.style.borderRadius = '12px';
    numEl.style.fontFamily = 'Baloo 2, cursive';
    numEl.style.fontSize = '18px';
    numEl.style.fontWeight = '800';
    if(node.prime){
      numEl.style.background = '#D5F5F2';
      numEl.style.border = '2px solid #4ECDC4';
      numEl.style.color = '#065F46';
    } else {
      numEl.style.background = '#FFF3CD';
      numEl.style.border = '2px solid #FFD966';
      numEl.style.color = '#92400E';
    }
    numEl.textContent = node.val;
    box.appendChild(numEl);
    if(!node.prime && node.left && node.right){
      var branchWrap = document.createElement('div');
      branchWrap.style.display = 'flex';
      branchWrap.style.justifyContent = 'center';
      branchWrap.style.gap = '4px';
      branchWrap.style.marginTop = '2px';
      var leftLine = document.createElement('div');
      leftLine.style.width = '40px';
      leftLine.style.height = '28px';
      leftLine.style.borderRight = '2px solid #A78BFA';
      leftLine.style.borderBottom = '2px solid #A78BFA';
      leftLine.style.borderRadius = '0 0 12px 0';
      var rightLine = document.createElement('div');
      rightLine.style.width = '40px';
      rightLine.style.height = '28px';
      rightLine.style.borderLeft = '2px solid #A78BFA';
      rightLine.style.borderBottom = '2px solid #A78BFA';
      rightLine.style.borderRadius = '0 0 0 12px';
      branchWrap.appendChild(leftLine);
      branchWrap.appendChild(rightLine);
      box.appendChild(branchWrap);
      var childRow = document.createElement('div');
      childRow.style.display = 'flex';
      childRow.style.justifyContent = 'center';
      childRow.style.gap = '16px';
      childRow.appendChild(renderTreeNode(node.left, depth+1));
      childRow.appendChild(renderTreeNode(node.right, depth+1));
      box.appendChild(childRow);
    }
    return box;
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('mf-inp-names').value;
    names = rawNames? rawNames.split(',').map(function(s){return s.trim();}).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    difficulty = parseInt(_el('mf-inp-diff').value, 10) || 1;
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('mf-quiz-progress').textContent = 'Question '+(qIdx+1)+' of '+questions.length;
    _el('mf-quiz-score').textContent = score;
    _el('mf-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('mf-question-text').textContent = questions[qIdx].text;
    _el('mf-feedback-area').innerHTML='';
    _el('mf-emoji-grid-container').innerHTML='';
    show(_el('mf-btn-submit')); hide(_el('mf-btn-next'));
  }

  function doSubmit(){
    if(answered) return;

    answered = true;
    const q = questions[qIdx];

    score++;
    _el('mf-quiz-score').textContent = score;
    sfxCorrect();
    burstConfetti(30);

    showAnswer(q);

    hide(_el('mf-btn-submit'));
    show(_el('mf-btn-next'));
    _el('mf-btn-next').textContent = qIdx===questions.length-1 ? 'See Results' : 'Next';
    _el('mf-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('mf-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('mf-results-score').textContent = 'You got '+score+' out of '+questions.length+' correct!';

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='&#x1f333;&#x1f3c6;&#x1f333;'; title='PERFECT SCORE!'; msg='You are a factor tree superstar!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='&#x1f31f;&#x1f333;&#x1f31f;'; title='Amazing Work!'; msg='So close to perfect!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='&#x1f389;&#x1f333;&#x1f389;'; title='Good Job!'; msg='Practice makes perfect!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='&#x1f4aa;&#x1f333;&#x1f4aa;'; title='Nice Try!'; msg='Keep practicing!'; starCount=2;
    } else {
      trophy='&#x1f331;&#x1f4da;&#x1f331;'; title='Keep Learning!'; msg='Every mistake helps you grow!'; starCount=1;
    }

    _el('mf-results-trophy').textContent = trophy;
    _el('mf-results-title').textContent = title;
    _el('mf-results-msg').textContent = msg;
    _el('mf-results-stars').textContent = '';
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('mf-btn-start').addEventListener('click', goQuiz);
  _el('mf-btn-submit').addEventListener('click', doSubmit);
  _el('mf-btn-next').addEventListener('click', doNext);
  _el('mf-btn-restart').addEventListener('click', doRestart);

  _el('mf-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  _el('mf-inp-diff').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('mf-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<p></p>
<p>The post <a href="https://kidcourses.com/mathlibs-factor-trees-2/">MathLibs™ Factor Trees #2</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>MathLibs™ Factor Trees #1</title>
		<link>https://kidcourses.com/mathlibs-factor-trees-1/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sun, 08 Feb 2026 20:05:15 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[Grade 4 Math]]></category>
		<category><![CDATA[Grade 4 math games]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10803</guid>

					<description><![CDATA[<p>MathLibs — Factor Trees MathLibsTM Factor Trees Think, then reveal! 👥 Enter 5 names (comma-separated) 🌳 Choose difficulty Easy (up to 30)Medium (up to 60)Hard (up to 100) 🚀 Lets Play! Question 1 of 5 ⭐ 0 Flip to Check &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-factor-trees-1/"> <span class="screen-reader-text">MathLibs™ Factor Trees #1</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-factor-trees-1/">MathLibs™ Factor Trees #1</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Factor Trees</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--secondary), var(--sky), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="mf-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:#4ECDC4;background:none;-webkit-background-clip:unset">TM</sup> Factor Trees</h1>
    <p class="subtitle">Think, then reveal!</p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="mf-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (comma-separated)</label>
      <input type="text" id="mf-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f333.png" alt="🌳" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Choose difficulty</label>
      <select id="mf-inp-diff" style="width:100%;padding:14px 18px;font-family:Nunito,sans-serif;font-size:18px;font-weight:600;border:3px solid #E8DFD0;border-radius:14px;background:#FFFCF7;color:#2D1B0E;outline:none"><option value="1" selected>Easy (up to 30)</option><option value="2">Medium (up to 60)</option><option value="3">Hard (up to 100)</option></select>
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="mf-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Lets Play!</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="mf-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="mf-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="mf-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="mf-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="mf-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="mf-answer-input" placeholder="?" autocomplete="off" inputmode="numeric" style="display:none">
      <button type="button" class="btn btn-secondary" id="mf-btn-submit">Flip to Check Your Work</button>
    </div>
    <div class="feedback-area" id="mf-feedback-area"></div>
    <div id="mf-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="mf-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="mf-results-screen">
    <div class="results-trophy" id="mf-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="mf-results-title">Great Job!</div>
    <div class="stars-row" id="mf-results-stars"></div>
    <div class="results-score" id="mf-results-score"></div>
    <div class="results-msg" id="mf-results-msg"></div>
    <button type="button" class="btn btn-primary" id="mf-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let difficulty = 1;
  let questions = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('mf-setup-screen');
  const quizScreen    = _el('mf-quiz-screen');
  const resultsScreen = _el('mf-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('mf-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== RANDOM NUMBER ===== */
  function randNum(){
    if(difficulty===1) return Math.floor(Math.random()*9)+1;
    if(difficulty===2) return Math.floor(Math.random()*41)+10;
    return Math.floor(Math.random()*401)+100;
  }

  function maxN(){
    if(difficulty===1) return 30;
    if(difficulty===2) return 60;
    return 100;
  }
  function rr(a,b){ return Math.floor(Math.random()*(b-a+1))+a; }
  function shuf(a){
    for(var i=a.length-1;i>0;i--){
      var j=Math.floor(Math.random()*(i+1));
      var t=a[i];a[i]=a[j];a[j]=t;
    }
    return a;
  }
  function gf(n){
    var f=[];
    for(var i=1;i<=n;i++){ if(n%i===0) f.push(i); }
    return f;
  }

  /* ===== FACTOR QUESTIONS ===== */
  function qFactor(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qMultiple();
    return {
      text:names[rr(0,4)]+' has '+n+' ninja stars hidden in a sock drawer. Factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qMultiple(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qPair();
    return {
      text:'A dragon sneezed '+n+' fireballs! '+names[rr(0,4)]+' needs a factor tree for '+n+'.',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qPair(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qPrime();
    return {
      text:names[rr(0,4)]+' found '+n+' rubber ducks in the bathtub. Draw a factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qPrime(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qNotFactor();
    return {
      text:'There are '+n+' penguins doing the cha-cha. '+names[rr(0,4)]+', factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  function qNotFactor(){
    var n=rr(6,maxN());
    var fs=gf(n);
    if(fs.length<3) return qFactor();
    return {
      text:names[rr(0,4)]+' juggled '+n+' watermelons at the talent show. Factor tree for '+n+'!',
      ans:0, num:n, a:0, b:0, emoji:'&#x1f333;'
    };
  }

  /* ===== BUILD QUESTIONS ===== */
  function buildQuestions(){
    questions=[];
    var gens=shuf([qFactor,qMultiple,qPair,qPrime,qNotFactor]);
    for(var i=0;i<5;i++){
      questions.push(gens[i]());
    }
  }

  /* ===== SHOW ANSWER ===== */
  function showAnswer(q){
    const container = _el('mf-emoji-grid-container');
    container.innerHTML = '';
    if(!q.num||q.num<=1) return;
    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';
    const quote = document.createElement('div');
    quote.style.fontStyle = 'italic';
    quote.style.color = '#8B7355';
    quote.style.fontSize = '14px';
    quote.style.marginBottom = '10px';
    quote.textContent = 'Multiples are many, factors are few... You can always finish finding factors.';
    wrap.appendChild(quote);
    var factors = gf(q.num);
    var pTitle = document.createElement('div');
    pTitle.style.fontFamily = 'Baloo 2, cursive';
    pTitle.style.fontSize = '18px';
    pTitle.style.fontWeight = '700';
    pTitle.style.color = '#A78BFA';
    pTitle.style.marginBottom = '6px';
    pTitle.textContent = 'Factor pairs of ' + q.num + ':';
    wrap.appendChild(pTitle);
    var pairRow = document.createElement('div');
    pairRow.style.display = 'flex';
    pairRow.style.flexWrap = 'wrap';
    pairRow.style.gap = '8px';
    pairRow.style.justifyContent = 'center';
    pairRow.style.marginBottom = '14px';
    var colors = ['#D5F5F2','#FFE0D0','#E8DDFF','#FFF3CD','#DBEAFE','#FCE7F3'];
    var bords = ['#9EDCD6','#FFAA88','#C4B5FD','#FFD966','#93C5FD','#F9A8D4'];
    var shown = {};
    for(var i=0;i<factors.length;i++){
      var f1=factors[i], f2=q.num/f1;
      var key=Math.min(f1,f2)+','+Math.max(f1,f2);
      if(shown[key]) continue;
      shown[key]=true;
      var pill=document.createElement('span');
      pill.style.display='inline-block';
      pill.style.padding='6px 14px';
      pill.style.borderRadius='20px';
      pill.style.background=colors[i%colors.length];
      pill.style.border='2px solid '+bords[i%bords.length];
      pill.style.fontFamily='Baloo 2, cursive';
      pill.style.fontSize='16px';
      pill.style.fontWeight='700';
      pill.textContent=f1+' x '+f2;
      pairRow.appendChild(pill);
    }
    wrap.appendChild(pairRow);
    var pairs = [];
    for(var pi=0;pi<factors.length;pi++){
      var fa=factors[pi]; var fb=q.num/fa;
      if(fa<2||fb<2) continue;
      if(fa>fb) continue;
      pairs.push([fa,fb]);
    }
    if(pairs.length===0) pairs.push([1,q.num]);
    var tTitle = document.createElement('div');
    tTitle.style.fontFamily = 'Baloo 2, cursive';
    tTitle.style.fontSize = '18px';
    tTitle.style.fontWeight = '700';
    tTitle.style.color = '#4ECDC4';
    tTitle.style.marginBottom = '16px';
    if(pairs.length>1){
      tTitle.textContent = 'Is your tree here? ('+pairs.length+' ways to start)';
    } else {
      tTitle.textContent = 'Here is the factor tree for '+q.num+':';
    }
    wrap.appendChild(tTitle);
    for(var t=0;t<pairs.length;t++){
      if(t>0){
        var divider = document.createElement('div');
        divider.style.display = 'flex';
        divider.style.alignItems = 'center';
        divider.style.gap = '12px';
        divider.style.margin = '20px auto';
        divider.style.maxWidth = '240px';
        var lineL = document.createElement('div');
        lineL.style.flex = '1';
        lineL.style.height = '3px';
        lineL.style.borderRadius = '2px';
        lineL.style.background = '#FFE66D';
        var orText = document.createElement('span');
        orText.style.fontFamily = 'Baloo 2, cursive';
        orText.style.fontSize = '13px';
        orText.style.fontWeight = '700';
        orText.style.color = '#A78BFA';
        orText.textContent = 'OR';
        var lineR = document.createElement('div');
        lineR.style.flex = '1';
        lineR.style.height = '3px';
        lineR.style.borderRadius = '2px';
        lineR.style.background = '#FFE66D';
        divider.appendChild(lineL);
        divider.appendChild(orText);
        divider.appendChild(lineR);
        wrap.appendChild(divider);
      }
      var treeRoot = {val:q.num, left:buildTree(pairs[t][0]), right:buildTree(pairs[t][1]), prime:false};
      var treeEl = renderTreeNode(treeRoot, 0);
      treeEl.style.display = 'inline-block';
      treeEl.style.marginBottom = '8px';
      wrap.appendChild(treeEl);
    }
    container.appendChild(wrap);
  }

  function buildTree(n){
    if(n<=1) return {val:n, prime:true};
    var primes=[2,3,5,7,11,13,17,19,23,29,31,37,41,43,47];
    for(var i=0;i<primes.length;i++){
      var p=primes[i];
      if(p>=n) break;
      if(n%p===0){
        return {val:n, left:buildTree(p), right:buildTree(n/p), prime:false};
      }
    }
    return {val:n, prime:true};
  }



  function renderTreeNode(node, depth){
    var box = document.createElement('div');
    box.style.textAlign = 'center';
    box.style.position = 'relative';
    var numEl = document.createElement('div');
    numEl.style.display = 'inline-block';
    numEl.style.padding = '4px 14px';
    numEl.style.borderRadius = '12px';
    numEl.style.fontFamily = 'Baloo 2, cursive';
    numEl.style.fontSize = '18px';
    numEl.style.fontWeight = '800';
    if(node.prime){
      numEl.style.background = '#D5F5F2';
      numEl.style.border = '2px solid #4ECDC4';
      numEl.style.color = '#065F46';
    } else {
      numEl.style.background = '#FFF3CD';
      numEl.style.border = '2px solid #FFD966';
      numEl.style.color = '#92400E';
    }
    numEl.textContent = node.val;
    box.appendChild(numEl);
    if(!node.prime && node.left && node.right){
      var branchWrap = document.createElement('div');
      branchWrap.style.display = 'flex';
      branchWrap.style.justifyContent = 'center';
      branchWrap.style.gap = '4px';
      branchWrap.style.marginTop = '2px';
      var leftLine = document.createElement('div');
      leftLine.style.width = '40px';
      leftLine.style.height = '28px';
      leftLine.style.borderRight = '2px solid #A78BFA';
      leftLine.style.borderBottom = '2px solid #A78BFA';
      leftLine.style.borderRadius = '0 0 12px 0';
      var rightLine = document.createElement('div');
      rightLine.style.width = '40px';
      rightLine.style.height = '28px';
      rightLine.style.borderLeft = '2px solid #A78BFA';
      rightLine.style.borderBottom = '2px solid #A78BFA';
      rightLine.style.borderRadius = '0 0 0 12px';
      branchWrap.appendChild(leftLine);
      branchWrap.appendChild(rightLine);
      box.appendChild(branchWrap);
      var childRow = document.createElement('div');
      childRow.style.display = 'flex';
      childRow.style.justifyContent = 'center';
      childRow.style.gap = '16px';
      childRow.appendChild(renderTreeNode(node.left, depth+1));
      childRow.appendChild(renderTreeNode(node.right, depth+1));
      box.appendChild(childRow);
    }
    return box;
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('mf-inp-names').value;
    names = rawNames? rawNames.split(',').map(function(s){return s.trim();}).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    difficulty = parseInt(_el('mf-inp-diff').value, 10) || 1;
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('mf-quiz-progress').textContent = 'Question '+(qIdx+1)+' of '+questions.length;
    _el('mf-quiz-score').textContent = score;
    _el('mf-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('mf-question-text').textContent = questions[qIdx].text;
    _el('mf-feedback-area').innerHTML='';
    _el('mf-emoji-grid-container').innerHTML='';
    show(_el('mf-btn-submit')); hide(_el('mf-btn-next'));
  }

  function doSubmit(){
    if(answered) return;

    answered = true;
    const q = questions[qIdx];

    score++;
    _el('mf-quiz-score').textContent = score;
    sfxCorrect();
    burstConfetti(30);

    showAnswer(q);

    hide(_el('mf-btn-submit'));
    show(_el('mf-btn-next'));
    _el('mf-btn-next').textContent = qIdx===questions.length-1 ? 'See Results' : 'Next';
    _el('mf-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('mf-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('mf-results-score').textContent = 'You got '+score+' out of '+questions.length+' correct!';

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='&#x1f333;&#x1f3c6;&#x1f333;'; title='PERFECT SCORE!'; msg='You are a factor tree superstar!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='&#x1f31f;&#x1f333;&#x1f31f;'; title='Amazing Work!'; msg='So close to perfect!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='&#x1f389;&#x1f333;&#x1f389;'; title='Good Job!'; msg='Practice makes perfect!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='&#x1f4aa;&#x1f333;&#x1f4aa;'; title='Nice Try!'; msg='Keep practicing!'; starCount=2;
    } else {
      trophy='&#x1f331;&#x1f4da;&#x1f331;'; title='Keep Learning!'; msg='Every mistake helps you grow!'; starCount=1;
    }

    _el('mf-results-trophy').textContent = trophy;
    _el('mf-results-title').textContent = title;
    _el('mf-results-msg').textContent = msg;
    _el('mf-results-stars').textContent = '';
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('mf-btn-start').addEventListener('click', goQuiz);
  _el('mf-btn-submit').addEventListener('click', doSubmit);
  _el('mf-btn-next').addEventListener('click', doNext);
  _el('mf-btn-restart').addEventListener('click', doRestart);

  _el('mf-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  _el('mf-inp-diff').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('mf-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:82px" aria-hidden="true" class="wp-block-spacer"></div>



<p>MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /> has been sparking laughter and learning since 2003, earning love from classrooms, living rooms, and learning labs across the country. Designed as a joyful blend of customization and practice, it lets kids choose math levels, input silly words, and build confidence while having a blast.</p>



<p><br><strong>Did You Know?</strong><br>Math anxiety reduces blood flow to the brain’s problem-solving areas. When a child feels anxious about math, the amygdala activates, which disrupts the dorsolateral prefrontal cortex—the region responsible for working memory and logical thinking. That makes it harder to solve even basic problems. Repeated stress reinforces this cycle, making future math tasks feel even harder.<br>(Ashcraft, Mark H. “Math Anxiety: Personal, Educational, and Cognitive Consequences.”)</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p>The post <a href="https://kidcourses.com/mathlibs-factor-trees-1/">MathLibs™ Factor Trees #1</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>MathLibs™ Division #3</title>
		<link>https://kidcourses.com/mathlibs-division-3/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 05:25:15 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10773</guid>

					<description><![CDATA[<p>MathLibs — Division Quiz MathLibsTM Division 👥 Enter 5 names (commd-separated) ➗ Choose difficulty Easy (divide by 1-5)Medium (divide by 2-10)Hard (divide by 2-12) 🚀 Start Quiz Question 1 of 5 ⭐ 0 Check ✓ Next → 🏆 Great Job! &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-division-3/"> <span class="screen-reader-text">MathLibs™ Division #3</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-division-3/">MathLibs™ Division #3</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Division Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--green), var(--secondary), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="md-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:#6EE7B7;background:none;-webkit-background-clip:unset">TM</sup> Division</h1>
    <p class="subtitle"></p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="md-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (commd-separated)</label>
      <input type="text" id="md-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2797.png" alt="➗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Choose difficulty</label>
      <select id="md-inp-diff" style="width:100%;padding:14px 18px;font-family:Nunito,sans-serif;font-size:18px;font-weight:600;border:3px solid #E8DFD0;border-radius:14px;background:#FFFCF7;color:#2D1B0E;outline:none"><option value="1" selected>Easy (divide by 1-5)</option><option value="2">Medium (divide by 2-10)</option><option value="3">Hard (divide by 2-12)</option></select>
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="md-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Start Quiz</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="md-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="md-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="md-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="md-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="md-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="md-answer-input" placeholder="?" autocomplete="off" inputmode="numeric">
      <button type="button" class="btn btn-secondary" id="md-btn-submit">Check ✓</button>
    </div>
    <div class="feedback-area" id="md-feedback-area"></div>
    <div id="md-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="md-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="md-results-screen">
    <div class="results-trophy" id="md-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="md-results-title">Great Job!</div>
    <div class="stars-row" id="md-results-stars"></div>
    <div class="results-score" id="md-results-score"></div>
    <div class="results-msg" id="md-results-msg"></div>
    <button type="button" class="btn btn-primary" id="md-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let difficulty = 1;
  let questions = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('md-setup-screen');
  const quizScreen    = _el('md-quiz-screen');
  const resultsScreen = _el('md-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('md-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== RANDOM NUMBER ===== */
  function makePair(){
    var divisor, quotient;
    if(difficulty===1){ divisor=Math.floor(Math.random()*5)+1; quotient=Math.floor(Math.random()*10)+1; }
    else if(difficulty===2){ divisor=Math.floor(Math.random()*9)+2; quotient=Math.floor(Math.random()*10)+1; }
    else { divisor=Math.floor(Math.random()*11)+2; quotient=Math.floor(Math.random()*12)+1; }
    return { total:divisor*quotient, divisor:divisor, answer:quotient };
  }

  /* ===== TEMPLATES ===== */
  const TEMPLATES = [
    { emoji:'&#x1f34e;', make:function(n,t,d){ return n[0]+' has '+t+' apples and shares them equally among '+d+' friends. How many apples does each friend get?'; } },
    { emoji:'&#x2b50;', make:function(n,t,d){ return n[1]+' has '+t+' stickers and puts the same number on each of '+d+' pages. How many stickers per page?'; } },
    { emoji:'&#x1f338;', make:function(n,t,d){ return n[2]+' plants '+t+' flowers equally in '+d+' rows. How many flowers in each row?'; } },
    { emoji:'&#x1f4da;', make:function(n,t,d){ return n[3]+' has '+t+' books and puts them equally on '+d+' shelves. How many books per shelf?'; } },
    { emoji:'&#x1f58d;', make:function(n,t,d){ return n[4]+' divides '+t+' crayons equally into '+d+' boxes. How many crayons in each box?'; } },
    { emoji:'&#x1f353;', make:function(n,t,d){ return n[0]+' shares '+t+' strawberries equally among '+d+' bowls. How many strawberries per bowl?'; } },
    { emoji:'&#x1f388;', make:function(n,t,d){ return n[1]+' has '+t+' balloons and ties them in '+d+' equal bunches. How many balloons per bunch?'; } },
    { emoji:'&#x1f333;', make:function(n,t,d){ return 'A park has '+t+' trees planted equally in '+d+' rows. How many trees per row?'; } },
    { emoji:'&#x1f52e;', make:function(n,t,d){ return n[2]+' sorts '+t+' marbles equally into '+d+' bags. How many marbles per bag?'; } },
    { emoji:'&#x1f3b5;', make:function(n,t,d){ return n[3]+' learns '+t+' songs over '+d+' weeks, the same number each week. How many songs per week?'; } },
    { emoji:'&#x1f48e;', make:function(n,t,d){ return n[4]+' splits '+t+' gems equally among '+d+' treasure chests. How many gems per chest?'; } },
    { emoji:'&#x1f9e9;', make:function(n,t,d){ return n[0]+' divides '+t+' puzzle pieces equally among '+d+' friends. How many pieces each?'; } },
    { emoji:'&#x1f680;', make:function(n,t,d){ return 'A space station sends '+t+' rockets in '+d+' equal groups. How many rockets per group?'; } },
    { emoji:'&#x1f3a8;', make:function(n,t,d){ return n[1]+' has '+t+' paintings and hangs them equally in '+d+' rooms. How many per room?'; } },
    { emoji:'&#x1f31f;', make:function(n,t,d){ return n[2]+' earns '+t+' gold stars over '+d+' days, the same each day. How many stars per day?'; } },
    { emoji:'&#x1f3c0;', make:function(n,t,d){ return n[3]+' scores '+t+' points over '+d+' games, the same each game. How many points per game?'; } },
    { emoji:'&#x1fad0;', make:function(n,t,d){ return n[4]+' puts '+t+' blueberries equally into '+d+' muffins. How many blueberries per muffin?'; } },
    { emoji:'&#x1f331;', make:function(n,t,d){ return n[0]+' plants '+t+' seeds equally in '+d+' pots. How many seeds per pot?'; } },
    { emoji:'&#x1f41a;', make:function(n,t,d){ return n[1]+' sorts '+t+' seashells equally into '+d+' jars. How many seashells per jar?'; } },
    { emoji:'&#x1f3b2;', make:function(n,t,d){ return n[2]+' deals '+t+' cards equally to '+d+' players. How many cards does each player get?'; } },
  ];

  /* ===== BUILD QUESTIONS ===== */
  function buildQuestions(){
    questions=[];
    const shuffled = TEMPLATES.slice().sort(function(){ return Math.random()-0.5; });
    for(var i=0;i<5;i++){
      var p=makePair();
      const tmpl=shuffled[i%shuffled.length];
      questions.push({ text:tmpl.make(names,p.total,p.divisor), ans:p.answer, total:p.total, divisor:p.divisor, emoji:tmpl.emoji });
    }
  }

  /* ===== SHOW ANSWER ===== */
  function showAnswer(q){
    const container = _el('md-emoji-grid-container');
    container.innerHTML = '';
    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';
    const label = document.createElement('div');
    label.className = 'emoji-grid-label';
    label.textContent = q.emoji + ' ' + q.total + ' / ' + q.divisor + ' = ' + q.ans + ' ' + q.emoji;
    wrap.appendChild(label);
    if(q.total <= 60){
      var colors = ['#D5F5F2','#FFE0D0','#E8DDFF','#FFF3CD','#DBEAFE','#FCE7F3'];
      var borders = ['#9EDCD6','#FFAA88','#C4B5FD','#FFD966','#93C5FD','#F9A8D4'];
      const box = document.createElement('div');
      box.style.display = 'flex';
      box.style.flexWrap = 'wrap';
      box.style.gap = '10px';
      box.style.justifyContent = 'center';
      box.style.padding = '18px 24px';
      box.style.border = '3px dashed #FFE66D';
      box.style.borderRadius = '16px';
      for(var g=0;g<q.divisor;g++){
        var group = document.createElement('div');
        group.style.display = 'inline-flex';
        group.style.flexWrap = 'wrap';
        group.style.gap = '4px';
        group.style.padding = '8px 12px';
        group.style.borderRadius = '12px';
        group.style.background = colors[g % colors.length];
        group.style.border = '2px solid ' + borders[g % borders.length];
        for(var e=0;e<q.ans;e++){const s=document.createElement('span');s.textContent=q.emoji;s.style.fontSize='24px';s.className='cell';s.style.animationDelay=((g*q.ans+e)*30)+'ms';group.appendChild(s);}
        box.appendChild(group);
      }
      wrap.appendChild(box);
    }
    container.appendChild(wrap);
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('md-inp-names').value;
    names = rawNames? rawNames.split(',').map(function(s){return s.trim();}).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    difficulty = parseInt(_el('md-inp-diff').value, 10) || 1;
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('md-quiz-progress').textContent = 'Question '+(qIdx+1)+' of '+questions.length;
    _el('md-quiz-score').textContent = score;
    _el('md-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('md-question-text').textContent = questions[qIdx].text;
    const inp = _el('md-answer-input');
    inp.value=''; inp.className='answer-input'; inp.disabled=false; inp.focus();
    _el('md-feedback-area').innerHTML='';
    _el('md-emoji-grid-container').innerHTML='';
    show(_el('md-btn-submit')); hide(_el('md-btn-next'));
  }

  function doSubmit(){
    if(answered) return;
    const inp = _el('md-answer-input');
    const userAns = parseInt(inp.value, 10);
    if(isNaN(userAns)) return;

    answered = true;
    const q = questions[qIdx];
    const correct = (userAns === q.ans);

    const fb = document.createElement('div');
    fb.className = 'feedback-msg';

    if(correct){
      score++;
      _el('md-quiz-score').textContent = score;
      inp.className = 'answer-input correct';
      fb.classList.add('feedback-correct');
      fb.textContent = 'Yes! '+q.ans+' is correct!';
      sfxCorrect();
      burstConfetti(30);
    } else {
      inp.className = 'answer-input wrong';
      fb.classList.add('feedback-wrong');
      fb.textContent = 'Oops! The answer is '+q.ans+'.';
      sfxWrong();
    }

    _el('md-feedback-area').innerHTML = '';
    _el('md-feedback-area').appendChild(fb);
    inp.disabled = true;

    showAnswer(q);

    hide(_el('md-btn-submit'));
    show(_el('md-btn-next'));
    _el('md-btn-next').textContent = qIdx===questions.length-1 ? 'See Results' : 'Next';
    _el('md-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('md-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('md-results-score').textContent = 'You got '+score+' out of '+questions.length+' correct!';

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='T'; title='PERFECT SCORE!'; msg='You are an division superstar!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='S'; title='Amazing Work!'; msg='So close to perfect!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='G'; title='Good Job!'; msg='Practice makes perfect!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='N'; title='Nice Try!'; msg='Keep practicing!'; starCount=2;
    } else {
      trophy='L'; title='Keep Learning!'; msg='Every mistake helps you grow!'; starCount=1;
    }

    _el('md-results-trophy').textContent = trophy;
    _el('md-results-title').textContent = title;
    _el('md-results-msg').textContent = msg;
    _el('md-results-stars').textContent = '';
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('md-btn-start').addEventListener('click', goQuiz);
  _el('md-btn-submit').addEventListener('click', doSubmit);
  _el('md-btn-next').addEventListener('click', doNext);
  _el('md-btn-restart').addEventListener('click', doRestart);

  _el('md-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  _el('md-inp-diff').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('md-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:76px" aria-hidden="true" class="wp-block-spacer"></div>



<p>PBS Teachers once praised MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /> for its inventive design and ability to draw kids into math without anxiety. Unlike worksheets that trigger groans, MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /> offers joyful engagement through choice, humor, and repetition embedded in creativity.</p>



<p><br><strong>Did You Know?</strong><br>By first grade, many students already carry beliefs about whether they’re “good at math.” These early impressions—often formed by classroom tone or feedback—can last into adulthood. Positive, playful math experiences that let kids laugh and take ownership early on help shape more flexible, confident math identities.<br>(Cimpian, Andrei, et al. “Children’s Beliefs About Intelligence and Effort: Implications for Learning.”)</p>
<p>The post <a href="https://kidcourses.com/mathlibs-division-3/">MathLibs™ Division #3</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>MathLibs™ Division #2</title>
		<link>https://kidcourses.com/mathlibs-division-2/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 05:03:39 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10770</guid>

					<description><![CDATA[<p>MathLibs — Division Quiz MathLibsTM Division 👥 Enter 5 names (commd-separated) ➗ Choose difficulty Easy (divide by 1-5)Medium (divide by 2-10)Hard (divide by 2-12) 🚀 Start Quiz Question 1 of 5 ⭐ 0 Check ✓ Next → 🏆 Great Job! &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-division-2/"> <span class="screen-reader-text">MathLibs™ Division #2</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-division-2/">MathLibs™ Division #2</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Division Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--green), var(--secondary), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="md-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:#6EE7B7;background:none;-webkit-background-clip:unset">TM</sup> Division</h1>
    <p class="subtitle"></p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="md-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (commd-separated)</label>
      <input type="text" id="md-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2797.png" alt="➗" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Choose difficulty</label>
      <select id="md-inp-diff" style="width:100%;padding:14px 18px;font-family:Nunito,sans-serif;font-size:18px;font-weight:600;border:3px solid #E8DFD0;border-radius:14px;background:#FFFCF7;color:#2D1B0E;outline:none"><option value="1" selected>Easy (divide by 1-5)</option><option value="2">Medium (divide by 2-10)</option><option value="3">Hard (divide by 2-12)</option></select>
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="md-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Start Quiz</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="md-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="md-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="md-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="md-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="md-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="md-answer-input" placeholder="?" autocomplete="off" inputmode="numeric">
      <button type="button" class="btn btn-secondary" id="md-btn-submit">Check ✓</button>
    </div>
    <div class="feedback-area" id="md-feedback-area"></div>
    <div id="md-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="md-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="md-results-screen">
    <div class="results-trophy" id="md-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="md-results-title">Great Job!</div>
    <div class="stars-row" id="md-results-stars"></div>
    <div class="results-score" id="md-results-score"></div>
    <div class="results-msg" id="md-results-msg"></div>
    <button type="button" class="btn btn-primary" id="md-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let difficulty = 1;
  let questions = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('md-setup-screen');
  const quizScreen    = _el('md-quiz-screen');
  const resultsScreen = _el('md-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('md-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== RANDOM NUMBER ===== */
  function makePair(){
    var divisor, quotient;
    if(difficulty===1){ divisor=Math.floor(Math.random()*5)+1; quotient=Math.floor(Math.random()*10)+1; }
    else if(difficulty===2){ divisor=Math.floor(Math.random()*9)+2; quotient=Math.floor(Math.random()*10)+1; }
    else { divisor=Math.floor(Math.random()*11)+2; quotient=Math.floor(Math.random()*12)+1; }
    return { total:divisor*quotient, divisor:divisor, answer:quotient };
  }

  /* ===== TEMPLATES ===== */
  const TEMPLATES = [
    { emoji:'&#x1f680;', make:function(n,t,d){ return n[0]+' launches '+t+' rockets equally from '+d+' launchpads. How many rockets per launchpad?'; } },
    { emoji:'&#x1f308;', make:function(n,t,d){ return n[1]+' divides '+t+' rainbow stickers equally among '+d+' notebooks. How many stickers per notebook?'; } },
    { emoji:'&#x1f48e;', make:function(n,t,d){ return n[2]+' splits '+t+' gems equally into '+d+' treasure chests. How many gems per chest?'; } },
    { emoji:'&#x1fa81;', make:function(n,t,d){ return n[3]+' has '+t+' kites and gives them equally to '+d+' teams. How many kites per team?'; } },
    { emoji:'&#x1f52d;', make:function(n,t,d){ return 'An observatory spots '+t+' comets over '+d+' nights, the same each night. How many comets per night?'; } },
    { emoji:'&#x1f9ca;', make:function(n,t,d){ return n[4]+' drops '+t+' ice cubes equally into '+d+' glasses. How many ice cubes per glass?'; } },
    { emoji:'&#x1f9ea;', make:function(n,t,d){ return n[0]+' pours '+t+' potions equally into '+d+' cauldrons. How many potions per cauldron?'; } },
    { emoji:'&#x1fa90;', make:function(n,t,d){ return 'Scientists discover '+t+' moons orbiting '+d+' planets equally. How many moons per planet?'; } },
    { emoji:'&#x1f3af;', make:function(n,t,d){ return n[1]+' shoots '+t+' arrows in '+d+' rounds, the same each round. How many arrows per round?'; } },
    { emoji:'&#x1f3d6;', make:function(n,t,d){ return n[2]+' builds '+t+' sandcastles equally across '+d+' beaches. How many sandcastles per beach?'; } },
    { emoji:'&#x1f3aa;', make:function(n,t,d){ return 'A circus has '+t+' performers split equally into '+d+' acts. How many performers per act?'; } },
    { emoji:'&#x1f6f8;', make:function(n,t,d){ return n[3]+' spots '+t+' UFOs over '+d+' nights equally. How many UFOs per night?'; } },
    { emoji:'&#x1f3f0;', make:function(n,t,d){ return n[4]+' places '+t+' flags equally on '+d+' castle towers. How many flags per tower?'; } },
    { emoji:'&#x1f30a;', make:function(n,t,d){ return n[0]+' catches '+t+' waves over '+d+' surf sessions equally. How many waves per session?'; } },
    { emoji:'&#x26a1;', make:function(n,t,d){ return n[1]+' catches '+t+' lightning bugs and puts them equally in '+d+' jars. How many per jar?'; } },
    { emoji:'&#x1f3b2;', make:function(n,t,d){ return n[2]+' deals '+t+' game cards equally to '+d+' players. How many cards each?'; } },
    { emoji:'&#x1f9f2;', make:function(n,t,d){ return n[3]+' sorts '+t+' magnets equally into '+d+' bins. How many magnets per bin?'; } },
    { emoji:'&#x1f3d4;', make:function(n,t,d){ return 'Park rangers plant '+t+' trail markers equally on '+d+' hiking paths. How many markers per path?'; } },
    { emoji:'&#x1f3ad;', make:function(n,t,d){ return n[4]+' makes '+t+' costumes equally for '+d+' plays. How many costumes per play?'; } },
    { emoji:'&#x1f3a8;', make:function(n,t,d){ return n[0]+' squeezes '+t+' paint blobs equally onto '+d+' palettes. How many blobs per palette?'; } },
  ];

  /* ===== BUILD QUESTIONS ===== */
  function buildQuestions(){
    questions=[];
    const shuffled = TEMPLATES.slice().sort(function(){ return Math.random()-0.5; });
    for(var i=0;i<5;i++){
      var p=makePair();
      const tmpl=shuffled[i%shuffled.length];
      questions.push({ text:tmpl.make(names,p.total,p.divisor), ans:p.answer, total:p.total, divisor:p.divisor, emoji:tmpl.emoji });
    }
  }

  /* ===== SHOW ANSWER ===== */
  function showAnswer(q){
    const container = _el('md-emoji-grid-container');
    container.innerHTML = '';
    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';
    const label = document.createElement('div');
    label.className = 'emoji-grid-label';
    label.textContent = q.emoji + ' ' + q.total + ' / ' + q.divisor + ' = ' + q.ans + ' ' + q.emoji;
    wrap.appendChild(label);
    if(q.total <= 60){
      var colors = ['#D5F5F2','#FFE0D0','#E8DDFF','#FFF3CD','#DBEAFE','#FCE7F3'];
      var borders = ['#9EDCD6','#FFAA88','#C4B5FD','#FFD966','#93C5FD','#F9A8D4'];
      const box = document.createElement('div');
      box.style.display = 'flex';
      box.style.flexWrap = 'wrap';
      box.style.gap = '10px';
      box.style.justifyContent = 'center';
      box.style.padding = '18px 24px';
      box.style.border = '3px dashed #FFE66D';
      box.style.borderRadius = '16px';
      for(var g=0;g<q.divisor;g++){
        var group = document.createElement('div');
        group.style.display = 'inline-flex';
        group.style.flexWrap = 'wrap';
        group.style.gap = '4px';
        group.style.padding = '8px 12px';
        group.style.borderRadius = '12px';
        group.style.background = colors[g % colors.length];
        group.style.border = '2px solid ' + borders[g % borders.length];
        for(var e=0;e<q.ans;e++){const s=document.createElement('span');s.textContent=q.emoji;s.style.fontSize='24px';s.className='cell';s.style.animationDelay=((g*q.ans+e)*30)+'ms';group.appendChild(s);}
        box.appendChild(group);
      }
      wrap.appendChild(box);
    }
    container.appendChild(wrap);
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('md-inp-names').value;
    names = rawNames? rawNames.split(',').map(function(s){return s.trim();}).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    difficulty = parseInt(_el('md-inp-diff').value, 10) || 1;
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('md-quiz-progress').textContent = 'Question '+(qIdx+1)+' of '+questions.length;
    _el('md-quiz-score').textContent = score;
    _el('md-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('md-question-text').textContent = questions[qIdx].text;
    const inp = _el('md-answer-input');
    inp.value=''; inp.className='answer-input'; inp.disabled=false; inp.focus();
    _el('md-feedback-area').innerHTML='';
    _el('md-emoji-grid-container').innerHTML='';
    show(_el('md-btn-submit')); hide(_el('md-btn-next'));
  }

  function doSubmit(){
    if(answered) return;
    const inp = _el('md-answer-input');
    const userAns = parseInt(inp.value, 10);
    if(isNaN(userAns)) return;

    answered = true;
    const q = questions[qIdx];
    const correct = (userAns === q.ans);

    const fb = document.createElement('div');
    fb.className = 'feedback-msg';

    if(correct){
      score++;
      _el('md-quiz-score').textContent = score;
      inp.className = 'answer-input correct';
      fb.classList.add('feedback-correct');
      fb.textContent = 'Yes! '+q.ans+' is correct!';
      sfxCorrect();
      burstConfetti(30);
    } else {
      inp.className = 'answer-input wrong';
      fb.classList.add('feedback-wrong');
      fb.textContent = 'Oops! The answer is '+q.ans+'.';
      sfxWrong();
    }

    _el('md-feedback-area').innerHTML = '';
    _el('md-feedback-area').appendChild(fb);
    inp.disabled = true;

    showAnswer(q);

    hide(_el('md-btn-submit'));
    show(_el('md-btn-next'));
    _el('md-btn-next').textContent = qIdx===questions.length-1 ? 'See Results' : 'Next';
    _el('md-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('md-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('md-results-score').textContent = 'You got '+score+' out of '+questions.length+' correct!';

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='T'; title='PERFECT SCORE!'; msg='You are an division superstar!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='S'; title='Amazing Work!'; msg='So close to perfect!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='G'; title='Good Job!'; msg='Practice makes perfect!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='N'; title='Nice Try!'; msg='Keep practicing!'; starCount=2;
    } else {
      trophy='L'; title='Keep Learning!'; msg='Every mistake helps you grow!'; starCount=1;
    }

    _el('md-results-trophy').textContent = trophy;
    _el('md-results-title').textContent = title;
    _el('md-results-msg').textContent = msg;
    _el('md-results-stars').textContent = '';
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('md-btn-start').addEventListener('click', goQuiz);
  _el('md-btn-submit').addEventListener('click', doSubmit);
  _el('md-btn-next').addEventListener('click', doNext);
  _el('md-btn-restart').addEventListener('click', doRestart);

  _el('md-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  _el('md-inp-diff').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('md-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:85px" aria-hidden="true" class="wp-block-spacer"></div>



<p>MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /> caught the attention of the National Council of Teachers of Mathematics for its creative approach to fluency-building. It delivers the kind of repetition teachers want—with the kind of delight kids need. And it’s free, so no school or family is left out.</p>



<p><br><strong>Did You Know?</strong><br>Making mistakes in math can actually strengthen the brain—if the environment feels safe. The anterior cingulate cortex becomes more active when we recognize an error and try again. But if a child feels ashamed or judged, that learning system shuts down. Lighthearted, repeatable tasks that make errors no big deal keep the brain engaged.<br>(Immordino-Yang, Mary Helen. <em>Emotions, Learning, and the Brain.</em>)</p>
<p>The post <a href="https://kidcourses.com/mathlibs-division-2/">MathLibs™ Division #2</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>MathLibs™ Addition #3</title>
		<link>https://kidcourses.com/mathlibs-addition-3/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 04:35:03 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10762</guid>

					<description><![CDATA[<p>MathLibs — Multiplication Quiz MathLibs™ Addition 👥 Enter 5 names (comma-separated) ➕ Choose difficulty Single digits (1-9)Double digits (10-50)Triple digits (100-500) 🚀 Start Quiz Question 1 of 5 ⭐ 0 Check ✓ Next → 🏆 Great Job! 🔄 Play Again &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-addition-3/"> <span class="screen-reader-text">MathLibs™ Addition #3</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-addition-3/">MathLibs™ Addition #3</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Multiplication Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="ma-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:var(--text-muted);background:none;-webkit-background-clip:unset"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /></sup> Addition</h1>
    <p class="subtitle"></p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="ma-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (comma-separated)</label>
      <input type="text" id="ma-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2795.png" alt="➕" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Choose difficulty</label>
      <select id="ma-inp-diff" style="width:100%;padding:14px 18px;font-family:Nunito,sans-serif;font-size:18px;font-weight:600;border:3px solid #E8DFD0;border-radius:14px;background:#FFFCF7;color:#2D1B0E;outline:none"><option value="1" selected>Single digits (1-9)</option><option value="2">Double digits (10-50)</option><option value="3">Triple digits (100-500)</option></select>
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="ma-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Start Quiz</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="ma-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="ma-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="ma-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="ma-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="ma-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="ma-answer-input" placeholder="?" autocomplete="off" inputmode="numeric">
      <button type="button" class="btn btn-secondary" id="ma-btn-submit">Check ✓</button>
    </div>
    <div class="feedback-area" id="ma-feedback-area"></div>
    <div id="ma-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="ma-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="ma-results-screen">
    <div class="results-trophy" id="ma-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="ma-results-title">Great Job!</div>
    <div class="stars-row" id="ma-results-stars"></div>
    <div class="results-score" id="ma-results-score"></div>
    <div class="results-msg" id="ma-results-msg"></div>
    <button type="button" class="btn btn-primary" id="ma-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let difficulty = 1;
  let questions = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('ma-setup-screen');
  const quizScreen    = _el('ma-quiz-screen');
  const resultsScreen = _el('ma-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('ma-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== RANDOM NUMBER ===== */
  function randNum(){
    if(difficulty===1) return Math.floor(Math.random()*9)+1;
    if(difficulty===2) return Math.floor(Math.random()*41)+10;
    return Math.floor(Math.random()*401)+100;
  }

  /* ===== TEMPLATES ===== */
  const TEMPLATES = [
    { emoji:'&#x2b50;', make:function(n,a,b){ return n[0]+' has '+a+' stickers and '+n[1]+' gives them '+b+' more. How many stickers altogether?'; } },
    { emoji:'&#x1f41a;', make:function(n,a,b){ return n[2]+' finds '+a+' seashells in the morning and '+b+' in the afternoon. How many total?'; } },
    { emoji:'&#x1f52e;', make:function(n,a,b){ return n[3]+' has '+a+' marbles. '+n[4]+' puts '+b+' more in the pile. How many marbles now?'; } },
    { emoji:'&#x1f333;', make:function(n,a,b){ return 'There are '+a+' trees in the park. The city plants '+b+' more. How many trees total?'; } },
    { emoji:'&#x1f3c0;', make:function(n,a,b){ return n[0]+' scores '+a+' points in the first half and '+b+' in the second half. What is the total score?'; } },
    { emoji:'&#x1f353;', make:function(n,a,b){ return n[1]+' picks '+a+' strawberries and '+n[2]+' picks '+b+'. How many strawberries together?'; } },
    { emoji:'&#x1f4c4;', make:function(n,a,b){ return n[3]+' reads '+a+' pages before lunch and '+b+' pages after. How many pages total?'; } },
    { emoji:'&#x1f33b;', make:function(n,a,b){ return 'There are '+a+' sunflowers in the garden. '+n[4]+' plants '+b+' more. How many sunflowers now?'; } },
    { emoji:'&#x1f34e;', make:function(n,a,b){ return n[0]+' picks '+a+' apples from one tree and '+b+' from another. How many apples total?'; } },
    { emoji:'&#x1f58d;', make:function(n,a,b){ return n[2]+' has '+a+' crayons in one box and '+b+' in another. How many crayons total?'; } },
    { emoji:'&#x1f463;', make:function(n,a,b){ return n[3]+' walks '+a+' steps to school and '+b+' steps to the park. How many steps altogether?'; } },
    { emoji:'&#x1faa8;', make:function(n,a,b){ return n[4]+' collects '+a+' rocks on Monday and '+b+' on Tuesday. How many rocks total?'; } },
    { emoji:'&#x1f338;', make:function(n,a,b){ return n[1]+' plants '+a+' flowers in one row and '+b+' in another. How many flowers altogether?'; } },
    { emoji:'&#x1f388;', make:function(n,a,b){ return n[3]+' blows up '+a+' balloons and '+n[4]+' blows up '+b+'. How many balloons altogether?'; } },
    { emoji:'&#x1f4da;', make:function(n,a,b){ return n[0]+' has '+a+' books on one shelf and '+b+' on another. How many books total?'; } },
    { emoji:'&#x1f31f;', make:function(n,a,b){ return n[1]+' earns '+a+' gold stars on Monday and '+b+' on Friday. How many gold stars altogether?'; } },
    { emoji:'&#x1f3b5;', make:function(n,a,b){ return n[2]+' learns '+a+' songs this week and '+b+' next week. How many songs total?'; } },
    { emoji:'&#x1fad0;', make:function(n,a,b){ return n[0]+' picks '+a+' blueberries from one bush and '+b+' from another. How many blueberries total?'; } },
    { emoji:'&#x1f331;', make:function(n,a,b){ return n[3]+' plants '+a+' seeds on Saturday and '+b+' on Sunday. How many seeds altogether?'; } },
    { emoji:'&#x1f3a8;', make:function(n,a,b){ return n[4]+' paints '+a+' pictures in art class and '+b+' at home. How many pictures total?'; } },
  ];

  /* ===== BUILD QUESTIONS ===== */
  function buildQuestions(){
    questions=[];
    const shuffled = TEMPLATES.slice().sort(function(){ return Math.random()-0.5; });
    for(let i=0;i<5;i++){
      const a=randNum(), b=randNum();
      const tmpl=shuffled[i%shuffled.length];
      questions.push({ text:tmpl.make(names,a,b), ans:a+b, a:a, b:b, emoji:tmpl.emoji });
    }
  }

  /* ===== SHOW ANSWER ===== */
  function showAnswer(q){
    const container = _el('ma-emoji-grid-container');
    container.innerHTML = '';
    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';
    const label = document.createElement('div');
    label.className = 'emoji-grid-label';
    label.textContent = q.emoji + ' ' + q.a + ' + ' + q.b + ' = ' + q.ans + ' ' + q.emoji;
    wrap.appendChild(label);
    if(q.a <= 20){
      const box = document.createElement('div');
      box.style.display = 'inline-flex';
      box.style.alignItems = 'center';
      box.style.gap = '12px';
      box.style.padding = '18px 24px';
      box.style.border = '3px dashed #FFE66D';
      box.style.borderRadius = '16px';
      const gA = document.createElement('div');
      gA.style.padding = '8px 12px';
      gA.style.borderRadius = '12px';
      gA.style.background = '#D5F5F2';
      gA.style.border = '2px solid #9EDCD6';
      for(var i=0;i<q.a;i++){const s=document.createElement('span');s.textContent=q.emoji;s.style.fontSize='28px';gA.appendChild(s);}
      box.appendChild(gA);
      const plus = document.createElement('span');
      plus.textContent = '+';
      plus.style.fontSize = '32px';
      plus.style.fontWeight = '800';
      plus.style.color = '#A78BFA';
      box.appendChild(plus);
      const gB = document.createElement('div');
      gB.style.padding = '8px 12px';
      gB.style.borderRadius = '12px';
      gB.style.background = '#FFE0D0';
      gB.style.border = '2px solid #FFAA88';
      for(var j=0;j<q.b;j++){const s=document.createElement('span');s.textContent=q.emoji;s.style.fontSize='28px';gB.appendChild(s);}
      box.appendChild(gB);
      const eq = document.createElement('span');
      eq.textContent = '= ' + q.ans;
      eq.style.fontSize = '28px';
      eq.style.fontWeight = '800';
      eq.style.color = '#2D1B0E';
      box.appendChild(eq);
      wrap.appendChild(box);
    }
    container.appendChild(wrap);
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('ma-inp-names').value;
    names = rawNames? rawNames.split(',').map(function(s){return s.trim();}).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    difficulty = parseInt(_el('ma-inp-diff').value, 10) || 1;
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('ma-quiz-progress').textContent = 'Question '+(qIdx+1)+' of '+questions.length;
    _el('ma-quiz-score').textContent = score;
    _el('ma-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('ma-question-text').textContent = questions[qIdx].text;
    const inp = _el('ma-answer-input');
    inp.value=''; inp.className='answer-input'; inp.disabled=false; inp.focus();
    _el('ma-feedback-area').innerHTML='';
    _el('ma-emoji-grid-container').innerHTML='';
    show(_el('ma-btn-submit')); hide(_el('ma-btn-next'));
  }

  function doSubmit(){
    if(answered) return;
    const inp = _el('ma-answer-input');
    const userAns = parseInt(inp.value, 10);
    if(isNaN(userAns)) return;

    answered = true;
    const q = questions[qIdx];
    const correct = (userAns === q.ans);

    const fb = document.createElement('div');
    fb.className = 'feedback-msg';

    if(correct){
      score++;
      _el('ma-quiz-score').textContent = score;
      inp.className = 'answer-input correct';
      fb.classList.add('feedback-correct');
      fb.textContent = 'Yes! '+q.ans+' is correct!';
      sfxCorrect();
      burstConfetti(30);
    } else {
      inp.className = 'answer-input wrong';
      fb.classList.add('feedback-wrong');
      fb.textContent = 'Oops! The answer is '+q.ans+'.';
      sfxWrong();
    }

    _el('ma-feedback-area').innerHTML = '';
    _el('ma-feedback-area').appendChild(fb);
    inp.disabled = true;

    showAnswer(q);

    hide(_el('ma-btn-submit'));
    show(_el('ma-btn-next'));
    _el('ma-btn-next').textContent = qIdx===questions.length-1 ? 'See Results' : 'Next';
    _el('ma-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('ma-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('ma-results-score').textContent = 'You got '+score+' out of '+questions.length+' correct!';

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='T'; title='PERFECT SCORE!'; msg='You are an addition superstar!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='S'; title='Amazing Work!'; msg='So close to perfect!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='G'; title='Good Job!'; msg='Practice makes perfect!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='N'; title='Nice Try!'; msg='Keep practicing!'; starCount=2;
    } else {
      trophy='L'; title='Keep Learning!'; msg='Every mistake helps you grow!'; starCount=1;
    }

    _el('ma-results-trophy').textContent = trophy;
    _el('ma-results-title').textContent = title;
    _el('ma-results-msg').textContent = msg;
    _el('ma-results-stars').textContent = '';
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('ma-btn-start').addEventListener('click', goQuiz);
  _el('ma-btn-submit').addEventListener('click', doSubmit);
  _el('ma-btn-next').addEventListener('click', doNext);
  _el('ma-btn-restart').addEventListener('click', doRestart);

  _el('ma-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  _el('ma-inp-diff').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('ma-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>When kids get to see their own name and number choices in a personalized math game, they feel like the activity belongs to them. That sense of ownership boosts engagement and memory—both essential for deep learning.</p>



<p><br><strong>Did You Know?</strong><br>Seeing your name or your dog’s name in a math game activates the brain’s self-relevance network. The medial prefrontal cortex lights up when content feels personally meaningful, which increases attention and memory. Personalized, silly input helps math stick better than plain numbers on a page.<br>(Thibodeaux, Nicole, et al. “Personal Relevance and Learning in Children.”)</p>
<p>The post <a href="https://kidcourses.com/mathlibs-addition-3/">MathLibs™ Addition #3</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>MathLibs™ Addition #2</title>
		<link>https://kidcourses.com/mathlibs-addition-2/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 02:35:00 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10731</guid>

					<description><![CDATA[<p>MathLibs — Multiplication Quiz MathLibs™ Addition 👥 Enter 5 names (comma-separated) ➕ Choose difficulty Single digits (1-9)Double digits (10-50)Triple digits (100-500) 🚀 Start Quiz Question 1 of 5 ⭐ 0 Check ✓ Next → 🏆 Great Job! 🔄 Play Again &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-addition-2/"> <span class="screen-reader-text">MathLibs™ Addition #2</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-addition-2/">MathLibs™ Addition #2</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div style="height:73px" aria-hidden="true" class="wp-block-spacer"></div>



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Multiplication Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="ma-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:var(--text-muted);background:none;-webkit-background-clip:unset"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /></sup> Addition</h1>
    <p class="subtitle"></p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="ma-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (comma-separated)</label>
      <input type="text" id="ma-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2795.png" alt="➕" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Choose difficulty</label>
      <select id="ma-inp-diff" style="width:100%;padding:14px 18px;font-family:Nunito,sans-serif;font-size:18px;font-weight:600;border:3px solid #E8DFD0;border-radius:14px;background:#FFFCF7;color:#2D1B0E;outline:none"><option value="1" selected>Single digits (1-9)</option><option value="2">Double digits (10-50)</option><option value="3">Triple digits (100-500)</option></select>
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="ma-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Start Quiz</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="ma-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="ma-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="ma-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="ma-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="ma-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="ma-answer-input" placeholder="?" autocomplete="off" inputmode="numeric">
      <button type="button" class="btn btn-secondary" id="ma-btn-submit">Check ✓</button>
    </div>
    <div class="feedback-area" id="ma-feedback-area"></div>
    <div id="ma-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="ma-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="ma-results-screen">
    <div class="results-trophy" id="ma-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="ma-results-title">Great Job!</div>
    <div class="stars-row" id="ma-results-stars"></div>
    <div class="results-score" id="ma-results-score"></div>
    <div class="results-msg" id="ma-results-msg"></div>
    <button type="button" class="btn btn-primary" id="ma-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let difficulty = 1;
  let questions = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('ma-setup-screen');
  const quizScreen    = _el('ma-quiz-screen');
  const resultsScreen = _el('ma-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('ma-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== RANDOM NUMBER ===== */
  function randNum(){
    if(difficulty===1) return Math.floor(Math.random()*9)+1;
    if(difficulty===2) return Math.floor(Math.random()*41)+10;
    return Math.floor(Math.random()*401)+100;
  }

  /* ===== TEMPLATES ===== */
  const TEMPLATES = [
    { emoji:'&#x2b50;', make:function(n,a,b){ return n[0]+' has '+a+' stickers and '+n[1]+' gives them '+b+' more. How many stickers altogether?'; } },
    { emoji:'&#x1f41a;', make:function(n,a,b){ return n[2]+' finds '+a+' seashells in the morning and '+b+' in the afternoon. How many total?'; } },
    { emoji:'&#x1f52e;', make:function(n,a,b){ return n[3]+' has '+a+' marbles. '+n[4]+' puts '+b+' more in the pile. How many marbles now?'; } },
    { emoji:'&#x1f333;', make:function(n,a,b){ return 'There are '+a+' trees in the park. The city plants '+b+' more. How many trees total?'; } },
    { emoji:'&#x1f3c0;', make:function(n,a,b){ return n[0]+' scores '+a+' points in the first half and '+b+' in the second half. What is the total score?'; } },
    { emoji:'&#x1f353;', make:function(n,a,b){ return n[1]+' picks '+a+' strawberries and '+n[2]+' picks '+b+'. How many strawberries together?'; } },
    { emoji:'&#x1f4c4;', make:function(n,a,b){ return n[3]+' reads '+a+' pages before lunch and '+b+' pages after. How many pages total?'; } },
    { emoji:'&#x1f33b;', make:function(n,a,b){ return 'There are '+a+' sunflowers in the garden. '+n[4]+' plants '+b+' more. How many sunflowers now?'; } },
    { emoji:'&#x1f34e;', make:function(n,a,b){ return n[0]+' picks '+a+' apples from one tree and '+b+' from another. How many apples total?'; } },
    { emoji:'&#x1f58d;', make:function(n,a,b){ return n[2]+' has '+a+' crayons in one box and '+b+' in another. How many crayons total?'; } },
    { emoji:'&#x1f463;', make:function(n,a,b){ return n[3]+' walks '+a+' steps to school and '+b+' steps to the park. How many steps altogether?'; } },
    { emoji:'&#x1faa8;', make:function(n,a,b){ return n[4]+' collects '+a+' rocks on Monday and '+b+' on Tuesday. How many rocks total?'; } },
    { emoji:'&#x1f338;', make:function(n,a,b){ return n[1]+' plants '+a+' flowers in one row and '+b+' in another. How many flowers altogether?'; } },
    { emoji:'&#x1f388;', make:function(n,a,b){ return n[3]+' blows up '+a+' balloons and '+n[4]+' blows up '+b+'. How many balloons altogether?'; } },
    { emoji:'&#x1f4da;', make:function(n,a,b){ return n[0]+' has '+a+' books on one shelf and '+b+' on another. How many books total?'; } },
    { emoji:'&#x1f31f;', make:function(n,a,b){ return n[1]+' earns '+a+' gold stars on Monday and '+b+' on Friday. How many gold stars altogether?'; } },
    { emoji:'&#x1f3b5;', make:function(n,a,b){ return n[2]+' learns '+a+' songs this week and '+b+' next week. How many songs total?'; } },
    { emoji:'&#x1fad0;', make:function(n,a,b){ return n[0]+' picks '+a+' blueberries from one bush and '+b+' from another. How many blueberries total?'; } },
    { emoji:'&#x1f331;', make:function(n,a,b){ return n[3]+' plants '+a+' seeds on Saturday and '+b+' on Sunday. How many seeds altogether?'; } },
    { emoji:'&#x1f3a8;', make:function(n,a,b){ return n[4]+' paints '+a+' pictures in art class and '+b+' at home. How many pictures total?'; } },
  ];

  /* ===== BUILD QUESTIONS ===== */
  function buildQuestions(){
    questions=[];
    const shuffled = TEMPLATES.slice().sort(function(){ return Math.random()-0.5; });
    for(let i=0;i<5;i++){
      const a=randNum(), b=randNum();
      const tmpl=shuffled[i%shuffled.length];
      questions.push({ text:tmpl.make(names,a,b), ans:a+b, a:a, b:b, emoji:tmpl.emoji });
    }
  }

  /* ===== SHOW ANSWER ===== */
  function showAnswer(q){
    const container = _el('ma-emoji-grid-container');
    container.innerHTML = '';
    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';
    const label = document.createElement('div');
    label.className = 'emoji-grid-label';
    label.textContent = q.emoji + ' ' + q.a + ' + ' + q.b + ' = ' + q.ans + ' ' + q.emoji;
    wrap.appendChild(label);
    if(q.a <= 20){
      const box = document.createElement('div');
      box.style.display = 'inline-flex';
      box.style.alignItems = 'center';
      box.style.gap = '12px';
      box.style.padding = '18px 24px';
      box.style.border = '3px dashed #FFE66D';
      box.style.borderRadius = '16px';
      const gA = document.createElement('div');
      gA.style.padding = '8px 12px';
      gA.style.borderRadius = '12px';
      gA.style.background = '#D5F5F2';
      gA.style.border = '2px solid #9EDCD6';
      for(var i=0;i<q.a;i++){const s=document.createElement('span');s.textContent=q.emoji;s.style.fontSize='28px';gA.appendChild(s);}
      box.appendChild(gA);
      const plus = document.createElement('span');
      plus.textContent = '+';
      plus.style.fontSize = '32px';
      plus.style.fontWeight = '800';
      plus.style.color = '#A78BFA';
      box.appendChild(plus);
      const gB = document.createElement('div');
      gB.style.padding = '8px 12px';
      gB.style.borderRadius = '12px';
      gB.style.background = '#FFE0D0';
      gB.style.border = '2px solid #FFAA88';
      for(var j=0;j<q.b;j++){const s=document.createElement('span');s.textContent=q.emoji;s.style.fontSize='28px';gB.appendChild(s);}
      box.appendChild(gB);
      const eq = document.createElement('span');
      eq.textContent = '= ' + q.ans;
      eq.style.fontSize = '28px';
      eq.style.fontWeight = '800';
      eq.style.color = '#2D1B0E';
      box.appendChild(eq);
      wrap.appendChild(box);
    }
    container.appendChild(wrap);
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('ma-inp-names').value;
    names = rawNames? rawNames.split(',').map(function(s){return s.trim();}).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    difficulty = parseInt(_el('ma-inp-diff').value, 10) || 1;
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('ma-quiz-progress').textContent = 'Question '+(qIdx+1)+' of '+questions.length;
    _el('ma-quiz-score').textContent = score;
    _el('ma-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('ma-question-text').textContent = questions[qIdx].text;
    const inp = _el('ma-answer-input');
    inp.value=''; inp.className='answer-input'; inp.disabled=false; inp.focus();
    _el('ma-feedback-area').innerHTML='';
    _el('ma-emoji-grid-container').innerHTML='';
    show(_el('ma-btn-submit')); hide(_el('ma-btn-next'));
  }

  function doSubmit(){
    if(answered) return;
    const inp = _el('ma-answer-input');
    const userAns = parseInt(inp.value, 10);
    if(isNaN(userAns)) return;

    answered = true;
    const q = questions[qIdx];
    const correct = (userAns === q.ans);

    const fb = document.createElement('div');
    fb.className = 'feedback-msg';

    if(correct){
      score++;
      _el('ma-quiz-score').textContent = score;
      inp.className = 'answer-input correct';
      fb.classList.add('feedback-correct');
      fb.textContent = 'Yes! '+q.ans+' is correct!';
      sfxCorrect();
      burstConfetti(30);
    } else {
      inp.className = 'answer-input wrong';
      fb.classList.add('feedback-wrong');
      fb.textContent = 'Oops! The answer is '+q.ans+'.';
      sfxWrong();
    }

    _el('ma-feedback-area').innerHTML = '';
    _el('ma-feedback-area').appendChild(fb);
    inp.disabled = true;

    showAnswer(q);

    hide(_el('ma-btn-submit'));
    show(_el('ma-btn-next'));
    _el('ma-btn-next').textContent = qIdx===questions.length-1 ? 'See Results' : 'Next';
    _el('ma-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('ma-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('ma-results-score').textContent = 'You got '+score+' out of '+questions.length+' correct!';

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='T'; title='PERFECT SCORE!'; msg='You are an addition superstar!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='S'; title='Amazing Work!'; msg='So close to perfect!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='G'; title='Good Job!'; msg='Practice makes perfect!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='N'; title='Nice Try!'; msg='Keep practicing!'; starCount=2;
    } else {
      trophy='L'; title='Keep Learning!'; msg='Every mistake helps you grow!'; starCount=1;
    }

    _el('ma-results-trophy').textContent = trophy;
    _el('ma-results-title').textContent = title;
    _el('ma-results-msg').textContent = msg;
    _el('ma-results-stars').textContent = '';
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('ma-btn-start').addEventListener('click', goQuiz);
  _el('ma-btn-submit').addEventListener('click', doSubmit);
  _el('ma-btn-next').addEventListener('click', doNext);
  _el('ma-btn-restart').addEventListener('click', doRestart);

  _el('ma-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  _el('ma-inp-diff').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('ma-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>A tool that’s free, fun, and flexible? That’s been the MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /> promise from the start. It was designed to grow with a child’s skillset—from basic facts to more advanced combinations—so learning feels playful, not pressured.</p>



<p><br><strong>Did You Know?</strong><br>Repetition builds math fluency—but the brain works better when practice has small twists. When a task changes slightly each time, like swapping out numbers or words, the hippocampus stays alert and dopamine levels remain higher. This leads to better long-term retention than drill-only methods.<br>(Sousa, David A. <em>How the Brain Learns Mathematics.</em>)</p>
<p>The post <a href="https://kidcourses.com/mathlibs-addition-2/">MathLibs™ Addition #2</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Mathlibs™ Multiplication #4</title>
		<link>https://kidcourses.com/mathlibs-multiplication-4/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 02:28:15 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10735</guid>

					<description><![CDATA[<p>MathLibs — Multiplication Quiz MathLibs™ Multiplication 👥 Enter 5 names (comma-separated) ✖️ Times tables to practice (1–12) 🚀 Start Quiz Question 1 of 5 ⭐ 0 Check ✓ Next → 🏆 Great Job! 🔄 Play Again What do kids say &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-multiplication-4/"> <span class="screen-reader-text">Mathlibs™ Multiplication #4</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-multiplication-4/">Mathlibs™ Multiplication #4</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Multiplication Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="mul-bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:var(--text-muted);background:none;-webkit-background-clip:unset"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /></sup> Multiplication</h1>
    <p class="subtitle"></p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="mul-setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (comma-separated)</label>
      <input type="text" id="mul-inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2716.png" alt="✖" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Times tables to practice (1–12)</label>
      <input type="text" id="mul-inp-tables" placeholder="e.g. 3, 7, 12">
    </div>
    <div class="btn-center">
      <button type="button" class="btn btn-primary" id="mul-btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Start Quiz</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="mul-quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="mul-quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="mul-quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="mul-progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="mul-question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="mul-answer-input" placeholder="?" autocomplete="off" inputmode="numeric">
      <button type="button" class="btn btn-secondary" id="mul-btn-submit">Check ✓</button>
    </div>
    <div class="feedback-area" id="mul-feedback-area"></div>
    <div id="mul-emoji-grid-container"></div>
    <div class="quiz-btns">
      <button type="button" class="btn btn-fun hidden" id="mul-btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="mul-results-screen">
    <div class="results-trophy" id="mul-results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="mul-results-title">Great Job!</div>
    <div class="stars-row" id="mul-results-stars"></div>
    <div class="results-score" id="mul-results-score"></div>
    <div class="results-msg" id="mul-results-msg"></div>
    <button type="button" class="btn btn-primary" id="mul-btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let tables = [];
  let questions = [];
  let qMeta = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('mul-setup-screen');
  const quizScreen    = _el('mul-quiz-screen');
  const resultsScreen = _el('mul-results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('mul-bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== PARSE ===== */
  function parseTables(raw){
    const arr = (raw||'').split(',').map(s=>parseInt(s.trim(),10)).filter(n=>Number.isInteger(n)&&n>=1&&n<=12);
    return arr.length? arr : [5];
  }

  /* ===== QUESTIONS ===== */
  // Every question is: t × multiplier, where t is from their chosen times tables
  // multiplier is always ≤ 12 so the emoji grid stays compact and readable
  // The story context changes per template but the math is always t × multiplier

  // Template pool — each has a multiplier (≤12) baked into the story
  const TEMPLATES = [
    { mult: 2,  emoji:'&#x1f34e;', make:(n,t)=>`${n[0]} has ${t} apples, and ${n[1]} has twice as many. How many apples does ${n[1]} have?` },
    { mult: 3,  emoji:'&#x1f9c1;', make:(n,t)=>`${n[2]} bakes ${t} cupcakes for each of 3 friends. How many cupcakes in total?` },
    { mult: 4,  emoji:'&#x1f4da;', make:(n,t)=>`If ${n[3]} reads ${t} books a week, how many books will they read in 4 weeks?` },
    { mult: 5,  emoji:'&#x26bd;', make:(n,t)=>`${n[4]} scores ${t} goals per game. How many goals after 5 games?` },
    { mult: 6,  emoji:'&#x1f32e;', make:(n,t)=>`${n[0]} eats ${t} tacos every day for 6 days. How many tacos is that?` },
    { mult: 7,  emoji:'&#x1f3c3;', make:(n,t)=>`If ${n[1]} walks ${t} miles a day, how many miles will they walk in a week?` },
    { mult: 8,  emoji:'&#x1f3a8;', make:(n,t)=>`${n[2]} paints ${t} pictures each month. How many after 8 months?` },
    { mult: 9,  emoji:'&#x270f;', make:(n,t)=>`${n[3]} uses ${t} pencils per project. How many pencils for 9 projects?` },
    { mult: 10, emoji:'&#x1f36a;', make:(n,t)=>`${n[4]} packs ${t} cookies into each box. How many cookies in 10 boxes?` },
    { mult: 11, emoji:'&#x2b50;', make:(n,t)=>`${n[0]} earns ${t} stars each week. How many stars after 11 weeks?` },
    { mult: 12, emoji:'&#x1f9e9;', make:(n,t)=>`${n[1]} solves ${t} puzzles a month. How many puzzles in a whole year (12 months)?` },
    { mult: 3,  emoji:'&#x1f381;', make:(n,t)=>`${n[2]} wraps ${t} presents per hour. How many in 3 hours?` },
    { mult: 4,  emoji:'&#x2615;', make:(n,t)=>`${n[3]} drinks ${t} cups of hot cocoa a day. How many cups in 4 days?` },
    { mult: 5,  emoji:'&#x1f3b5;', make:(n,t)=>`${n[4]} learns ${t} new songs each week. How many songs after 5 weeks?` },
    { mult: 6,  emoji:'&#x1f338;', make:(n,t)=>`${n[0]} plants ${t} flowers in each row. How many flowers in 6 rows?` },
    { mult: 2,  emoji:'&#x1f388;', make:(n,t)=>`${n[1]} blows up ${t} balloons, and ${n[2]} blows up the same amount. How many balloons in total?` },
    { mult: 8,  emoji:'&#x1f41f;', make:(n,t)=>`${n[3]} catches ${t} fish each trip. How many fish after 8 trips?` },
    { mult: 9,  emoji:'&#x1f9f1;', make:(n,t)=>`${n[4]} stacks ${t} blocks in each tower. How many blocks for 9 towers?` },
    { mult: 10, emoji:'&#x1f680;', make:(n,t)=>`${n[0]} flies ${t} miles per minute. How far in 10 minutes?` },
    { mult: 7,  emoji:'&#x1f355;', make:(n,t)=>`${n[1]} eats ${t} slices of pizza each day for a week. How many slices?` },
  ];

  function buildQuestions(){
    questions=[]; qMeta=[];

    // Shuffle template pool and pick 5, ensuring variety
    const shuffled = [...TEMPLATES].sort(()=>Math.random()-0.5);

    for(let i=0;i<5;i++){
      const t = tables[i % tables.length];       // the times table they chose
      const tmpl = shuffled[i % shuffled.length]; // pick a story template
      const mult = tmpl.mult;                     // the multiplier in the story

      // The question is always: t × mult
      // Grid shows mult rows of t items (so they see "mult groups of t")
      questions.push(tmpl.make(names, t));
      qMeta.push({
        ans: t * mult,
        multA: mult,   // rows (the multiplier from the story)
        multB: t,       // columns (the times table number they chose)
        emoji: tmpl.emoji
      });
    }
  }

  /* ===== EMOJI GRID ===== */
  function showEmojiGrid(multA, multB, emoji){
    const container = _el('mul-emoji-grid-container');
    container.innerHTML = '';

    const rows = multA;  // multiplier from story (≤12)
    const cols = multB;  // the times table number (≤12)
    const total = rows * cols;

    // Scale emoji size based on grid size so it always fits nicely
    let emojiSize;
    if(total <= 20) emojiSize = '32px';
    else if(total <= 48) emojiSize = '26px';
    else if(total <= 80) emojiSize = '20px';
    else emojiSize = '16px';

    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';

    const label = document.createElement('div');
    label.className = 'emoji-grid-label';
    label.textContent = `${multA} × ${multB} = ${total}  →  ${multA} rows of ${multB}`;
    wrap.appendChild(label);

    const grid = document.createElement('div');
    grid.className = 'emoji-grid';
    grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
    grid.style.display = 'inline-grid';

    for(let r=0; r<rows; r++){
      for(let c=0; c<cols; c++){
        const cell = document.createElement('span');
        cell.className = 'cell';
        cell.textContent = emoji;
        cell.style.fontSize = emojiSize;
        cell.style.animationDelay = ((r*cols+c)*25)+'ms';
        grid.appendChild(cell);
      }
    }
    wrap.appendChild(grid);
    container.appendChild(wrap);
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('mul-inp-names').value;
    names = rawNames? rawNames.split(',').map(s=>s.trim()).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    tables = parseTables(_el('mul-inp-tables').value);
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('mul-quiz-progress').textContent = `Question ${qIdx+1} of ${questions.length}`;
    _el('mul-quiz-score').textContent = score;
    _el('mul-progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('mul-question-text').textContent = questions[qIdx];
    const inp = _el('mul-answer-input');
    inp.value=''; inp.className='answer-input'; inp.disabled=false; inp.focus();
    _el('mul-feedback-area').innerHTML='';
    _el('mul-emoji-grid-container').innerHTML='';
    show(_el('mul-btn-submit')); hide(_el('mul-btn-next'));
  }

  function doSubmit(){
    if(answered) return;
    const inp = _el('mul-answer-input');
    const userAns = parseInt(inp.value, 10);
    if(isNaN(userAns)) return; // ignore empty

    answered = true;
    const {ans, multA, multB, emoji} = qMeta[qIdx];
    const correct = (userAns === ans);

    const fb = document.createElement('div');
    fb.className = 'feedback-msg';

    if(correct){
      score++;
      _el('mul-quiz-score').textContent = score;
      inp.className = 'answer-input correct';
      fb.classList.add('feedback-correct');
      fb.textContent = `&#x1f389; Yes! ${ans} is correct!`;
      sfxCorrect();
      burstConfetti(30);
    } else {
      inp.className = 'answer-input wrong';
      fb.classList.add('feedback-wrong');
      fb.textContent = `Oops! The answer is ${ans}. Let's see why:`;
      sfxWrong();
    }

    _el('mul-feedback-area').innerHTML = '';
    _el('mul-feedback-area').appendChild(fb);
    inp.disabled = true;

    // Always show the emoji grid so kids can visualize
    showEmojiGrid(multA, multB, emoji);

    hide(_el('mul-btn-submit'));
    show(_el('mul-btn-next'));
    _el('mul-btn-next').textContent = qIdx===questions.length-1 ? '&#x1f3c1; See Results' : 'Next →';
    _el('mul-btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('mul-progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('mul-results-score').textContent = `You got ${score} out of ${questions.length} correct!`;

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='&#x1f3c6;'; title='PERFECT SCORE!'; msg='You are a multiplication master!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='&#x1f31f;'; title='Amazing Work!'; msg='So close to perfect — keep it up!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='&#x1f44f;'; title='Good Job!'; msg='Practice makes perfect — you\'re getting there!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='&#x1f4aa;'; title='Nice Try!'; msg='Keep practicing and you\'ll improve fast!'; starCount=2;
    } else {
      trophy='&#x1f4d6;'; title='Keep Learning!'; msg='Every mistake is a chance to learn!'; starCount=1;
    }

    _el('mul-results-trophy').textContent = trophy;
    _el('mul-results-title').textContent = title;
    _el('mul-results-msg').textContent = msg;
    _el('mul-results-stars').textContent = '&#x2b50;'.repeat(starCount) + '☆'.repeat(5-starCount);
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('mul-btn-start').addEventListener('click', goQuiz);
  _el('mul-btn-submit').addEventListener('click', doSubmit);
  _el('mul-btn-next').addEventListener('click', doNext);
  _el('mul-btn-restart').addEventListener('click', doRestart);

  // Enter key submits or advances
  _el('mul-answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  // Also let Enter on setup start the quiz
  _el('mul-inp-tables').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('mul-inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>What do kids say about MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" />? “I made a funny one about a dog named Fluffy Mc Fluffster.” That sense of humor mixed with repetition helps math stick while lowering stress—especially for kids who get nervous when asked to do math out loud.</p>



<p><br><strong>Did You Know?</strong><br>Laughter boosts dopamine, lowers cortisol, and helps the brain remember what it’s learning. That’s why funny math activities support better focus and recall. When kids laugh while doing math, they are more likely to persist and remember their facts later.<br>(Posamentier, Alfred S. “The Role of Humor in Learning Mathematics.”)</p>
<p>The post <a href="https://kidcourses.com/mathlibs-multiplication-4/">Mathlibs™ Multiplication #4</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Mathlibs™ Multiplication #3</title>
		<link>https://kidcourses.com/mathlibs-multiplication-3/</link>
		
		<dc:creator><![CDATA[Jessika Jake]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 00:27:18 +0000</pubDate>
				<category><![CDATA[Fun Math]]></category>
		<category><![CDATA[mathlibs]]></category>
		<guid isPermaLink="false">https://kidcourses.com/?p=10701</guid>

					<description><![CDATA[<p>MathLibs — Multiplication Quiz MathLibs™ 👥 Enter 5 names (comma-separated) ✖️ Times tables to practice (1–12) 🚀 Start Quiz Question 1 of 5 ⭐ 0 Check ✓ Next → 🏆 Great Job! 🔄 Play Again What do parents say? “My &#8230;</p>
<p class="read-more"> <a class="more-link" href="https://kidcourses.com/mathlibs-multiplication-3/"> <span class="screen-reader-text">Mathlibs™ Multiplication #3</span> Read More &#187;</a></p>
<p>The post <a href="https://kidcourses.com/mathlibs-multiplication-3/">Mathlibs™ Multiplication #3</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLibs — Multiplication Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@400;600;700;800&#038;display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #FFF8EE;
    --card: #FFFFFF;
    --primary: #FF6B35;
    --primary-dark: #E55A28;
    --secondary: #4ECDC4;
    --secondary-dark: #3BB8B0;
    --accent: #FFE66D;
    --purple: #A78BFA;
    --pink: #F472B6;
    --sky: #7DD3FC;
    --green: #6EE7B7;
    --text: #2D1B0E;
    --text-muted: #8B7355;
    --shadow: 0 8px 30px rgba(45,27,14,0.12);
    --shadow-lg: 0 16px 50px rgba(45,27,14,0.18);
    --radius: 20px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Playful background pattern */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,107,53,0.06) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(78,205,196,0.06) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  /* Floating shapes */
  .bg-shapes {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bg-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.07;
    animation: float-shape linear infinite;
  }
  @keyframes float-shape {
    0%   { transform: translateY(100vh) rotate(0deg) scale(0.5); opacity: 0; }
    10%  { opacity: 0.07; }
    90%  { opacity: 0.07; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1); opacity: 0; }
  }

  .app-wrap {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 60px;
  }

  /* ===== HEADER ===== */
  .app-header {
    text-align: center;
    margin-bottom: 32px;
    animation: slide-down 0.6s ease-out;
  }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .app-header h1 {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .app-header .subtitle {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    border: 3px solid transparent;
    transition: box-shadow 0.3s;
    animation: card-in 0.5s ease-out both;
  }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* ===== SETUP ===== */
  .setup-card { border-color: var(--accent); }

  .field-group {
    margin-bottom: 24px;
  }
  .field-group label {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
  }
  .field-group label .label-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 22px;
  }
  .field-group input[type="text"] {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  .field-group input[type="text"]:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
  }
  .field-group input[type="text"]::placeholder {
    color: #C4B89A;
    font-weight: 400;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

  .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
  .btn-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); color: #fff; }
  .btn-fun { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; }
  .btn-center { display: flex; justify-content: center; margin-top: 8px; }

  /* ===== QUIZ ===== */
  .quiz-card { border-color: var(--sky); }

  .quiz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-progress {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
  }
  .quiz-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
  }
  .progress-bar-wrap {
    width: 100%;
    height: 10px;
    background: #F0E8D8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--green));
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .question-text {
    font-family: 'Baloo 2', cursive;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text);
  }

  .answer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .answer-input {
    flex: 1;
    padding: 14px 18px;
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    border: 3px solid #E8DFD0;
    border-radius: 14px;
    background: #FFFCF7;
    color: var(--text);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .answer-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 4px rgba(167,139,250,0.2);
  }
  .answer-input.correct {
    border-color: var(--secondary);
    background: #ECFDF5;
    box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  }
  .answer-input.wrong {
    border-color: var(--primary);
    background: #FFF5F0;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.15);
  }

  .feedback-area {
    min-height: 48px;
    margin-bottom: 12px;
  }
  .feedback-msg {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 14px;
    animation: pop-in 0.35s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .feedback-correct {
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    color: #065F46;
  }
  .feedback-wrong {
    background: linear-gradient(135deg, #FFF5F0, #FFE4D6);
    color: #9A3412;
  }

  /* ===== EMOJI GRID (rows x cols) ===== */
  .emoji-grid-wrap {
    margin: 20px 0;
    animation: pop-in 0.4s ease-out both;
  }
  .emoji-grid-label {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 10px;
    text-align: center;
  }
  .emoji-grid {
    display: inline-grid;
    gap: 4px 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEFCE8, #FFF7ED);
    border: 3px dashed var(--accent);
    border-radius: 16px;
    margin: 0 auto;
  }
  /* We'll set grid-template-columns dynamically in JS */
  .emoji-grid .cell {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
    line-height: 1;
    animation: cell-pop 0.25s ease-out both;
  }
  @keyframes cell-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
  }

  .quiz-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  /* ===== RESULTS ===== */
  .results-card { border-color: var(--green); text-align: center; }
  .results-trophy {
    font-size: 80px;
    animation: bounce-trophy 1s ease infinite;
    margin-bottom: 16px;
  }
  @keyframes bounce-trophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  .results-title {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .results-score {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .results-msg {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .stars-row {
    font-size: 42px;
    margin-bottom: 24px;
    letter-spacing: 4px;
  }

  /* ===== CONFETTI ===== */
  .confetti-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99999; overflow: hidden;
  }
  .confetti-piece {
    position: absolute; top: -24px;
    border-radius: 3px;
    pointer-events: none;
    animation: confetti-drop linear forwards;
  }
  @keyframes confetti-drop {
    0%   { transform: translateY(0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotateZ(var(--spin)) rotateX(var(--tumble)); opacity: 0; }
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 520px) {
    .app-wrap { padding: 20px 14px 40px; }
    .card { padding: 24px 18px; }
    .answer-row { flex-direction: column; }
  }

  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="bg-shapes" id="bg-shapes"></div>

<div class="app-wrap">
  <header class="app-header">
    <h1>MathLibs<sup style="font-size:0.4em;vertical-align:super;-webkit-text-fill-color:var(--text-muted);background:none;-webkit-background-clip:unset"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /></sup></h1>
    <p class="subtitle"></p>
  </header>

  <!-- ===== SETUP ===== -->
  <div class="card setup-card" id="setup-screen">
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f465.png" alt="👥" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Enter 5 names (comma-separated)</label>
      <input type="text" id="inp-names" placeholder="Avery, Bailey, Charlie, Darby, Evelyn">
    </div>
    <div class="field-group">
      <label><span class="label-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2716.png" alt="✖" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Times tables to practice (1–12)</label>
      <input type="text" id="inp-tables" placeholder="e.g. 3, 7, 12">
    </div>
    <div class="btn-center">
      <button class="btn btn-primary" id="btn-start"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Start Quiz</button>
    </div>
  </div>

  <!-- ===== QUIZ ===== -->
  <div class="card quiz-card hidden" id="quiz-screen">
    <div class="quiz-top">
      <span class="quiz-progress" id="quiz-progress">Question 1 of 5</span>
      <span class="quiz-score"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <span id="quiz-score">0</span></span>
    </div>
    <div class="progress-bar-wrap">
      <div class="progress-bar-fill" id="progress-fill" style="width:0%"></div>
    </div>
    <div class="question-text" id="question-text"></div>
    <div class="answer-row">
      <input class="answer-input" type="number" id="answer-input" placeholder="?" autocomplete="off" inputmode="numeric">
      <button class="btn btn-secondary" id="btn-submit">Check ✓</button>
    </div>
    <div class="feedback-area" id="feedback-area"></div>
    <div id="emoji-grid-container"></div>
    <div class="quiz-btns">
      <button class="btn btn-fun hidden" id="btn-next">Next →</button>
    </div>
  </div>

  <!-- ===== RESULTS ===== -->
  <div class="card results-card hidden" id="results-screen">
    <div class="results-trophy" id="results-trophy"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c6.png" alt="🏆" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="results-title" id="results-title">Great Job!</div>
    <div class="stars-row" id="results-stars"></div>
    <div class="results-score" id="results-score"></div>
    <div class="results-msg" id="results-msg"></div>
    <button class="btn btn-primary" id="btn-restart"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f504.png" alt="🔄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Play Again</button>
  </div>
</div>

<script>
(function(){
  /* ===== CONFIG ===== */
  const DEFAULT_NAMES = ["Avery","Bailey","Charlie","Darby","Evelyn"];
  const CONFETTI_COLORS = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6','#7DD3FC','#6EE7B7','#FF9F43','#EE5A24'];

  let names = [];
  let tables = [];
  let questions = [];
  let qMeta = [];
  let qIdx = 0;
  let score = 0;
  let answered = false;
  let audioCtx;

  /* ===== ELEMENTS ===== */
  const _el = id => document.getElementById(id);
  const setupScreen   = _el('setup-screen');
  const quizScreen    = _el('quiz-screen');
  const resultsScreen = _el('results-screen');

  /* ===== BACKGROUND SHAPES ===== */
  (function initBg(){
    const wrap = _el('bg-shapes');
    const colors = ['#FF6B35','#4ECDC4','#FFE66D','#A78BFA','#F472B6'];
    for(let i=0;i<12;i++){
      const s = document.createElement('span');
      const size = 30 + Math.random()*80;
      s.style.width = s.style.height = size+'px';
      s.style.left = Math.random()*100+'%';
      s.style.background = colors[i%colors.length];
      s.style.animationDuration = (12+Math.random()*20)+'s';
      s.style.animationDelay = (Math.random()*15)+'s';
      if(Math.random()>0.5) s.style.borderRadius = '8px';
      wrap.appendChild(s);
    }
  })();

  /* ===== AUDIO ===== */
  function getAudioCtx(){
    if(!audioCtx){
      const AC = window.AudioContext || window.webkitAudioContext;
      if(AC) audioCtx = new AC();
    }
    if(audioCtx && audioCtx.state==='suspended') audioCtx.resume();
    return audioCtx;
  }

  function playTone(freq, dur, type, vol){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type||'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);
      osc.connect(gain); gain.connect(ctx.destination);
      const t = ctx.currentTime;
      gain.gain.setValueAtTime(vol||0.1, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+(dur||0.15));
      osc.start(t); osc.stop(t+(dur||0.15));
    }catch(e){}
  }

  function sfxClick(){ playTone(600,0.06,'sine',0.08); }

  function sfxCorrect(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f,i)=>{
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine'; osc.frequency.value = f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t = ctx.currentTime + i*0.1;
        gain.gain.setValueAtTime(0.12, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t+0.25);
        osc.start(t); osc.stop(t+0.25);
      });
    }catch(e){}
  }

  function sfxWrong(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const t = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(300, t);
      osc.frequency.exponentialRampToValueAtTime(180, t+0.5);
      osc.connect(gain); gain.connect(ctx.destination);
      const lfo = ctx.createOscillator();
      const lfoG = ctx.createGain();
      lfo.type='sine'; lfo.frequency.value=5; lfoG.gain.value=40;
      lfo.connect(lfoG); lfoG.connect(osc.frequency);
      gain.gain.setValueAtTime(0.04, t);
      gain.gain.exponentialRampToValueAtTime(0.001, t+0.55);
      osc.start(t); lfo.start(t);
      osc.stop(t+0.6); lfo.stop(t+0.6);
    }catch(e){}
  }

  function sfxFanfare(){
    try{
      const ctx = getAudioCtx(); if(!ctx) return;
      const melody = [523.25,0.12, 587.33,0.12, 659.25,0.12, 783.99,0.2, 659.25,0.1, 783.99,0.35];
      let offset = 0;
      for(let i=0;i<melody.length;i+=2){
        const f=melody[i], d=melody[i+1];
        const osc=ctx.createOscillator(); const gain=ctx.createGain();
        osc.type='triangle'; osc.frequency.value=f;
        osc.connect(gain); gain.connect(ctx.destination);
        const t=ctx.currentTime+offset;
        gain.gain.setValueAtTime(0.15,t);
        gain.gain.exponentialRampToValueAtTime(0.001,t+d);
        osc.start(t); osc.stop(t+d+0.01);
        offset+=d;
      }
    }catch(e){}
  }

  /* ===== CONFETTI ===== */
  function burstConfetti(count){
    let layer = document.querySelector('.confetti-layer');
    if(!layer){ layer=document.createElement('div'); layer.className='confetti-layer'; document.body.appendChild(layer); }
    count = count||45;
    for(let i=0;i<count;i++){
      const p = document.createElement('div');
      p.className = 'confetti-piece';
      const w = 6+Math.random()*8, h = 10+Math.random()*12;
      p.style.width = w+'px'; p.style.height = h+'px';
      p.style.left = Math.random()*100+'%';
      p.style.background = CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)];
      p.style.borderRadius = Math.random()>0.5?'50%':'3px';
      const dur = 2+Math.random()*2, delay = Math.random()*0.5;
      p.style.setProperty('--spin',(Math.random()*900-450)+'deg');
      p.style.setProperty('--tumble',(Math.random()*600-300)+'deg');
      p.style.animationDuration = dur+'s';
      p.style.animationDelay = delay+'s';
      layer.appendChild(p);
      setTimeout(()=>p.remove(), (dur+delay)*1000+200);
    }
    setTimeout(()=>{ if(layer&&!layer.children.length) layer.remove(); },5500);
  }

  /* ===== PARSE ===== */
  function parseTables(raw){
    const arr = (raw||'').split(',').map(s=>parseInt(s.trim(),10)).filter(n=>Number.isInteger(n)&&n>=1&&n<=12);
    return arr.length? arr : [5];
  }

  /* ===== QUESTIONS ===== */
  // Every question is: t × multiplier, where t is from their chosen times tables
  // multiplier is always ≤ 12 so the emoji grid stays compact and readable
  // The story context changes per template but the math is always t × multiplier

  // Template pool — each has a multiplier (≤12) baked into the story
  const TEMPLATES = [
    { mult: 2,  emoji:'&#x1f34e;', make:(n,t)=>`${n[0]} has ${t} apples, and ${n[1]} has twice as many. How many apples does ${n[1]} have?` },
    { mult: 3,  emoji:'&#x1f9c1;', make:(n,t)=>`${n[2]} bakes ${t} cupcakes for each of 3 friends. How many cupcakes in total?` },
    { mult: 4,  emoji:'&#x1f4da;', make:(n,t)=>`If ${n[3]} reads ${t} books a week, how many books will they read in 4 weeks?` },
    { mult: 5,  emoji:'&#x26bd;', make:(n,t)=>`${n[4]} scores ${t} goals per game. How many goals after 5 games?` },
    { mult: 6,  emoji:'&#x1f32e;', make:(n,t)=>`${n[0]} eats ${t} tacos every day for 6 days. How many tacos is that?` },
    { mult: 7,  emoji:'&#x1f3c3;', make:(n,t)=>`If ${n[1]} walks ${t} miles a day, how many miles will they walk in a week?` },
    { mult: 8,  emoji:'&#x1f3a8;', make:(n,t)=>`${n[2]} paints ${t} pictures each month. How many after 8 months?` },
    { mult: 9,  emoji:'&#x270f;', make:(n,t)=>`${n[3]} uses ${t} pencils per project. How many pencils for 9 projects?` },
    { mult: 10, emoji:'&#x1f36a;', make:(n,t)=>`${n[4]} packs ${t} cookies into each box. How many cookies in 10 boxes?` },
    { mult: 11, emoji:'&#x2b50;', make:(n,t)=>`${n[0]} earns ${t} stars each week. How many stars after 11 weeks?` },
    { mult: 12, emoji:'&#x1f9e9;', make:(n,t)=>`${n[1]} solves ${t} puzzles a month. How many puzzles in a whole year (12 months)?` },
    { mult: 3,  emoji:'&#x1f381;', make:(n,t)=>`${n[2]} wraps ${t} presents per hour. How many in 3 hours?` },
    { mult: 4,  emoji:'&#x2615;', make:(n,t)=>`${n[3]} drinks ${t} cups of hot cocoa a day. How many cups in 4 days?` },
    { mult: 5,  emoji:'&#x1f3b5;', make:(n,t)=>`${n[4]} learns ${t} new songs each week. How many songs after 5 weeks?` },
    { mult: 6,  emoji:'&#x1f338;', make:(n,t)=>`${n[0]} plants ${t} flowers in each row. How many flowers in 6 rows?` },
    { mult: 2,  emoji:'&#x1f388;', make:(n,t)=>`${n[1]} blows up ${t} balloons, and ${n[2]} blows up the same amount. How many balloons in total?` },
    { mult: 8,  emoji:'&#x1f41f;', make:(n,t)=>`${n[3]} catches ${t} fish each trip. How many fish after 8 trips?` },
    { mult: 9,  emoji:'&#x1f9f1;', make:(n,t)=>`${n[4]} stacks ${t} blocks in each tower. How many blocks for 9 towers?` },
    { mult: 10, emoji:'&#x1f680;', make:(n,t)=>`${n[0]} flies ${t} miles per minute. How far in 10 minutes?` },
    { mult: 7,  emoji:'&#x1f355;', make:(n,t)=>`${n[1]} eats ${t} slices of pizza each day for a week. How many slices?` },
  ];

  function buildQuestions(){
    questions=[]; qMeta=[];

    // Shuffle template pool and pick 5, ensuring variety
    const shuffled = [...TEMPLATES].sort(()=>Math.random()-0.5);

    for(let i=0;i<5;i++){
      const t = tables[i % tables.length];       // the times table they chose
      const tmpl = shuffled[i % shuffled.length]; // pick a story template
      const mult = tmpl.mult;                     // the multiplier in the story

      // The question is always: t × mult
      // Grid shows mult rows of t items (so they see "mult groups of t")
      questions.push(tmpl.make(names, t));
      qMeta.push({
        ans: t * mult,
        multA: mult,   // rows (the multiplier from the story)
        multB: t,       // columns (the times table number they chose)
        emoji: tmpl.emoji
      });
    }
  }

  /* ===== EMOJI GRID ===== */
  function showEmojiGrid(multA, multB, emoji){
    const container = _el('emoji-grid-container');
    container.innerHTML = '';

    const rows = multA;  // multiplier from story (≤12)
    const cols = multB;  // the times table number (≤12)
    const total = rows * cols;

    // Scale emoji size based on grid size so it always fits nicely
    let emojiSize;
    if(total <= 20) emojiSize = '32px';
    else if(total <= 48) emojiSize = '26px';
    else if(total <= 80) emojiSize = '20px';
    else emojiSize = '16px';

    const wrap = document.createElement('div');
    wrap.className = 'emoji-grid-wrap';
    wrap.style.textAlign = 'center';

    const label = document.createElement('div');
    label.className = 'emoji-grid-label';
    label.textContent = `${multA} × ${multB} = ${total}  →  ${multA} rows of ${multB}`;
    wrap.appendChild(label);

    const grid = document.createElement('div');
    grid.className = 'emoji-grid';
    grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
    grid.style.display = 'inline-grid';

    for(let r=0; r<rows; r++){
      for(let c=0; c<cols; c++){
        const cell = document.createElement('span');
        cell.className = 'cell';
        cell.textContent = emoji;
        cell.style.fontSize = emojiSize;
        cell.style.animationDelay = ((r*cols+c)*25)+'ms';
        grid.appendChild(cell);
      }
    }
    wrap.appendChild(grid);
    container.appendChild(wrap);
  }

  /* ===== SCREENS ===== */
  function show(el){ el.classList.remove('hidden'); }
  function hide(el){ el.classList.add('hidden'); }

  function goQuiz(){
    const rawNames = _el('inp-names').value;
    names = rawNames? rawNames.split(',').map(s=>s.trim()).filter(Boolean) : DEFAULT_NAMES.slice();
    while(names.length<5) names.push(DEFAULT_NAMES[names.length%DEFAULT_NAMES.length]);

    tables = parseTables(_el('inp-tables').value);
    qIdx=0; score=0; answered=false;
    buildQuestions();

    hide(setupScreen); show(quizScreen); hide(resultsScreen);
    renderQuestion();
    sfxClick();
  }

  function renderQuestion(){
    answered = false;
    _el('quiz-progress').textContent = `Question ${qIdx+1} of ${questions.length}`;
    _el('quiz-score').textContent = score;
    _el('progress-fill').style.width = ((qIdx)/questions.length*100)+'%';
    _el('question-text').textContent = questions[qIdx];
    const inp = _el('answer-input');
    inp.value=''; inp.className='answer-input'; inp.disabled=false; inp.focus();
    _el('feedback-area').innerHTML='';
    _el('emoji-grid-container').innerHTML='';
    show(_el('btn-submit')); hide(_el('btn-next'));
  }

  function doSubmit(){
    if(answered) return;
    const inp = _el('answer-input');
    const userAns = parseInt(inp.value, 10);
    if(isNaN(userAns)) return; // ignore empty

    answered = true;
    const {ans, multA, multB, emoji} = qMeta[qIdx];
    const correct = (userAns === ans);

    const fb = document.createElement('div');
    fb.className = 'feedback-msg';

    if(correct){
      score++;
      _el('quiz-score').textContent = score;
      inp.className = 'answer-input correct';
      fb.classList.add('feedback-correct');
      fb.textContent = `&#x1f389; Yes! ${ans} is correct!`;
      sfxCorrect();
      burstConfetti(30);
    } else {
      inp.className = 'answer-input wrong';
      fb.classList.add('feedback-wrong');
      fb.textContent = `Oops! The answer is ${ans}. Let's see why:`;
      sfxWrong();
    }

    _el('feedback-area').innerHTML = '';
    _el('feedback-area').appendChild(fb);
    inp.disabled = true;

    // Always show the emoji grid so kids can visualize
    showEmojiGrid(multA, multB, emoji);

    hide(_el('btn-submit'));
    show(_el('btn-next'));
    _el('btn-next').textContent = qIdx===questions.length-1 ? '&#x1f3c1; See Results' : 'Next →';
    _el('btn-next').focus();
  }

  function doNext(){
    sfxClick();
    qIdx++;
    if(qIdx < questions.length){
      renderQuestion();
    } else {
      showResults();
    }
  }

  function showResults(){
    hide(quizScreen); show(resultsScreen);
    _el('progress-fill').style.width = '100%';

    const pct = score / questions.length;
    _el('results-score').textContent = `You got ${score} out of ${questions.length} correct!`;

    let trophy, title, msg, starCount;
    if(pct===1){
      trophy='&#x1f3c6;'; title='PERFECT SCORE!'; msg='You are a multiplication master!'; starCount=5;
      sfxFanfare(); burstConfetti(80);
    } else if(pct>=0.8){
      trophy='&#x1f31f;'; title='Amazing Work!'; msg='So close to perfect — keep it up!'; starCount=4;
      sfxFanfare(); burstConfetti(50);
    } else if(pct>=0.6){
      trophy='&#x1f44f;'; title='Good Job!'; msg='Practice makes perfect — you\'re getting there!'; starCount=3;
      sfxCorrect();
    } else if(pct>=0.4){
      trophy='&#x1f4aa;'; title='Nice Try!'; msg='Keep practicing and you\'ll improve fast!'; starCount=2;
    } else {
      trophy='&#x1f4d6;'; title='Keep Learning!'; msg='Every mistake is a chance to learn!'; starCount=1;
    }

    _el('results-trophy').textContent = trophy;
    _el('results-title').textContent = title;
    _el('results-msg').textContent = msg;
    _el('results-stars').textContent = '&#x2b50;'.repeat(starCount) + '☆'.repeat(5-starCount);
  }

  function doRestart(){
    sfxClick();
    hide(resultsScreen); show(setupScreen); hide(quizScreen);
  }

  /* ===== EVENT LISTENERS ===== */
  _el('btn-start').addEventListener('click', goQuiz);
  _el('btn-submit').addEventListener('click', doSubmit);
  _el('btn-next').addEventListener('click', doNext);
  _el('btn-restart').addEventListener('click', doRestart);

  // Enter key submits or advances
  _el('answer-input').addEventListener('keydown', function(e){
    if(e.key==='Enter'){
      e.preventDefault();
      if(!answered) doSubmit();
      else doNext();
    }
  });

  // Also let Enter on setup start the quiz
  _el('inp-tables').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });
  _el('inp-names').addEventListener('keydown', function(e){ if(e.key==='Enter') goQuiz(); });

})();
</script>
</body>
</html>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>What do parents say? “My daughter actually asked to do math.” For over 20 years, MathLibs<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" /> has helped bridge the gap between home and classroom, showing that playful learning isn’t just possible—it’s powerful.</p>



<p><br><strong>Did You Know?</strong><br>Giving kids choice—like which numbers to use or which words to insert—activates motivation centers in the brain. Research shows that autonomy improves effort and engagement, especially when tasks are just the right level of challenge.<br>(Deci, Edward L., and Ryan, Richard M. <em>Intrinsic Motivation and Self-Determination in Human Behavior.</em>)</p>
<p>The post <a href="https://kidcourses.com/mathlibs-multiplication-3/">Mathlibs™ Multiplication #3</a> appeared first on <a href="https://kidcourses.com"></a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
