New thumbnails, fixed school about page, new math lesson, and stuff

7 files changed, 388 insertions, 192 deletions

diff --git a/lessons/fisika/static-electricity/coulomb.html b/lessons/fisika/static-electricity/coulomb.html
index 65864b8..8292073 100644
--- a/lessons/fisika/static-electricity/coulomb.html
+++ b/lessons/fisika/static-electricity/coulomb.html
@@ -76,9 +76,9 @@
             <h1 id="units">Unit Conversions (for Coulomb)</h1>
             <ol>
                 <li>n <b>mC</b> (<strong>milli</strong>Coulomb) = n * 10<sup>-3</sup> C</li>
-                <li>n <b>MC</b> (<strong>Micro</strong>Coulomb) = n * 10<sup>-6</sup> C</li>
+                <li>n <b>MC</b> (<strong>Micro</strong>Coulomb) = n * 10<sup>-6</sup> C <i>(Alternative form: μC)</i></li>
                 <li>n <b>nC</b> (<strong>nano</strong>Coulomb) = n * 10<sup>-9</sup> C</li>
-                <li>n <b>Å</b> (<strong>Ångström</strong>) = n * 10<sup>10</sup> C</li>
+                <li>n <b>Å</b> (<strong>Ångström</strong>) = n * 10<sup>-10</sup> C</li>
             </ol>
             <h1 id="example">Example</h1>
             <img src="/assets/images/atoms/coulomb1.svg" alt=""><br>
diff --git a/lessons/index.html b/lessons/index.html
index 76d0727..a2f6dd4 100644
--- a/lessons/index.html
+++ b/lessons/index.html
@@ -54,131 +54,117 @@
         <section>   
             <div class="card-container">
                 <div class="card">
-                    <a href="/lessons/matematika/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/1/">
-            <h2>Matematika</h2>
-                    </a>
-                    <p>Hidayatullah, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/fisika/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/2/">
-            <h2>Fisika</h2>
-                    </a>
-                    <p>Ayu Rezky Yulita, M.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/biologi/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Biologi</h2>
-                    </a>
-                    <p>Ir. Hj. Wiwit Parminta</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/ips/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>IPS</h2>
-                    </a>
-                    <p>Unaeni Jahroh S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/agama/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Agama</h2>
-                    </a>
-                    <p>Akrom Hasani, S.Ag.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/quran/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Al-Qur'an</h2>
-                    </a>
-                    <p>Muhammad Fathan S.Ag</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/arab/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Bahasa Arab</h2>
-                    </a>
-                    <p>Mohammad Amar, Lc.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/ppkn/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>PPKn</h2>
-                    </a>
-                    <p>Andini Nurlaily Hikmah, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/informatika/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Informatika</h2>
-                    </a>
-                    <p>Nurbaeti, SE., M.Ak</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/english/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>English</h2>
-                    </a>
-                    <p>Sofia Nurbaiti, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/indonesia/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Bahasa Indonesia</h2>
-                    </a>
-                    <p>Maman Sulaeman, S.Pd.</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/musik/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Seni Musik</h2>
-                    </a>
-                    <p>Dra. Kusnun Indrawati</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/lukis/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Seni Rupa</h2>
-                    </a>
-                    <p>Miftah Izharul Haq, S.Pd</p>
-                </div>
-                <div class="card">
-                    <a href="/lessons/pjok/" class="link-card"></a>
-                    <img src="/assets/images/hero/books.jpg"
-            alt="" class="card-img">
-                    <a href="/lessons/3/">
-            <h2>Penjasorkes</h2>
-                    </a>
-                    <p>Supatri, S.Pd</p>
-                </div>
+                        <a href="/lessons/matematika/" class="link-card"></a>
+                        <img src="/assets/images/hero/math.jpg" alt="" class="card-img">
+                        <a href="/lessons/1/">
+                            <h2>Matematika</h2>
+                        </a>
+                        <p>Hidayatullah, S.Pd.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/fisika/" class="link-card"></a>
+                        <img src="/assets/images/hero/physics.jpg" alt="" class="card-img">
+                        <a href="/lessons/2/">
+                            <h2>Fisika</h2>
+                        </a>
+                        <p>Ayu Rezky Yulita, M.Pd.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/biologi/" class="link-card"></a>
+                        <img src="/assets/images/hero/biology.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Biologi</h2>
+                        </a>
+                        <p>Ir. Hj. Wiwit Parminta</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/ips/" class="link-card"></a>
+                        <img src="/assets/images/hero/ips.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>IPS</h2>
+                        </a>
+                        <p>Unaeni Jahroh S.Pd.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/agama/" class="link-card"></a>
+                        <img src="/assets/images/hero/alazhar.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Agama</h2>
+                        </a>
+                        <p>Akrom Hasani, S.Ag.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/quran/" class="link-card"></a>
+                        <img src="/assets/images/hero/quran.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Al-Qur'an</h2>
+                        </a>
+                        <p>Muhammad Fathan S.Ag</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/arab/" class="link-card"></a>
+                        <img src="/assets/images/hero/arabic.png" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Bahasa Arab</h2>
+                        </a>
+                        <p>Mohammad Amar, Lc.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/ppkn/" class="link-card"></a>
+                        <img src="/assets/images/hero/ppkn.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>PPKn</h2>
+                        </a>
+                        <p>Andini Nurlaily Hikmah, S.Pd.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/informatika/" class="link-card"></a>
+                        <img src="/assets/images/hero/laptop.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Informatika</h2>
+                        </a>
+                        <p>Nurbaeti, SE., M.Ak</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/english/" class="link-card"></a>
+                        <img src="https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>English</h2>
+                        </a>
+                        <p>Sofia Nurbaiti, S.Pd.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/indonesia/" class="link-card"></a>
+                        <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Bahasa Indonesia</h2>
+                        </a>
+                        <p>Maman Sulaeman, S.Pd.</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/musik/" class="link-card"></a>
+                        <img src="/assets/images/hero/music.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Seni Musik</h2>
+                        </a>
+                        <p>Dra. Kusnun Indrawati</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/lukis/" class="link-card"></a>
+                        <img src="/assets/images/hero/paint.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Seni Rupa</h2>
+                        </a>
+                        <p>Miftah Izharul Haq, S.Pd</p>
+                    </div>
+                    <div class="card">
+                        <a href="/lessons/pjok/" class="link-card"></a>
+                        <img src="/assets/images/hero/sports.jpg" alt="" class="card-img">
+                        <a href="/lessons/3/">
+                            <h2>Penjasorkes</h2>
+                        </a>
+                        <p>Supatri, S.Pd</p>
+                    </div>
             </div>
         </section>
     </div>
