teaching with live-updating code examples

teaching with live-updating code examples

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 1258 bytes --]

I am preparing a set of lectures for a class teaching HTML, CSS, and
javascript ot humanities students.

I would like to have slides with a simple code editor on one side, and the
results of the code on another:

------------------------------------------------------------------------
| [1,2,3].map(function(x){return x + 1;})   |   Array[2,3,4] |
------------------------------------------------------------------------

or in other cases

------------------------------------------------------------------------
|<h1>Hello</h1>    | Hello in appropriate format      |
-------------------------------------------------------------------------

The former, at least, is pretty straightforward to do in CodeMirror with
the klipse plugin.  However, codemirror integrates poorly with reveal.js,
which is how I normally export my slides.

So, I'm looking for other solutions. What do other people do in lecture?
I'd really like to be able to keep all my notes and code in a single org
file, if at all possible.  I'm willing to switch away from reveal, but
since this is a course about the web I'd really like to kep it in an HTML
format if I can.
On the other hand if you have a great solution I'd love to hear about it no
matter what!


Thanks everyone!

Matt

[-- Attachment #2: Type: text/html, Size: 1529 bytes --]

Re: teaching with live-updating code examples

[Eric S Fraga]

[-- Attachment #1: Type: text/plain, Size: 611 bytes --]

On Thursday,  8 Dec 2016 at 18:07, Matt Price wrote:
> I am preparing a set of lectures for a class teaching HTML, CSS, and
> javascript ot humanities students.
>
> I would like to have slides with a simple code editor on one side,
> and the results of the code on another:

[...]

> So, I'm looking for other solutions. What do other people do in
> lecture?

I do this all the time with code snippets but I use beamer which
supports columns.  I don't think it's easy to do in reveal.js from
within org, however.

-- 
: Eric S Fraga (0xFFFCF67D), Emacs 26.0.50.1, Org release_9.0.1-49-ga43eac

[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 162 bytes --]

Re: teaching with live-updating code examples

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 942 bytes --]

On Fri, Dec 9, 2016 at 1:33 AM, Eric S Fraga <e.fraga@ucl.ac.uk> wrote:

> On Thursday,  8 Dec 2016 at 18:07, Matt Price wrote:
> > I am preparing a set of lectures for a class teaching HTML, CSS, and
> > javascript ot humanities students.
> >
> > I would like to have slides with a simple code editor on one side,
> > and the results of the code on another:
>
> [...]
>
> > So, I'm looking for other solutions. What do other people do in
> > lecture?
>
> I do this all the time with code snippets but I use beamer which
> supports columns.  I don't think it's easy to do in reveal.js from
> within org, however.
>

I think I am getting closer, actually (details soon, when I have a fully
working  solution)).

Meanwhile, I'd love to see an example in beamer -- I don't know anything
about beamer myself and this might be an opportunity to learn.

Thanks!


> --
> : Eric S Fraga (0xFFFCF67D), Emacs 26.0.50.1, Org release_9.0.1-49-ga43eac
>

[-- Attachment #2: Type: text/html, Size: 1623 bytes --]

Re: teaching with live-updating code examples

[Eric S Fraga]

[-- Attachment #1.1: Type: text/plain, Size: 503 bytes --]

On Friday,  9 Dec 2016 at 16:42, Matt Price wrote:
> I think I am getting closer, actually (details soon, when I have a
> fully working  solution)).

I look forward to seeing it!

> Meanwhile, I'd love to see an example in beamer -- I don't know
> anything about beamer myself and this might be an opportunity to
> learn. 

Attached are an org file with resulting beamer (using default rather
simple style).

-- 
: Eric S Fraga (0xFFFCF67D), Emacs 26.0.50.1, Org release_9.0.1-49-ga43eac

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #1.2: cols.org --]
[-- Type: text/x-org, Size: 547 bytes --]

#+options: toc:nil
#+startup: beamer
* The slide
** The code                                             :B_block:BMCOL:
:PROPERTIES:
:BEAMER_col: 0.7
:BEAMER_env: block
:END:
Define an inline function:
#+name: thecode
#+begin_src octave :exports both
  f = @(x) (x(1)-3)^2+(x(2)-5)^2+8;
  f([5, 6])
#+end_src 
** The results                                          :B_block:BMCOL:
:PROPERTIES:
:BEAMER_col: 0.3
:BEAMER_env: block
:END:
The result from applying that function to the vector [5, 6]:

#+results: thecode
: 13

[-- Attachment #1.3: cols.pdf --]
[-- Type: application/pdf, Size: 48459 bytes --]

[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 162 bytes --]

Re: teaching with live-updating code examples

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 603 bytes --]

Thanks, Eric.

On Fri, Dec 9, 2016 at 12:19 PM, Eric S Fraga <e.fraga@ucl.ac.uk> wrote:

> On Friday,  9 Dec 2016 at 16:42, Matt Price wrote:
> > I think I am getting closer, actually (details soon, when I have a
> > fully working  solution)).
>
> I look forward to seeing it!
>
> > Meanwhile, I'd love to see an example in beamer -- I don't know
> > anything about beamer myself and this might be an opportunity to
> > learn.
>
> Attached are an org file with resulting beamer (using default rather
> simple style).
>
> --
> : Eric S Fraga (0xFFFCF67D), Emacs 26.0.50.1, Org release_9.0.1-49-ga43eac
>

[-- Attachment #2: Type: text/html, Size: 1063 bytes --]

Re: teaching with live-updating code examples

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 1708 bytes --]

On Fri, Dec 9, 2016 at 12:19 PM, Eric S Fraga <e.fraga@ucl.ac.uk> wrote:

> On Friday,  9 Dec 2016 at 16:42, Matt Price wrote:
> > I think I am getting closer, actually (details soon, when I have a
> > fully working  solution)).
>
> I look forward to seeing it!
>

OK, I've run into the limits of my knowledge.

There are at least 2 plugins that will give a live code execution
environemnt within an HTML presentation:
- RevealEditor, which adds one global Ace editor instance to the
presentation, and which shows the live rendering of HTML, CSS, and JS code
when the html encoding follows the format:

<pre><code class="hljs js" data-trim contenteditable>[1,2,3].map ((x) => x + 1)
</code></pre>


- klipse, which  instantiates a new instance of CodeMirror for every
appropriately formatted set of tags in the form:

<klipse-snippet data-language="javascript">[1,2,3].map ((x) => x +
1)</klipse-snippet>

Meanwhile, html export (and also reveal export) will give something more like:

<pre  class="src src-javascript"><span style="color:
#8c8c8c;">[</span>1,2,3<span style="color: #8c8c8c;">]</span>.map
<span style="color: #8c8c8c;">((</span>x<span style="color:
#8c8c8c;">)</span> =&gt; x + 1<span style="color: #8c8c8c;">)</span>

I would like to conditionally export

- revealeditor-compatible code if (a) a flag "org-reveal-use-editor"
is set AND (b) the code block meets certain criteria, e.g. language
and maybe something in the header like "make-live t"

- klipse-compatible code if (a) a flag "org-reveal-klipsify is set AND
similar conditions to (b) above

- standard html output if neither of the above conditions is met.

What are the best ways do achieve this, do you think? Thanks guys,

Matt

[-- Attachment #2: Type: text/html, Size: 5187 bytes --]