Skip to content

Commit 4c1b8b8

Browse files
committed
website start
0 parents  commit 4c1b8b8

File tree

6 files changed

+322
-0
lines changed

6 files changed

+322
-0
lines changed

assets/cis.png

2.1 KB
Loading

assets/cis_key.png

4.52 KB
Loading

assets/zsolve.png

9.79 KB
Loading

functions.html

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Classpad programming</title>
6+
<meta name="description" content="Classpad programming">
7+
<meta name="viewport" content="width=device-width">
8+
<title>MathJax example</title>
9+
<script>
10+
MathJax = {
11+
tex: { macros: {cis: "\\mathop{\\rm{cis}}\\nolimits"} },
12+
chtml: { displayAlign: 'center', scale: 1.1 }
13+
}
14+
</script>
15+
<script id="MathJax-script" async
16+
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
17+
</script>
18+
19+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
20+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
21+
22+
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
23+
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
24+
25+
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
26+
27+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
28+
<link rel="stylesheet" href="style.css">
29+
</head>
30+
31+
<script>
32+
$(document).ready(function(){
33+
$(".html-code").hide();
34+
});
35+
</script>
36+
37+
<!-- Warning: This page requires javascript to render the math. -->
38+
39+
<!-- This is an example of a function. Functions are more restricted than programs - for example, we can't use any statements (If, For, WhileLp, etc.) or functions exclusive to the program environment<br>
40+
A function has a benefit over programs in that they return their value just like any other function. In a program, they return '<pre>done</pre>', but a function will return the result.<br>
41+
This means we don't need to use a PrintNatural to see the result or store the result in a fixed, unchanging variable defined in a program.<br><br> -->
42+
<body style="padding: 1%;">
43+
<center>
44+
<h1>Functions guide</h1>
45+
</center>
46+
47+
<a class="link" style="left:1%; top: 1%;" href="https://classpad.github.io">🔗 To classpad homepage</a><br>
48+
<a class="link" style="left:1%; top: 1%;" href="https://npc-strider.github.io/maths">🔗 To MATHS page</a><br>
49+
<a class="link" style="left:1%; top: 1%;" href="https://npc-strider.github.io">🔗 To personal homepage</a><br>
50+
<br>
51+
We define a new function with the <pre>Define</pre> command.<br>
52+
<pre>
53+
Define f(x,y,z,[...]) = [Function(x,y,z,[...])]
54+
</pre>
55+
The result of <pre>Function</pre> is returned directly to the result line.
56+
57+
<hr>
58+
<div style="text-align: center;"><b>Example function: <pre>cis(θ)</pre></b></div>
59+
<hr>
60+
Firstly, a simple example.<br>
61+
You could use classpad-defined functions, such as <pre>compToRect()</pre> to convert from polar to rectangular form.<br>
62+
Alternatively, you could use Euler's formula, \(z = r\cdot e^{i\theta}\), but this leaves an opportunity for error if you forget the \(i\). Additionally, this form isn't taught in WA and most questions use \(\cis\).<br><br>
63+
So let's define \(\cis\) with a function!
64+
<table class="code"><tbody>
65+
<tr><td></td><td><pre class="lb">Define cis(x)=cos(x)+i*sin(x)</pre></td>
66+
</tbody></table><br>
67+
<div style="text-align: center;">
68+
<img src="./assets/cis.png">
69+
</div>
70+
Now whenever we use <pre>cis</pre>, we call this function.<br><br>
71+
72+
To make this function useful, we should add it as a shift key in the <pre>System</pre> tab. (you can add shift-keys for anything, even text which doesn't evaluate to a defined function.)
73+
<div style="text-align: center;">
74+
<img src="./assets/cis_key.png">
75+
</div>
76+
77+
<hr>
78+
<div style="text-align: center;"><b>Example function: De Moivre root finder</b></div>
79+
<hr>
80+
Let's find the roots of \(Z^5=32i\).<br>
81+
\begin{align}
82+
Z^5 &=32i\\
83+
&=32\cis\left(\frac{\pi}{2}\right)\\
84+
\implies Z_0&=\left[32\cis\left(\frac{\pi}{2}\right)\right]^{\frac{1}{5}}\\
85+
Z_0&= 2\cis\left(\frac{\pi}{10}\right)\\
86+
\implies Z_1 &= 2\cis\left(\frac{\pi}{10}+\frac{2\pi}{5}\right) = 2\cis\left(\frac{\pi}{2}\right)\\
87+
Z_2 &= 2\cis\left(\frac{\pi}{10}+2\cdot\frac{2\pi}{5}\right) = 2\cis\left(\frac{9\pi}{10}\right)\\
88+
Z_3 &= 2\cis\left(\frac{\pi}{10}-\frac{2\pi}{5}\right) = 2\cis\left(-\frac{3\pi}{10}\right)\\
89+
Z_4 &= 2\cis\left(\frac{\pi}{10}-2\cdot\frac{2\pi}{5}\right) = 2\cis\left(-\frac{7\pi}{10}\right)\\
90+
\end{align}
91+
This is a tedious task, with a lot of steps (adding for each power), which results in opportunity to make mistakes. This is a good opportunity/case to automate.<br>
92+
A function which does this tedious process automatically can help us verify if our working out is correct and will save time. (As always, we still need to show working for marks!)<br><br>
93+
94+
This function, <pre>zroot</pre>, returns the De Moivre roots of some number, raised to the power <pre>p</pre>, equal to the complex number <pre>z</pre><div class="">
95+
\[Z^p = z\]
96+
Essentially, it returns the values of \(Z\), \(Z\in\mathbb{C} \).<br>
97+
More specifically, it returns a matrix containing these solutions in polar form on the left column and in rectangular form in the right column.<br><br>
98+
<div style="text-align: center;">
99+
<img src="./assets/zsolve.png">
100+
</div>
101+
<hr>
102+
<table class="code"><tbody>
103+
<tr><td></td><td><pre class="lb">Define zsolve(p,z)=augment(listToMat(M*augment(seq(Cis(θ+n),n,0,π,d),seq(Cis(θ+n),n,-d,-π,-d))),listToMat(M*augment(seq(e^(i(θ+n)),n,0,π,d),seq(e^(i(θ+n)),n,-d,-π,-d))))|{θ=arg(z^(1/p)),M=(re(z)^2+im(z)^2)^(1/(2p)),d=2π/p}</pre></td>
104+
</tbody></table><br>
105+
Okay, this looks very complicated. It's a mess of brackets and functions. Let's re-format it so it's more readable.
106+
<div style="text-align: center;">
107+
<div class="html-code" style="display: inline-block; text-align: left">
108+
<table class="code">
109+
<tbody>
110+
<tr><td></td><td><pre>Define zsolve(p,z)=augment(</pre></td>
111+
<tr><td></td><td><pre> listToMat(</pre></td>
112+
<tr><td></td><td><pre> M*augment(</pre></td>
113+
<tr><td></td><td><pre> seq(Cis(θ+n),n,0,π,d),</pre></td>
114+
<tr><td></td><td><pre> seq(Cis(θ+n),n,-d,-π,-d)</pre></td>
115+
<tr><td></td><td><pre> ),</pre></td>
116+
<tr><td></td><td><pre> ),</pre></td>
117+
<tr><td></td><td><pre> listToMat(</pre></td>
118+
<tr><td></td><td><pre> M*augment(</pre></td>
119+
<tr><td></td><td><pre> seq(e^(i(θ+n)),n,0,π,d),</pre></td>
120+
<tr><td></td><td><pre> seq(e^(i(θ+n)),n,-d,-π,-d)</pre></td>
121+
<tr><td></td><td><pre> )</pre></td>
122+
<tr><td></td><td><pre> )</pre></td>
123+
<tr><td></td><td><pre>)|{</pre></td>
124+
<tr><td></td><td><pre> θ=arg(z^(1/p)),</pre></td>
125+
<tr><td></td><td><pre> M=(re(z)^2+im(z)^2)^(1/(2p)),</pre></td>
126+
<tr><td></td><td><pre> d=2π/p</pre></td>
127+
<tr><td></td><td><pre>}</pre></td>
128+
</tbody>
129+
</table>
130+
</div>
131+
<br><iframe
132+
class="carbon-code"
133+
src="https://carbon.now.sh/embed/R3nkjHIiMBEjIinIyZde"
134+
style="width: 680px; height: 398px; border:0; transform: scale(1); overflow:hidden;"
135+
sandbox="allow-scripts allow-same-origin">
136+
</iframe><br>
137+
<input id="toggle-code" type="checkbox" data-on="Color view" data-off="HTML Table" checked data-toggle="toggle" data-height="25" data-width="140">
138+
<script>
139+
$(function() {
140+
$('#toggle-code').change(function() {
141+
$('.carbon-code').toggle();
142+
$('.html-code').toggle();
143+
});
144+
});
145+
</script>
146+
</div><br>
147+
If we take a look at the code line-by-line, it's actually easy to understand. It appears big because we're limited in what we can store in variables, so there's a lot of duplicated code. (In this instance, we can't store lists in variables using the "with" notation, so we need to repeat some code).<br>
148+
<a style="font-size:x-small;">*Sorry - I can't use highlight.js to make the code below colorful. The above image was generated by Carbon so I can't split it into a table.</a>
149+
<table class="code">
150+
<thead>
151+
<tr>
152+
<th colspan="3", style="text-align:center">Function walkthrough</th>
153+
</tr>
154+
</thead>
155+
<tbody>
156+
<tr><td></td><td><pre>Define zsolve(p,z)=augment(</pre></td> <td><pre class="comment">//Defines our custom command. augment() joins two arrays together (the polar and rectangular array columns)</pre></td></tr>
157+
<tr><td></td><td><pre> listToMat(</pre></td> <td><pre class="comment">//listToMat() converts a list (generated by seq()) to a matrix so it looks better.</pre></td></tr>
158+
<tr><td></td><td><pre> M*augment(</pre></td> <td><pre class="comment">//We multiply the list (below) by M, The magnitude of the zeroth solution. M is multiplied to all values in the augmented (joined) list. augment() concatenates two lists.</pre></td></tr>
159+
<tr><td></td><td><pre> seq(Cis(θ+n),n,0,π,d),</pre></td> <td><pre class="comment">//seq() is a function which generates a list based on a sequence. For example, seq(x^2,x,0,6,2) => {0,4,16,36}. Here we generate a list of polar coordinates with angles from 0 to π, with a constant θ added to n, a number which is generated from the seq() function. We increment each step by d, a constant. Also note the capital 'Cis' - this prevents it from being evaluated into rectangular form if cis() is defined. Cis() must be undefined to display in this form.</pre></td></tr>
160+
<tr><td></td><td><pre> seq(Cis(θ+n),n,-d,-π,-d)</pre></td> <td><pre class="comment">//Similar to the last line, except we increment by -d, starting at -d (to prevent a 'double up' of Cis(θ+0)) and counting to -π</pre></td></tr>
161+
<tr><td></td><td><pre> ),</pre></td> <td><pre class="comment">//Closing bracket for augment. We augment the sequence for positive angles and negative angles into one list.</pre></td></tr>
162+
<tr><td></td><td><pre> ),</pre></td> <td><pre class="comment">//Closing bracket for listToMat</pre></td></tr>
163+
<tr><td></td><td><pre> listToMat(</pre></td> <td><pre class="comment">//We repeat the process again. This time, we generate the rectangular form column.</pre></td></tr>
164+
<tr><td></td><td><pre> M*augment(</pre></td> <td><pre class="comment"></pre></td></tr>
165+
<tr><td></td><td><pre> seq(e^(i(θ+n)),n,0,π,d),</pre></td> <td><pre class="comment">//Notice how we do not use Cis(), but Euler's formula to evaluate. We can use cis(θ+n) or cos(θ+n)+i*sin(θ+n), but Euler's formula is compact and always works (unlike cis() which might not be defined)</pre></td></tr>
166+
<tr><td></td><td><pre> seq(e^(i(θ+n)),n,-d,-π,-d)</pre></td> <td><pre class="comment"></pre></td></tr>
167+
<tr><td></td><td><pre> )</pre></td> <td><pre class="comment"></pre></td></tr>
168+
<tr><td></td><td><pre> )</pre></td> <td><pre class="comment"></pre></td></tr>
169+
<tr><td></td><td><pre>)|{</pre></td> <td><pre class="comment">//This pipe or bar character is documented as the "with" operator. For example, (2x)|{x=5} evaluates to 10. We store constants within the curly braces to make things neater to represent.</pre></td></tr>
170+
<tr><td></td><td><pre> θ=arg(z^(1/p)),</pre></td> <td><pre class="comment">//This gets the phase of the zeroth solution. The zeroth solution is always the pth root of z.</pre></td></tr>
171+
<tr><td></td><td><pre> M=(re(z)^2+im(z)^2)^(1/(2p)),</pre></td> <td><pre class="comment">//This is the magnitude. Simple stuff, we multiply the half by 1/p to skip a step (because the root is z^(1/p) => M^(1/p))</pre></td></tr>
172+
<tr><td></td><td><pre> d=2π/p</pre></td> <td><pre class="comment">//This is our angle difference. Remember - you need to state this for one mark.</pre></td></tr>
173+
<tr><td></td><td><pre>}</pre></td> <td><pre class="comment">//Don't forget to close your brackets! tada!</pre></td></tr>
174+
</tbody>
175+
</table><br>
176+
<center>
177+
For complex applications, a function isn't suitable. We need to use a <b>program</b><br>
178+
When I develop a guide for programs (If I get around to it), the link will be here!
179+
</center>
180+
181+
<a class="link" style="left:1%; top: 1%;" href="https://classpad.github.io">🔗 To classpad homepage</a><br>
182+
<a class="link" style="left:1%; top: 1%;" href="https://npc-strider.github.io/maths">🔗 To MATHS page</a><br>
183+
<a class="link" style="left:1%; top: 1%;" href="https://npc-strider.github.io">🔗 To personal homepage</a><br>
184+
185+
</body>
186+
</html>