diff --git a/lessons/matematika/index.html b/lessons/matematika/index.html
index 34889b2..64c2cc2 100644
--- a/lessons/matematika/index.html
+++ b/lessons/matematika/index.html
@@ -53,10 +53,12 @@
     <div id="main">
         <section>   
             <h1 id="bab1">Chapter 1 - Bentuk Pangkat dan Akar</h1>
-            <p><a href="pangkat-akar/pangkat.html" class="link">Lesson 1: Exponent</a></p>
-            <p><a href="pangkat-akar/akar.html" class="link">Lesson 2: Root</a></p>
-            <p><a href="pangkat-akar/latihan.html" class="link">Exercise 1</a></p>
-            <p><a href="pangkat-akar/scientific.html" class="link">Lesson 3: Exponents Extended - Scientific Form of Decimals</a></p>
+            <p><a href="pangkat-akar/pangkat.html/" class="link">Lesson 1: Exponent</a></p>
+            <p><a href="pangkat-akar/akar.html/" class="link">Lesson 2: Root</a></p>
+            <p><a href="pangkat-akar/latihan.html/" class="link">Exercise 1</a></p>
+            <p><a href="pangkat-akar/scientific.html/" class="link">Lesson 3: Exponents Extended - Scientific Form of Decimals</a></p>
+            <h1 id="bab2">Chapter 2 - Quadratic Equation</h1>
+            <p><a href="quadratic-equation/" class="link">Main Lesson: Quadratic Equation - The Introduction</a></p>
         </section>
     </div>
     
diff --git a/lessons/matematika/pangkat-akar/akar.html b/lessons/matematika/pangkat-akar/akar.html
index 35ed018..4665ae0 100644
--- a/lessons/matematika/pangkat-akar/akar.html
+++ b/lessons/matematika/pangkat-akar/akar.html
@@ -61,57 +61,57 @@
             <h1 id="definition">Definition</h1>
             Root is the inverse of exponent. For example;<br>
             <ul>
-                <li>4<sup>2</sup> = 16, <b>so <span class="root">16</span> = 4</b></li>
-                <li>5<sup>2</sup> = 25, <b>so <span class="root">25</span> = 5</b></li>
-                <li>10<sup>2</sup> = 100, <b>so <span class="root">100</span> = 10</b></li>
+                <li>4<sup>2</sup> = 16, <b>so <span class="sroot">16</span> = 4</b></li>
+                <li>5<sup>2</sup> = 25, <b>so <span class="sroot">25</span> = 5</b></li>
+                <li>10<sup>2</sup> = 100, <b>so <span class="sroot">100</span> = 10</b></li>
             </ul>
 
             <h1 id="simplification">Simplifying Square Roots</h1>
             You can simplify a root by factoring the root number another number that is rational. Or in other words, divide the root number by the perfect squares. For example;  
             <ul>
                 <li>
-                    <strong>Simplify <span class="root">60</span></strong><br>
-                    <span class="root">60</span> = <span class="root">4 &times; 15</span> = 2<span class="root">15</span><br>
+                    <strong>Simplify <span class="sroot">60</span></strong><br>
+                    <span class="sroot">60</span> = <span class="sroot">4 &times; 15</span> = 2<span class="sroot">15</span><br>
                 </li>
                 <li>
-                    <strong>Simplify <span class="root">48</span></strong><br>
-                    <span class="root">48</span> = <span class="root">16 &times; 3</span> = 4<span class="root">3</span><br>
+                    <strong>Simplify <span class="sroot">48</span></strong><br>
+                    <span class="sroot">48</span> = <span class="sroot">16 &times; 3</span> = 4<span class="sroot">3</span><br>
                 </li>
                 <li>
