mightypoint/index.html

93 lines
3.3 KiB
HTML
Raw Normal View History

2024-08-06 16:39:50 +07:00
<!DOCTYPE html>
<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, shrink-to-fit=no">
<title>Costa Future MightyPoint</title>
<link rel="stylesheet" href="animation.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid pt-3">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<h1 id="transition-1" class="fade-in-top">Number Notation</h1>
<style media="screen">
table, td, th {
border: 2px solid #333;
text-align: center;
padding: 5px;
}
</style>
<table id="transition-2" class="hidden table">
<tr>
<th>Millions</th>
<th>Hundred Thousands</th>
<th>Ten Thousands</th>
<th>Thousands</th>
<th>Hundreds</th>
<th>Tens</th>
<th>Ones</th>
</tr>
<tr>
<td id="transition-9" class="hidden">1</td>
<td id="transition-8" class="hidden">2</td>
<td id="transition-7" class="hidden">3</td>
<td id="transition-6" class="hidden">4</td>
<td id="transition-5" class="hidden">5</td>
<td id="transition-4" class="hidden">6</td>
<td id="transition-3" class="hidden">7</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h2>Conversations:</h2>
<p id="chat-1" class="hidden">A number notation refers to a representation of a number by splitting it into different place values based on powers of 10. Each digit's position in a number signifies its place value within the number.</p>
<p id="chat-2" class="hidden">Ones place (7 x 10<sup>0</sup> = 7)</p>
<p id="chat-3" class="hidden">Tens place (6 x 10<sup>1</sup> = 60)</p>
<p id="chat-4" class="hidden">Hundreds place (5 x 10<sup>2</sup> = 500)</p>
<p id="chat-5" class="hidden">Thousands place (4 x 10<sup>3</sup> = 4,000)</p>
<p id="chat-6" class="hidden">Ten Thousands place (3 x 10<sup>4</sup> = 30,000)</p>
<p id="chat-7" class="hidden">Hundred Thousands place (2 x 10<sup>5</sup> = 200,000)</p>
<p id="chat-8" class="hidden">Millions place (1 x 10<sup>6</sup> = 1,000,000)</p>
<!-- <p id="chat-9" class="hidden"><strong>Detailed representation and value based on powers of 10:</strong></p> -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div> <!-- End row -->
</div> <!-- End container-fluid -->
<script type="text/javascript" src="transition.js"></script>
</body>
</html>