index.html

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Classpad programming</title>
6+
<meta name="description" content="Classpad programming">
7+
<meta name="viewport" content="width=device-width">
8+
<title>MathJax example</title>
9+
<script>
10+
MathJax = {
11+
tex: { macros: {cis: "\\mathop{\\rm{cis}}\\nolimits"} },
12+
chtml: { displayAlign: 'center', scale: 1.1 }
13+
}
14+
</script>
15+
<script id="MathJax-script" async
16+
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
17+
</script>
18+
19+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
20+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
21+
22+
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
23+
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
24+
25+
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
26+
27+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
28+
<link rel="stylesheet" href="style.css">
29+
</head>
30+
31+
<script>
32+
$(document).ready(function(){
33+
$(".html-code").hide();
34+
});
35+
</script>
36+
37+
<!-- Warning: This page requires javascript to render the math. -->
38+
<body style="padding: 1%;">
39+
<center>
40+
<h1>Classpad resources</h1>
41+
<h4>A compilation of classpad programs and functions used by me in Year 12!</h4>
42+
</center>
43+
44+
<div class="card">
45+
<div class="card-body">
46+
<center><b>Why am I revealing this content?</b></center>
47+
Using programs and eActivities can solve 'recurring' or 'expected' questions, which saves a large amount of time during a test that can be spent on harder/novel/unique questions.<br>
48+
Additionally, classpad programs can be an extension to your notes. The classpad has a capacity of 5.5 MB for eActivities alone - in practice, this translates to infinitely many pages of notes. Unlike the two pages of hardcopy notes you bring into a test or exam, the 'notes' of the classpad are interactive.<br>
49+
Personally, for me the classpad was a good way to put my programming skills to use.
50+
</div>
51+
</div>
52+
53+
<div class="badges" style="text-align: center; margin-bottom: 1em;">
54+
<img src="https://img.shields.io/github/last-commit/classpad/classpad.github.io/master?style=flat-square" alt="Last updated">
55+
<img src="https://hitcounter.pythonanywhere.com/count/tag.svg?url=http%3A%2F%2Fclasspad.github.io%2F" alt="Hits">
56+
<img src="https://img.shields.io/github/stars/classpad/classpad.github.io?style=flat-square" alt="Github stars">
57+
</div>
58+
59+
<div class="card">
60+
<div class="card-body">
61+
<u>Files/resources</u><br>
62+
<a class="link" style="left:1%; top: 1%;" href="https://github.com/classpad/classpad-programs/raw/master/spec_method_programs-(eActivity).xcp"><b>DOWNLOAD</b>: Year 12 classpad programs (All compiled into one eActivity)</a><br>
63+
* Last updated: 2021-01-15<br>
64+
Connect your classpad to a computer and copy this eActivity file to the autoimport directory of the classpad.<br>
65+
See section 15-2 of the classpad manual for more information on transferring files.<br>
66+
* Report any bugs or suggest ideas to the classpad github repository:<br>
67+
<a class="link" style="left:1%; top: 1%;" href="https://github.com/classpad/classpad-programs">Github repo</a><br>
68+
<img src="https://img.shields.io/github/last-commit/classpad/classpad-programs/master?style=flat-square" alt="Last updated">
69+
<img src="https://img.shields.io/github/stars/classpad/classpad-programs?style=flat-square" alt="Github stars"><br>
70+
71+
<br>
72+
73+
<u>Guides</u><br>
74+
<a class="link" style="left:1%; top: 1%;" href="https://classpad.github.io/functions">Classpad functions guide</a><br>
75+
</div>
76+
</div>
77+
<br>
78+
I'm going to make this site look better later (or never...)<br>
79+
80+
<a class="link" style="left:1%; top: 1%;" href="https://npc-strider.github.io">🔗 To personal homepage</a><br>
81+
<a class="link" style="left:1%; top: 1%;" href="https://npc-strider.github.io/maths">🔗 To MATHS page</a><br>
82+
<a class="link" style="left:1%; top: 1%;" href="https://atar-wace-archive.github.io/">🔗 To ATAR/WACE archive [past papers archive]</a><br>
83+
84+
</body>

