Powers-Math/index.html at main · bocaletto-luca/Powers-Math · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Powers-Math | Mathematical Tool | Bocaletto Luca</title>
  <meta name="description" content="Powers-Math is an interactive mathematical tool designed to calculate powers (exponents) and visualize the results through dynamic graphs. Explore exponential growth, logarithmic decay, and various base exponent calculations. Developed by Bocaletto Luca.">
  <meta name="keywords" content="math, powers, exponents, exponential growth, logarithmic decay, visualization, graphs, calculations, educational tool, interactive, Bocaletto Luca">
  <meta name="author" content="Bocaletto Luca">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Powers Explorer</h1>
  </header>
  <div class="container">
    <!-- Tabs Navigation -->
    <div class="tabs">
      <button class="tablinks active" onclick="openTab(event, 'info')" id="defaultTab">Info</button>
      <button class="tablinks" onclick="openTab(event, 'calculator')">Calculator</button>
      <button class="tablinks" onclick="openTab(event, 'quiz')">Quiz</button>
      <button class="tablinks" onclick="openTab(event, 'visualizer')">Visualizer</button>
    </div>

    <!-- Info Tab -->
    <div id="info" class="tabcontent active">
      <h2>Introduction to Powers</h2>
      <section>
        <p>An exponentiation (or power) is a mathematical operation, written as <em>a<sup>n</sup></em>, involving two numbers: the base <em>a</em> and the exponent <em>n</em>. It represents repeated multiplication of the base; for example, <em>3<sup>4</sup> = 3 × 3 × 3 × 3 = 81</em>.</p>
      </section>
      <section>
        <p><strong>Key Exponent Laws:</strong></p>
        <ul>
          <li><em>Product Rule:</em> a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></li>
          <li><em>Quotient Rule:</em> a<sup>m</sup> ÷ a<sup>n</sup> = a<sup>m−n</sup> (a ≠ 0)</li>
          <li><em>Power Rule:</em> (a<sup>m</sup>)<sup>n</sup> = a<sup>m×n</sup></li>
          <li><em>Zero Exponent:</em> a<sup>0</sup> = 1 (a ≠ 0)</li>
          <li><em>Negative Exponent:</em> a<sup>−n</sup> = 1 / a<sup>n</sup></li>
          <li><em>Fractional Exponent:</em> a<sup>1/n</sup> = n-th root of a</li>
        </ul>
      </section>
      <section>
        <p>This app will help you understand and work with powers through interactive tools.</p>
      </section>
    </div>

    <!-- Calculator Tab -->
    <div id="calculator" class="tabcontent">
      <h2>Power Calculator</h2>
      <div class="calc">
        <label for="baseInput">Base (a):</label>
        <input type="number" id="baseInput" placeholder="e.g., 2" step="any">
        <label for="expInput">Exponent (n):</label>
        <input type="number" id="expInput" placeholder="e.g., 8" step="any">
        <button class="btn" onclick="calculatePower()">Calculate aⁿ</button>
      </div>
      <div id="powerResult" class="result"></div>
    </div>

    <!-- Quiz Tab -->
    <div id="quiz" class="tabcontent">
      <h2>Power Quiz</h2>
      <div class="calc">
        <button class="btn" onclick="newQuiz()">New Question</button>
      </div>
      <div id="quizQuestion" class="result"></div>
      <div class="calc">
        <label for="quizAnswer">Your Answer:</label>
        <input type="number" id="quizAnswer" placeholder="e.g., 16" step="any">
        <button class="btn" onclick="checkQuizAnswer()">Submit Answer</button>
      </div>
      <div id="quizFeedback" class="result"></div>
    </div>

    <!-- Visualizer Tab -->
    <div id="visualizer" class="tabcontent">
      <h2>Exponential Growth Visualizer</h2>
      <div class="calc">
        <label for="visBase">Base (a):</label>
        <input type="number" id="visBase" placeholder="e.g., 2" step="any">
        <button class="btn" onclick="drawExponentGraph()">Visualize f(x)=aˣ</button>
      </div>
      <canvas id="graphCanvas" width="600" height="400"></canvas>
      <div id="graphResult" class="result"></div>
    </div>
  </div>

  <footer>
    Bocaletto Luca
  </footer>
<script src="main.js"></script>
</body>
</html>