-                    <strong>Simplify <span class="root">125</span></strong><br>
-                    <span class="root">125</span> = <span class="root">25 &times; 5</span> = 5<span class="root">5</span><br>
+                    <strong>Simplify <span class="sroot">125</span></strong><br>
+                    <span class="sroot">125</span> = <span class="sroot">25 &times; 5</span> = 5<span class="sroot">5</span><br>
                 </li>
             </ul>
 
             <h1 id="root-operations">Root Operations</h1>
             <h2 id="root-operations--addition">Addition</h2>
             Roots with coefficient can be added with another coefficient that have the same roots. <br>
-            <strong>a<span class="root">c</span> + b<span class="root">c</span> = (a + b)<span class="root">c</span></strong>
+            <strong>a<span class="sroot">c</span> + b<span class="sroot">c</span> = (a + b)<span class="sroot">c</span></strong>
             <ul>
-                <li>3<span class="root">2</span> + 4<span class="root">2</span> = (3 + 4)<span class="root">2</span> = <strong>7<span class="root">2</span></strong></li>
-                <li><span class="root">5</span> + 3<span class="root">5</span> = (1 + 3)<span class="root">5</span> = <strong>4<span class="root">5</span></strong></li>
+                <li>3<span class="sroot">2</span> + 4<span class="sroot">2</span> = (3 + 4)<span class="sroot">2</span> = <strong>7<span class="sroot">2</span></strong></li>
+                <li><span class="sroot">5</span> + 3<span class="sroot">5</span> = (1 + 3)<span class="sroot">5</span> = <strong>4<span class="sroot">5</span></strong></li>
             </ul>
             <h2 id="root-operations--subtraction">Subtraction</h2>
             Roots with coefficient can be subtracted with another coefficient that have the same roots. <br>
-            <strong>a<span class="root">c</span> - b<span class="root">c</span> = (a - b)<span class="root">c</span></strong>
+            <strong>a<span class="sroot">c</span> - b<span class="sroot">c</span> = (a - b)<span class="sroot">c</span></strong>
             <ul>
-                <li>7<span class="root">3</span> - 4<span class="root">3</span> = (7 - 4)<span class="root">3</span> = <strong>3<span class="root">2</span></strong></li>
-                <li>10<span class="root">6</span> - 5<span class="root">6</span> = (10 - 5)<span class="root">6</span> = <strong>5<span class="root">6</span></strong></li>
+                <li>7<span class="sroot">3</span> - 4<span class="sroot">3</span> = (7 - 4)<span class="sroot">3</span> = <strong>3<span class="sroot">2</span></strong></li>
+                <li>10<span class="sroot">6</span> - 5<span class="sroot">6</span> = (10 - 5)<span class="sroot">6</span> = <strong>5<span class="sroot">6</span></strong></li>
             </ul>
             <h2 id="root-operations--multiplication">Multiplication</h2>
             Roots can be multiplied with any other roots. If the root is the same as the other multiplied root, the root can be deleted (if you want to be faster). <br>
-            <strong>a<span class="root">c</span> &times; b<span class="root">d</span> = (a &times; b)<span class="root">c &times; d</span></strong>
+            <strong>a<span class="sroot">c</span> &times; b<span class="sroot">d</span> = (a &times; b)<span class="sroot">c &times; d</span></strong>
             <ul>
-                <li><span class="root">2</span> &times; <span class="root">5</span> = <strong><span class="root">10</span></strong></li>
-                <li>3<span class="root">2</span> &times; 4<span class="root">3</span> = (3 &times; 4)<span class="root">2 &times; 3</span> = <strong>12<span class="root">6</span></strong></li>
-                <li>2<span class="root">5</span> &times; 3<span class="root">5</span> = (2 &times; 3)(5) = 6(5) = <strong>30</strong></li>
+                <li><span class="sroot">2</span> &times; <span class="sroot">5</span> = <strong><span class="sroot">10</span></strong></li>
+                <li>3<span class="sroot">2</span> &times; 4<span class="sroot">3</span> = (3 &times; 4)<span class="sroot">2 &times; 3</span> = <strong>12<span class="sroot">6</span></strong></li>
+                <li>2<span class="sroot">5</span> &times; 3<span class="sroot">5</span> = (2 &times; 3)(5) = 6(5) = <strong>30</strong></li>
             </ul>
             <h2 id="root-operations--division">Division</h2>
             Roots can be divided with any other roots. <br>
-            <strong>a<span class="root">c</span> &divide; b<span class="root">d</span> = (a &divide; b)<span class="root">c &divide; d</span></strong>
+            <strong>a<span class="sroot">c</span> &divide; b<span class="sroot">d</span> = (a &divide; b)<span class="sroot">c &divide; d</span></strong>
             <ul>
                 <li>
-                    8<span class="root">6</span> &divide; 4<span class="root">3</span> = (8 &divide; 4)<span class="root">6 &divide; 3</span> = <strong>2<span class="root">2</span></strong>
+                    8<span class="sroot">6</span> &divide; 4<span class="sroot">3</span> = (8 &divide; 4)<span class="sroot">6 &divide; 3</span> = <strong>2<span class="sroot">2</span></strong>
                 </li>
             </ul>
         </section>
