Markdown-flashcards.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "cbf602a6-9a39-4123-8258-8a2bffdbcede",
   "metadata": {},
   "source": [
    "# Creating Flashcards in Markdown"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c9f6c052-52f9-404b-b0a4-12ca119b94aa",
   "metadata": {},
   "source": [
    "This notebook provides a simple means for people who don't know JSON to create flashcard files for use with JuypterCards. \n",
    "\n",
    "In the JupyterCards Markdown syntax, each heading (a line starting with #) defines a new card. The title of the level 1 heading is the name of the card. There are two basic card styles that are intended to be used (although other variations do work). \n",
    "\n",
    "The Markdown cell below shows the simpler of the two styles, which I will call the *Concise Card Style*. It will be good enough for most applications of flashcards, such as for reviewing definitions. The front of the card is given in a heading (in a line starting with a  #), and the back of the card is the text below that heading until the next heading is encountered or the text ends.  "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1e646d58-ca33-4d2a-885e-d0d047ca7743",
   "metadata": {},
   "source": [
    "## Concise Card Style Example\n",
    "In this style, the front of the card is used as the card name, and the back of the card is the content that follows until there is a new level 1 heading or the end of the string."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "677f33bb-4e4d-48cd-a36e-9a8b82b3ebf9",
   "metadata": {},
   "source": [
    "If your card requires more information on the front, then the Concise Card Style may not work. In this case, you can use the *Verbose Card Style*. For this style:\n",
    "\n",
    "* The heading line will now be used as a name for the card -- this is currently not utilized by JupyterCards, so you can use whatever you like. \n",
    "* The text following the heading line and up to a line starting with a horizontal rule (a `---`) will be used for the front of the card.\n",
    "* The text starting from the line after the horizontal rule and up to the next heading or end of the text will be used as the back of the card.\n",
    "\n",
    "An example is shown below:"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9234b98b-96a2-41fa-b18b-56ea6fef7b2e",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Verbose Card Style Example\n",
    "In the Verbose Card Style, the front is defined separately from the name and may have multiple lines of content.\n",
    "\n",
    "Cards can have mathematics written in LaTex:\n",
    "\n",
    "$$\n",
    " \\int e^x~dx\n",
    "$$\n",
    "---\n",
    "The back follows a horizontal rule `---` and may also have \n",
    "\n",
    "multiple \n",
    "\n",
    "lines of content\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "edaad0d7-947c-4f23-9c62-1d9817750248",
   "metadata": {},
   "source": [
    "**Preparing to generate the JSON file**\n",
    "\n",
    "Create a triple-quoted Python string variable whose content is your Markdon. In the example below, I have pasted in the Markdown from both of the examples above:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "adae0cc0-0926-48e6-89cd-98c7024e7697",
   "metadata": {},
   "outputs": [],
   "source": [
    "cards='''\n",
    "\n",
    "## Concise Card Style\n",
    "In this style, the front of the card is used as the card name, and the back of the card\n",
    "is the content that follows until there is a new level 1 heading or the end of the string.\n",
    "\n",
    "## Verbose Card Style\n",
    "In the Verbose Card Style, the front is defined separately from the name and may\n",
    "have multiple lines of content.\n",
    "\n",
    "Cards can have mathematics written in LaTex:\n",
    "\n",
    "$$\n",
    " \\int e^x~dx\n",
    "$$\n",
    "---\n",
    "The back follows a horizontal rule `---` and may also have \n",
    "\n",
    "multiple \n",
    "\n",
    "lines of content\n",
    "'''"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d586d86a-70a5-405b-931e-806a9ef5413c",
   "metadata": {},
   "source": [
    "Import the function `md2json()` from the JupyterCards library. If you want to test your cards, then also import the `display_flashcards()` function:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "8e83fe3a-5e6c-4c48-8ff2-8b6479c1cfc2",
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupytercards import md2json, display_flashcards"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1d309ad3-f6da-4c8a-9ffb-d7ef5af1c290",
   "metadata": {},
   "source": [
    "To convert your Markdown cards to JSON, call `md2json()` with the first argument as the string containing your Markdown cards. If you pass a second argument to `md2json()`, it will be used as the name of a file to save your JSON to:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "76b98d8a-0d65-40da-8d81-acbf482e504d",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[\n",
      "    {\n",
      "        \"name\": \"Concise Card Style\",\n",
      "        \"front\": \"Concise Card Style\",\n",
      "        \"back\": \"In this style, the front of the card is used as the card name, and the back of the card is the content that follows until there is a new level 1 heading or the end of the string.<br>\"\n",
      "    },\n",
      "    {\n",
      "        \"name\": \"Verbose Card Style\",\n",
      "        \"front\": \"In the Verbose Card Style, the front is defined separately from the name and may have multiple lines of content.<br> Cards can have mathematics written in LaTex:<br> $$ \\\\int e^x~dx $$\",\n",
      "        \"back\": \"The back follows a horizontal rule `---` and may also have<br> multiple<br> lines of content\"\n",
      "    }\n",
      "]\n"
     ]
    }
   ],
   "source": [
    "myjson=md2json(cards , \"cards.json\")\n",
    "print(myjson)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6029d589-be33-40a9-865b-8e23d5970397",
   "metadata": {},
   "source": [
    "Finally, you may wish to preview your cards. Then you can go back and edit the Markdown string and rerun `md2json()` to capture any changes:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "4d6e466a-6ef2-4887-a366-60d8493e4d15",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<style>\n",
       ":root{\n",
       "--asparagus: #87a878ff;\n",
       "--terra-cotta: #e26d5aff;\n",
       "--cyan-process: #5bc0ebff;\n",
       "--dark-blue-gray: #666a86ff;\n",
       "--snow: #fffafbff;\n",
       "--rich-black-fogra-39: #090c08ff;\n",
       "}\n",
       "\n",
       "\n",
       "/* entire container, keeps perspective */\n",
       ".flip-container {\n",
       "\tperspective: 1000px;\n",
       "  touch-action: pinch-zoom pan-y;\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.flip .flipper {\n",
       "\ttransform: rotateY(180deg)  translateX(-10%);\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transform:  translateX(20px); \n",
       "    transition: display 0s;\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.backcard {\n",
       "    filter: brightness(115%);\n",
       "    height: 360px;\n",
       "    opacity:1;\n",
       "\t  transform:  rotateY(3deg)  translateX(700px) translateZ(20px) scale(1, 1.05) rotate(3deg);\n",
       "    z-index: 20;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".flip-container.slideback .flipper.backcard {\n",
       "    filter: brightness(100%);\n",
       "    opacity: 1;\n",
       "\t  transform: translateX(0px) translateZ(20px) rotateY(0deg);\n",
       "    z-index: 10;\n",
       "}\n",
       "\n",
       ".flip-container.slideback .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    transform: translateX(0px) translateZ(-20px);\n",
       "    z-index: -10;\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container, .front, .back {\n",
       "\t  height: 300px;\n",
       "\t  width: 640px;\n",
       "}\n",
       "\n",
       ".flipper.frontcard {\n",
       "    position:absolute;\n",
       "\t  transform: translateX(0px) rotateY(0deg) translateZ(20px);\n",
       "    z-index: 10;\n",
       "}\n",
       "\n",
       ".flipper.backcard {\n",
       "    filter: brightness(90%);\n",
       "    opacity:0;\n",
       "    position:absolute;\n",
       "    transform: translateX(0px) translateZ(-20px);\n",
       "    z-index: -10;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "/* flip speed goes here */\n",
       ".flipper {\n",
       "    cursor:pointer;\n",
       "\t  height: 200px;\n",
       "    margin-left:20px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    width: 600px;\n",
       "}\n",
       "\n",
       "/* hide back of pane during swap */\n",
       ".front, .back {\n",
       "    -webkit-backface-visibility: hidden;\n",
       "\t  backface-visibility: hidden;\n",
       "\t  left: 0;\n",
       "\t  position: absolute;\n",
       "\t  top: 0;\n",
       "}\n",
       "\n",
       "/* front pane, placed above back */\n",
       ".front {\n",
       "\t  backface-visibility: hidden;\n",
       "    background: var(--asparagus);\n",
       "    transform: rotateY(0deg);\n",
       "\t  z-index: 2;\n",
       "}\n",
       "\n",
       "/* back, initially hidden pane */\n",
       ".back {\n",
       "\t  backface-visibility: hidden;\n",
       "    background: var(--dark-blue-gray);\n",
       "\t  transform: rotateY(180deg);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 16pt;\n",
       "    left:600px;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:20px;\n",
       "}\n",
       "\n",
       ".next.flipped {\n",
       "    opacity:1;\n",
       "}\n",
       "\n",
       ".next.hide {\n",
       "    opacity:0;\n",
       "}\n",
       "\n",
       "\n",
       ".flashcard{\n",
       "    border-radius: 10px;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    font-size: 20pt;\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "  }\n",
       "\n",
       "</style><script type=\"text/Javascript\">\n",
       "/*!\n",
       " * swiped-events.js - v1.1.4\n",
       " * Pure JavaScript swipe events\n",
       " * https://github.com/john-doherty/swiped-events\n",
       " * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element\n",
       " * @author John Doherty <www.johndoherty.info>\n",
       " * @license MIT\n",
       " */\n",
       "!function(t,e){\"use strict\";\"function\"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=e.createEvent(\"CustomEvent\");return a.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),a},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener(\"touchstart\",function(t){if(\"true\"===t.target.getAttribute(\"data-swipe-ignore\"))return;s=t.target,r=Date.now(),n=t.touches[0].clientX,a=t.touches[0].clientY,u=0,i=0},!1),e.addEventListener(\"touchmove\",function(t){if(!n||!a)return;var e=t.touches[0].clientX,r=t.touches[0].clientY;u=n-e,i=a-r},!1),e.addEventListener(\"touchend\",function(t){if(s!==t.target)return;var e=parseInt(l(s,\"data-swipe-threshold\",\"20\"),10),o=parseInt(l(s,\"data-swipe-timeout\",\"500\"),10),c=Date.now()-r,d=\"\",p=t.changedTouches||t.touches||[];Math.abs(u)>Math.abs(i)?Math.abs(u)>e&&c<o&&(d=u>0?\"swiped-left\":\"swiped-right\"):Math.abs(i)>e&&c<o&&(d=i>0?\"swiped-up\":\"swiped-down\");if(\"\"!==d){var b={dir:d.replace(/swiped-/,\"\"),xStart:parseInt(n,10),xEnd:parseInt((p[0]||{}).clientX||-1,10),yStart:parseInt(a,10),yEnd:parseInt((p[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent(\"swiped\",{bubbles:!0,cancelable:!0,detail:b})),s.dispatchEvent(new CustomEvent(d,{bubbles:!0,cancelable:!0,detail:b}))}n=null,a=null,r=null},!1);var n=null,a=null,u=null,i=null,r=null,s=null;function l(t,n,a){for(;t&&t!==e.documentElement;){var u=t.getAttribute(n);if(u)return u;t=t.parentNode}return a}}(window,document);\n",
       "\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\n",
       "    console.log(mystring);\n",
       "\n",
       "    count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    count2 = 0;\n",
       "    var loc2 = mystring.search(/([^\\\\]|^)(\\$\\$)/);\n",
       "\n",
       "    //console.log(loc);\n",
       "\n",
       "    while ((loc >= 0) || (loc2 >= 0)) {\n",
       "\n",
       "        /* Have to replace all the double $$ first with current implementation */\n",
       "        if (loc2 >= 0) {\n",
       "            if (count2 % 2 == 0) {\n",
       "                mystring = mystring.replace(/([^\\\\]|^)(\\$\\$)/, \"$1\\\\[\");\n",
       "            } else {\n",
       "                mystring = mystring.replace(/([^\\\\]|^)(\\$\\$)/, \"$1\\\\]\");\n",
       "            }\n",
       "            count2++;\n",
       "        } else {\n",
       "            if (count % 2 == 0) {\n",
       "                mystring = mystring.replace(/([^\\\\]|^)(\\$)/, \"$1\\\\(\");\n",
       "            } else {\n",
       "                mystring = mystring.replace(/([^\\\\]|^)(\\$)/, \"$1\\\\)\");\n",
       "            }\n",
       "            count++;\n",
       "        }\n",
       "        loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "        loc2 = mystring.search(/([^\\\\]|^)(\\$\\$)/);\n",
       "        //console.log(mystring,\", loc:\",loc,\", loc2:\",loc2);\n",
       "    }\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "function flip(ths) {\n",
       "    console.log(ths);\n",
       "    console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    next.classList.add('flipped');\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        var version = MathJax.version;\n",
       "        console.log('MathJax version', version);\n",
       "        if (version[0] == \"2\") {\n",
       "            MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "        } else if (version[0] == \"3\") {\n",
       "            MathJax.typeset([ths]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "\n",
       "    setTimeout(reenableNext, 700, next);\n",
       "}\n",
       "\n",
       "function reenableNext(next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function slide2(containerId) {\n",
       "    var container = document.getElementById(containerId);\n",
       "    var next=document.getElementById(containerId+'-next');\n",
       "    var frontcard = container.children[0];\n",
       "    var backcard = container.children[1];\n",
       "    container.style.pointerEvents='none';\n",
       "    //backcard.style.pointerEvents='none';\n",
       "    next.style.pointerEvents='none';\n",
       "    next.classList.remove('flipped');\n",
       "    next.classList.add('hide');\n",
       "\n",
       "    //container.classList.add(\"prepare\");\n",
       "    \n",
       "    container.className=\"flip-container slide\";\n",
       "    backcard.parentElement.removeChild(frontcard);\n",
       "    backcard.parentElement.appendChild(frontcard);\n",
       "    setTimeout(slideback, 600, container, frontcard, backcard, next);\n",
       "    \n",
       "}\n",
       "\n",
       "\n",
       "function checkFlip(containerId) {\n",
       "    var container = document.getElementById(containerId);\n",
       "\n",
       "\n",
       "    if (container.classList.contains('flip')) {\n",
       "        container.classList.remove('flip');\n",
       "        setTimeout(slide2, 600, containerId);\n",
       "    } \n",
       "    else {\n",
       "        slide2(containerId);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "function slideback(container, frontcard, backcard, next) {\n",
       "    container.className=\"flip-container slideback\";\n",
       "    setTimeout(cleanup, 600, container, frontcard, backcard, next);\n",
       "}\n",
       "\n",
       "function cleanup(container, frontcard, backcard, next) {\n",
       "    container.removeChild(frontcard);\n",
       "    backcard.className=\"flipper frontcard\";\n",
       "    container.className=\"flip-container\";\n",
       "\n",
       "    var cardnum=parseInt(container.dataset.cardnum);\n",
       "    var cards=eval('cards'+container.id);\n",
       "    var flipper=createOneCard(container, false, cards, cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        if (typeof MathJax != 'undefined') {\n",
       "            var version = MathJax.version;\n",
       "            console.log('MathJax version', version);\n",
       "            if (version[0] == \"2\") {\n",
       "                MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "            } else if (version[0] == \"3\") {\n",
       "                MathJax.typeset([next]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "\n",
       "\n",
       "    }\n",
       "\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        var version = MathJax.version;\n",
       "        console.log('MathJax version', version);\n",
       "        if (version[0] == \"2\") {\n",
       "            MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "        } else if (version[0] == \"3\") {\n",
       "            MathJax.typeset();\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "\n",
       "    next.style.pointerEvents='auto';\n",
       "    container.style.pointerEvents='auto';\n",
       "    next.classList.remove('hide');\n",
       "    container.addEventListener('swiped-left', function(e) {\n",
       "        /*\n",
       "          console.log(e.detail);\n",
       "          console.log(id);\n",
       "        */\n",
       "        checkFlip(container.id);\n",
       "    }, {once: true });\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "function createOneCard  (mydiv, frontCard, cards, cardnum) {\n",
       "    colors=[\n",
       "        '--asparagus',\n",
       "        '--terra-cotta',\n",
       "        '--cyan-process'\n",
       "    ]\n",
       "\n",
       "    var flipper = document.createElement('div');\n",
       "    if (frontCard){\n",
       "        flipper.className=\"flipper frontcard\";    \n",
       "    }\n",
       "    else {\n",
       "        flipper.className=\"flipper backcard\";   \n",
       "    }\n",
       "\n",
       "    var front = document.createElement('div');\n",
       "    front.className='front flashcard';\n",
       "\n",
       "    var frontSpan= document.createElement('span');\n",
       "    frontSpan.className='flashcardtext';\n",
       "    frontSpan.innerHTML=jaxify(cards[cardnum]['front']);\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id) {\n",
       "    console.log(id);\n",
       "    \n",
       "    var mydiv=document.getElementById(id);\n",
       "    \n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "    mydiv.addEventListener('swiped-left', function(e) {\n",
       "        /*\n",
       "          console.log(e.detail);\n",
       "          console.log(id);\n",
       "        */\n",
       "        checkFlip(id);\n",
       "    }, {once: true});\n",
       "\n",
       "    var cardnum=0;\n",
       "    \n",
       "    for (var i=0; i<2; i++) {\n",
       "    \n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardnum);\n",
       "        }\n",
       "\n",
       "        mydiv.append(flipper);\n",
       "        if (typeof MathJax != 'undefined') {\n",
       "            var version = MathJax.version;\n",
       "            if (typeof version == 'undefined') {\n",
       "                setTimeout(function(){\n",
       "                    var version = MathJax.version;\n",
       "                    console.log('After sleep, MathJax version', version);\n",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\n",
       "                }, 500);\n",
       "            } else{\n",
       "                console.log('MathJax version', version);\n",
       "                if (version[0] == \"2\") {\n",
       "                    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                } else if (version[0] == \"3\") {\n",
       "                    MathJax.typeset([flipper]);\n",
       "                }\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "\n",
       "\n",
       "        cardnum = (cardnum + 1) % mydiv.dataset.numCards;\n",
       "    }\n",
       "    mydiv.dataset.cardnum = cardnum;\n",
       "\n",
       "    var next=document.getElementById(id+'-next');\n",
       "    if (cards.length==1) {\n",
       "        // Don't show next if no other cards!\n",
       "        next.style.pointerEvents='none';\n",
       "        next.classList.add('hide');\n",
       "    } else {\n",
       "        next.innerHTML=\"Next >\";\n",
       "    }\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "</script><script type=\"text/Javascript\">\n",
       "    \n",
       "    cardsgZtGNmlhHejl=[\n",
       "    {\n",
       "        \"name\": \"Concise Card Style\",\n",
       "        \"front\": \"Concise Card Style\",\n",
       "        \"back\": \"In this style, the front of the card is used as the card name, and the back of the card is the content that follows until there is a new level 1 heading or the end of the string.<br>\"\n",
       "    },\n",
       "    {\n",
       "        \"name\": \"Verbose Card Style\",\n",
       "        \"front\": \"In the Verbose Card Style, the front is defined separately from the name and may have multiple lines of content.<br> Cards can have mathematics written in LaTex:<br> $$ \\\\int e^x~dx $$\",\n",
       "        \"back\": \"The back follows a horizontal rule `---` and may also have<br> multiple<br> lines of content\"\n",
       "    }\n",
       "];\n",
       "    \n",
       "        createCards(\"gZtGNmlhHejl\");\n",
       "        </script>\n",
       "        <div style=\"height:40px\"></div><div class=\"flip-container\" id=\"gZtGNmlhHejl\" onclick=\"flip(this)\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"gZtGNmlhHejl-next\" onclick=\"checkFlip('gZtGNmlhHejl')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards(myjson)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}