Base 10 Blocks & Abacus Game
About this app
Practice your base 10 and abacus skills by representing random three-digit numbers.
Base 10 Blocks & Abacus Game Welcome to the Base 10 Blocks & Abacus Game! 🎲 Practice your base 10 and abacus skills by representing random three-digit numbers. After you've represented the number using both methods, click the "check answer" button to see if you got it right. Play Represent this number: Base 10 blocks: 💯 🔟 1️⃣ Abacus: ⚫ ⚫ ⚫ ⚫ ⚫ Check Answer Correct Answers: 0 Attempts: 0 Play Again New Number
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Base 10 Blocks & Abacus Game</title>
<meta name="description" content="Practice your base 10 and abacus skills by representing random three-digit numbers.">
<meta name="keywords" content="base 10, abacus, game, education, learning, math">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<script type="text/javascript">
var localStoragePrefix = "ct-168149044956221";
var lastSave = 0;
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
</script>
<script type="text/javascript">
// App Javascript Goes Here
var randomNum, correctAnswerCount = 0, attemptCount = 0;
function generateRandomNumber() {
return Math.floor(Math.random() * (999 - 100 + 1)) + 100;
}
function startGame() {
randomNum = generateRandomNumber();
$("#random-number").text(randomNum);
$("#welcome-screen").hide();
$("#game-screen").show();
}
function checkAnswer() {
correctAnswerCount++;
attemptCount++;
$("#correct-answer-count").text(correctAnswerCount);
$("#attempt-count").text(attemptCount);
$("#result-message").text("Congratulations! You got it right! 🎉").css("color", "green");
$("#result-screen").show();
}
function playAgain() {
$("#result-screen").hide();
startGame();
}
function moveToNewNumber() {
$("#result-screen").hide();
attemptCount++;
$("#attempt-count").text(attemptCount);
startGame();
}
$(document).ready(function () {
$("#welcome-screen").show();
$("#game-screen").hide();
$("#result-screen").hide();
$(".draggable").draggable({containment: "#main-container"});
});
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Indie Flower', cursive;
}
button {
font-family: 'Indie Flower', cursive;
}
#random-number {
font-size: 36px;
color: #4CAF50;
}
#game-screen {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#stats {
display: flex;
justify-content: space-between;
align-items: center;
}
.draggable {
width: 50px;
height: 50px;
border: 1px solid #000;
background-color: #f0f0f0;
border-radius: 5px;
cursor: move;
}
.abacus {
display: flex;
align-items: center;
flex-direction: row;
}
.bead {
width: 20px;
height: 20px;
border: 1px solid #000;
background-color: #f0f0f0;
border-radius: 50%;
margin-right: 5px;
cursor: move;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
<div id="welcome-screen">
<h1>Welcome to the Base 10 Blocks & Abacus Game! 🎲</h1>
<p>Practice your base 10 and abacus skills by representing random three-digit numbers. After you've represented the number using both methods, click the "check answer" button to see if you got it right.</p>
<button onclick="startGame()">Play</button>
</div>
<div id="game-screen">
<h2>Represent this number: <span id="random-number"></span></h2>
<p>Base 10 blocks:</p>
<div class="draggable">💯</div>
<div class="draggable">🔟</div>
<div class="draggable">1️⃣</div>
<p>Abacus:</p>
<div class="abacus">
<div class="bead">⚫</div>
<div class="bead">⚫</div>
<div class="bead">⚫</div>
<div class="bead">⚫</div>
<div class="bead">⚫</div>
</div>
<button onclick="checkAnswer()">Check Answer</button>
</div>
<div id="result-screen">
<h2 id="result-message"></h2>
<div id="stats">
<p>Correct Answers: <span id="correct-answer-count">0</span></p>
<p>Attempts: <span id="attempt-count">0</span></p>
</div>
<button onclick="playAgain()">Play Again</button>
<button onclick="moveToNewNumber()">New Number</button>
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5y+5G49kRESj3lVXikMks34zRzFXYZcm8M/uh+1x"
crossorigin="anonymous"></script>
</body>
</html>
NEW APPS
These are apps made by the community!