diff --git a/lessons/matematika/pangkat-akar/latihan.html b/lessons/matematika/pangkat-akar/latihan.html
index a019254..701a456 100644
--- a/lessons/matematika/pangkat-akar/latihan.html
+++ b/lessons/matematika/pangkat-akar/latihan.html
@@ -63,13 +63,13 @@
                 <h2 id="questions--pangkat">Pangkat</h1>
                 <li style="margin-top: 10px;">8p<sup>2</sup>q &times; 2pq<sup>3</sup></li>
                 <li style="margin-top: 10px;">64<sup><span class="frac"><sup>1</sup><span>&frasl;</span><sub>2</sub></span></sup> + 81<sup><span class="frac"><sup>1</sup><span>&frasl;</span><sub>3</sub></span></sup></li>
-                <li style="margin-top: 10px;">2<span class="root">5</span> + 3<span class="root">20</span> - 4<span class="root">5</span></li>
+                <li style="margin-top: 10px;">2<span class="sroot">5</span> + 3<span class="sroot">20</span> - 4<span class="sroot">5</span></li>
 
                 <h2 id="questions--rasional">Merasionalkan Akar</h2>
-                <li style="margin-top: 10px;"><span class="frac"><sup>4</sup><span>&frasl;</span><sub><span class="root">5</span></sub></span></li>
-                <li style="margin-top: 10px;"><span class="frac"><sup>3<span class="root">5</span></sup><span>&frasl;</span><sub>2<span class="root">3</span></sup></sub></span></li>
-                <li style="margin-top: 10px;"><span class="frac"><sup>5</sup><span>&frasl;</span><sub><span class="root">3</span> - <span class="root">2</span></sub></span></li>
-                <li style="margin-top: 10px;"><span class="frac"><sup><span class="root">5</span> - <span class="root">7</span></sup><span>&frasl;</span><sub><span class="root">5</span> - <span class="root">2</span></sub></span></li>
+                <li style="margin-top: 10px;"><span class="frac"><sup>4</sup><span>&frasl;</span><sub><span class="sroot">5</span></sub></span></li>
+                <li style="margin-top: 10px;"><span class="frac"><sup>3<span class="sroot">5</span></sup><span>&frasl;</span><sub>2<span class="sroot">3</span></sup></sub></span></li>
+                <li style="margin-top: 10px;"><span class="frac"><sup>5</sup><span>&frasl;</span><sub><span class="sroot">3</span> - <span class="sroot">2</span></sub></span></li>
+                <li style="margin-top: 10px;"><span class="frac"><sup><span class="sroot">5</span> - <span class="sroot">7</span></sup><span>&frasl;</span><sub><span class="sroot">5</span> - <span class="sroot">2</span></sub></span></li>
 
                 <h2 id="question--operasi-pangkat">Operasi Pangkat</h2>
                 <li style="margin-top: 10px;">(8p<sup>2</sup>3)<sup>3</sup> &divide; 2pq</li>
@@ -84,40 +84,40 @@
                 <li style="margin-top: 10px;">16p<sup>3</sup>q<sup>4</sup></li>
                 <li style="margin-top: 10px;">
                     64<sup><span class="frac"><sup>1</sup><span>&frasl;</span><sub>2</sub></span></sup> + 81<sup><span class="frac"><sup>1</sup><span>&frasl;</span><sub>3</sub></span></sup><br>
-                    = <span class="root">64</span> + <sup>3</sup><span class="root">81</span><br>
-                    = 8 + <sup>3</sup><span class="root">81</span>
+                    = <span class="sroot">64</span> + <sup>3</sup><span class="sroot">81</span><br>
+                    = 8 + <sup>3</sup><span class="sroot">81</span>
                 </li>
                 <li style="margin-top: 10px;">
-                    2<span class="root">5</span> + 3<span class="root">20</span> - 4<span class="root">5</span><br>
-                    = 6<span class="root">5</span> + 3<span class="root">20</span><br>
-                    = 6<span class="root">5</span> + 3<span class="root">4 &times; 5</span><br>
-                    = 6<span class="root">5</span> + 3<span class="root">2<sup>2</sup> &times; 5</span><br>
-                    = 6<span class="root">5</span> + 3 &times; 2<span class="root">5</span><br>
-                    = 6<span class="root">5</span> + 6<span class="root">5</span><br>
-                    = <strong>12<span class="root">5</span></strong><br>
+                    2<span class="sroot">5</span> + 3<span class="sroot">20</span> - 4<span class="sroot">5</span><br>
+                    = 6<span class="sroot">5</span> + 3<span class="sroot">20</span><br>
+                    = 6<span class="sroot">5</span> + 3<span class="sroot">4 &times; 5</span><br>
+                    = 6<span class="sroot">5</span> + 3<span class="sroot">2<sup>2</sup> &times; 5</span><br>
+                    = 6<span class="sroot">5</span> + 3 &times; 2<span class="sroot">5</span><br>
+                    = 6<span class="sroot">5</span> + 6<span class="sroot">5</span><br>
+                    = <strong>12<span class="sroot">5</span></strong><br>
                 </li>
                 <li style="margin-top: 10px;">
