Anki Theme Simple Card Data: compile with `pandoc ./anki-them-simple-output.md -o ./simple-data.html`

_anki-theme-missing-stripped-output.md

What kind of function do we call this? What will it output?

What do we call this?

(aDifferentAdder num)

-- This is called a {{c1::curried}} function
aDifferentAdder num = ((*) num)
-- <function> : number -> number -> number
aDifferentAdder 2
-- What will be returned?

{{c1::<function> : number -> number}}

-- Here we're applying the {{c1::curried}} function
timesByTwo num = aDifferentAdder 2 num
-- <function> : number -> number
timesByTwo 5
-- 10 : number

This is called a curried function, or a partially applied function. You could also read the procedure output like this <function> : (number -> number) -> number; the first two numbers return the output number.

Our partially applied function is given the first number, not the second. We can apply this function later by giving it the second value!

But why is this useful, I hear you ask? Here's some examples.

-- This is called a {{c1::curried}} function
aDifferentAdder num = ((*) num)
-- <function> : number -> number -> number
aDifferentAdder 2
-- What will be returned?

{{c1::<function> : number -> number}}

-- Here we're applying the {{c1::curried}} function
timesByTwo num = aDifferentAdder 2 num
-- <function> : number -> number
timesByTwo 5
-- 10 : number

_anki-theme-simple-stripped-output.md

In this example, viewThumbnail only takes one argument; model.selectedUrl. Yet, it still works! Explain why.

A partial function

Already wrapped in a <p><code> tag. A one liner: Some very short text for syntax.

..

-- View --
view model =
  ..
    ..
    , div [ id "thumbnails" ]
        (List.map
          (viewThumbnail model.selectedUrl)  -- Apply the function
          model.photos
        )
    ..

viewThumbnail selectedUrl thumb =
  img [ src (urlPrefix ++ thumb.url)
      , classList [ ("selected", selectedUrl == thumb.url) ]
      ..
      ] []

This is a big chunk of code!!! It's quite simple though:

1. We partially apply viewThumbnail passing only one argument (a "string")
2. List.map takes a function and a list
   • model.photos gives us a list of records
3. List.map cycles through the records

View the full program which consumes the function. Here's some other curried function examples too.

..

-- View --
view model =
  ..
    ..
    , div [ id "thumbnails" ]
        (List.map
          (viewThumbnail model.selectedUrl)  -- Apply the function
          model.photos
        )
    ..

anki-theme-reverse-compile-simple-data-stripped.md

In this example, viewThumbnail only takes one argument; model.selectedUrl. Yet, it still works! Explain why.

A partial function

Already wrapped in a <p><code> tag. A one liner: Some very short text for syntax.