style.css

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
pre {
2+
display: inline;
3+
}
4+
5+
pre.comment, pre.lb
6+
{
7+
white-space: pre-wrap;
8+
white-space: -moz-pre-wrap;
9+
white-space: -pre-wrap;
10+
white-space: -o-pre-wrap;
11+
word-wrap: break-word;
12+
}
13+
pre.comment {
14+
color: green;
15+
}
16+
17+
table.code {
18+
margin-left: 1%;
19+
margin-right: 1%;
20+
counter-reset: rowNumber+1;
21+
}
22+
23+
table.code tr:not(:first-child) {
24+
counter-increment: rowNumber;
25+
}
26+
27+
table.code tr td:first-child:before {
28+
content: counter(rowNumber, decimal-leading-zero);
29+
color: #777;
30+
font-family: monospace;
31+
}
32+
33+
table.code,
34+
table.code td {
35+
border-left: 1px solid #333;
36+
border-right: 1px solid #333;
37+
padding-right: 0.25em;
38+
padding-left: 0.25em;
39+
padding-top: 0;
40+
padding-bottom: 0;
41+
vertical-align: top;
42+
}
43+
44+
table.code tr:nth-child(odd) td {
45+
background-color: #EEE;
46+
}
47+
48+
table.code thead,
49+
table.code tfoot {
50+
background-color: #333;
51+
color: #fff;
52+
}

0 commit comments

Comments
 (0)