-                    <span class="frac"><sup>4</sup><span>&frasl;</span><sub><span class="root">5</span></sub></span><br>
-                    = <span class="frac"><sup>4</sup><span>&frasl;</span><sub><span class="root">5</span></sub></span> &times; <span class="frac"><sup><span class="root">5</span></sup><span>&frasl;</span><sub><span class="root">5</span></sub></span> = <strong><span class="frac"><sup>4<span class="root">5</span></sup><span>&frasl;</span><sub>5</sub></span></strong>
+                    <span class="frac"><sup>4</sup><span>&frasl;</span><sub><span class="sroot">5</span></sub></span><br>
+                    = <span class="frac"><sup>4</sup><span>&frasl;</span><sub><span class="sroot">5</span></sub></span> &times; <span class="frac"><sup><span class="sroot">5</span></sup><span>&frasl;</span><sub><span class="sroot">5</span></sub></span> = <strong><span class="frac"><sup>4<span class="sroot">5</span></sup><span>&frasl;</span><sub>5</sub></span></strong>
                 </li>
                 <li style="margin-top: 10px;">
-                    <span class="frac"><sup>3<span class="root">5</span></sup><span>&frasl;</span><sub>2<span class="root">3</span></sup></sub></span><br>
-                    = <span class="frac"><sup>3<span class="root">5</span></sup><span>&frasl;</span><sub>2<span class="root">3</span></sup></sub></span> &times; <span class="frac"><sup><span class="root">3</span></sup><span>&frasl;</span><sub><span class="root">3</span></sup></sub></span><br>
-                    = <span class="frac"><sup><span style="text-decoration: line-through;">3</span><span class="root">15</span></sup><span>&frasl;</span><sub>2 &times; <span style="text-decoration: line-through;">3</span></sup></sub></span><br>
-                    = <strong><span class="frac"><sup><span class="root">15</span></sup><span>&frasl;</span><sub>2</sup></sub></span></strong>
+                    <span class="frac"><sup>3<span class="sroot">5</span></sup><span>&frasl;</span><sub>2<span class="sroot">3</span></sup></sub></span><br>
+                    = <span class="frac"><sup>3<span class="sroot">5</span></sup><span>&frasl;</span><sub>2<span class="sroot">3</span></sup></sub></span> &times; <span class="frac"><sup><span class="sroot">3</span></sup><span>&frasl;</span><sub><span class="sroot">3</span></sup></sub></span><br>
+                    = <span class="frac"><sup><span style="text-decoration: line-through;">3</span><span class="sroot">15</span></sup><span>&frasl;</span><sub>2 &times; <span style="text-decoration: line-through;">3</span></sup></sub></span><br>
+                    = <strong><span class="frac"><sup><span class="sroot">15</span></sup><span>&frasl;</span><sub>2</sup></sub></span></strong>
                 </li>
                 <li style="margin-top: 10px;">
-                    <span class="frac"><sup>5</sup><span>&frasl;</span><sub><span class="root">3</span> - <span class="root">2</span></sub></span><br>
-                    = <span class="frac"><sup>5</sup><span>&frasl;</span><sub><span class="root">3</span> - <span class="root">2</span></sub></span> &times; <span class="frac"><sup><span class="root">3</span> + <span class="root">2</span></sup><span>&frasl;</span><sub><span class="root">3</span> + <span class="root">2</span></sub></span><br>
-                    = <span class="frac"><sup>5(<span class="root">3</span> + <span class="root">2</span>)</sup><span>&frasl;</span><sub>(<span class="root">3</span>)<sup>2</sup> - (<span class="root">2</span>)<sup>2</sup></sub></span><br>
-                    = <span class="frac"><sup>5(<span class="root">3</span> + <span class="root">2</span>)</sup><span>&frasl;</span><sub>3 - 2</sub></span> = <span class="frac"><sup>5(<span class="root">3</span> + <span class="root">2</span>)</sup><span>&frasl;</span><sub>1</sub></span><br>
-                    = <strong>5(<span class="root">3</span> + <span class="root">2</span>)</strong>
+                    <span class="frac"><sup>5</sup><span>&frasl;</span><sub><span class="sroot">3</span> - <span class="sroot">2</span></sub></span><br>
+                    = <span class="frac"><sup>5</sup><span>&frasl;</span><sub><span class="sroot">3</span> - <span class="sroot">2</span></sub></span> &times; <span class="frac"><sup><span class="sroot">3</span> + <span class="sroot">2</span></sup><span>&frasl;</span><sub><span class="sroot">3</span> + <span class="sroot">2</span></sub></span><br>
+                    = <span class="frac"><sup>5(<span class="sroot">3</span> + <span class="sroot">2</span>)</sup><span>&frasl;</span><sub>(<span class="sroot">3</span>)<sup>2</sup> - (<span class="sroot">2</span>)<sup>2</sup></sub></span><br>
+                    = <span class="frac"><sup>5(<span class="sroot">3</span> + <span class="sroot">2</span>)</sup><span>&frasl;</span><sub>3 - 2</sub></span> = <span class="frac"><sup>5(<span class="sroot">3</span> + <span class="sroot">2</span>)</sup><span>&frasl;</span><sub>1</sub></span><br>
+                    = <strong>5(<span class="sroot">3</span> + <span class="sroot">2</span>)</strong>
                 </li>
                 <li style="margin-top: 10px;">
