93 lines
3.3 KiB
HTML
93 lines
3.3 KiB
HTML
|
<!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>
|