::: {#cb1 .sourceCode}

..

-- View --
view model =
  ..
    ..
    , div [ id "thumbnails" ]
        (List.map
          (viewThumbnail model.selectedUrl)  -- Apply the function
          model.photos
        )
    ..

:::

::: {#cb2 .sourceCode}

viewThumbnail selectedUrl thumb =
  img [ src (urlPrefix ++ thumb.url)
      , classList [ ("selected", selectedUrl == thumb.url) ]
      ..
      ] []

:::

This is a big chunk of code!!! It's quite simple though:

1. We partially apply viewThumbnail passing only one argument (a "string")
2. List.map takes a function and a list
   • model.photos gives us a list of records
3. List.map cycles through the records

View the full program which consumes the function. Here's some other curried function examples too.

::: {#cb3 .sourceCode}

..

-- View --
view model =
  ..
    ..
    , div [ id "thumbnails" ]
        (List.map
          (viewThumbnail model.selectedUrl)  -- Apply the function
          model.photos
        )
    ..

:::

anki-theme-simple-data-stripped.html

<!-- Front of card ===========================================================

    Simple Card Data

    - Type:
        What's the answer?
        A simple question->answer card;
        we're asking the question: "what does this code do?", e.g:

        - A function with an output you have to guess.
        - A class with a method that you need to call.

    - Docs:
        http://tinyurl.com/anki-simple-card

    - Key:
        ★ Required
        ☆ Optional (recommended)
        ✎ Optional (notes, markdown)
        ⤷ Field Type

========================================================================== -->
<!-- -------------------------------------------------------------------------
    ★ Title

    ⤷ `string` (auto wrapped with a `H1` tag)
-------------------------------------------------------------------------- -->
<h1>In this example, <code>viewThumbnail</code> only takes one argument;
<code>model.selectedUrl</code>. Yet, it still works! Explain why.</h1>
<!-- -------------------------------------------------------------------------
    ★ Subtitle

    ⤷ `string` (auto wrapped with a `H2` tag)
-------------------------------------------------------------------------- -->
<h2>A partial function</h2>
<!-- -------------------------------------------------------------------------
    ☆ Syntax (inline code)

    ⤷ `code string` (auto wrapped with <p><code> tag)
-------------------------------------------------------------------------- -->
<p>Already wrapped in a <code>&lt;p&gt;&lt;code&gt;</code> tag. A one
liner: Some very short text for syntax.</p>
<!-- -------------------------------------------------------------------------
    ★ Sample (code block or image)

    ⤷ `pre block | image`

      | Requires `markdown` fenced code block;

      A markdown fenced code block that will compile to our highlighted
      code with Pandoc. What does this code do?
-------------------------------------------------------------------------- -->
<div class="sourceCode" id="cb1"><pre
class="sourceCode elm"><code class="sourceCode elm"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="op">..</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="co">-- View --</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="fu">view</span> <span class="fu">model</span> <span class="op">=</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a>  <span class="op">..</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>    <span class="op">..</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a>    <span class="op">,</span> <span class="fu">div</span> [ <span class="fu">id</span> <span class="st">&quot;thumbnails&quot;</span> ]</span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a>        (<span class="dt">List</span><span class="op">.</span><span class="fu">map</span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a>          (<span class="fu">viewThumbnail</span> <span class="fu">model</span><span class="op">.</span><span class="fu">selectedUrl</span>)  <span class="co">-- Apply the function</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a>          <span class="fu">model</span><span class="op">.</span><span class="fu">photos</span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a>        )</span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a>    <span class="op">..</span></span></code></pre></div>
<!-- Back of card ======================================================== -->
<!-- -------------------------------------------------------------------------
    ★ Key point (code block or image)

    ⤷ `pre block | image`

      | Requires `markdown` fenced code block;

      A markdown fenced code block that will compile to our highlighted
      code with Pandoc. The output or answer to the above question.
-------------------------------------------------------------------------- -->
<div class="sourceCode" id="cb2"><pre
class="sourceCode elm"><code class="sourceCode elm"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="fu">viewThumbnail</span> <span class="fu">selectedUrl</span> <span class="fu">thumb</span> <span class="op">=</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>  <span class="fu">img</span> [ <span class="fu">src</span> (<span class="fu">urlPrefix</span> <span class="op">++</span> <span class="fu">thumb</span><span class="op">.</span><span class="fu">url</span>)</span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>      <span class="op">,</span> <span class="fu">classList</span> [ (<span class="st">&quot;selected&quot;</span><span class="op">,</span> <span class="fu">selectedUrl</span> <span class="op">==</span> <span class="fu">thumb</span><span class="op">.</span><span class="fu">url</span>) ]</span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>      <span class="op">..</span></span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>      ] []</span></code></pre></div>
<!-- -------------------------------------------------------------------------
    ★ Key point notes

    ⤷ `rich html`
-------------------------------------------------------------------------- -->
<p>This is a big chunk of code!!! It’s quite simple though:</p>
<ol type="1">
<li>We <em>partially</em> apply <code>viewThumbnail</code> passing only
one argument (a <code>"string"</code>)</li>
<li><code>List.map</code> takes a function and a list
<ul>
<li><code>model.photos</code> gives us a list of records</li>
</ul></li>
<li><code>List.map</code> cycles through the records</li>
</ol>
<!-- -------------------------------------------------------------------------
    ★ Other notes

    ⤷ `rich html`
-------------------------------------------------------------------------- -->
<p>View the <a href="https://ellie-app.com/q4j6ps87Cj5a1">full
program</a> which consumes the function. Here’s some <a
href="https://www.codingexercises.com/guides/quickstart-elm-part-7">other
curried function examples</a> too.</p>
<!-- -------------------------------------------------------------------------
    ★ Markdown

    ⤷ `raw text`

      Do not add the compiled HTML to your card, rather, use the raw text
      Markdown fenced code block. This makes for easier editing of a card
      later on.

      Warning: may increase card file size
        @ https://github.com/badlydrawnrob/anki/issues/116
-------------------------------------------------------------------------- -->
<div class="sourceCode" id="cb3"><pre
class="sourceCode elm"><code class="sourceCode elm"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="op">..</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="co">-- View --</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="fu">view</span> <span class="fu">model</span> <span class="op">=</span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>  <span class="op">..</span></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a>    <span class="op">..</span></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a>    <span class="op">,</span> <span class="fu">div</span> [ <span class="fu">id</span> <span class="st">&quot;thumbnails&quot;</span> ]</span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a>        (<span class="dt">List</span><span class="op">.</span><span class="fu">map</span></span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a>          (<span class="fu">viewThumbnail</span> <span class="fu">model</span><span class="op">.</span><span class="fu">selectedUrl</span>)  <span class="co">-- Apply the function</span></span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a>          <span class="fu">model</span><span class="op">.</span><span class="fu">photos</span></span>
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a>        )</span>
<span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a>    <span class="op">..</span></span></code></pre></div>