<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    menuSettings:{
      zoom: "Hover",
      zscale: "150%"
  
    },
    MathEvents: {
      hover: 100 
    },
    MathZoom: {
      styles: {
        "#MathJax_Zoom": {
          "background-color": "#ddd"
        }
      }
    }
  });
</script>

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<div id="content">
  <h1>Quadratic Equations</h1>
  <p>When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are:</p>
  <p>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$</p>
  <h2>Straight line equations</h2>
  <p>The equation for a straight line is usually written as \(y = mx + c\)</p>
  
  <section id="pisaexamples">
    <h2>Some examples</h2>
    <p>A paragraph with an inline equation: \(s = \frac{100}{9.58} = 10.43841336\). Notice how the fraction has been scaled down, so that it fits within a line of text. Even complicsted equations work quite well. \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\) still fits in the paragraph. Sort of.</p>
    <p>And a block equation:</p>
    $$s = \frac{100}{9.58} = 10.43841336$$
    <p>\(s = \frac{100}{9.58} = 10.43841336\)</p>
  </section>
  <section>
    <h2>Long Numbers</h2>
    <p>Styling for long numbers should be done with MathJax too. If you want commas in long numbers, adding them manually would result in unwanted spaces e.g. \(100,000,000\). one way around this is to enclose the commas in curly brackets - \( \{{,}\} \implies 100{,}000{,}000\) </p>
  </section>
  
  <h2>Hover</h2>
  <p>Oh yeah, dont forget to hover over the equations to zoom in.</p>
</div>