Adds an explorer example.

mathjax · May 17, 2022 · dc42fdc · dc42fdc
1 parent c286fae
commit dc42fdc
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ The examples below show how to use and configure MathJax components in your web
 * [tex-mml.html](tex-mml.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/tex-mml.html)) 
 * [mml-attribute.html](mml-attribute.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/mml-attribute.html))
 * [speech-tex-chtml.html](speech-tex-chtml.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/speech-tex-chtml.html))
+* [speech-explorer-tex.html](speech-explorer-tex.html.md) ([View Demo](https://mathjax.github.io/MathJax-demos-web/speech-explorer-tex.html))
 
 ### Customization
 

diff --git a/speech-explorer-tex.html b/speech-explorer-tex.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width">
+  <style>
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #444d56;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: solid 1px #c6cbd1;
+    border-bottom-color: #959da5;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #959da5;
+    }
+  </style>
+  <title>MathJax v3 with TeX input and HTML output with speech</title>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script>
+  MathJax = {
+    loader: {load: ['a11y/sre']},
+    options: {
+      menuOptions: {
+        settings: {
+          explorer: true,
+          assistiveMml: false
+        }
+      }
+    },
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
+  };
+  </script>
+  <script id="MathJax-script" async src="http://localhost/MathJax/MathJax-src/es5/tex-chtml.js"></script>
+  <!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script> -->
+</head>
+<body>
+
+  <p>
+  These expressions will have auto-generated speech attached for screen readers. Focus on a formula and press <kbd>Enter</kbd> to start exploration with the arrow keys.
+  </p>
+
+  <p>
+  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
+  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
+  </p>
+
+</body>
+</html>
diff --git a/speech-explorer-tex.html.md b/speech-explorer-tex.html.md
@@ -0,0 +1,27 @@
+# [speech-expolrer-tex.html](https://mathjax.github.io/MathJax-demos-web/speech-explorer-tex.html)
+
+This example shows how to enable MathJax's accessibility extension to attach speech to typeset math and enable interactive exploration of expressions.
+
+The key lines are
+
+``` html
+  <script>
+  MathJax = {
+    loader: {load: ['a11y/sre']},
+    options: {
+      menuOptions: {
+        settings: {
+          explorer: true,
+          assistiveMml: false
+        }
+      }
+    },
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
+  };
+  </script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+```
+
+which causes the `a11y/sre` extension to be loaded, and modifies the menu settings to initialise the interactive explorer on page load. In addition we can switch off the assistive mml extension as it is no longer needed.
+
+[Run the example](https://mathjax.github.io/MathJax-demos-web/speech-explorer-tex.html)