My First Web Page: Lesson 7: Interacting with Third Party Apps

Create Your Own Live Mathematics and STEM Web Pages

W3Schools.com: Learn JavaScript

  

Introduction: A Sampler Lesson 2: Styles and Layout Lesson 3: Adding Beautiful Mathematics to your web page Lesson 4: Interacting with your web page Lesson 5(a): Adding a GeoGebra Applet Lesson 5(b): Adding a Geometry Expressions Applet Lesson 6(a): Creating a GeoGebra Assessment Task Lesson 6(b): Creating a Geometry Expressions Assessment Task Lesson 7: Interacting with Third Party Apps Lesson 8: JavaScript, STEM and Internal Device Sensors Lesson 9: JavaScript, STEM and GPS Lesson 10: Adding Web Bluetooth Support (1): Talking to your SensorTag Lesson 11: Adding Web Bluetooth Support (2): Talking to your LaunchPad Lesson 12: Introduction to HTML Graphics: Canvas

  

---

  

We have seen the ways in which GeoGebra can be readily customised to interact with web page content using JavaScript, but this is just the beginning!

There are a multitude of JavaScript and HTML5 applets freely available for almost any application that you could think of - just visit github.com and search under JavaScript.

One of the first implementations of Bluetooth for common use was in personal heart rate monitors. This presents a lovely opportunity to personalise student learning about important mathematical and STEM skills and concepts - as well as a great introduction to BLE JavaScript coding.

The BLE heart rate script transmits a value using the Bluetooth SIG Heart Rate Profile and should work with most common heart rate monitors.

  GitHub WebBluetooth demos ⇒

 

---

 

Explore the world of musical tones created in your browser through Web Audio...

Try the Tones Library Demo ⇒

Play with the Web Audio Tones Explorer ⇒

Visit the Tones library by Keith Peters ⇒

Another example which I recently discovered came from a very prolific creator of amazing interactive web tools in Mike Bostock - take a few minutes to scroll through the many wonderful web tools which he has developed or inspired - from graphs of every kind to artwork to a particular favourite of mine - music!

Many years ago, I undertook research on the role of the harmonic mean, which led to some lovely discoveries which I drew together as Mathematics: A Search for Harmony. Growing from this was my interest in providing tools for students to explore the mathematics of music and harmony, and consequently the idea of linking a web-based keyboard with GeoGebra arose naturally.

While you will find quite a few browser-based piano applets around, most of them, I found, worked fine on the computer but not on tablets, which was disappointing. And then I found Mike Bostock's awesome Arc Piano - and even a Circle Piano (see below)!

  Arc Piano and Tones Explorer

 

If you have any questions or would like to share your experience with this utility, please drop me an email!

Back to Top

  

Display My Web Page

RESET Default Page

 

---

Adding GeoGebra and Much More to a Piano

Show

Back to Top

  

Now let's jazz things up a bit!

Set Code (ArcPiano with GeoGebra) ...Even a Circular Piano Add the ability to create and playback tones Add a musical stave And why not add BLE? Create This Page

Explore the code displayed in the text box above and the page which it creates. Then have a browse through the arcpiano.js ArcPiano JavaScript code until you find where it links to our GeoGebra applet. Once I found the slice of code which gave rise to the notes being played, it was easy to send those values to our GeoGebra applet! Compare the JavaScript code for the Arc and Circle Pianos and see how very close they are to each other - in fact, just two small changes turns two octaves into two complete 88 key piano keyboards!

You can do the same with many third-party applets. Here we add a Tone Generator to replay our musical creations, a musical stave to display the notes, and BLE to send our sounds to an external speaker!

  arcPiano.js ⇒

circlePiano.js ⇒

play.js ⇒

 

 

---

 

QR Code Maker

Show

Back to Top

  

Set QR Code Maker Create This Page

QR Codes are an excellent way to share data and information with those around you. Most commonly used to share web links, they can also be a quick and convenient way to transfer data with colleagues or even assessment responses between students and teacher. This JavaScript utility makes this process simple to add to your own web page!

  QR Code Maker ⇒

 

 

---

 

BLE Heartrate Monitor

Show

Back to Top

  

Set Simple Heart Rate Monitor Add GeoGebra Create This Page

As with most of our more interesting JavaScript applications, most of the action occurs behind the scenes - in this case, we see how simple the actual HTML page code is, driven by reference to two scripting pages. The first (heartrate.js) does the heavy lifting in terms of connecting and interpreting the readings from your heart rate monitor. The second sends this to our web page - and to our GeoGebra applet!

  View heartRateSensor.js ⇒

View app.js ⇒

 

 

---

 

Back to Top

 

Home ← Live Mathematics and STEM on the Web ← My First Web Page: Introduction ← Lesson 7