-                    <span class="frac"><sup><span class="root">5</span> - <span class="root">7</span></sup><span>&frasl;</span><sub><span class="root">5</span> - <span class="root">2</span></sub></span><br>
-                    = <span class="frac"><sup><span class="root">5</span> - <span class="root">7</span></sup><span>&frasl;</span><sub><span class="root">5</span> - <span class="root">2</span></sub></span> &times; <span class="frac"><sup><span class="root">5</span> + <span class="root">2</span></sup><span>&frasl;</span><sub><span class="root">5</span> + <span class="root">2</span></sub></span><br>
-                    = <span class="frac"><sup>(<span class="root">5</span> - <span class="root">7</span>) &times; (<span class="root">5</span> + <span class="root">2</span>)</sup><span>&frasl;</span><sub>(<span class="root">5</span>)<sup>2</sup> - (<span class="root">2</span>)<sup>2</sup></sub></span><br>
-                    = <span class="frac"><sup>5 + <span class="root">10</span> - <span class="root">35</span> - <span class="root">14</span></sup><span>&frasl;</span><sub>5 - 2</sub></span> = <strong><span class="frac"><sup>5 + <span class="root">10</span> - <span class="root">35</span> - <span class="root">14</span></sup><span>&frasl;</span><sub>3</sub></span></strong>
+                    <span class="frac"><sup><span class="sroot">5</span> - <span class="sroot">7</span></sup><span>&frasl;</span><sub><span class="sroot">5</span> - <span class="sroot">2</span></sub></span><br>
+                    = <span class="frac"><sup><span class="sroot">5</span> - <span class="sroot">7</span></sup><span>&frasl;</span><sub><span class="sroot">5</span> - <span class="sroot">2</span></sub></span> &times; <span class="frac"><sup><span class="sroot">5</span> + <span class="sroot">2</span></sup><span>&frasl;</span><sub><span class="sroot">5</span> + <span class="sroot">2</span></sub></span><br>
+                    = <span class="frac"><sup>(<span class="sroot">5</span> - <span class="sroot">7</span>) &times; (<span class="sroot">5</span> + <span class="sroot">2</span>)</sup><span>&frasl;</span><sub>(<span class="sroot">5</span>)<sup>2</sup> - (<span class="sroot">2</span>)<sup>2</sup></sub></span><br>
+                    = <span class="frac"><sup>5 + <span class="sroot">10</span> - <span class="sroot">35</span> - <span class="sroot">14</span></sup><span>&frasl;</span><sub>5 - 2</sub></span> = <strong><span class="frac"><sup>5 + <span class="sroot">10</span> - <span class="sroot">35</span> - <span class="sroot">14</span></sup><span>&frasl;</span><sub>3</sub></span></strong>
                 </li>
                 <li style="margin-top: 10px;">
                     (8p<sup>2</sup>3)<sup>3</sup> &divide; 2pq <br>
diff --git a/lessons/matematika/pangkat-akar/pangkat.html b/lessons/matematika/pangkat-akar/pangkat.html
index 4061c82..7c7ccce 100644
--- a/lessons/matematika/pangkat-akar/pangkat.html
+++ b/lessons/matematika/pangkat-akar/pangkat.html
@@ -103,15 +103,15 @@
             <h1 id="fractional-exponent">Fractional Exponent</h1>
             <img src="/assets/images/math/fractional_exponent.svg" alt="">
             <p>x&nbsp;<sup><span class="frac"><sup>y</sup><span>&frasl;</span><sub>z</sub></span></sup> =
-                <sup>z</sup><span><span class="root">x</span><sup style="font-size: small;">y</sup><span></span></span></p>
+                <sup>z</sup><span><span class="sroot">x</span><sup style="font-size: small;">y</sup><span></span></span></p>
             <h2 id="fractional-exponent--examples">Examples</h2>
             <ul>
                 <li>5&nbsp;<sup><span class="frac"><sup>1</sup><span>&frasl;</span><sub>2</sub></span></sup> =
-                    <sup>2</sup><span><span class="root">5</span></span></li>
+                    <sup>2</sup><span><span class="sroot">5</span></span></li>
                 <li>7&nbsp;<sup><span class="frac"><sup>2</sup><span>&frasl;</span><sub>3</sub></span></sup> =
-                    <sup>3</sup><span><span class="root">7<sup>2</sup></span></span></li>
+                    <sup>3</sup><span><span class="sroot">7<sup>2</sup></span></span></li>
             </ul>
-            <p><strong>Small Note:</strong> 2</sup><span class="root">x</span> or <span class="root">x</span> menans square root. The 2 before root should be removed. The 2 is only present for easier purposes.<br>3</sup><span><span class="root">x</span> means cubic root.</p>
+            <p><strong>Small Note:</strong> 2</sup><span class="sroot">x</span> or <span class="sroot">x</span> menans square root. The 2 before root should be removed. The 2 is only present for easier purposes.<br>3</sup><span><span class="sroot">x</span> means cubic root.</p>
 
             <h1 id="exponential-equation">Exponential Equation</h1>
             <ol>
