-
Notifications
You must be signed in to change notification settings - Fork 0
/
module3.html
377 lines (369 loc) · 21.6 KB
/
module3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!doctype html>
<!--
This single-page template is used for each learning module.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="LaTeX101 landing page">
<title>LaTeX101 Learning Module</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Additional scripts required for collapse, etc. -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.dm-code {
background:azure;
}
</style>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
console.log("downloading mathjax")
</script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="..">dmackinnon1.github.io</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Modules</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="./module0.html">0: What is LaTeX?</a>
<a class="dropdown-item" href="./module1.html">1: Getting Started</a>
<a class="dropdown-item" href="./module2.html">2: Essential LaTeX Commands</a>
<a class="dropdown-item" href="./module3.html">3: LaTeX on Various Platforms</a>
<a class="dropdown-item" href="./module4.html">4: Cloud-based LaTeX Environments</a>
<a class="dropdown-item" href="./module5.html">5: LaTeX as a Digital Literacy</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Utilities</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="./quiz.html">Command Quiz</a>
<a class="dropdown-item" href="./simpleLaTeX.html">LaTeX Tester</a>
</div>
</li>
</ul>
</div>
</nav>
<main role="main">
<div id='top_padding'>
<br/><br/><br/>
</div>
<div class="container">
<!-- Row 1 introduction -->
<h1> Module 3: LaTeX on Various Platforms </h1>
<div class="row" id="contents">
<div class="col-md-8">
<h2>Contents</h2>
<ul>
<li><a href="#goals">Learning Goals</a></li>
<li><a href="#before">Before You Start</a></li>
<li><a href="#main">LaTeX Everywhere</a></li>
<li><a href="#more">Learn More</a></li>
<li><a href="#check">Checklist</a></li>
<li><a href="#references">References</a></li>
</ul>
</div>
</div>
<hr>
<div class="row" id="goals">
<div class="col-md-8">
<h2>Learning Goals</h2>
<p> The learning goals for this module include:
<ul>
<li>Learn about the LaTeX support provided by environments like GeoGebra, Brightspace, and Google Docs.</li>
<li>Learn how to include LaTeX on any webpage using the MathJax Javascript library.</li>
<li>Explore other platforms that offer LaTeX support.</li>
</ul>
</p>
</div>
</div>
<hr>
<div class="row" id="before">
<div class="col-md-8">
<h2>Before You Start</h2>
<p> Think of a few different document types or platforms that you use to communicate mathematics. This might
include word-processors, slide-presentation software, online learning environments, webpages, graphing calculators, etc.
How many different tools do you need to use to insert mathematical expressions and symbols into these
environments?
</p>
</div>
</div>
<hr>
<div class="row" id="main">
<div class="col-md-8">
<h2>LaTeX Everywhere</h2>
<p> The LaTeX support included in various digital platforms allows you to use LaTeX or LaTeX-style commands
to include mathematics without having to create an entire LaTeX document. In most chases, there are facilities
on these platforms to inject a small amount of LaTeX (just what you need) into your document or page.
</p>
<h3> LaTeX in GeoGebra </h3>
<p>
The free online graphing and geometry tool <strong>GeoGebra</strong> includes LaTeX support in
its text tool, allowing you to include LaTeX-based formulas on graphs and
sketches that you create.
</p>
<!-- image here -->
<br>
<image src="./imgs/geogebra1.png" alt="LaTeX editor in GeoGebra"
style="width:150;padding:1px;border:thin solid black;">
<br>
<br>
<p> Try out the GeoGebra support for LaTeX following these steps:
<ol>
<li> Go to the GeoGebra <a href="https://www.geogebra.org/graphing" target="_blank">graphing calculator page</a>.</li>
<li> Select the <strong>Tools</strong> menu and choose the <strong>Text Tool</strong> within the <strong>Media Tools</strong> category.</li>
<li> Click on the graphing area to bring up the Text Tool, and select <strong>LaTeX Formula</strong>.</li>
<li> Enter one of the LaTeX commands you have learned.</li>
</ol>
Geogebra's LaTeX editor provides some help - clicking on the Advanced/LaTeX options will open an equation-editor style
interface that will insert the LaTeX code for symbols that you select.
<!-- image here -->
<br>
<br>
<image src="./imgs/geogebra2.png" alt="LaTeX editor in GeoGebra"
style="width:150;padding:1px;border:thin solid black;">
<br>
<br>
Read more about GeoGebra's LaTeX support on the <a href="https://wiki.geogebra.org/en/LaTeX" target="_blank">GeoGebra wiki<a>.
</p>
<h3>LaTeX in Brightspace</h3>
<p>
The virtual learning environment <strong>Brightspace</strong> has a LaTeX editor that is similar to the GeoGebra
editor and the simple LaTeX renderer included in this course.
<ol>
<li> In any Brightspace text editor, click on the "Show All Components" button (the ellipsis ...)</li>
<li> Clicking on the Sigma button will show a dropdown with options for equation and symbol insertion. </li>
<li> You can choose the LaTeX editor from the list.</li>
</ol>
<br>
<image src="./imgs/brightspace1.png" alt="LaTeX editor in Brightspace"
style="width:150;padding:1px;border:thin solid black;">
<br>
<br>
</p>
<h3>LaTeX in Google Docs</h3>
<p>
Google Docs allows you to insert equations into your documents, and provides an equation editor to help
you create the mathematics you want. However, if you know a bit of LaTeX, you can speed things up by using
the Google Docs Equation Shortcuts, which are essentially LaTeX commands without the curly braces.
</p>
<p> Google's <a href="https://support.google.com/docs/answer/160749?co=GENIE.Platform%3DDesktop&hl=en" target="_blank">official documentation</a>
on the use of equation shortcuts is very brief, but one enterprising user has come up with an
<a href="http://www.notuom.com/google-docs-equation-shortcuts.html" target="_blank">unofficial cheatsheet</a>.
</p>
<p>Once you have finished typing the shortcut, Google Docs will automatically replace it with the symbol, and create
editable spaces for you to put any required arguments. For example, typing "\frac" within the equation editing region
will cause Google Docs to create a horizontal line, and places for the numerator and denominator.
</p>
<br>
<image src="./imgs/googledocs.png" alt="LaTeX-based shortcut in GoogleDocs"
style="width:50;padding:1px;border:thin solid black;">
<br>
<br>
<p> If you have a Google account, try following these steps:
<ol>
<li>Open a new Google Doc file.</li>
<li>From the <strong>Insert</strong> menu, select <strong>Equation</strong>.</li>
<li>In the text area created, type a simple command, like "\alpha" followed by a space.</li>
<li>Note that your command should be replaced by an appropriate symbol.</li>
</ol>
</p>
<h3>LaTeX on any Web Page</h3>
<p> Any webpage can display mathematics using LaTeX thanks to <a href="https://www.mathjax.org/" target="_blank">MathJax</a>, a JavaScript library. All of the
displayed mathematics in this course is created using LaTeX commands supported by MathJax, so looking at the
source for these pages can provide some hints at how it is used.
</p>
<p>The <a href="https://www.mathjax.org/" target="_blank">MathJax</a> provides instructions on how to include MathJax on any
webpage you author. As described there, including a small script will allow you to insert LaTeX formatted math using
delimiters: backslashes with round brackets for inline math, and backslashes with square brackets for displayed equations.
<div class="dm-code">
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<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>
</pre>
</div>
This results in a web page displaying:
<br>
<div style="padding:10px;border:thick solid grey;">
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}.\]
</div>
</p>
<p> This method can be used on some web-page authoring and blogging platforms that do not offer
explicit LaTeX support. If there is a facility for inserting a script, you can insert the MathJax
code, and start using LaTeX on your page. This is one way to get LaTeX support on <strong>Blogger</strong>-based
blogs, for example.
</p>
<p> MathJax offers support for advanced LaTeX formatting and configuration - please see their docs for more information.
</p>
<h3> LaTeX in Other Documents</h3>
<p>
If you are creating a document in another platform that does not have LaTeX support, you can use online
LaTeX editors and insert the displayed math as an image file into your document.
As described in module 1, editors like <a href="https://www.codecogs.com/latex/eqneditor.php" target="_blank">CodeCogs</a>,
or <a href="https://quicklatex.com/" target="_blank">QuickLaTeX</a> allow you to download a rendered image
of your LaTeX commands. Alternatively, you could use the simple LaTeX renderer <a href="./simpleLaTeX.html">
here</a> and use a screen-capture tool to obtain an image of your equation.
</p>
</div>
</div>
<hr>
<div class="row" id="more">
<div class="col-md-8">
<h2>Learn More</h2>
<p>
Malin Christersson has a <a href="http://www.malinc.se/math/latex/latexontheweben.php" target="_blank">nice page</a> about LaTeX on the web, which
includes some background,
brief descriptions of Wikipedia, Wordpress, and various wiki-engine
support for LaTeX, and a short overview of MathJax.
</p>
<p>
The popular graphing calculator <a href="https://www.desmos.com/calculator" target="_blank">Desmos</a> will automatically render the math you type correctly. But did you know that
it uses LaTeX behind the scenes (via another software library, <a href="http://mathquill.com/" target="_blank">MathQuill</a>), and can even act like a LaTeX editor? In Desmos, type any equation, like
"y=sin(theta)", highlight what you typed and copy it into a plain text editor. You will see that the
result is a set of LaTeX commands that give the typed math that you see in Desmos.
This suggest that if you want to get a bit of LaTeX code but you don't know the commands, you can
type it in Desmos and copy the commands from there.
</p>
</div>
</div>
<hr>
<div class="row" id="check">
<div class="col-md-8">
<h2>Learning Checklist</h2>
<p>
Before moving on to the next module, take a moment to review the learning checklist.
</p>
<p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I tried inserting LaTeX-based math into Geogebra, Brightspace, or Google docs.
</label><br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
I looked at how LaTeX can be used on any web page using MathJax.
</label><br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
I thought about how to insert images created with LaTeX editors into other document types.
</label><br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
I experimented with grabbing LaTeX commands from Desmos.
</label><br>
</div>
</p>
<p> If there were any items in the checklist that you did not complete,
consider reviewing this page again before moving on.
</p>
</div>
</div>
<hr>
<div class="row" id="references">
<div class="col-md-8">
<h2>References</h2>
<p>
Christersson. M. (2019). LaTeX on the Web. webpage. Retrieved March 7, 2019 from
<a href="http://www.malinc.se/math/latex/latexontheweben.php" target="_blank">
http://www.malinc.se/math/latex/latexontheweben.php</a>
</p> <p>
D2L Corporation. (2019). Brightspace Learning Platform. Retrieved on March 18, 2019 from
<a href="https://www.d2l.com/" target="_blank">
https://www.d2l.com/</a>
</p>
<p>
Desmos Inc. (2019). Desmos Graphing Calculator. Software. Retrieved on March 18, 2019 from
<a href="https://www.desmos.com/" target="_blank">
https://www.desmos.com/</a>
</p>
<p>
GeoGebra Group. (2018). GeoGebra Online Math Applications. Retrieved on March 18, 2019 from
<a href="https://www.geogebra.org/?lang=en" target="_blank">
https://www.geogebra.org/?lang=en</a>
</p>
GeoGebra Group. (2018). LaTeX in GeoGebra. Retrieved on March 18, 2019
<a href="https://wiki.geogebra.org/en/LaTeX" target="_blank">
https://wiki.geogebra.org/en/LaTeX</a>
<p>
Google Corp. (2019). Google Docs, G-Suite Application,
<a href="https://www.google.com/docs/about/" target="_blank">
https://www.google.com/docs/about/</a>
</p>
<p>
MathJax Consortium. (2019). MathJax JavaScript Library. Retrieved on March 18, 2019 from
<a href="https://www.mathjax.org/" target="_blank">
https://www.mathjax.org/</a>
</p>
<p>
MathQuill. (2019). MathQuill JavaScript Library. Retrieved on March 18, 2019 from
<a href="https://www.mathquill.com/" target="_blank">
https://www.mathquill.com/</a>
</p>
<p>
Notuom.com (2017). Google Docs Equation Editor Unofficial Shortcuts List / Cheat Sheet. Retrieved on March 19, 2019 from
<a href="http://www.notuom.com/google-docs-equation-shortcuts.html" target="_blank">
http://www.notuom.com/google-docs-equation-shortcuts.html</a>
</p>
<p>
Overleaf Inc. (2019). Overleaf Cloud-based LaTeX Document Preparation Software. Retrieved on March 18, 2019 from
<a href="https://www.overleaf.com/about" target="_blank">
https://www.overleaf.com/about</a>
</p>
</div>
</div>
<hr>
</div>
<!-- /container -->
</main>
<footer class="container">
<div class="btn-group" role="group" aria-label="nav-buttons">
<button type="button" class="btn btn-outline-secondary"><a href="./module2.html">Back</a></button>
<button type="button" class="btn btn-outline-secondary"><a href="./">Home</a></button>
<button type="button" class="btn btn-outline-secondary"><a href="./module4.html">Next</a></button>
</div>
</footer>
<script>
MathJax.Hub.Typeset();
</script>
</html>