12 |
13 | ## functionToWorker (fn: (): any): string
14 |
15 | Converts a function into a WebWorker URL object that can be passed into
16 | thread(). Note that `fn` has to be a single function with no external
17 | references or bindings, so that it can be stringified using .toString().
18 |
19 | | Name | Type | Default | Description |
20 | | --- | --- | --- | --- |
21 | | `fn` | (): any | | |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Welcome to Jekyll!
2 | #
3 | # This config file is meant for settings that affect your whole blog, values
4 | # which you are expected to set up once and rarely edit after that. If you find
5 | # yourself editing this file very often, consider using Jekyll's data files
6 | # feature for the data you need to update frequently.
7 | #
8 | # For technical reasons, this file is *NOT* reloaded automatically when you use
9 | # 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10 | #
11 | # If you need help with YAML syntax, here are some quick references for you:
12 | # https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
13 | # https://learnxinyminutes.com/docs/yaml/
14 | #
15 | # Site settings
16 | # These are used to personalize your new site. If you look in the HTML files,
17 | # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
18 | # You can create any custom variable you would like, and they will be accessible
19 | # in the templates via {{ site.myvariable }}.
20 |
21 | title: Mathigon Documentation
22 | email: dev@mathigon.org
23 | description: TODO
24 | baseurl: "/"
25 | url: "https://mathigon.io"
26 | twitter:
27 | username: MathigonOrg
28 | card: summary
29 | github_username: jekyll
30 |
31 | logo: /images/logo.png
32 |
33 | plugins:
34 | - jekyll-seo-tag
35 |
36 | color_scheme: custom
37 | ga_tracking: UA-37525836-5
38 | remote_theme: pmarsceill/just-the-docs
39 |
40 | # Exclude from processing.
41 | exclude:
42 | - build.js
43 | - .sass-cache/
44 | - .jekyll-cache/
45 | - gemfiles/
46 | - Gemfile
47 | - Gemfile.lock
48 | - package.json
49 | - package-lock.json
50 | - README.md
51 | - node_modules/
52 | - vendor/bundle/
53 | - vendor/cache/
54 | - vendor/gems/
55 | - vendor/ruby/
56 |
--------------------------------------------------------------------------------
/boost/audio.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 3
4 | parent: Boost.js
5 | ---
6 |
7 | # Audio
8 |
9 |
--------------------------------------------------------------------------------
/studio/interactives.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 3
4 | parent: Mathigon Studio
5 | ---
6 |
7 | # Interactive Elements
8 |
9 | Many interactive elements share common functionality such as animating a DOM element or listening to
10 | a slide gesture. For consistency, browser-compatibility and accessibility, we should use the
11 | shared utility methods in the [__@mathigon/boost__](https://github.com/mathigon/boost.js) library.
12 | Refer to its documentation for more information about:
13 |
14 | * [Element selection](https://github.com/mathigon/boost.js/blob/master/docs/elements.md)
15 | * [SVG and Canvas drawing](https://github.com/mathigon/boost.js/blob/master/docs/elements.md#svg-and-canvas-drawing)
16 | * [Animations](https://github.com/mathigon/boost.js/blob/master/docs/animations.md)
17 | * [Event hand gesture handling](https://github.com/mathigon/boost.js/blob/master/docs/events.md)
18 | * [Custom Web Components](https://github.com/mathigon/boost.js/blob/master/docs/webcomponents.md)
19 |
20 | ## Linking Markdown and TypeScript
21 |
22 | Every course is divided into multiple steps, separated by `---`s. Every step has a unique ID which
23 | is provided in the `>` block at the beginning of a step, in the `content.md` file:
24 |
25 | ```
26 | ---
27 | > id: my-step-1
28 |
29 | {.my-class} Here is a paragraph
30 |
31 | ---
32 | ```
33 |
34 | _Note: Specifying an ID for every step is optional, but recommended since the IDs are used to
35 | identify student progress in our database. Missing step IDs could lead to discrepancies if we
36 | insert new steps into an existing course._
37 |
38 | The step IDs correspond to the names of functions exported in the `functions.ts` file for the
39 | same course. The function is executed whenever the step is revealed for the first time, and takes
40 | a `$step` argument, which is a reference to the custom HTML `` element that wraps around
41 | the step. Check [types.d.ts](content/shared/types.d.ts) for the available properties and methods.
42 |
43 | ```
44 | export function myStep1($step: Step) {
45 | const $paragraph = $step.$('.my-class');
46 | }
47 | ```
48 |
49 | _Note: Step IDs are in `kebab-case` while function names are in `camelCase`._
50 |
51 | ## Goals and progress
52 |
53 | TODO...
54 |
55 | ## Models and templates
56 |
57 | Every step contains an observable object, which can be used to create reactive
58 |
59 | ```ts
60 | export function myStep1($step: Step) {
61 | $step.model.a = 10
62 | $step.model.b = 11
63 | }
64 | ```
65 |
66 | Any variables you assign to `$step.model` can then be accessed in Markdown. If the model changes,
67 | the template will update automatically.
68 |
69 | ```
70 | Here is ${a} and ${b}.
71 | ```
72 |
73 | Many built-in interactive elements automatically integrate with the model:
74 |
75 | ```md
76 | Here is a variable slider ${a}{a|5|0,10,1} and some variable values: a = ${a}, b = ${b}.
77 | Here is [a button](action:increment(1)) that triggers a function whenever you click it.
78 |
79 | // A large horizontal slider that binds to model.b
80 | x-slider(steps=100 :bind="b")
81 | ```
82 |
83 | ```ts
84 | export function myStep1($step: Step) {
85 | $step.model.click = (n: number) => $step.model.b += 1;
86 |
87 | console.log($step.model.a); // Get the current value of model.a.
88 |
89 | $step.model.watch(() => {
90 | // This callback is triggered whenever model.a changes, but not when model.b changes.
91 | console.log('a =', $step.model.a);
92 | });
93 | }
94 | ```
95 |
96 | _Note: The `model.watch` function is very efficient: when executed for the first time, it tracks
97 | which model properties are accessed within its body. Then it will keep executing the callback any
98 | time these properties change, but not when other properties of `model` change._
99 |
--------------------------------------------------------------------------------
/boost/ajax.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 1
4 | parent: Boost.js
5 | ---
6 |
7 | # Ajax
8 |
9 |
12 |
13 | ## deferredPost (url: string, data: PostData): void
14 |
15 | Utility function to throttle repeated POST requests. A request to the same
16 | URL will be made at most every 5s, and the corresponding data objects will
17 | be deep-merged.
18 |
19 | | Name | Type | Default | Description |
20 | | --- | --- | --- | --- |
21 | | `url` | string | | |
22 | | `data` | PostData | | |
23 |
24 |
25 |
46 |
47 | ## exponential (data: Array<Coordinate>): Array<number>
48 |
49 | Finds an exponential regression that best approximates a set of data. The
50 | result will be an array [a, b], where y = a * e^(bx).
51 |
52 | | Name | Type | Default | Description |
53 | | --- | --- | --- | --- |
54 | | `data` | Array<Coordinate> | | |
55 |
56 |
57 |
62 |
63 | ## linear (data: Array<Coordinate>, throughOrigin: boolean): Array<number>
64 |
65 | Finds a linear regression that best approximates a set of data. The result
66 | will be an array [c, m], where y = m * x + c.
67 |
68 | | Name | Type | Default | Description |
69 | | --- | --- | --- | --- |
70 | | `data` | Array<Coordinate> | | |
71 | | `throughOrigin` | boolean | false | |
72 |
73 |
74 |
79 |
80 | ## logarithmic (data: Array<Coordinate>): Array<number>
81 |
82 | Finds a logarithmic regression that best approximates a set of data. The
83 | result will be an array [a, b], where y = a + b * log(x).
84 |
85 | | Name | Type | Default | Description |
86 | | --- | --- | --- | --- |
87 | | `data` | Array<Coordinate> | | |
88 |
89 |
90 |
95 |
96 | ## polynomial (data: Array<Coordinate>, order: number): Array<number>
97 |
98 | Finds a polynomial regression of given `order` that best approximates a set
99 | of data. The result will be an array giving the coefficients of the
100 | resulting polynomial.
101 |
102 | | Name | Type | Default | Description |
103 | | --- | --- | --- | --- |
104 | | `data` | Array<Coordinate> | | |
105 | | `order` | number | 2 | |
106 |
107 |
108 |
113 |
114 | ## power (data: Array<Coordinate>): Array<number>
115 |
116 | Finds a power regression that best approximates a set of data. The result
117 | will be an array [a, b], where y = a * x^b.
118 |
119 | | Name | Type | Default | Description |
120 | | --- | --- | --- | --- |
121 | | `data` | Array<Coordinate> | | |
122 |
123 |
124 |
54 |
55 | ## animate (callback: AnimationCallback, duration: number): AnimationResponse
56 |
57 | Runs an animation. If no duration is provided, the animation will run
58 | indefinitely, and call `callback` with the time since start as first
59 | argument. If a duration is provided, the first callback argument is instead
60 | the proportion of the duration passed (between 0 and 1). The second callback
61 | argument is the time difference since the last animation frame, and the
62 | third callback argument is a `cancel()` function to stop the animation.
63 |
64 | | Name | Type | Default | Description |
65 | | --- | --- | --- | --- |
66 | | `callback` | AnimationCallback | | |
67 | | `duration` | number | | |
68 |
69 |
70 |
52 |
53 | ## canvasPointerPosition (event: ScreenEvent, $canvas: CanvasView): Point
54 |
55 | Gets the pointer position from an event triggered on an `
--------------------------------------------------------------------------------
/studio/setup.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 1
4 | parent: Mathigon Studio
5 | ---
6 |
7 | # Setup and Customisation
8 |
9 | ## Introduction
10 |
11 | Start by creating a new repository and then install Mathigon Studio as a dependency using
12 | `npm install @mathigon/studio`.
13 |
14 | A usage example that shows many of the available customisation options is available in the
15 | [example/](example) directory. When copying the contents of this directory for use elsewhere,
16 | remember to replace `"@mathigon/studio": "file:../.."` in `package.json` with the latest version
17 | of the `@mathigon/studio` module on NPM.
18 |
19 | ## The NodeJS Server
20 |
21 | First, you need to create a TypeScript entrypoint file for the NodeJS server, for example
22 | `server/app.ts`. This file will allow you to set up and configure the server and add any plugins,
23 | extensions or customisations required:
24 |
25 | ```ts
26 | import {MathigonStudioApp} from '@mathigon/studio/server/app';
27 |
28 | const studio = new MathigonStudioApp()
29 | .setup({sessionSecret: 'archimedes'}) // Setup Express App
30 | .get('/', (req, res) => res.render('home.pug')) // Custom routes
31 | .get('/courses', (req, res) => res.render('courses.pug'))
32 | .course({}) // Bind and configure course endpoints
33 | .errors() // The error routes have to be created last
34 | .listen(8080); // Dev port can be overridden by process.env.PORT
35 | ```
36 |
37 | Internally, `MathigonStudioApp()` creates an [Express server](https://expressjs.com/). You can
38 | extend this server directly by accessing `studio.app()`. The functions `studio.get()` and
39 | `studio.post()` are wrappers around the native Express handlers that catch any rejected Promises
40 | or async functions and show an error page.
41 |
42 | Notice how the example above creates two custom endpoints, `/` and `/courses`. Their PUG templates
43 | are located in the `server/templates` directory.
44 |
45 | ## Customisation Options
46 |
47 | The `config.yaml` file at the root of your repository can be used to customise and configure the
48 | behaviour of your server. Take a look at [server/interfaces.ts](../server/interfaces.ts#L92) for a
49 | detailed schema of which options are supported.
50 |
51 | TODO: Write more docs for each option.
52 |
53 | ## Static Assets
54 |
55 | In the `frontend/` directory, you can add any custom styles, scripts or assets that you want to
56 | expose to users. Any files in `frontend/assets/` will directly be publicly available. Any top
57 | level `.ts` and `.scss` will be automatically compiled into separate `.js` and and `.css` files
58 | with the same name.
59 |
60 | You can use the `frontend/` directory to overwrite any files in the corresponding
61 | `node_modules/@mathigon/studio/frontend/` directory – for example, to add your own `favicon.ico`
62 | file or to overwrite the `course.ts` script.
63 |
64 | The `frontend/assets/icons/` subdirectory can contain custom `.svg` icons that will get bundled
65 | into a single `/icons.svg` file with symbols and can be used using the `x-icon(name="...")`
66 | custom webcomponent. The `name=` attribute corresponds to the original filename of the icon.
67 |
68 | _Note: We are working on additional customisation options, including providing custom partials for
69 | the PUG templates._
70 |
71 | ## Add Content
72 |
73 | Now you can start writing your first courses. Every course is located in a subdirectory of
74 | `content/`, but you can customise this path using the `contentDir` property in `config.yaml`.
75 | Once compiled, the course at `content/courseid/` will be available at the URL `/course/courseid`.
76 |
77 | Every course must contain a `content.md` markdown file with the text, subsections and metadata.
78 | [Learn more](markdown.md) about the syntax for these files. You should also include a `styles.scss`
79 | file and a `functions.ts` file for custom styles or interactivity. You can also add images for
80 | courses, as well as `glossary.yaml`, `bios.yaml` and `hints.yaml` files with additional data.
81 |
82 | The `shared/` directory can contain corresponding `.yaml` files that are shared across all courses,
83 | as well as other shared TypeScript components or styles. You cannot have a course with the ID
84 | `shared/`.
85 |
86 | ## Scripts
87 |
88 | To start a server, you can simply run `ts-node server/app.ts`, with your server entry file. You
89 | can also use tools like [Nodemon](https://nodemon.io/) to automatically restart your server when
90 | files change.
91 |
92 | However, first you need to build the courses, static assets, and other dependencies. For this,
93 | Mathigon Studio exposes the `mgon-build` CLI that can be called using `npm run` or `npx`. Here are
94 | some of the supported options:
95 |
96 | * `--assets` builds all courses, SCSS styles, TS scripts and SVG icons. You can optionally add
97 | `--minify` to also minify all assets and `--watch` to continue watching all files for changes.
98 | * `--search` generates the search index for all courses. You need to set `search.enabled` in
99 | `config.yaml`, where you can further customise the search behaviour.
100 | * `--thumbnails` generates preview images for all courses. These are shown, for example, on social
101 | media sites like Twitter when sharing a link.
102 | * `--translate` generate translations for all UI strings referenced using `__()` in templates.
103 |
104 | The [package.json](example/package.json) file in the example directory show how best to use and
105 | combine all these scripts:
106 |
107 | | Production | Development |
108 | | ----------------------------------------- | -------------------------------------- |
109 | | 1. Build the website: `npm run build` | 1. Start a local server: `npm run dev` |
110 | | 2. Deploy to your server host (e.g. AWS) | 2. The server will automatically watch for changes to files and recompile. |
111 | | 3. Start a production server: `npm start` | |
112 |
113 | Finally, you can run `mgon-screenshots --output screenshots` to generate screenshots for all pages
114 | in your app and write them to a new directory. This requires a server running in the background,
115 | and can be useful for screen-diffing any changes.
116 |
117 | ## Translations
118 |
119 | TODO: Write docs for translations
120 |
--------------------------------------------------------------------------------
/core/utilities.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 8
4 | parent: Core.js
5 | ---
6 |
7 | # Utilities
8 |
9 |
22 |
23 | ## cache (fn: (args: Args): T): (args: Args): NonNullable<T>
24 |
25 | Function wrapper that modifies a function to cache its return values. This
26 | is useful for performance intensive functions which are called repeatedly
27 | with the same arguments. However it can reduce performance for functions
28 | which are always called with different arguments. Note that argument
29 | comparison does not work with Objects or nested arrays.
30 |
31 | | Name | Type | Default | Description |
32 | | --- | --- | --- | --- |
33 | | `fn` | (args: Args): T | | |
34 |
35 |
36 |
133 |
134 | ## throttle (fn: (args: Args): void, t: number, forceDelay: boolean): (args: Args): void
135 |
136 | Function wrapper that prevents a function from being executed more than once
137 | every t ms. This is particularly useful for optimising callbacks for
138 | continues events like scroll, resize or slider move. Setting `forceDelay`
139 | to `true` means that even the first function call is after the minimum
140 | timout, rather than instantly.
141 |
142 | | Name | Type | Default | Description |
143 | | --- | --- | --- | --- |
144 | | `fn` | (args: Args): void | | |
145 | | `t` | number | 0 | |
146 | | `forceDelay` | boolean | false | |
147 |
148 |
149 |
211 |
212 | ## smart (n: number, id: string): number
213 |
214 | Returns a random number between 0 and n, but avoids returning the same
215 | number multiple times in a row.
216 |
217 | | Name | Type | Default | Description |
218 | | --- | --- | --- | --- |
219 | | `n` | number | | |
220 | | `id` | string | | |
221 |
222 |
223 |
93 |
94 | ### Accessor .value : number
95 |
96 | Returns the value of this number as a decimal. For example, 2/5 and 40%
97 | would both return 0.4.
98 |
99 |
289 |
290 | ### staticMethod .fromFoci (f1: Point, f2: Point, stringLength: number): Ellipse
291 |
292 | Creates a new Ellipse. StringLength is the length of string from one foci
293 | to a point on the circumference, to the other foci.
294 |
295 | | Name | Type | Default | Description |
296 | | --- | --- | --- | --- |
297 | | `f1` | Point | | |
298 | | `f2` | Point | | |
299 | | `stringLength` | number | | |
300 |
301 |
302 |
303 |
304 |
--------------------------------------------------------------------------------
/studio/markdown.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 2
4 | parent: Mathigon Studio
5 | ---
6 |
7 | # Markdown syntax
8 |
9 | Mathigon's courses are written in a custom flavour of Markdown. Most [standard syntax](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) (titles, bold, italic, links, etc.) is supported, but we have added many new elements, and updated the behaviour of some existing ones.
10 |
11 | Here is the basic outline of a chapter:
12 |
13 | ```markdown
14 | # Chapter Title
15 |
16 | > color: #f42621
17 | > description: Here is a custom course description
18 | > id: step-1
19 | > section: section-id
20 |
21 | ## First section
22 |
23 | Here is a paragraph
24 |
25 | ---
26 | > id: step-2
27 | > goals: my-goal
28 |
29 | Here is another paragraph
30 | ```
31 |
32 | Notice that every chapter is split into multiple short steps, divided by the `---` lines. Every section contains some *metadata* at the beginning, in lines starting with a `>`. The metadata is parsed as [YAML](http://yaml.org/). (Note that the `>` usually indicates block quotes in standard Markdown syntax.)
33 |
34 | The `# H1` heading is the title of the entire course. Every step that starts with an `# H2` heading creates a new chapter/section, and you can use the `> section:` metadata to (optionally) specify a custom ID for this chapter. This ID will appear in the URL, for example `/course//`.
35 |
36 | Every step should have a unique `id`. You can also specify an optional `title`, as well as `goals`, which is a space-separated list of events that need to be triggered before the next step is revealed.
37 |
38 | ## Equations and code blocks
39 |
40 | Content between backticks is parsed as [AsciiMath](http://asciimath.org/) and converted to MathML. If you want to parse it as code or LaTeX instead, you can specify the language at the beginning:
41 |
42 | ```markdown
43 | The probability of rolling a 6 is `(1+x)/3`.
44 | Here is some Python code: `{py} x = 0`
45 | Here is some LaTeX code: `{latex} \frac{1}{2}`
46 | ```
47 |
48 | There are a few minor differences compared to the standard AsciiMath syntax. Most importantly, it is possible to have arbitrary multi-letter variables, e.g. `ab` would become `ab` not `ab`. To create multiple chained single-letter variables, simply add a space in between, e.g. `a b`.
49 |
50 | _Note: there are [special functions](#inline-elements-in-equations) for adding inline elements inside equations._
51 |
52 | ## Blanks and input fields
53 |
54 | You can create blanks for students to fill in using double square brackets. These can contain either be a single number (for input field) or multiple words separated by `|` (for multiple choice popups).
55 |
56 | Input fields except the solution both as digits, or as a typed number string. For multiple choice questions, the first choice is always the correct one (but the answers are shuffled when displayed to students).
57 |
58 | ```markdown
59 | There are numbers like [[10]] or [[ten]] and [[many|few|no]] choices.
60 | ```
61 |
62 | You can provide specific hints for these blanks, or specify ranges of possible answers:
63 |
64 | ```markdown
65 | Accept answers between 95 and 105 (inclusive):
66 | [[100 ± 5]]
67 |
68 | Show a hint when students make a mistake:
69 | [[100 (Here is a hint.)]]
70 |
71 | Show a series of hints if students make repeated mistakes:
72 | [[100 (Here is the first hint. | Here is the second hint.)]]
73 |
74 | Show specific hints for common errors:
75 | [[100 (50: Double that number. | 100: Half that number. | Here is a hint.)]]
76 | ```
77 |
78 | ## Custom classes, attributes and tags
79 |
80 | For customisation and styling, it is possible to add ids, classes and attributes to paragraphs or inline elements. Simply start the body of that element with the required CSS selector inside `{}`:
81 |
82 | ```markdown
83 | {.class1.class2(attr="value")} Some _{#id1} text_ and [{.red} link](url).
84 | ```
85 |
86 | You can even use this method to change the tag name of an element:
87 |
88 | ```markdown
89 | Here is a span element: _{span.red} Text_
90 | ```
91 |
92 | ## Variable sliders
93 |
94 | In order to make the content as dynamic and interactive as possible, you can easily add inline variables that can be manipulated by the student. There is a separate syntax for initialising variables (resulting in interactive sliders) and expressions that depend on these variables. This example would produce a slider for a variable `a` that is initially 2 and can be changed from -8 to 8 in steps of 2:
95 |
96 | ```markdown
97 | The square of ${a}{a|2|-8,8,2} is ${a*a}. The square root is ${sqrt(a)}.
98 | ```
99 |
100 | ## Links, glossary and biography popups
101 |
102 | You can add external links just like in normal markdown:
103 |
104 | ```markdown
105 | Here is a [link](https://mathigon.org).
106 | ```
107 |
108 | In addition, you can use the `bio:` or `gloss:` prefix to add biography or glossary popups. The corresponding IDs must match one of the items in the corresponding YAML files in the [shared](https://github.com/mathigon/textbooks/tree/master/content/shared) directory:
109 |
110 | ```markdown
111 | The force of [gravity](gloss:gravity) was first explained by [Newton](bio:newton).
112 | ```
113 |
114 | ## Targets and action buttons
115 |
116 | You can add action buttons that execute a certain snipped of JavScript code:
117 |
118 | ```markdown
119 | Let's [increment](action:fn()) the
120 | ```
121 |
122 | Other than variable sliders, glossary and biography popups, there are a number of different inline
123 | elements. The `->` symnol greates a __target pointer__ to specific elements of the page. If users hover over the link, Mathigon will highlight all elements that match the given CSS selector (and, if needed, scroll them into view.)
124 |
125 | ```markdown
126 | You should try hovering over the [biography button](->#s1.bio).
127 | ```
128 |
129 | _Note: Replace whitespace in the CSS query selector by `_`s, so that the string remains a valid "URL"._
130 |
131 | You can add coloured __pills__, for example to visualise different variables that correspond to specific elements in a diagram. The supported colours are `red`, `purple`, `blue`, `teal`, `green`, `lime`, `yellow` and `orange`:
132 |
133 | ```markdown
134 | Here is [a red pill](pill:red) and [a yellow pill](pill:yellow).
135 | ```
136 |
137 | **TODO**: `target` elements…
138 |
139 | ## Inline elements in equations
140 |
141 | You can also add any of these elements within AsciiMath equation blocks, using a few different functions:
142 |
143 | | Normal Markdown | Inside equations |
144 | | -------------------------------- | -------------------------------- |
145 | | `A [[blank \ choice]]` | `` `x + blank(y, "choice")` `` |
146 | | `An input [[10]]` | `` `x + input(10) + y` `` |
147 | | `A [pill](pill:red)` | `` `x + pill(y,"red")` `` |
148 | | `A [{.green} target](target:px)` | `` `x + pill(y,"green","px")` `` |
149 | | `A variable instance ${y * 2}` | `` `x + var("y * 2")` `` |
150 |
151 | These elements can then be used in arbitrarily nested equations:
152 |
153 | ```markdown
154 | `blank("a","b")/(input(10) + var("x")) = sqrt(pill(x + y, "blue"))`
155 | ```
156 |
157 | ## Block elements
158 |
159 | Rather than using the `{...}` syntax for adding classes or elements, you can wrap elements in blocks using `:::` symbols:
160 |
161 | ```markdown
162 | ::: .theorem(style="background: red")
163 |
164 | Here is some text.
165 |
166 | :::
167 | ```
168 |
169 | The syntax for specifying tag names, classes, IDs and attributes is the same as in the previous section.
170 |
171 | Some components also also allow chaining of multiple blocks:
172 |
173 | ```markdown
174 | ::: column.grow
175 |
176 | This column will grow to fill the available space
177 |
178 | ::: column(width=300)
179 |
180 | This column is 300px wide.
181 |
182 | :::
183 | ```
184 |
185 | ## Reveals
186 |
187 | Consecutive steps are automatically hidden and revealed when students complete all the required exercises and goals. However, you can also add content *within* a step that is dynamically revealed: paragraphs, individual words, or even elements of an SVG diagram.
188 |
189 | The syntax is the same as for custom classes and attributes: you just need the `.reveal` class and a `when=""` attribute with a space-separated list of all required goals:
190 |
191 | ```markdown
192 | Here is a paragraph with a blank: [[10]]
193 |
194 | {.reveal(when="blank-0")} Here is another blank: [[20]]
195 |
196 | {.reveal(when="blank-1")} Here is another blank: [[30]]
197 | ```
198 |
199 | Notice that blanks within a step automatically indexed, staring at 0.
200 |
201 | It is also possible to change the animation type, duration and delay of these reveal animations:
202 |
203 | ```markdown
204 | {.reveal(when="blank-0" animation="pop" delay=1000 duration=400)} Show me...
205 | ```
206 |
207 | ## Special characters
208 |
209 | You can add [any of these emoji](https://gist.github.com/rxaviers/7360908) using their name:
210 |
211 | ```markdown
212 | Hey :smile:
213 | ```
214 |
215 | You can create non-breaking whitespace by prefixing it with a `\`:
216 |
217 | ```markdown
218 | The answer is 12\ m. The price us US$\ 50.
219 | ```
220 |
221 | ## Custom HTML
222 |
223 | Any content indented by four characters is parsed a [Pug](https://pugjs.org/) and converted to HTML:
224 |
225 | ```markdown
226 | Here is a paragraph
227 |
228 | div
229 | img(src="images/example.jpg")
230 | .caption Here is some custom HTML
231 | ```
232 |
233 | Pug content before the start for the first step can be used to define mixins than are accessible in all later Pug blogs.
234 |
235 | All relative urls in `src` and `href` attributes are parsed relative to the root directory for this chapter.
236 |
237 | You can use the `.md` class to parse Markdown within HTML blocks;
238 |
239 | ```markdown
240 | This is _markdown_.
241 |
242 | div This is not markdown.
243 | div.md This _is_ markdown.
244 | ```
245 |
246 | ## Tables
247 |
248 | TODO…
249 |
250 | ## Audio Narration
251 |
252 | Mathigon will automatically generate audio narrations for all text. You can prevent this behaviour using the `.no-voice` class.
253 |
254 | ```markdown
255 | Can you read this _{.no-voice} silent_ text to me.
256 | ```
257 |
258 | You can use the `voice=` attribute to override the custom text-to-speech parser. However, this should only be used rarely – for example, Mathigon can automatically translate equations into spoken text.
259 |
260 | ```markdown
261 | Here is an equation: _{span(voice="a squared + b squared")} `a^2 + b^2`_.
262 | ```
263 |
--------------------------------------------------------------------------------
/fermat/arithmetic.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 1
4 | parent: Fermat.js
5 | ---
6 |
7 | # Arithmetic
8 |
9 |
124 |
125 | ## mod (a: number, m: number): number
126 |
127 | Calculates `a mod m`. The JS implementation of the % operator returns the
128 | symmetric modulo. Both are identical if a >= 0 and m >= 0 but the results
129 | differ if a or m < 0.
130 |
131 | | Name | Type | Default | Description |
132 | | --- | --- | --- | --- |
133 | | `a` | number | | |
134 | | `m` | number | | |
135 |
136 |
137 |
2 |
--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathigon/documentation/HEAD/apple-touch-icon.png
--------------------------------------------------------------------------------
/images/textbook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathigon/documentation/HEAD/images/textbook.png
--------------------------------------------------------------------------------
/images/favicon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathigon/documentation/HEAD/images/favicon-192.png
--------------------------------------------------------------------------------
/images/favicon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathigon/documentation/HEAD/images/favicon-32.png
--------------------------------------------------------------------------------
/images/favicon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathigon/documentation/HEAD/images/favicon-512.png
--------------------------------------------------------------------------------
/acknowledgements.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 9
4 | description: Acknowledgements
5 | ---
6 |
7 | # Acknowledgements
8 |
9 | Coming soon…
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | .sass-cache
3 | .jekyll-cache
4 | .jekyll-metadata
5 | vendor
6 | .DS_Store
7 | Gemfile.lock
8 | node_modules
9 | npm-debug.log
10 | .idea
11 | *.iml
12 | Thumbs.db
13 |
--------------------------------------------------------------------------------
/euclid/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 3
4 | has_children: true
5 | description: Euclid.js API Docs
6 | ---
7 |
8 | # Euclid.js
9 |
10 | 2D Euclidean geometry classes, utilities, and drawing tools.
11 |
12 | [View on GitHub](https://github.com/mathigon/euclid.js){: .btn .btn-blue }
13 |
--------------------------------------------------------------------------------
/hilbert/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 4
4 | has_children: true
5 | description: Hilbert.js API Docs
6 | ---
7 |
8 | # Hilbert.js
9 |
10 | JavaScript expression parsing, MathML rendering and CAS.
11 |
12 | [View on GitHub](https://github.com/mathigon/hilbert.js){: .btn .btn-blue }
13 |
--------------------------------------------------------------------------------
/core/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 1
4 | has_children: true
5 | ---
6 |
7 | # Core.js
8 |
9 | JavaScript utility function and classes, including array and string helper functions, type checking and event classes.
10 |
11 | [View on GitHub](https://github.com/mathigon/core.js){: .btn .btn-blue }
12 |
--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 | ---
4 |
5 | 
6 |
7 | Welcome to Mathigon – help us build the future of education!
8 |
9 | Here, you can browse the documentation for all our open-source TypeScript libraries, as well as
10 | our public APIs for creating and hosting interactive courses or virtual manipulatives.
11 |
--------------------------------------------------------------------------------
/fermat/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 2
4 | has_children: true
5 | description: Fermat.js API Docs
6 | ---
7 |
8 | # Fermat.js
9 |
10 | Powerful mathematics and statistics library, containing everything from number theory to random numbers and linear algebra classes.
11 |
12 | [View on GitHub](https://github.com/mathigon/fermat.js){: .btn .btn-blue }
13 |
--------------------------------------------------------------------------------
/boost/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 5
4 | has_children: true
5 | description: Boost.js API Docs
6 | title: Boost.js
7 | ---
8 |
9 | # Boost.js
10 |
11 | Simplifying browser APIs – from DOM manipulation to web components, event handling, animations, routing, multi-threading and AJAX requests.
12 |
13 | [View on GitHub](https://github.com/mathigon/boost.js){: .btn .btn-blue }
14 |
--------------------------------------------------------------------------------
/hilbert/expression.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | nav_order: 4
4 | parent: Hilbert.js
5 | ---
6 |
7 | # Expression
8 |
9 |