diff --git a/lessons/matematika/quadratic-equation/index.html b/lessons/matematika/quadratic-equation/index.html
index bcb3ec8..d3d1c4e 100644
--- a/lessons/matematika/quadratic-equation/index.html
+++ b/lessons/matematika/quadratic-equation/index.html
@@ -13,11 +13,17 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
     <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.css"
+        integrity="sha384-pRsDYiLLocCzWnUN/YEr9TBTTaZOUi5x8adKfqi6Qt44lDaFkoP++x1j2ohSMtdf" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.js"
+        integrity="sha384-tMzugJpfLv7v0f+KXzNMqNCC6sVzLMM3sCnZDgzy0lcO/0h3sAkEBg/URFcV0JpE"
+        crossorigin="anonymous"></script>
 </head>
 
 <body>
     <div class="fixed-top-btn-container" id="topbtn">
-        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
+        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i
+                class="fa-solid fa-bars"></i></a>
         <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a>
     </div>
     <div id="console"></div>
@@ -47,18 +53,220 @@
         <div class="banner-bg" id="img-supplies"></div>
         <div class="gradient-bg"></div>
         <div class="banner-text-container">
-            <h1 class="banner-text" id="banner-txt">Root</h1>
-            <h3 class="banner-text" id="banner-txt">Chapter 1</h3>
+            <h1 class="banner-text" id="banner-txt">Quadratic Equation: The Introduction</h1>
+            <h3 class="banner-text" id="banner-txt">Chapter 2</h3>
         </div>
     </div>
-    
+
     <div class="chip-container" id="chip-container">
-        <div class="chip"><span>❓ Unchecked by Professionals</span></div>
+        <div class="chip" title="Beware of mistakes. Please report to me (Altaf) if you caught a mistake here."><span>❓ Unchecked by Professionals</span></div>
     </div>
-    
+
     <div id="main">
         <section>
