3Functions in QaDiL

The QaDiL functions are either control sequences or environments modelled from LaTeX syntax. A control sequence could be

\newcommand{\test}[1]{\textbf{#1}}

An environment is viewed as a function (or control sequence) with a body, such as

\begin{proof}[showhide]
Left as an exercise.
\end{proof}

Each QaDiL function can have an arbitary number of parameters in {} and optional parameters in []. The proof environment above has the optional parameter showhide, which outputs the proof in a show/hide button in html.

3.1 Format of output/inclusion of preamble files

The format of the output is enitrely controlled by inclusion of css files in /css. Initially a project comes with the css file css/iLaTeXen.css. This file contains generic setup for the english language, formatting of environments, fonts etc. It is included with

...
\htmlpath{../../qadil/htmlinclude/}
\includehtml{iLaTeXen}
... other inclusions of files ...
\begin{document}
...
\end{document}

The parameter iLaTeXen points to the file

QaDiL/qadil/htmlinclude/iLaTeXen

This file contains raw html code for inclusion.

3.2 LaTeX and non-LaTeX commands

Below we give a list of the implemented functions. Many of these are standard LaTeX commands with an important difference. An extra optional parameter can be added to control html output. For example, the optional parameter showhide can be added to the (generic) environment definition:

\begin{theorem}[showhide]
This is a complicated theorem.
\end{theorem}

This is a complicated theorem.

It is rarely useful to hide the statement of a theorem in a button. It is more useful to hide the proof in a button in case you want the reader to skip details on first readings.

\begin{proof}[showhide]
This is a complicated proof. Skip on first reading.
\end{proof}

This is a complicated proof. Skip on first reading.

Another optional parameter (emph) is used to emphasize an environment:

\begin{theorem}[emph]
This is another complicated theorem.
\end{theorem}

This is another complicated theorem.

The output is completely controlled through classes in the associated css file iLaTeXen.css.

Entries in css related to showhide, theorem and proof

.Proof:after{
     font-weight: bold;
     content: "QED.";
     float: right;
}


.Proofbutton:before {
    content: "Proof";
}
		      
.proof {
  display: block;
  padding-bottom: 20px;
}

.proof:before {
    content: "Proof.";
    font-style: italic;
}

.proof:after {
  font-weight: bold;
  content: "QED.";
  float: right;
}

.Theorembutton:before {
    content: " Theorem";
}

.Theoremno:before {
    font-weight: bold;
    font-style: normal;
    content: "(" attr(data-count) ")  ";
}

.theorem {
  display: block;
  margin: 12px 0;
}

.theorem:before {
    display:block;
    content: "(" attr(data-count) ") THEOREM.";
    font-weight: bold;
    font-style: normal;
    margin-bottom: 20px;
}

Entries in css related to emph

.emphasize {
  display: block;
  margin: 12px 0;
  font-style: normal;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px; 
  background-color: #f8f2ed;
  padding: 10px;
}

3.3 List of functions

The following control sequences/environments are currently implemented in QaDiL (the ones marked with * are specifically for html output).

align (env)
align* (env)
author (cs)
bye (cs)
caption (cs)
center (env)
changemargin (env)
chapter (cs)
chaptername (cs)
chapterno (cs)
code (env)
corollary (env)
definition (env)
documentclass (cs)
document (env)
emph (optional)
enumerate (env)
eqref (cs)
exercise (env)
example (env)
equation (env)
equation* (env)
figure (env)
footnote (cs)*
frameit (env)
hideinbutton (env)*
hint (env)
html (env)*
htmlpath (cs)*
includegraphics (cs)*
includehtml (cs)*
index (cs)
itemize (env)
label (cs)
lemma (env)
maketitle (cs)
newcommand (cs)
openeyes (env)*
orderquiz (env)*
paraquiz (env)*
proof (env)
proposition (env)
quiz (env)*
quizexercise (env)*
quote (env)
ref (cs)
remark (env)
sage (env)*
section (cs)
section* (cs)
subsection (cs)
textbf (cs)
textcolor (cs)
textit (cs)
texttt (cs)
theorem (cs)
title (cs)
url (cs)*
video (cs)*
vspace (cs)

3.4 Interactive functions (non-LaTeX) functions

Below we document the functions in 3.3, which are specifically designed for output in html:

3.4.1 footnote

We explain the use of footnote by way of the example below. The first parameter is the text snippet for hovering over with the mouse. The second parameter is the content of the footnote (which in fact appears as a nearby bubble).

It is in fact true that \footnote{one and one is two}{You write this as $1 + 1 = 2$. It is formally hard to explain.}.

It is in fact true that one and one is twoYou write this as $1 + 1 = 2$ . It is formally hard to explain..

3.4.2 hideinbutton

The hideinbutton environment is for hiding material in the text, that can perhaps be skipped on a first reading. An example is the button in 3.4.1 above listing entries in a css file. Here is another example.

If you wish, you can read the explanation below.

\begin{hideinbutton}{Explanation}
You can hide elements in \texttt{html}.
\end{hideinbutton}

If you wish, you can read the explanation below.

Explanation

You can hide elements in html.

The function hideinbutton is an interface to the class collapse in Bootstrap. This is hardwired into the python code in QaDiL.

As an educator one often poses an exercise, which is a little too hard, but which can be solved by the student after a few hints. Initially you do not want these hints to be displayed for the students. Here hideinbutton comes in handy.

\begin{theorem}[emph]\label{opencvxcont}
A convex function defined on an open convex subset is continuous.
\end{theorem}

\begin{exercise}[showhide]
Give an example showing that Theorem \ref{opencvxcont} is not true if the convex function
is defined on a closed convex subset.

\begin{hideinbutton}{Hint}
Try to come up with an example like $f: [0, 1] \rightarrow \RR$. Look at
the end point $0$.
    
    \begin{hideinbutton}{Hint}
      Well, try out
      $$
      f(x) =
      \begin{cases}
        1&\text{if } x = 0\\
        x&\text{if } x > 0
      \end{cases}
      $$
    \end{hideinbutton}
\end{hideinbutton}
\end{exercise}

A convex function defined on an open convex subset is continuous.

Give an example showing that Theorem 3.3 is not true if the convex function is defined on a closed convex subset.

Hint

Try to come up with an example like $f: [0, 1] \rightarrow \mathbb{R}$ . Look at the end point $0$ .

Hint

Well, try out

$f(x) = \begin{cases} 1&\text{if } x = 0\\ x&\text{if } x > 0 \end{cases}$

3.4.3 html

The html environment is for inclusion of raw html. The body of the environment is simply sent to the output file with no parsing.

\begin{html}
<br> <br>
<figure> <div class="container"
style="position:relative; left:50%; margin-left:-300px; width: 600px;
height:600px; border:1px solid black;"> <canvas id="overlayniels"
style="z-index:2; position:absolute; left:0px; top:0px;" width="600px"
height="600px"></canvas> <canvas id="sceneniels" style="z-index:1;
position:absolute; left:0px; top:0px;" width="600px"
height="600px"/></canvas> </div> <br>
<figcaption style='position:relative; left:50%; margin-left:-300px;width:600px;'> <b>Interactive graphics: </b>
Explore an area of the Mandelbrot set by clicking and holding down
the mouse while marking a <span style="border:2px; border-style:solid;
border-color:#FF0000; padding:0.25em;">red rectangle</span> for zooming.
Best results come from marking a square. Zooming in on
the Mandelbrot set is an adventure of mathematical visual beauty.
</figcaption>
</figure>
<script src='js/mandelbrot.js'></script> <br>
\end{html}

Interactive graphics: Explore an area of the Mandelbrot set by clicking and holding down the mouse while marking a red rectangle for zooming. Best results come from marking a square. Zooming in on the Mandelbrot set is an adventure of mathematical visual beauty.

3.4.4 htmlpath

htmlpath is a function for defining the location of html files (se 3.4.6 below) for inclusion.

\includehtml{../../qadil/htmlinclude}

3.4.5 includegraphics

See Chapter 4.

3.4.6 includehtml

includehtml is for inclusion of raw html in the beginning of the document. The html files for inclusion is contained in the location defined by htmlpath.

If you wish to use (student) annotation, you use

\includehtml{hypothesis}

for inclusion of the raw html file hypothesis:

<script async defer src="https://hypothes.is/embed.js"></script>

Below is a list of the currently provided raw html files for inclusion in the beginning of the document. These files are all located in QaDiL/qadil/htmlinclude/.

bootstrap3.3.7
bootstrap4.3.1
font-awesome4.7.0
hypothesis
iLaTeXen
index
jquery3.1.0
katex0.10.2
katex0.12.0
metainfo
openclosebuttons
orderquiz
quiz
sagecell
sidebar

3.4.7 openeyes

openeyes is an environment hidden in an open eyes button (displayed to the right). It is supposed to be used for eye opening simple examples/explanations accompanying crucial/difficult passages in an exposition.

\begin{example}
This is an extremely important theorem.    
  \begin{openeyes}
    Which very important theorem am I referring to here?

    \begin{hint}[showhide]
      It can be found near the end of the chapter.
    \end{hint}

  \end{openeyes}
\end{example}

This is an extremely important theorem.

Which very important theorem am I referring to here?

It can be found near the end of the chapter.

3.4.8 orderquiz

This is an environment for drag and drop quizzes. The student has initially $n$ empty boxes to the right and $m$ boxes with content to the left. Here $m\geq n$ . The object is to drag and drop the content boxes from the left to the right, so that they are in the correct order (or one of the correct orders). Here is an example

Below are potential steps in the proof that en odd number squared is odd. Arrange them in order by dragging and dropping from the left to the right to give a correct proof.

Assume that $n=1$ .

Assume that $n = 2 m + 1$ .

Then $n^2 = 4 m^2 + 2 m + 1$ .

Then $n^2 = 4 m^2 + 4 m + 1$ .

Therefore $n^2 = 2(2m^2 + 2 m) + 1$ , which means that $n^2$ is odd, since it can be written as an even number plus one.

Every odd number $n$ can be written as an even number plus one.

The source code for this quiz is below

\begin{frameit}
\begin{orderquiz}
  \question
  Below are potential steps in the proof that en odd number squared is odd. Arrange
  them in order by dragging and dropping from the left to the right to give a correct proof.

\answer % 1
Assume that $n=1$.

\answer % 2
Assume that $n = 2 m + 1$.

\answer % 3
Then $n^2 = 4 m^2 + 2 m + 1$.

\answer %4
Then $n^2 = 4 m^2 + 4 m + 1$.

\answer %5
Therefore $n^2 = 2(2m^2 + 2 m) + 1$, which means that $n^2$ is odd, since
it can be written as an even number plus one.

\answer %6
Every odd number $n$ can be written as an even number plus one.

\expected{4}

\case{(is 6245)}{T}
Yes, precisely

\case{(contains 1)}{F}
Why do you include the assumption $n=1$? This is just a specific odd number.

\case{(and (contains 2)(contains 3))}{F}
Please check. Is $(2 m + 1)^2 = 4 m^2 + 2 m + 1$?

\default
Try again!
\end{orderquiz}
\end{frameit}

As you can see, the content boxes are listed in their order after the statement of the question. The number of blank boxes to the right $n$ is input to

\expected{n}

The last part of the orderquiz is concerned with giving specific feedback based on the (many) combinations of answers. The matching of the answers with feedback is given by S-expressions (inspired by Lisp). This idea was introduced and programmed in javascript by Johannes Jensen. Some other neat examples of S-expressions are

\case{(not (is 1234))}
  Good that you did not just pick the first four.
\case{(is 1***)}
  Why do you start with $n=1$?
\case{(order 5 6)}
  Wrong order. The box \texttt{Every odd number $n$ can be written as an even number plus one}
is not placed right.

Let me at this point refer to the documentation in Danish for further information on S-expressions.

3.4.9 paraquiz

The paraquiz environment is similar to the orderquiz environment, except that the blank boxes appear in a paragraph like below. There is no need for defining the number of blank boxes. They are implicitly listed in the paragraph (of text). Here is an example along with its source code.

$\in$

, but

$\not\in$

. This exercise actually has

possible correct solutions if $\{1, 2, 3\}$ is in the second empty box and $\{4, 5, 6\}$ in the fourth empty box.

$\{1, 2, 3\}$

$\{4, 5, 6\}$

$0$

$1$

$3$

$6$

$7$

\begin{frameit}
\begin{paraquiz}
  \question
  \box$\in$\box, but \box$\not\in$\box. This exercise actually has \box possible correct solutions
if $\{1, 2, 3\}$ is in the second empty box and $\{4, 5, 6\}$ in the fourth empty box.
  \answer
  $\{1, 2, 3\}$
  \answer
  $\{4, 5, 6\}$
  \answer
  $0$
  \answer
  $1$
  \answer
  $3$
  \answer
  $6$
  \answer
  $7$

  \case{(is 41326)}{T} 
  \green{Correct!}
  \case{(is 41526)}{T} 
  \green{Correct!}
  \case{(is 41726)}{T} 
  \green{Correct!}
  \case{(is 51326)}{T} 
  \green{Correct!}
  \case{(is 51426)}{T} 
  \green{Correct!}
  \case{(is 51726)}{T} 
  \green{Correct!}

  \default
  Nope. Try again!
\end{paraquiz}
\end{frameit}

Let me at this point once more refer to the documentation in Danish.

3.4.10 quiz

This the basic quiz environment for defining mutiple choice quizzes with multiple true/false answers. The example below is hopefully self explanatory.

\begin{quizexercise}[showhide]
\begin{quiz}
\question
Suppose that 
$$
A = \begin{pmatrix} 1 & 0 & 0\\ 0 & 1 & 0 \end{pmatrix}, \quad
B = \begin{pmatrix} 1 & 0\\ 0 & 1\end{pmatrix}, \quad
C = \begin{pmatrix} 1 & 1 & 1\end{pmatrix}, \quad\text{and}\quad
D = \begin{pmatrix} 1 \\ 1 \\ 1\end{pmatrix}
$$
Which of the matrix products below make sense?
\answer{T}
$B A$
\answer{F}
$A B$
\answer{T}
$C D$
\answer{T}
$D C$
\answer{F}
$C A$
\answer{T}
$A D$
\end{quiz}
\end{quizexercise}

Suppose that

$A = \begin{pmatrix} 1 & 0 & 0\\ 0 & 1 & 0 \end{pmatrix}, \quad B = \begin{pmatrix} 1 & 0\\ 0 & 1\end{pmatrix}, \quad C = \begin{pmatrix} 1 & 1 & 1\end{pmatrix}, \quad\text{and}\quad D = \begin{pmatrix} 1 \\ 1 \\ 1\end{pmatrix}$ Which of the matrix products below make sense?

$B A$

$A B$

$C D$

$D C$

$C A$

$A D$

3.4.11 quizexercise

See use of quizexercise in 3.4.10 above.

3.4.12 sage

Sage is the computer algebra plugin for QaDiL. A lot of thanks to the developers of SageCell for making this plugin possible!

\begin{sage}
plot(sin(x) + cos(2*x), (x, 0, 2*pi))    
\end{sage}

QaDiL is set up only with Sage og python. You can modify this in the html include file sagecell:

<script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>

<script>
  window.MathJax = 1 /* Disable MathJax */
  sagecell.makeSagecell({
  inputLocation: ".sage",
  evalButtonText: "Compute",
  languages : ["sage", "python"],
  hide : ["permalink"] 
  });
</script>

Notice in particular that cells can be linked so that computations are remembered in the document (see links below). This is done by adding

linked: true,

above.

See SageCell and also GitHub.

The following languages are available:

Sage
Gap
GP
HTML
Macaulay2
Maxima
Octave
Python
R
Singular

3.4.13 url

The mathematical rockstar \url{Carl Friedrich Gauss}{https://en.wikipedia.org/wiki/Carl_Friedrich_Gauss} used the method
to determine the orbit for the asteroid \url{Pallas}{https://en.wikipedia.org/wiki/2_Pallas}.

The mathematical rockstar Carl Friedrich Gauss used the method to determine the orbit for the asteroid Pallas.