-
Notifications
You must be signed in to change notification settings - Fork 0
/
module1.html
313 lines (302 loc) · 15.8 KB
/
module1.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
<!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 1: Getting Started </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">Getting Started</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>Identify some online LaTeX editors.</li>
<li>Practice using basic LaTeX commands using an online editor.</li>
<li>Learn how to use outputs from online editors in electronic documents.</li>
</ul>
</p>
</div>
</div>
<hr>
<div class="row" id="before">
<div class="col-md-8">
<h2>Before You Start</h2>
<p> Take a moment and search online for "latex editor" and "latex equation editor."
Your search will likely reveal a long and possibly confusing list of options: some
LaTeX authoring tools are downloadable applications, some are web-based document preparation
systems, some are online equation editors.
</p>
<p> It is worthwhile to look a bit further into these options, but none are required
to get started using LaTeX. One of the later modules will have some suggestions about
using Overleaf, one of the many LaTeX authoring tools available as a free cloud-based
service.
</p>
</div>
</div>
<hr>
<div class="row" id="main">
<div class="col-md-8">
<h2>Getting Started</h2>
The simple LaTeX renderer below allows you to input LaTeX commands and see
the resulting displayed math. Try inputting the following statements - incorrect statements
will cause the command to display as red text in the box below the input field.
<br><br>
<ol>
<li> A polynomial.</li>
<div class="dm-code">
<pre>
x^3-2x^2+5x-1
</pre>
</div>
<li> A fraction.</li>
<div class="dm-code">
<pre>
\frac{5}{9}
</pre>
</div>
<li> A rational expression. </li>
<div class="dm-code">
<pre>
\frac{x^2-3x+2}{x-1}
</pre>
</div>
</ol>
<!-- Small LaTeX editor using MathJaX -->
<div style="padding:5px;border:thick solid grey;" id='miniEditor'>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Input LaTeX:</span>
</div>
<textarea id='latexInput' class="form-control" aria-label="Input LaTeX"></textarea>
<button class="btn btn-secondary" onClick='getRenderedLatex()' role="button">Try It</button>
</div>
<br>
<div id="renderedLatex" tyle="text-align:center;"> </div>
</div>
<br>
<!-- end of LaTeX editor -->
Let's try a couple more, using the editor above.
<br><br>
<ol>
<li> A summation. </li>
<div class="dm-code">
<pre>
\sum_{i=1}^n{i} = \frac{n(n+1)}{2}
</pre>
</div>
<li> A trigonometric identity. </li>
<div class="dm-code">
<pre>
\sin^2(x) +\cos^2(x) = 1
</pre>
</div>
</ol>
<h3>Better Editors </h3>
<p>
The simple editor above is an example of a LaTeX equation editor - it cannot be
used to create full LaTeX documents, only to render small snippets of LaTeX code.
</p>
<p> LaTeX equation editors, although limited, are still very useful, both for
learning how to create simple LaTeX commands. The resulting rendered math
can usually be downloaded or captured and inserted as an image into documents
that do not offer native LaTeX support (i.e. copy and paste into Word or PowerPoint).
</p>
<p>Take a moment to try the examples above in some other online LaTeX equation
editors, like <a href="https://www.codecogs.com/latex/eqneditor.php">CodeCogs</a>,
or <a href="https://quicklatex.com/">QuickLaTeX</a>.
</p>
<p>
<a href="https://www.codecogs.com/latex/eqneditor.php">CodeCogs</a> features an interface
that allows you to use a typical equation editor interface, allowing you to
use symbols that you don't know the LaTeX commands - allowing you to discover
new commands. <a href="https://quicklatex.com/">QuickLaTeX</a> supports more
complex LaTeX syntax, but requires you to know which commands to use. Both
editors are free to use, and allow you to download the rendered math as images.
</p>
<h3> Using Images from Equation Editors </h3>
<p> When you create images using these editors, you can obtain the image by:
<ul>
<li> Downloading the image (for CodeCogs or QuickLaTeX) using the option provided; </li>
<li> Right-clicking to download or copy the image (for CodeCogs or QuickLaTeX); </li>
<li> Using a screen capture tool to grab the image (for the simple editor on this page, CodeCogs or QuickLaTeX).</li>
</ul>
</p>
<div style="padding:10px;border:thin solid black;">
<p><strong>Exercise 1:</strong> Create a document in a word processor and record each of the LaTeX commands that
you have tried. Alongside each command, include an image of the math that the command creates from one of the editors
you used in this module. Over time, this document will grow into your very-own "LaTeX Cheat Sheet."
</p>
</div>
</div>
</div>
<hr>
<div class="row" id="more">
<div class="col-md-8">
<h2>Learn More</h2>
<p>
Take a look at some of the LaTeX examples on the <a href="https://en.wikibooks.org/wiki/LaTeX/Mathematics" target="_blank">
LaTeX wikibooks page</a>, choose some of them to try either using the editor on this page, CodeCogs, or
QuickLaTeX.
</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 completed an online search to see the variety of LaTeX editors available on the web.
</label><br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
I used the simple editor on this page to try out some LaTeX commands.
</label><br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
I tried some of these examples in the CodeCogs and QuickLaTeX editors.
</label><br>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
I created a document that shows LaTeX commands and the rendered math from one of the editors.
</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>
LaTeX/Mathematics. (2019, March 8). Wikibooks, The Free Textbook Project. Retrieved March 16, 2019 from <a href="https://en.wikibooks.org/w/index.php?title=LaTeX/Mathematics&oldid=3522971" target="_blank">https://en.wikibooks.org/w/index.php?title=LaTeX/Mathematics&oldid=3522971.</a>
</p>
<p>
CodeCogs. (2015). CodeCogs Equation Editor. online software. Retrievied March 16, 2019 from <a href="https://www.codecogs.com/latex/eqneditor.php" target="_blank">https://www.codecogs.com/latex/eqneditor.php</a>
</p>
<p>
Holoborodko, P. (2018). QuickLaTeX. online software. Retrievied March 16, 2019 from <a href="https://quicklatex.com/" target="_blank">https://quicklatex.com/</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="./module0.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="./module2.html">Next</a></button>
</div>
</footer>
<script>
function renderAllLatex(){
MathJax.Hub.Typeset();
}
function getRenderedLatex(){
let equationToRender = document.getElementById("latexInput").value;
let html = "<div style='padding:10px;border:thin solid black;'>";
html += "\\[ \\Large{ " + equationToRender + "} \\]</div>";
document.getElementById("renderedLatex").innerHTML = html;
renderAllLatex();
}
//set default
document.getElementById("latexInput").value = "\\LaTeX";
getRenderedLatex();
renderAllLatex();
</script>
</html>