Squares and Cubes Learning Tool<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n .squares-cubes-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 10px;\n line-height: 1.6;\n }\n \n .squares-cubes-wrapper {\n max-width: 100%;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 15px;\n padding: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n }\n \n @media (min-width: 768px) {\n .squares-cubes-wrapper {\n max-width: 1000px;\n padding: 25px;\n border-radius: 20px;\n }\n }\n \n .squares-cubes-title {\n text-align: center;\n color: #4a5568;\n margin-bottom: 20px;\n font-size: 1.8em;\n background: linear-gradient(45deg, #667eea, #764ba2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-weight: bold;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-title {\n font-size: 2.2em;\n margin-bottom: 30px;\n }\n }\n \n .squares-cubes-tabs {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin-bottom: 20px;\n border-radius: 12px;\n background: #f7fafc;\n padding: 3px;\n gap: 2px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tabs {\n border-radius: 15px;\n padding: 5px;\n margin-bottom: 30px;\n }\n }\n \n .squares-cubes-tab {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: transparent;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s ease;\n color: #718096;\n font-size: 13px;\n text-align: center;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tab {\n padding: 12px 20px;\n border-radius: 10px;\n font-size: 14px;\n flex: none;\n min-height: auto;\n }\n }\n \n .squares-cubes-tab.active {\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n transform: translateY(-1px);\n box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tab.active {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n }\n \n .squares-cubes-content {\n display: none;\n }\n \n .squares-cubes-content.active {\n display: block;\n animation: fadeIn 0.5s ease-in;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .squares-cubes-table-container {\n overflow-x: auto;\n border-radius: 12px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n -webkit-overflow-scrolling: touch;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table-container {\n border-radius: 15px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n }\n \n .squares-cubes-table {\n width: 100%;\n min-width: 400px;\n border-collapse: collapse;\n background: white;\n }\n \n .squares-cubes-table th, \n .squares-cubes-table td {\n padding: 12px 8px;\n text-align: center;\n border-bottom: 1px solid #e2e8f0;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table th, \n .squares-cubes-table td {\n padding: 15px 12px;\n font-size: 16px;\n }\n }\n \n .squares-cubes-table th {\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-size: 12px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table th {\n font-size: 14px;\n letter-spacing: 1px;\n }\n }\n \n .squares-cubes-table tr:hover {\n background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));\n transform: scale(1.01);\n transition: all 0.3s ease;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table tr:hover {\n transform: scale(1.02);\n }\n }\n \n .squares-cubes-number {\n font-weight: bold;\n color: #4a5568;\n font-size: 16px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-number {\n font-size: 18px;\n }\n }\n \n .squares-cubes-square {\n color: #e53e3e;\n font-weight: bold;\n }\n \n .squares-cubes-cube {\n color: #3182ce;\n font-weight: bold;\n }\n \n .squares-cubes-difference {\n color: #38a169;\n font-weight: bold;\n }\n \n .squares-cubes-quiz-container {\n background: linear-gradient(135deg, #f7fafc, #edf2f7);\n border-radius: 12px;\n padding: 20px;\n margin-top: 15px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-quiz-container {\n border-radius: 15px;\n padding: 25px;\n margin-top: 20px;\n }\n }\n \n .squares-cubes-quiz-progress {\n text-align: center;\n margin-bottom: 15px;\n font-weight: 600;\n color: #4a5568;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-quiz-progress {\n font-size: 16px;\n }\n }\n \n .squares-cubes-progress-bar {\n width: 100%;\n height: 8px;\n background: #e2e8f0;\n border-radius: 4px;\n margin-bottom: 20px;\n overflow: hidden;\n }\n \n .squares-cubes-progress-fill {\n height: 100%;\n background: linear-gradient(45deg, #667eea, #764ba2);\n width: 0%;\n transition: width 0.3s ease;\n }\n \n .squares-cubes-question {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 15px;\n color: #4a5568;\n text-align: center;\n line-height: 1.4;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-question {\n font-size: 18px;\n margin-bottom: 20px;\n }\n }\n \n .squares-cubes-input {\n display: block;\n width: 100%;\n max-width: 200px;\n margin: 0 auto 15px;\n padding: 12px;\n border: 2px solid #e2e8f0;\n border-radius: 8px;\n font-size: 16px;\n text-align: center;\n transition: border-color 0.3s ease;\n min-height: 44px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-input {\n border-radius: 10px;\n margin-bottom: 20px;\n min-height: auto;\n }\n }\n \n .squares-cubes-input:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n \n .squares-cubes-button {\n display: block;\n margin: 0 auto 10px;\n padding: 12px 25px;\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.3s ease;\n min-width: 150px;\n min-height: 44px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-button {\n border-radius: 10px;\n font-size: 16px;\n padding: 12px 30px;\n margin-bottom: 15px;\n min-height: auto;\n }\n }\n \n .squares-cubes-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);\n }\n \n @media (min-width: 768px) {\n .squares-cubes-button:hover {\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n }\n \n .squares-cubes-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n \n .squares-cubes-result {\n text-align: center;\n margin: 15px 0;\n padding: 12px;\n border-radius: 8px;\n font-weight: 600;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-result {\n border-radius: 10px;\n font-size: 16px;\n }\n }\n \n .squares-cubes-correct {\n background: #c6f6d5;\n color: #22543d;\n }\n \n .squares-cubes-incorrect {\n background: #fed7d7;\n color: #742a2a;\n }\n \n .squares-cubes-quiz-complete {\n background: linear-gradient(135deg, #c6f6d5, #9ae6b4);\n color: #22543d;\n padding: 20px;\n border-radius: 12px;\n text-align: center;\n margin: 20px 0;\n }\n \n .squares-cubes-final-score {\n font-size: 20px;\n font-weight: bold;\n margin-bottom: 10px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-final-score {\n font-size: 24px;\n }\n }\n \n .squares-cubes-explanation {\n background: #e6fffa;\n border-left: 4px solid #38a169;\n padding: 15px;\n margin: 15px 0;\n border-radius: 0 8px 8px 0;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-explanation {\n padding: 20px;\n margin: 20px 0;\n border-radius: 0 10px 10px 0;\n }\n }\n \n .squares-cubes-explanation h3 {\n color: #22543d;\n margin-bottom: 10px;\n font-size: 16px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-explanation h3 {\n font-size: 18px;\n }\n }\n \n .squares-cubes-explanation p {\n color: #2d3748;\n line-height: 1.6;\n margin-bottom: 10px;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-explanation p {\n font-size: 15px;\n }\n }\n \n .squares-cubes-formula {\n background: #f7fafc;\n padding: 8px;\n border-radius: 6px;\n font-family: 'Courier New', monospace;\n color: #4a5568;\n text-align: center;\n margin: 8px 0;\n font-size: 13px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-formula {\n padding: 10px;\n border-radius: 8px;\n font-size: 14px;\n margin: 10px 0;\n }\n }\n \n .squares-cubes-tips {\n background: linear-gradient(135deg, #fef5e7, #fdeaa7);\n border-radius: 12px;\n padding: 15px;\n margin: 15px 0;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tips {\n border-radius: 15px;\n padding: 20px;\n margin: 20px 0;\n }\n }\n \n .squares-cubes-tips h3 {\n color: #744210;\n margin-bottom: 12px;\n font-size: 16px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tips h3 {\n font-size: 18px;\n margin-bottom: 15px;\n }\n }\n \n .squares-cubes-tips ul {\n list-style: none;\n padding-left: 0;\n }\n \n .squares-cubes-tips li {\n color: #744210;\n margin-bottom: 8px;\n padding-left: 25px;\n position: relative;\n font-size: 13px;\n line-height: 1.5;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tips li {\n font-size: 14px;\n padding-left: 30px;\n }\n }\n \n .squares-cubes-tips li:before {\n content: \"\ud83d\udca1\";\n position: absolute;\n left: 0;\n top: 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"squares-cubes-container\">\n <div class=\"squares-cubes-wrapper\">\n <h1 class=\"squares-cubes-title\">Squares & Cubes Learning Tool<\/h1>\n \n <div class=\"squares-cubes-tabs\">\n <button class=\"squares-cubes-tab active\" onclick=\"showSquaresCubesTab('table')\">Reference Table<\/button>\n <button class=\"squares-cubes-tab\" onclick=\"showSquaresCubesTab('quiz')\">Practice Quiz<\/button>\n <button class=\"squares-cubes-tab\" onclick=\"showSquaresCubesTab('explanation')\">Learn Concepts<\/button>\n <\/div>\n \n <div id=\"squares-cubes-table\" class=\"squares-cubes-content active\">\n <div class=\"squares-cubes-table-container\">\n <table class=\"squares-cubes-table\">\n <thead>\n <tr>\n <th>Number (a)<\/th>\n <th>Square (a\u00b2)<\/th>\n <th>Cube (a\u00b3)<\/th>\n <th>Difference (a\u00b3 – a\u00b2)<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"squares-cubes-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <div id=\"squares-cubes-quiz\" class=\"squares-cubes-content\">\n <div class=\"squares-cubes-quiz-container\">\n <div class=\"squares-cubes-quiz-progress\" id=\"squares-cubes-progress-text\">Question 1 \/ 30<\/div>\n <div class=\"squares-cubes-progress-bar\">\n <div class=\"squares-cubes-progress-fill\" id=\"squares-cubes-progress-fill\"><\/div>\n <\/div>\n <div class=\"squares-cubes-question\" id=\"squares-cubes-question\"><\/div>\n <input type=\"number\" id=\"squares-cubes-answer\" class=\"squares-cubes-input\" placeholder=\"Enter your answer\">\n <button class=\"squares-cubes-button\" onclick=\"checkSquaresCubesAnswer()\">Check Answer<\/button>\n <div id=\"squares-cubes-result\" class=\"squares-cubes-result\"><\/div>\n <button class=\"squares-cubes-button\" onclick=\"nextSquaresCubesQuestion()\" id=\"squares-cubes-next-btn\" style=\"display: none;\">Next Question<\/button>\n <button class=\"squares-cubes-button\" onclick=\"restartSquaresCubesQuiz()\" id=\"squares-cubes-restart-btn\" style=\"display: none;\">Restart Quiz<\/button>\n <\/div>\n <\/div>\n \n <div id=\"squares-cubes-explanation\" class=\"squares-cubes-content\">\n <div class=\"squares-cubes-explanation\">\n <h3>Understanding Squares and Cubes<\/h3>\n <p><strong>Square (a\u00b2):<\/strong> When you multiply a number by itself once.<\/p>\n <div class=\"squares-cubes-formula\">Example: 5\u00b2 = 5 \u00d7 5 = 25<\/div>\n \n <p><strong>Cube (a\u00b3):<\/strong> When you multiply a number by itself twice (three times total).<\/p>\n <div class=\"squares-cubes-formula\">Example: 5\u00b3 = 5 \u00d7 5 \u00d7 5 = 125<\/div>\n \n <p><strong>The Difference (a\u00b3 – a\u00b2):<\/strong> How much bigger the cube is compared to the square.<\/p>\n <div class=\"squares-cubes-formula\">Example: 5\u00b3 – 5\u00b2 = 125 – 25 = 100<\/div>\n <\/div>\n \n <div class=\"squares-cubes-tips\">\n <h3>Memory Tips<\/h3>\n <ul>\n <li><strong>Perfect Squares:<\/strong> 1, 4, 9, 16, 25, 36, 49, 64, 81, 100<\/li>\n <li><strong>Perfect Cubes:<\/strong> 1, 8, 27, 64, 125, 216, 343, 512, 729, 1000<\/li>\n <li><strong>Pattern for 5:<\/strong> 5\u00b2 = 25, 5\u00b3 = 125 (just add 1 in front!)<\/li>\n <li><strong>Pattern for 10:<\/strong> 10\u00b2 = 100, 10\u00b3 = 1000 (count the zeros!)<\/li>\n <li><strong>Notice:<\/strong> For numbers \u2265 2, a\u00b3 is always bigger than a\u00b2<\/li>\n <li><strong>Special case:<\/strong> Only for 1, a\u00b2 = a\u00b3 = 1<\/li>\n <li><strong>Easy to remember:<\/strong> 6\u00b2 = 36, 6\u00b3 = 216 (36 \u00d7 6 = 216)<\/li>\n <li><strong>9’s pattern:<\/strong> 9\u00b2 = 81, 9\u00b3 = 729 (81 \u00d7 9 = 729)<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Generate table data\n function generateSquaresCubesTable() {\n const tbody = document.getElementById('squares-cubes-table-body');\n for (let i = 1; i <= 10; i++) {\n const square = i * i;\n const cube = i * i * i;\n const difference = cube - square;\n \n const row = tbody.insertRow();\n row.innerHTML = `\n <td class=\"squares-cubes-number\">${i}<\/td>\n <td class=\"squares-cubes-square\">${square}<\/td>\n <td class=\"squares-cubes-cube\">${cube}<\/td>\n <td class=\"squares-cubes-difference\">${difference}<\/td>\n `;\n }\n }\n \n \/\/ Tab switching functionality\n function showSquaresCubesTab(tabName) {\n \/\/ Hide all content\n const contents = document.querySelectorAll('.squares-cubes-content');\n contents.forEach(content => content.classList.remove('active'));\n \n \/\/ Remove active class from all tabs\n const tabs = document.querySelectorAll('.squares-cubes-tab');\n tabs.forEach(tab => tab.classList.remove('active'));\n \n \/\/ Show selected content and activate tab\n document.getElementById('squares-cubes-' + tabName).classList.add('active');\n event.target.classList.add('active');\n }\n \n \/\/ Quiz functionality\n let squaresCubesCurrentQuestion = {};\n let squaresCubesScore = 0;\n let squaresCubesCurrentQuestionNumber = 1;\n let squaresCubesTotalQuestions = 30;\n let squaresCubesAllQuestions = [];\n let squaresCubesRemainingQuestions = [];\n \n const squaresCubesQuestionTypes = [\n 'square',\n 'cube',\n 'difference'\n ];\n \n \/\/ Generate all possible questions at the start\n function initializeSquaresCubesQuestions() {\n squaresCubesAllQuestions = [];\n for (let number = 1; number <= 10; number++) {\n for (let typeIndex = 0; typeIndex < squaresCubesQuestionTypes.length; typeIndex++) {\n squaresCubesAllQuestions.push({\n number: number,\n type: squaresCubesQuestionTypes[typeIndex],\n id: `${number}-${squaresCubesQuestionTypes[typeIndex]}`\n });\n }\n }\n \/\/ Shuffle the array to randomize question order\n squaresCubesRemainingQuestions = [...squaresCubesAllQuestions];\n shuffleArray(squaresCubesRemainingQuestions);\n }\n \n \/\/ Fisher-Yates shuffle algorithm\n function shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n }\n \n function generateSquaresCubesQuestion() {\n if (squaresCubesCurrentQuestionNumber > squaresCubesTotalQuestions || squaresCubesRemainingQuestions.length === 0) {\n showSquaresCubesQuizComplete();\n return;\n }\n \n \/\/ Get the next question from the shuffled list\n const questionData = squaresCubesRemainingQuestions.pop();\n squaresCubesCurrentQuestion = {\n number: questionData.number,\n type: questionData.type\n };\n \n const questionElement = document.getElementById('squares-cubes-question');\n \n switch(squaresCubesCurrentQuestion.type) {\n case 'square':\n questionElement.innerHTML = `What is <strong>${squaresCubesCurrentQuestion.number}\u00b2<\/strong>?<br><small>${squaresCubesCurrentQuestion.number} \u00d7 ${squaresCubesCurrentQuestion.number} = ?<\/small>`;\n squaresCubesCurrentQuestion.answer = squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number;\n break;\n case 'cube':\n questionElement.innerHTML = `What is <strong>${squaresCubesCurrentQuestion.number}\u00b3<\/strong>?<br><small>${squaresCubesCurrentQuestion.number} \u00d7 ${squaresCubesCurrentQuestion.number} \u00d7 ${squaresCubesCurrentQuestion.number} = ?<\/small>`;\n squaresCubesCurrentQuestion.answer = squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number;\n break;\n case 'difference':\n questionElement.innerHTML = `What is <strong>${squaresCubesCurrentQuestion.number}\u00b3 - ${squaresCubesCurrentQuestion.number}\u00b2<\/strong>?<br><small>Cube minus Square = ?<\/small>`;\n squaresCubesCurrentQuestion.answer = (squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number) - (squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number);\n break;\n }\n \n \/\/ Update progress\n document.getElementById('squares-cubes-progress-text').textContent = `Question ${squaresCubesCurrentQuestionNumber} \/ ${squaresCubesTotalQuestions}`;\n document.getElementById('squares-cubes-progress-fill').style.width = `${(squaresCubesCurrentQuestionNumber - 1) \/ squaresCubesTotalQuestions * 100}%`;\n \n document.getElementById('squares-cubes-answer').value = '';\n document.getElementById('squares-cubes-result').textContent = '';\n document.getElementById('squares-cubes-next-btn').style.display = 'none';\n document.querySelector('.squares-cubes-button').disabled = false;\n }\n \n function checkSquaresCubesAnswer() {\n const userAnswer = parseInt(document.getElementById('squares-cubes-answer').value);\n const resultElement = document.getElementById('squares-cubes-result');\n \n if (isNaN(userAnswer)) {\n resultElement.textContent = 'Please enter a number!';\n resultElement.className = 'squares-cubes-result squares-cubes-incorrect';\n return;\n }\n \n if (userAnswer === squaresCubesCurrentQuestion.answer) {\n squaresCubesScore++;\n resultElement.innerHTML = `Correct! \ud83c\udf89<br>Answer: ${squaresCubesCurrentQuestion.answer}<br>Score: ${squaresCubesScore}\/${squaresCubesCurrentQuestionNumber}`;\n resultElement.className = 'squares-cubes-result squares-cubes-correct';\n } else {\n resultElement.innerHTML = `Incorrect. The answer is ${squaresCubesCurrentQuestion.answer}<br>Score: ${squaresCubesScore}\/${squaresCubesCurrentQuestionNumber}`;\n resultElement.className = 'squares-cubes-result squares-cubes-incorrect';\n }\n \n document.querySelector('.squares-cubes-button').disabled = true;\n document.getElementById('squares-cubes-next-btn').style.display = 'block';\n squaresCubesCurrentQuestionNumber++;\n \n \/\/ Update progress bar\n document.getElementById('squares-cubes-progress-fill').style.width = `${(squaresCubesCurrentQuestionNumber - 1) \/ squaresCubesTotalQuestions * 100}%`;\n }\n \n function nextSquaresCubesQuestion() {\n if (squaresCubesCurrentQuestionNumber > squaresCubesTotalQuestions) {\n showSquaresCubesQuizComplete();\n } else {\n generateSquaresCubesQuestion();\n }\n }\n \n function showSquaresCubesQuizComplete() {\n const percentage = Math.round((squaresCubesScore \/ squaresCubesTotalQuestions) * 100);\n let message = '';\n let emoji = '';\n \n if (percentage >= 90) {\n message = 'Outstanding! You are a math genius!';\n emoji = '\ud83c\udfc6';\n } else if (percentage >= 80) {\n message = 'Excellent! You have learned very well!';\n emoji = '\u2b50';\n } else if (percentage >= 70) {\n message = 'Good job! A little more practice will help!';\n emoji = '\ud83d\udc4d';\n } else if (percentage >= 50) {\n message = 'Not bad! More practice is needed!';\n emoji = '\ud83d\udcda';\n } else {\n message = 'Don\\'t worry! Let\\'s try again and learn more!';\n emoji = '\ud83d\udcaa';\n }\n \n const resultElement = document.getElementById('squares-cubes-result');\n resultElement.innerHTML = `\n <div class=\"squares-cubes-quiz-complete\">\n <div class=\"squares-cubes-final-score\">${emoji} Quiz Complete!<\/div>\n <div>Your Score: ${squaresCubesScore}\/${squaresCubesTotalQuestions} (${percentage}%)<\/div>\n <div style=\"margin-top: 10px;\">${message}<\/div>\n <\/div>\n `;\n resultElement.className = 'squares-cubes-result';\n \n document.getElementById('squares-cubes-next-btn').style.display = 'none';\n document.getElementById('squares-cubes-restart-btn').style.display = 'block';\n document.querySelector('.squares-cubes-button').style.display = 'none';\n \n \/\/ Update progress to 100%\n document.getElementById('squares-cubes-progress-fill').style.width = '100%';\n document.getElementById('squares-cubes-progress-text').textContent = 'Quiz Complete!';\n }\n \n function restartSquaresCubesQuiz() {\n squaresCubesScore = 0;\n squaresCubesCurrentQuestionNumber = 1;\n \n \/\/ Reinitialize and reshuffle all questions\n initializeSquaresCubesQuestions();\n \n document.getElementById('squares-cubes-result').textContent = '';\n document.getElementById('squares-cubes-next-btn').style.display = 'none';\n document.getElementById('squares-cubes-restart-btn').style.display = 'none';\n document.querySelector('.squares-cubes-button').style.display = 'block';\n document.querySelector('.squares-cubes-button').disabled = false;\n \n generateSquaresCubesQuestion();\n }\n \n \/\/ Initialize the page\n document.addEventListener('DOMContentLoaded', function() {\n generateSquaresCubesTable();\n initializeSquaresCubesQuestions();\n generateSquaresCubesQuestion();\n \n \/\/ Allow Enter key to submit quiz answer\n document.getElementById('squares-cubes-answer').addEventListener('keypress', function(e) {\n if (e.key === 'Enter' && !document.querySelector('.squares-cubes-button').disabled) {\n checkSquaresCubesAnswer();\n }\n });\n \n \/\/ Prevent form submission on Enter\n document.getElementById('squares-cubes-answer').addEventListener('keydown', function(e) {\n if (e.key === 'Enter') {\n e.preventDefault();\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Squares and Cubes Learning Tool Squares & Cubes Learning Tool Reference Table Practice Quiz Learn Concepts Number (a) Square (a\u00b2) Cube (a\u00b3) Difference (a\u00b3 – a\u00b2) Question 1 \/ 30 Check Answer Next Question Restart Quiz Understanding Squares and Cubes Square (a\u00b2): When you multiply a number by itself once. Example: 5\u00b2 = 5 \u00d7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2049","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"raghumadambath","author_link":"https:\/\/windowedu.in\/blog\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Squares and Cubes Learning Tool Squares & Cubes Learning Tool Reference Table Practice Quiz Learn Concepts Number (a) Square (a\u00b2) Cube (a\u00b3) Difference (a\u00b3 – a\u00b2) Question 1 \/ 30 Check Answer Next Question Restart Quiz Understanding Squares and Cubes Square (a\u00b2): When you multiply a number by itself once. Example: 5\u00b2 = 5 \u00d7…","_links":{"self":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2049"}],"version-history":[{"count":1,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2049\/revisions"}],"predecessor-version":[{"id":2050,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2049\/revisions\/2050"}],"wp:attachment":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2049,"date":"2025-06-13T23:38:56","date_gmt":"2025-06-13T19:38:56","guid":{"rendered":"https:\/\/windowedu.in\/blog\/?p=2049"},"modified":"2025-06-13T23:38:58","modified_gmt":"2025-06-13T19:38:58","slug":"squares-and-cubes-learning-tool","status":"publish","type":"post","link":"https:\/\/windowedu.in\/blog\/?p=2049","title":{"rendered":"Squares and Cubes Learning Tool"},"content":{"rendered":"\n\n\n\n \n \n Squares and Cubes Learning Tool<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n .squares-cubes-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 10px;\n line-height: 1.6;\n }\n \n .squares-cubes-wrapper {\n max-width: 100%;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 15px;\n padding: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n }\n \n @media (min-width: 768px) {\n .squares-cubes-wrapper {\n max-width: 1000px;\n padding: 25px;\n border-radius: 20px;\n }\n }\n \n .squares-cubes-title {\n text-align: center;\n color: #4a5568;\n margin-bottom: 20px;\n font-size: 1.8em;\n background: linear-gradient(45deg, #667eea, #764ba2);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-weight: bold;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-title {\n font-size: 2.2em;\n margin-bottom: 30px;\n }\n }\n \n .squares-cubes-tabs {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin-bottom: 20px;\n border-radius: 12px;\n background: #f7fafc;\n padding: 3px;\n gap: 2px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tabs {\n border-radius: 15px;\n padding: 5px;\n margin-bottom: 30px;\n }\n }\n \n .squares-cubes-tab {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: transparent;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s ease;\n color: #718096;\n font-size: 13px;\n text-align: center;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tab {\n padding: 12px 20px;\n border-radius: 10px;\n font-size: 14px;\n flex: none;\n min-height: auto;\n }\n }\n \n .squares-cubes-tab.active {\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n transform: translateY(-1px);\n box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tab.active {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n }\n \n .squares-cubes-content {\n display: none;\n }\n \n .squares-cubes-content.active {\n display: block;\n animation: fadeIn 0.5s ease-in;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .squares-cubes-table-container {\n overflow-x: auto;\n border-radius: 12px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n -webkit-overflow-scrolling: touch;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table-container {\n border-radius: 15px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n }\n \n .squares-cubes-table {\n width: 100%;\n min-width: 400px;\n border-collapse: collapse;\n background: white;\n }\n \n .squares-cubes-table th, \n .squares-cubes-table td {\n padding: 12px 8px;\n text-align: center;\n border-bottom: 1px solid #e2e8f0;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table th, \n .squares-cubes-table td {\n padding: 15px 12px;\n font-size: 16px;\n }\n }\n \n .squares-cubes-table th {\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-size: 12px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table th {\n font-size: 14px;\n letter-spacing: 1px;\n }\n }\n \n .squares-cubes-table tr:hover {\n background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));\n transform: scale(1.01);\n transition: all 0.3s ease;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-table tr:hover {\n transform: scale(1.02);\n }\n }\n \n .squares-cubes-number {\n font-weight: bold;\n color: #4a5568;\n font-size: 16px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-number {\n font-size: 18px;\n }\n }\n \n .squares-cubes-square {\n color: #e53e3e;\n font-weight: bold;\n }\n \n .squares-cubes-cube {\n color: #3182ce;\n font-weight: bold;\n }\n \n .squares-cubes-difference {\n color: #38a169;\n font-weight: bold;\n }\n \n .squares-cubes-quiz-container {\n background: linear-gradient(135deg, #f7fafc, #edf2f7);\n border-radius: 12px;\n padding: 20px;\n margin-top: 15px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-quiz-container {\n border-radius: 15px;\n padding: 25px;\n margin-top: 20px;\n }\n }\n \n .squares-cubes-quiz-progress {\n text-align: center;\n margin-bottom: 15px;\n font-weight: 600;\n color: #4a5568;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-quiz-progress {\n font-size: 16px;\n }\n }\n \n .squares-cubes-progress-bar {\n width: 100%;\n height: 8px;\n background: #e2e8f0;\n border-radius: 4px;\n margin-bottom: 20px;\n overflow: hidden;\n }\n \n .squares-cubes-progress-fill {\n height: 100%;\n background: linear-gradient(45deg, #667eea, #764ba2);\n width: 0%;\n transition: width 0.3s ease;\n }\n \n .squares-cubes-question {\n font-size: 16px;\n font-weight: 600;\n margin-bottom: 15px;\n color: #4a5568;\n text-align: center;\n line-height: 1.4;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-question {\n font-size: 18px;\n margin-bottom: 20px;\n }\n }\n \n .squares-cubes-input {\n display: block;\n width: 100%;\n max-width: 200px;\n margin: 0 auto 15px;\n padding: 12px;\n border: 2px solid #e2e8f0;\n border-radius: 8px;\n font-size: 16px;\n text-align: center;\n transition: border-color 0.3s ease;\n min-height: 44px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-input {\n border-radius: 10px;\n margin-bottom: 20px;\n min-height: auto;\n }\n }\n \n .squares-cubes-input:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n \n .squares-cubes-button {\n display: block;\n margin: 0 auto 10px;\n padding: 12px 25px;\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.3s ease;\n min-width: 150px;\n min-height: 44px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-button {\n border-radius: 10px;\n font-size: 16px;\n padding: 12px 30px;\n margin-bottom: 15px;\n min-height: auto;\n }\n }\n \n .squares-cubes-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);\n }\n \n @media (min-width: 768px) {\n .squares-cubes-button:hover {\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n }\n \n .squares-cubes-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n \n .squares-cubes-result {\n text-align: center;\n margin: 15px 0;\n padding: 12px;\n border-radius: 8px;\n font-weight: 600;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-result {\n border-radius: 10px;\n font-size: 16px;\n }\n }\n \n .squares-cubes-correct {\n background: #c6f6d5;\n color: #22543d;\n }\n \n .squares-cubes-incorrect {\n background: #fed7d7;\n color: #742a2a;\n }\n \n .squares-cubes-quiz-complete {\n background: linear-gradient(135deg, #c6f6d5, #9ae6b4);\n color: #22543d;\n padding: 20px;\n border-radius: 12px;\n text-align: center;\n margin: 20px 0;\n }\n \n .squares-cubes-final-score {\n font-size: 20px;\n font-weight: bold;\n margin-bottom: 10px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-final-score {\n font-size: 24px;\n }\n }\n \n .squares-cubes-explanation {\n background: #e6fffa;\n border-left: 4px solid #38a169;\n padding: 15px;\n margin: 15px 0;\n border-radius: 0 8px 8px 0;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-explanation {\n padding: 20px;\n margin: 20px 0;\n border-radius: 0 10px 10px 0;\n }\n }\n \n .squares-cubes-explanation h3 {\n color: #22543d;\n margin-bottom: 10px;\n font-size: 16px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-explanation h3 {\n font-size: 18px;\n }\n }\n \n .squares-cubes-explanation p {\n color: #2d3748;\n line-height: 1.6;\n margin-bottom: 10px;\n font-size: 14px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-explanation p {\n font-size: 15px;\n }\n }\n \n .squares-cubes-formula {\n background: #f7fafc;\n padding: 8px;\n border-radius: 6px;\n font-family: 'Courier New', monospace;\n color: #4a5568;\n text-align: center;\n margin: 8px 0;\n font-size: 13px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-formula {\n padding: 10px;\n border-radius: 8px;\n font-size: 14px;\n margin: 10px 0;\n }\n }\n \n .squares-cubes-tips {\n background: linear-gradient(135deg, #fef5e7, #fdeaa7);\n border-radius: 12px;\n padding: 15px;\n margin: 15px 0;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tips {\n border-radius: 15px;\n padding: 20px;\n margin: 20px 0;\n }\n }\n \n .squares-cubes-tips h3 {\n color: #744210;\n margin-bottom: 12px;\n font-size: 16px;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tips h3 {\n font-size: 18px;\n margin-bottom: 15px;\n }\n }\n \n .squares-cubes-tips ul {\n list-style: none;\n padding-left: 0;\n }\n \n .squares-cubes-tips li {\n color: #744210;\n margin-bottom: 8px;\n padding-left: 25px;\n position: relative;\n font-size: 13px;\n line-height: 1.5;\n }\n \n @media (min-width: 768px) {\n .squares-cubes-tips li {\n font-size: 14px;\n padding-left: 30px;\n }\n }\n \n .squares-cubes-tips li:before {\n content: \"\ud83d\udca1\";\n position: absolute;\n left: 0;\n top: 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"squares-cubes-container\">\n <div class=\"squares-cubes-wrapper\">\n <h1 class=\"squares-cubes-title\">Squares & Cubes Learning Tool<\/h1>\n \n <div class=\"squares-cubes-tabs\">\n <button class=\"squares-cubes-tab active\" onclick=\"showSquaresCubesTab('table')\">Reference Table<\/button>\n <button class=\"squares-cubes-tab\" onclick=\"showSquaresCubesTab('quiz')\">Practice Quiz<\/button>\n <button class=\"squares-cubes-tab\" onclick=\"showSquaresCubesTab('explanation')\">Learn Concepts<\/button>\n <\/div>\n \n <div id=\"squares-cubes-table\" class=\"squares-cubes-content active\">\n <div class=\"squares-cubes-table-container\">\n <table class=\"squares-cubes-table\">\n <thead>\n <tr>\n <th>Number (a)<\/th>\n <th>Square (a\u00b2)<\/th>\n <th>Cube (a\u00b3)<\/th>\n <th>Difference (a\u00b3 – a\u00b2)<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"squares-cubes-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <div id=\"squares-cubes-quiz\" class=\"squares-cubes-content\">\n <div class=\"squares-cubes-quiz-container\">\n <div class=\"squares-cubes-quiz-progress\" id=\"squares-cubes-progress-text\">Question 1 \/ 30<\/div>\n <div class=\"squares-cubes-progress-bar\">\n <div class=\"squares-cubes-progress-fill\" id=\"squares-cubes-progress-fill\"><\/div>\n <\/div>\n <div class=\"squares-cubes-question\" id=\"squares-cubes-question\"><\/div>\n <input type=\"number\" id=\"squares-cubes-answer\" class=\"squares-cubes-input\" placeholder=\"Enter your answer\">\n <button class=\"squares-cubes-button\" onclick=\"checkSquaresCubesAnswer()\">Check Answer<\/button>\n <div id=\"squares-cubes-result\" class=\"squares-cubes-result\"><\/div>\n <button class=\"squares-cubes-button\" onclick=\"nextSquaresCubesQuestion()\" id=\"squares-cubes-next-btn\" style=\"display: none;\">Next Question<\/button>\n <button class=\"squares-cubes-button\" onclick=\"restartSquaresCubesQuiz()\" id=\"squares-cubes-restart-btn\" style=\"display: none;\">Restart Quiz<\/button>\n <\/div>\n <\/div>\n \n <div id=\"squares-cubes-explanation\" class=\"squares-cubes-content\">\n <div class=\"squares-cubes-explanation\">\n <h3>Understanding Squares and Cubes<\/h3>\n <p><strong>Square (a\u00b2):<\/strong> When you multiply a number by itself once.<\/p>\n <div class=\"squares-cubes-formula\">Example: 5\u00b2 = 5 \u00d7 5 = 25<\/div>\n \n <p><strong>Cube (a\u00b3):<\/strong> When you multiply a number by itself twice (three times total).<\/p>\n <div class=\"squares-cubes-formula\">Example: 5\u00b3 = 5 \u00d7 5 \u00d7 5 = 125<\/div>\n \n <p><strong>The Difference (a\u00b3 – a\u00b2):<\/strong> How much bigger the cube is compared to the square.<\/p>\n <div class=\"squares-cubes-formula\">Example: 5\u00b3 – 5\u00b2 = 125 – 25 = 100<\/div>\n <\/div>\n \n <div class=\"squares-cubes-tips\">\n <h3>Memory Tips<\/h3>\n <ul>\n <li><strong>Perfect Squares:<\/strong> 1, 4, 9, 16, 25, 36, 49, 64, 81, 100<\/li>\n <li><strong>Perfect Cubes:<\/strong> 1, 8, 27, 64, 125, 216, 343, 512, 729, 1000<\/li>\n <li><strong>Pattern for 5:<\/strong> 5\u00b2 = 25, 5\u00b3 = 125 (just add 1 in front!)<\/li>\n <li><strong>Pattern for 10:<\/strong> 10\u00b2 = 100, 10\u00b3 = 1000 (count the zeros!)<\/li>\n <li><strong>Notice:<\/strong> For numbers \u2265 2, a\u00b3 is always bigger than a\u00b2<\/li>\n <li><strong>Special case:<\/strong> Only for 1, a\u00b2 = a\u00b3 = 1<\/li>\n <li><strong>Easy to remember:<\/strong> 6\u00b2 = 36, 6\u00b3 = 216 (36 \u00d7 6 = 216)<\/li>\n <li><strong>9’s pattern:<\/strong> 9\u00b2 = 81, 9\u00b3 = 729 (81 \u00d7 9 = 729)<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Generate table data\n function generateSquaresCubesTable() {\n const tbody = document.getElementById('squares-cubes-table-body');\n for (let i = 1; i <= 10; i++) {\n const square = i * i;\n const cube = i * i * i;\n const difference = cube - square;\n \n const row = tbody.insertRow();\n row.innerHTML = `\n <td class=\"squares-cubes-number\">${i}<\/td>\n <td class=\"squares-cubes-square\">${square}<\/td>\n <td class=\"squares-cubes-cube\">${cube}<\/td>\n <td class=\"squares-cubes-difference\">${difference}<\/td>\n `;\n }\n }\n \n \/\/ Tab switching functionality\n function showSquaresCubesTab(tabName) {\n \/\/ Hide all content\n const contents = document.querySelectorAll('.squares-cubes-content');\n contents.forEach(content => content.classList.remove('active'));\n \n \/\/ Remove active class from all tabs\n const tabs = document.querySelectorAll('.squares-cubes-tab');\n tabs.forEach(tab => tab.classList.remove('active'));\n \n \/\/ Show selected content and activate tab\n document.getElementById('squares-cubes-' + tabName).classList.add('active');\n event.target.classList.add('active');\n }\n \n \/\/ Quiz functionality\n let squaresCubesCurrentQuestion = {};\n let squaresCubesScore = 0;\n let squaresCubesCurrentQuestionNumber = 1;\n let squaresCubesTotalQuestions = 30;\n let squaresCubesAllQuestions = [];\n let squaresCubesRemainingQuestions = [];\n \n const squaresCubesQuestionTypes = [\n 'square',\n 'cube',\n 'difference'\n ];\n \n \/\/ Generate all possible questions at the start\n function initializeSquaresCubesQuestions() {\n squaresCubesAllQuestions = [];\n for (let number = 1; number <= 10; number++) {\n for (let typeIndex = 0; typeIndex < squaresCubesQuestionTypes.length; typeIndex++) {\n squaresCubesAllQuestions.push({\n number: number,\n type: squaresCubesQuestionTypes[typeIndex],\n id: `${number}-${squaresCubesQuestionTypes[typeIndex]}`\n });\n }\n }\n \/\/ Shuffle the array to randomize question order\n squaresCubesRemainingQuestions = [...squaresCubesAllQuestions];\n shuffleArray(squaresCubesRemainingQuestions);\n }\n \n \/\/ Fisher-Yates shuffle algorithm\n function shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n }\n \n function generateSquaresCubesQuestion() {\n if (squaresCubesCurrentQuestionNumber > squaresCubesTotalQuestions || squaresCubesRemainingQuestions.length === 0) {\n showSquaresCubesQuizComplete();\n return;\n }\n \n \/\/ Get the next question from the shuffled list\n const questionData = squaresCubesRemainingQuestions.pop();\n squaresCubesCurrentQuestion = {\n number: questionData.number,\n type: questionData.type\n };\n \n const questionElement = document.getElementById('squares-cubes-question');\n \n switch(squaresCubesCurrentQuestion.type) {\n case 'square':\n questionElement.innerHTML = `What is <strong>${squaresCubesCurrentQuestion.number}\u00b2<\/strong>?<br><small>${squaresCubesCurrentQuestion.number} \u00d7 ${squaresCubesCurrentQuestion.number} = ?<\/small>`;\n squaresCubesCurrentQuestion.answer = squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number;\n break;\n case 'cube':\n questionElement.innerHTML = `What is <strong>${squaresCubesCurrentQuestion.number}\u00b3<\/strong>?<br><small>${squaresCubesCurrentQuestion.number} \u00d7 ${squaresCubesCurrentQuestion.number} \u00d7 ${squaresCubesCurrentQuestion.number} = ?<\/small>`;\n squaresCubesCurrentQuestion.answer = squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number;\n break;\n case 'difference':\n questionElement.innerHTML = `What is <strong>${squaresCubesCurrentQuestion.number}\u00b3 - ${squaresCubesCurrentQuestion.number}\u00b2<\/strong>?<br><small>Cube minus Square = ?<\/small>`;\n squaresCubesCurrentQuestion.answer = (squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number) - (squaresCubesCurrentQuestion.number * squaresCubesCurrentQuestion.number);\n break;\n }\n \n \/\/ Update progress\n document.getElementById('squares-cubes-progress-text').textContent = `Question ${squaresCubesCurrentQuestionNumber} \/ ${squaresCubesTotalQuestions}`;\n document.getElementById('squares-cubes-progress-fill').style.width = `${(squaresCubesCurrentQuestionNumber - 1) \/ squaresCubesTotalQuestions * 100}%`;\n \n document.getElementById('squares-cubes-answer').value = '';\n document.getElementById('squares-cubes-result').textContent = '';\n document.getElementById('squares-cubes-next-btn').style.display = 'none';\n document.querySelector('.squares-cubes-button').disabled = false;\n }\n \n function checkSquaresCubesAnswer() {\n const userAnswer = parseInt(document.getElementById('squares-cubes-answer').value);\n const resultElement = document.getElementById('squares-cubes-result');\n \n if (isNaN(userAnswer)) {\n resultElement.textContent = 'Please enter a number!';\n resultElement.className = 'squares-cubes-result squares-cubes-incorrect';\n return;\n }\n \n if (userAnswer === squaresCubesCurrentQuestion.answer) {\n squaresCubesScore++;\n resultElement.innerHTML = `Correct! \ud83c\udf89<br>Answer: ${squaresCubesCurrentQuestion.answer}<br>Score: ${squaresCubesScore}\/${squaresCubesCurrentQuestionNumber}`;\n resultElement.className = 'squares-cubes-result squares-cubes-correct';\n } else {\n resultElement.innerHTML = `Incorrect. The answer is ${squaresCubesCurrentQuestion.answer}<br>Score: ${squaresCubesScore}\/${squaresCubesCurrentQuestionNumber}`;\n resultElement.className = 'squares-cubes-result squares-cubes-incorrect';\n }\n \n document.querySelector('.squares-cubes-button').disabled = true;\n document.getElementById('squares-cubes-next-btn').style.display = 'block';\n squaresCubesCurrentQuestionNumber++;\n \n \/\/ Update progress bar\n document.getElementById('squares-cubes-progress-fill').style.width = `${(squaresCubesCurrentQuestionNumber - 1) \/ squaresCubesTotalQuestions * 100}%`;\n }\n \n function nextSquaresCubesQuestion() {\n if (squaresCubesCurrentQuestionNumber > squaresCubesTotalQuestions) {\n showSquaresCubesQuizComplete();\n } else {\n generateSquaresCubesQuestion();\n }\n }\n \n function showSquaresCubesQuizComplete() {\n const percentage = Math.round((squaresCubesScore \/ squaresCubesTotalQuestions) * 100);\n let message = '';\n let emoji = '';\n \n if (percentage >= 90) {\n message = 'Outstanding! You are a math genius!';\n emoji = '\ud83c\udfc6';\n } else if (percentage >= 80) {\n message = 'Excellent! You have learned very well!';\n emoji = '\u2b50';\n } else if (percentage >= 70) {\n message = 'Good job! A little more practice will help!';\n emoji = '\ud83d\udc4d';\n } else if (percentage >= 50) {\n message = 'Not bad! More practice is needed!';\n emoji = '\ud83d\udcda';\n } else {\n message = 'Don\\'t worry! Let\\'s try again and learn more!';\n emoji = '\ud83d\udcaa';\n }\n \n const resultElement = document.getElementById('squares-cubes-result');\n resultElement.innerHTML = `\n <div class=\"squares-cubes-quiz-complete\">\n <div class=\"squares-cubes-final-score\">${emoji} Quiz Complete!<\/div>\n <div>Your Score: ${squaresCubesScore}\/${squaresCubesTotalQuestions} (${percentage}%)<\/div>\n <div style=\"margin-top: 10px;\">${message}<\/div>\n <\/div>\n `;\n resultElement.className = 'squares-cubes-result';\n \n document.getElementById('squares-cubes-next-btn').style.display = 'none';\n document.getElementById('squares-cubes-restart-btn').style.display = 'block';\n document.querySelector('.squares-cubes-button').style.display = 'none';\n \n \/\/ Update progress to 100%\n document.getElementById('squares-cubes-progress-fill').style.width = '100%';\n document.getElementById('squares-cubes-progress-text').textContent = 'Quiz Complete!';\n }\n \n function restartSquaresCubesQuiz() {\n squaresCubesScore = 0;\n squaresCubesCurrentQuestionNumber = 1;\n \n \/\/ Reinitialize and reshuffle all questions\n initializeSquaresCubesQuestions();\n \n document.getElementById('squares-cubes-result').textContent = '';\n document.getElementById('squares-cubes-next-btn').style.display = 'none';\n document.getElementById('squares-cubes-restart-btn').style.display = 'none';\n document.querySelector('.squares-cubes-button').style.display = 'block';\n document.querySelector('.squares-cubes-button').disabled = false;\n \n generateSquaresCubesQuestion();\n }\n \n \/\/ Initialize the page\n document.addEventListener('DOMContentLoaded', function() {\n generateSquaresCubesTable();\n initializeSquaresCubesQuestions();\n generateSquaresCubesQuestion();\n \n \/\/ Allow Enter key to submit quiz answer\n document.getElementById('squares-cubes-answer').addEventListener('keypress', function(e) {\n if (e.key === 'Enter' && !document.querySelector('.squares-cubes-button').disabled) {\n checkSquaresCubesAnswer();\n }\n });\n \n \/\/ Prevent form submission on Enter\n document.getElementById('squares-cubes-answer').addEventListener('keydown', function(e) {\n if (e.key === 'Enter') {\n e.preventDefault();\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Squares and Cubes Learning Tool Squares & Cubes Learning Tool Reference Table Practice Quiz Learn Concepts Number (a) Square (a\u00b2) Cube (a\u00b3) Difference (a\u00b3 – a\u00b2) Question 1 \/ 30 Check Answer Next Question Restart Quiz Understanding Squares and Cubes Square (a\u00b2): When you multiply a number by itself once. Example: 5\u00b2 = 5 \u00d7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2049","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"raghumadambath","author_link":"https:\/\/windowedu.in\/blog\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Squares and Cubes Learning Tool Squares & Cubes Learning Tool Reference Table Practice Quiz Learn Concepts Number (a) Square (a\u00b2) Cube (a\u00b3) Difference (a\u00b3 – a\u00b2) Question 1 \/ 30 Check Answer Next Question Restart Quiz Understanding Squares and Cubes Square (a\u00b2): When you multiply a number by itself once. Example: 5\u00b2 = 5 \u00d7…","_links":{"self":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2049"}],"version-history":[{"count":1,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2049\/revisions"}],"predecessor-version":[{"id":2050,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2049\/revisions\/2050"}],"wp:attachment":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}