-            
+            <h1 id="introduction">Introduction</h1>
+            In algebra, a quadratic equation is any equation that can be rearranged in standard form as where x
+            represents an unknown value, and a, b, and c represent known numbers, where a ≠ 0.<sup>[<a
+                    href="#reference-1" class="link-compact">1</a>]</sup>
+            <h2 id="introduction--formula">Formula / Format</h2>
+            <span class="math-font">ax<sup>2</sup> + bx + c = 0</span>
+            <p>
+                <span class="math-font">a, b, c</span> = known numbers, where a &NotEqual; 0 <br>
+                <span class="math-font">x</span> = the unknown, or the root
+            </p>
+            <h2 id="introduction--exercise">Exercises</h2>
+            <h3>Finding the roots with factorisation.</h3>
+            <ol>
+                <li>
+                    <span id="q1.1.1"></span>
+                    <p>
+                        <hr>
+                        <span>To find the answer, we need to find the factors of b and c.</span><br>
+                        <span>The suitable factor for the equation are <b>2 and -3</b>.</span><br>
+                        <span>Then, insert each numbers to this formula: <span id="q1.1.2"></span>, where <span
+                                class="math-font">y</span> is the factor.</span><br><br>
+                        <span id="q1.1.3"></span><br><span id="q1.1.31"></span><br>
+                        <hr>
+                        <strong>So, the answer is <span id="q1.1.4"></span></strong>
+                    </p>
+                    <script defer>
+                        var element1 = document.getElementById("q1.1.1");
+                        var element2 = document.getElementById("q1.1.2");
+                        var element3 = document.getElementById("q1.1.3");
+                        var element31 = document.getElementById("q1.1.31");
+                        var element4 = document.getElementById("q1.1.4");
+
+                        katex.render(String.raw`x^2 - 1x - 6 = 0`, element1, {
+                            throwOnError: false
+                        });
+                        katex.render(String.raw`x + y`, element2, {
+                            throwOnError: false
+                        });
+                        katex.render(String.raw`
+                        \begin{aligned}
+                            x + 2 &= 0\\
+                            x &= -2\\
+                        \end{aligned}
+                        `, element3, {
+                            throwOnError: true
+                        }); katex.render(String.raw`
+                        \begin{aligned}
+                            x - 3 &= 0\\
+                            x &= 3
+                        \end{aligned}
+                        `, element31, {
+                            throwOnError: true
+                        });
+                        katex.render(String.raw`x = \{-2, 3\}`, element4, {
+                            throwOnError: false
+                        });
+                    </script>
+                </li>
+                <li>
+                    <p>
+                        <span id="q1.2.1"></span><br>
+                        <span><strong>Factors:</strong> <span class="math-font">2, 4</span></span><br>
+                        <hr>
+                        <span id="q1.2.2"></span><br>
+                        <span id="q1.2.3"></span><br>
+                        <hr>
+                        <span id="q1.2.4"></span><br>
+                    </p>
+                    <script defer>
+                        var element1 = document.getElementById("q1.2.1");
+                        var element2 = document.getElementById("q1.2.2");
+                        var element3 = document.getElementById("q1.2.3");
+                        var element4 = document.getElementById("q1.2.4");
+
+                        katex.render(String.raw`x^2 + 6x + 8 = 0`, element1, {
+                            throwOnError: false
+                        });
+                        katex.render(String.raw`
+                        \begin{aligned}
+                            x + 2 &= 0\\
+                            x &= -2\\
+                        \end{aligned}
+                        `, element2, {
+                            throwOnError: true
+                        }); katex.render(String.raw`
+                        \begin{aligned}
+                            x + 4 &= 0\\
+                            x &= 4
+                        \end{aligned}
+                        `, element3, {
+                            throwOnError: true
+                        });
+                        katex.render(String.raw`x = \{-2, -4\}`, element4, {
+                            throwOnError: false
+                        });
+                    </script>
+                </li>
+            </ol>
+            <h1 id="relation-algebra">Relation between Quadratic Equation and Algebraic Expressions</h1>
+            <p>This is an algebraic expression &rightarrow; <span id="m0"></span>. You can turn that into a quadratic equation.</p>
+            <span id="m1"></span>
+            <script>
+                const m0 = document.getElementById("m0");
+                const m1 = document.getElementById("m1");
+
+                katex.render(String.raw`(x + 5)(x + 7)`, m0, {
+                    throwOnError: false
+                });
+                katex.render(String.raw`
+                \begin{aligned}
+                (x + 5)(x + 7) &= x^2 + 5x + 7x + 35&\\
+                &= x^2 + 12x + 35&\larr\textnormal{quadratic equation 😱😱}
+                \end{aligned}
+                `, m1, {
+                    throwOnError: true
+                });
+            </script>
+            <h1 id="all-about-roots">Quadratic Equation's Root Operations</h1>
+            <h2 id="finding-qe">Finding Quadratic Equation with Roots</h2>
+            <p>You can use the formula below to find a Quadratic Equation with 2 roots.</p>
+            <span id="m2"></span><span>, where <span class=math-font>x<sub>1, 2</sub></span> are the roots.</span><br>
+            <p>
+                <strong>Example:</strong><br><br>
+                <span id="m3"></span>
+            </p>
+            <script>
+                const m2 = document.getElementById("m2");
+                const m3 = document.getElementById("m3");
+
+                katex.render(String.raw`(x - x_1)(x - x_2) = 0`, m2, {
+                    throwOnError: false
+                });
+                katex.render(String.raw`
+                \begin{aligned}
+                (x - x_1)(x - x_2) &= 0\\
+                (x - (-3))(x - 4) &= 0\\
+                (x + 3))(x - 4) &= 0\\
+                x^2 - 4x + 3x - 12 &= 0\\
+                x^2 - x - 12 &= 0
+                \end{aligned}
+                `, m3, {
+                    throwOnError: true
+                });
+            </script>
+            <h2 id="operations">Quadratic Root's Mathematical Operations</h2>
+            <h3 id="operations--formulas">Formulas</h3>
+            <p id="m4"></p>
+            <p id="m5"></p>
+            <h3 id="operations--examples">Examples</h3>
+            <ol>
+                <li>
+                    <p>Diketahui persamaan kuadrat <span id="q1"></span>, memiliki akar-akar persamaan kuadrat <span class="math-font">x<sub>1</sub></span> dan <span class="math-font">x<sub>2</sub></span>. Jika <span class="math-font">x<sub>1</sub> < x<sub>2</sub></span>, maka tentukan:
+                        <ol type="a">
+                            <li><span class="math-font">x<sub>1</sub> + x<sub>2</sub></span></li>
+                            <li><span class="math-font">x<sub>1</sub> &times; x<sub>2</sub></span></li>
+                        </ol>
+                    </p>
+                    <hr>
+                    <ol type="a">
+                        <li><span id="a1"></span></li>
+                        <li><span id="a2"></span></li>
+                    </ol>
+                </li>
+            </ol>
+            <script>
+                const m4 = document.getElementById("m4");
+                const m5 = document.getElementById("m5");
+                const q1 = document.getElementById("q1");
+                const a1 = document.getElementById("a1");
+                const a2 = document.getElementById("a2");
+
+                katex.render(String.raw`x_1 + x_2 = \dfrac{-b}{a}`, m4, {
+                    throwOnError: false
+                });
+                katex.render(String.raw`x_1 \times x_2 = \dfrac{c}{a}`, m5, {
+                    throwOnError: false
+                });
+                katex.render(String.raw`2x^2 + 7x + 3 = 0`, q1, {
+                    throwOnError: false
+                });
+                katex.render(String.raw`
+                \begin{aligned}
+                x_1 + x_2 &= \dfrac{-b}{a}\\
+                &= \dfrac{-7}{2}\\
+                \end{aligned}
+                `, a1, {
+                    throwOnError: true
+                });
+                katex.render(String.raw`
+                \begin{aligned}
+                x_1 \times x_2 &= \dfrac{c}{a}\\
+                &= \dfrac{3}{2}\\
+                \end{aligned}
+                `, a2, {
+                    throwOnError: true
+                });
+            </script>
+            <h1>References</h1>
+            <ol>
+                <li id="reference-1" tabindex="-1">Quadratic Equation - The English Wikipedia, <a
+                        href="https://en.wikipedia.org/wiki/Quadratic_equation"
+                        class="link">https://en.wikipedia.org/wiki/Quadratic_equation</a></li>
+                </li>
         </section>
     </div>