</div>
  <p id="contained-result"></p>
  <p id="inner-result"></p>
  <p id="outer-result"></p>

  <script>
    // basic test
    var calc = document.getElementById("calc");
    var sum = document.getElementById("sum");
    var error = document.getElementById("error");

    calc.addEventListener("sum-calculated", function(event) {
      sum.innerHTML = event.detail;
    });

    calc.addEventListener("sum-error", function(event) {
      error.innerHTML = event.detail;
    });

    // event options test
    v