example.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "b84b312a-7921-4b1a-a966-d618004653b2",
   "metadata": {},
   "source": [
    "$~~~~\\mbox{ }$"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7a34c0bf-de01-467b-aacd-877d0096ce01",
   "metadata": {},
   "source": [
    "# Example Usage of Jupyter Cards"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "b1dbda7d-1db7-42ab-bb37-2fe18bc63388",
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupytercards import display_flashcards\n",
    "github='https://raw.githubusercontent.com/jmshea/foundations-of-data-science-with-python/main/04-probability1/flashcards/'"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f5608a26-a3cd-4a51-a23a-3a8d8448d103",
   "metadata": {},
   "source": [
    "## Basic usage, loading from URL"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "b529e1dc-caff-46b8-a1d3-c578d8f61f37",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"lJqNZKzraObp\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"lJqNZKzraObp-next\" onclick=\"window.checkFlip('lJqNZKzraObp')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"lJqNZKzraObp\")) {\n",
       "            createCards(\"lJqNZKzraObp\", \"True\", \"False\", \"False\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardslJqNZKzraObp=[{\"front\": \"outcome (of a random experiment)\", \"back\": \"An outcome of a random experiment is a result of the experiment that cannot be further decomposed.\"}, {\"front\": \"sample space, \\\\( S \\\\)\", \"back\": \"The sample space of a random experiment is the set of all possible outcomes.\"}, {\"front\": \"event\", \"back\": \"An event is a set of outcomes. The event occurs if the result of the experiment is any of the outcomes in the set. \"}];\n",
       "var frontColorslJqNZKzraObp= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorslJqNZKzraObp= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorslJqNZKzraObp= [\"var(--snow)\" ];\n",
       "\n",
       "\n",
       "        {\n",
       "        const jmscontroller = new AbortController();\n",
       "        const signal = jmscontroller.signal;\n",
       "\n",
       "        setTimeout(() => jmscontroller.abort(), 5000);\n",
       "\n",
       "        fetch(\"https://raw.githubusercontent.com/jmshea/foundations-of-data-science-with-python/main/04-probability1/flashcards/outcomes-samplespaces-events.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => createCards(\"lJqNZKzraObp\", \"True\", \"False\", \"False\", \"\", \"\"))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        try_create(); \n",
       "        });\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards(github + 'outcomes-samplespaces-events.json')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "8bb7e11b-5d78-4fde-b520-74bc7f12b4f1",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"YObZSJAYErEc\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"YObZSJAYErEc-next\" onclick=\"window.checkFlip('YObZSJAYErEc')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"YObZSJAYErEc\")) {\n",
       "            createCards(\"YObZSJAYErEc\", \"True\", \"False\", \"True\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardsYObZSJAYErEc=[{\"front\": \"outcome (of a random experiment)\", \"back\": \"An outcome of a random experiment is a result of the experiment that cannot be further decomposed.\"}, {\"front\": \"sample space, \\\\( S \\\\)\", \"back\": \"The sample space of a random experiment is the set of all possible outcomes.\"}, {\"front\": \"event\", \"back\": \"An event is a set of outcomes. The event occurs if the result of the experiment is any of the outcomes in the set. \"}];\n",
       "var frontColorsYObZSJAYErEc= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorsYObZSJAYErEc= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorsYObZSJAYErEc= [\"var(--snow)\" ];\n",
       "\n",
       "\n",
       "        {\n",
       "        const jmscontroller = new AbortController();\n",
       "        const signal = jmscontroller.signal;\n",
       "\n",
       "        setTimeout(() => jmscontroller.abort(), 5000);\n",
       "\n",
       "        fetch(\"https://raw.githubusercontent.com/jmshea/foundations-of-data-science-with-python/main/04-probability1/flashcards/outcomes-samplespaces-events.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => createCards(\"YObZSJAYErEc\", \"True\", \"False\", \"True\", \"\", \"\"))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        try_create(); \n",
       "        });\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Demonstrate shuffling cards\n",
    "display_flashcards(github + 'outcomes-samplespaces-events.json', shuffle_cards=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4941fe7e-3437-4dfc-9e01-926a3469f0aa",
   "metadata": {},
   "source": [
    "## Basic usage, load from file"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "bb73efff-af85-4195-8968-98cf87e65156",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"ouyvYIeGcVSL\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"ouyvYIeGcVSL-next\" onclick=\"window.checkFlip('ouyvYIeGcVSL')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"ouyvYIeGcVSL\")) {\n",
       "            createCards(\"ouyvYIeGcVSL\", \"True\", \"False\", \"False\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardsouyvYIeGcVSL=[{\"front\": \"identity matrix\", \"back\": \"A diagonal matrix in which the off-diagonal entries are all zero and the diagonal entries are all equal to 1. The $m \\times midentitymatrixisdenoted\\\\mathbf{I}_m$.  If Ij,k denotes the entry in row j and column k, then Ij,k=1 if j=k and Ij,k=0 if $j\\ne k$.\", \"topic\": \"linear algebra\"}, {\"front\": \"<i>average</i> (or <i>sample mean</i>) of a data set\", \"back\": \"The value that minimizes the squared error to the data. For a data set $d_0, d_1, \\\\ldots, d_{N-1}$ the average is\\n \\begin{align}\\n \\\\overline{d} = \\frac{1}{N} \\\\sum_{i=0}^{N-1} d_i.\\n \\\\end{align}\\n\", \"topic\": \"statistics\"}, {\"front\": \"expected value<br>(discrete random variable)\", \"back\": \"\\begin{equation*} \\\\mu_X = E \\\\left[ X \\right] = \\\\sum x P_X (x). \\\\end{equation*}\", \"topic\": \"probability\"}, {\"front\": \"data\", \"back\": \"Collections of measurements, characteristics, or facts about a group.\"}];\n",
       "var frontColorsouyvYIeGcVSL= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorsouyvYIeGcVSL= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorsouyvYIeGcVSL= [\"var(--snow)\" ];\n",
       "try_create(); "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards('example.json')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "90ccc612-3646-4664-9b63-b9f5fdee9d9c",
   "metadata": {},
   "source": [
    "# Basic Usage, Load from Python List of Dicts\n",
    "\n",
    "Note that the data in this example introduces an optional third field for each card: the \"topic\". How to use this is shown further below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "26faa9ca-7346-4de2-a7de-b77573cbbc83",
   "metadata": {},
   "outputs": [],
   "source": [
    "cards =[ \n",
    "    {'front': 'identity matrix',\n",
    "     'back': 'A diagonal matrix in which the off-diagonal entries are all zero ' + \n",
    "             'and the diagonal entries are all equal to 1. ' +\n",
    "             'The $m \\times midentitymatrixisdenoted\\mathbf{I}_m$. ' +\n",
    "             ' If Ij,k denotes the entry in row j and column k, then ' +\n",
    "             'Ij,k=1 if j=k and Ij,k=0 if $j\\ne k$.',\n",
    "     'topic':'linear algebra'\n",
    "    },\n",
    "    {\n",
    "        \"front\": \"<i>average</i> (or <i>sample mean</i>) of a data set\",\n",
    "        \"back\": \"The value that minimizes the squared error to the data. \" +\n",
    "                \"For a data set $d_0, d_1, \\ldots, d_{N-1}$ the average is\\n \" +\n",
    "                \"\\begin{align}\\n \\overline{d} = \\frac{1}{N} \\sum_{i=0}^{N-1} d_i.\\n \\end{align}\\n\",\n",
    "        \"topic\" : \"statistics\"\n",
    "    },\n",
    "    {\n",
    "        \"front\": \"expected value<br>(discrete random variable)\",\n",
    "        \"back\": \"\\begin{equation*} \\mu_X = E \\left[ X \\right] = \\sum x P_X (x). \\end{equation*}\",\n",
    "        \"topic\" : \"probability\"\n",
    "    },\n",
    "    {\n",
    "        \"front\": \"data\",\n",
    "        \"back\": \"Collections of measurements, characteristics, or facts about a group.\"\n",
    "    }\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "5b51162a-3fb6-4c9f-8f58-e3c9cdf812ed",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"rQJRCpYTTcFL\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"rQJRCpYTTcFL-next\" onclick=\"window.checkFlip('rQJRCpYTTcFL')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"rQJRCpYTTcFL\")) {\n",
       "            createCards(\"rQJRCpYTTcFL\", \"True\", \"False\", \"False\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardsrQJRCpYTTcFL=[{\"front\": \"identity matrix\", \"back\": \"A diagonal matrix in which the off-diagonal entries are all zero and the diagonal entries are all equal to 1. The $m \\times midentitymatrixisdenoted\\\\mathbf{I}_m$.  If Ij,k denotes the entry in row j and column k, then Ij,k=1 if j=k and Ij,k=0 if $j\\ne k$.\", \"topic\": \"linear algebra\"}, {\"front\": \"<i>average</i> (or <i>sample mean</i>) of a data set\", \"back\": \"The value that minimizes the squared error to the data. For a data set $d_0, d_1, \\\\ldots, d_{N-1}$ the average is\\n \\begin{align}\\n \\\\overline{d} = \\frac{1}{N} \\\\sum_{i=0}^{N-1} d_i.\\n \\\\end{align}\\n\", \"topic\": \"statistics\"}, {\"front\": \"expected value<br>(discrete random variable)\", \"back\": \"\\begin{equation*} \\\\mu_X = E \\\\left[ X \\right] = \\\\sum x P_X (x). \\\\end{equation*}\", \"topic\": \"probability\"}, {\"front\": \"data\", \"back\": \"Collections of measurements, characteristics, or facts about a group.\"}];\n",
       "var frontColorsrQJRCpYTTcFL= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorsrQJRCpYTTcFL= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorsrQJRCpYTTcFL= [\"var(--snow)\" ];\n",
       "try_create(); "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards(cards)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "90371950-4680-43ff-b0e9-6a128a923738",
   "metadata": {},
   "source": [
    "## More Advanced Usage, Selecting Subsets by Category"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "ba652541-3ebd-4201-80a0-a2e4155a543e",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"wAzoHyNSyHBS\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"wAzoHyNSyHBS-next\" onclick=\"window.checkFlip('wAzoHyNSyHBS')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"wAzoHyNSyHBS\")) {\n",
       "            createCards(\"wAzoHyNSyHBS\", \"True\", \"False\", \"False\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardswAzoHyNSyHBS=[{\"front\": \"identity matrix\", \"back\": \"A diagonal matrix in which the off-diagonal entries are all zero and the diagonal entries are all equal to 1. The $m \\times midentitymatrixisdenoted\\\\mathbf{I}_m$.  If Ij,k denotes the entry in row j and column k, then Ij,k=1 if j=k and Ij,k=0 if $j\\ne k$.\", \"topic\": \"linear algebra\"}];\n",
       "var frontColorswAzoHyNSyHBS= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorswAzoHyNSyHBS= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorswAzoHyNSyHBS= [\"var(--snow)\" ];\n",
       "try_create(); "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards(cards, topics='linear algebra')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "843b57b3-3d59-41c9-9b2f-6cc6714c2649",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"kHhOSvFkzISb\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"kHhOSvFkzISb-next\" onclick=\"window.checkFlip('kHhOSvFkzISb')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"kHhOSvFkzISb\")) {\n",
       "            createCards(\"kHhOSvFkzISb\", \"True\", \"False\", \"False\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardskHhOSvFkzISb=[{\"front\": \"<i>average</i> (or <i>sample mean</i>) of a data set\", \"back\": \"The value that minimizes the squared error to the data. For a data set $d_0, d_1, \\\\ldots, d_{N-1}$ the average is\\n \\begin{align}\\n \\\\overline{d} = \\frac{1}{N} \\\\sum_{i=0}^{N-1} d_i.\\n \\\\end{align}\\n\", \"topic\": \"statistics\"}];\n",
       "var frontColorskHhOSvFkzISb= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorskHhOSvFkzISb= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorskHhOSvFkzISb= [\"var(--snow)\" ];\n",
       "try_create(); "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards(cards, topics='statistics')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "e508612d-648d-4074-8c87-b376a8999939",
   "metadata": {},
   "outputs": [
    {
     "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",
       "    box-sizing: content-box;\n",
       "\t  transform: rotateY(180deg);\n",
       "\t/* transform: rotateY(180deg)  translateX(-6%);  */\n",
       "}\n",
       "\n",
       "\n",
       ".flip-container.slide .flipper.frontcard {\n",
       "    filter: brightness(90%);\n",
       "    position:absolute;\n",
       "    z-index: -20;\n",
       "    /* left: 20px; */\n",
       "}\n",
       "\n",
       ".flip-container.prepare .flipper.backcard {\n",
       "    opacity:1;\n",
       "    transition: display 0s;\n",
       "    transform:  translateX(20px); \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",
       "    /* left: -20px; */\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: 200px;\n",
       "\t  width: 95%;\n",
       "}\n",
       "\n",
       "\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:10px;\n",
       "\t  position: absolute;\n",
       "    top: 0;\n",
       "\t  transform-style: preserve-3d;\n",
       "\t  transition: 0.6s;\n",
       "    /* width: 95%; */\n",
       "    width: 100%;\n",
       "}\n",
       "\n",
       ".flashcardtext{\n",
       "    color: var(--snow);\n",
       "    margin-left:3%;\n",
       "    position:absolute;\n",
       "    text-align:center;\n",
       "    top: 50%;\n",
       "    transform: translate(0, -50%);\n",
       "    width:90%;\n",
       "    font-size: 1.5em;\n",
       "}\n",
       "\n",
       ".back .flashcardtext{\n",
       "    font-size: 1.2em;\n",
       "}\n",
       "\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",
       "    left: 8px;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .back {\n",
       "\t  transform: rotateY(180deg) translateZ(20px);\n",
       "}\n",
       "\n",
       ".next {\n",
       "    color: var(--rich-black-fogra-39);\n",
       "    cursor:pointer;\n",
       "    font-size: 1.5em;\n",
       "    /*left:90%; */\n",
       "    margin-left: 70%;\n",
       "    width: 55pt;\n",
       "    height: 22pt;\n",
       "    opacity:0.3;\n",
       "    position:relative; \n",
       "    top:-1em;\n",
       "}\n",
       "\n",
       ".next svg {\n",
       "    height:16pt;\n",
       "    width:16pt;\n",
       "    position:relative;\n",
       "    top:-2pt;\n",
       "}\n",
       "\n",
       ".jp-OutputArea-output .next svg {\n",
       "    top: 1pt;\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",
       "    outline: none;\n",
       "    color: #fafafa;\n",
       "    display:block;\n",
       "    padding:10px;\n",
       "  \n",
       "}\n",
       "\n",
       ".flashcardtext li{\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:700px) {\n",
       "\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "\t      width: min(95%, 640px);\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "        margin-left:20px;\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flashcardtext{\n",
       "        font-size: 20pt;\n",
       "    }\n",
       "\n",
       "    .next {\n",
       "        font-size: 16pt;\n",
       "        left:min(80%, 450pt);\n",
       "        margin-left: 0;\n",
       "        width: 55pt;\n",
       "        height: 22pt;\n",
       "        top:-0.5em;\n",
       "    }\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1.5em;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (min-width:660px) and (max-width:999px) {\n",
       "    .next {\n",
       "        left:0;\n",
       "        margin-left: 80%;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:680px) and (min-height:376px) {\n",
       "    .flip-container, .front, .back {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "\n",
       "    .flipper {\n",
       "\t      height: 300px;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "\n",
       "\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:330px) and (max-height:600px) {\n",
       "\n",
       "    .back .flashcardtext{\n",
       "        font-size: 1em;\n",
       "    }\n",
       "    .next {\n",
       "        margin-left: 65%;\n",
       "    }\n",
       "    .back {\n",
       "        left: 4px;\n",
       "    }\n",
       "}\n",
       "\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div style=\"height:40px\"></div><div class=\"flip-container\" id=\"PYPqUkvkteLn\" tabindex=\"0\" style=\"outline:none;\"></div><div style=\"height:40px\"></div><div class=\"next\" id=\"PYPqUkvkteLn-next\" onclick=\"window.checkFlip('PYPqUkvkteLn')\"> </div> <div style=\"height:40px\"></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "/*!\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",
       "    var count = 0;\n",
       "    var loc = mystring.search(/([^\\\\]|^)(\\$)/);\n",
       "\n",
       "    var 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",
       "window.flipCard = function flipCard(ths) {\n",
       "    //console.log(ths);\n",
       "    //console.log(ths.id);\n",
       "    ths.classList.toggle(\"flip\"); \n",
       "    ths.focus();\n",
       "    var next=document.getElementById(ths.id+'-next');\n",
       "    next.style.pointerEvents='none';\n",
       "    /* ths.blur(); */\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, 600, ths, next);\n",
       "}\n",
       "\n",
       "window.checkKey = function checkKey(container, event) {\n",
       "    event.stopPropagation();\n",
       "    /*\n",
       "    console.log(container);\n",
       "    console.log(event.key);\n",
       "    console.log(event.code);\n",
       "    */\n",
       "    /* JMS:  Working here*/\n",
       "    var next=document.getElementById(container.id+'-next');\n",
       "    /* Only react if not already sliding */\n",
       "    if (! next.classList.contains(\"hide\")) {\n",
       "        if ((event.key == \"j\") || (event.key == \"Enter\") || (event.key == \"ArrowRight\")) {\n",
       "            window.checkFlip(container.id);\n",
       "        }\n",
       "        if (event.key == \" \") {\n",
       "            window.flipCard(container);\n",
       "        }\n",
       "    }\n",
       "    event.preventDefault();\n",
       "}\n",
       "\n",
       "\n",
       "function reenableNext(ths, next) {\n",
       "    next.style.pointerEvents='auto';\n",
       "    /* ths.tabIndex= 0;*/\n",
       "    /* ths.focus(); */\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",
       "    /* container.removeAttribute(\"tabindex\");*/\n",
       "    /* container.blur(); */\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",
       "window.checkFlip = 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, 550, 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",
       "\n",
       "    let cardOrder = JSON.parse(container.dataset.cardOrder);\n",
       "\n",
       "    var cards=eval('cards'+container.id);\n",
       "\n",
       "    var flipper=createOneCard(container, false, cards, cardOrder[cardnum], cardnum);\n",
       "    container.append(flipper);\n",
       "    cardnum= (cardnum+1) % parseInt(container.dataset.numCards);\n",
       "    if ((cardnum == 0) && (container.dataset.shuffleCards == \"True\")) {\n",
       "        cardOrder = randomOrderArray(parseInt(container.dataset.numCards));\n",
       "        container.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "        console.log(cardOrder);\n",
       "    }\n",
       "\n",
       "    container.dataset.cardnum=cardnum;\n",
       "    if (cardnum != 1){\n",
       "        next.innerHTML=\"Next >\";\n",
       "    } else {\n",
       "        //next.innerHTML=\"Reload \\\\(\\\\circlearrowleft\\\\) \";\n",
       "        next.innerHTML='Reload <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewbox=\"0 0 25 26\"> <path d=\"M7,6a10,10,0,1,0,9,0\" style=\"fill:none;stroke:black;stroke-width:2px\" id=\"e2_circleArc\"/> <line id=\"e3_line\" x1=\"17\" y1=\"6.5\" x2=\"17.5\" y2=\"15\" style=\"stroke:black;fill:none;stroke-width:2px\"/> <line id=\"e4_line\" x1=\"16.5\" y1=\"6.5\" x2=\"26\" y2=\"8\" style=\"stroke:black;fill:none;stroke-width:2px\"/> </svg> '\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",
       "    /* container.tabIndex= 0; */\n",
       "    /* container.focus(); */\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, seq) {\n",
       "    var colors=eval('frontColors'+mydiv.id);\n",
       "    var backColors=eval('backColors'+mydiv.id);\n",
       "    var textColors=eval('textColors'+mydiv.id);\n",
       "    //console.log(backColors)\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.style.color=textColors[seq % textColors.length];\n",
       "    //frontSpan.textContent=jaxify(cards[cardnum]['front']);\n",
       "    //front.style.background='var(' + colors[cardnum % colors.length] + ')';\n",
       "    front.style.background=colors[seq % colors.length];\n",
       "\n",
       "    front.append(frontSpan);\n",
       "    flipper.append(front);\n",
       "\n",
       "    var back = document.createElement('div');\n",
       "    back.className='back flashcard';\n",
       "    back.style.background=backColors[seq % backColors.length];\n",
       "\n",
       "    var backSpan= document.createElement('span');\n",
       "    backSpan.className='flashcardtext';\n",
       "    backSpan.innerHTML=jaxify(cards[cardnum]['back']);\n",
       "    backSpan.style.color=textColors[seq % textColors.length];\n",
       "    back.append(backSpan);\n",
       "\n",
       "    flipper.append(back);\n",
       "\n",
       "    return flipper;\n",
       "\n",
       "}\n",
       "\n",
       "function randomOrderArray(N) {\n",
       "    // Create an array with numbers from 0 to N-1\n",
       "    let arr = Array.from({ length: N }, (_, index) => index);\n",
       "\n",
       "    // Shuffle the array using Fisher-Yates algorithm\n",
       "    for (let i = arr.length - 1; i > 0; i--) {\n",
       "        const j = Math.floor(Math.random() * (i + 1));\n",
       "        [arr[i], arr[j]] = [arr[j], arr[i]];\n",
       "    }\n",
       "\n",
       "    return arr;\n",
       "}\n",
       "\n",
       "function createStructuredData(mydiv, cards, title, subject) {\n",
       "    var structuredData = {\n",
       "        \"@context\": \"https://schema.org/\",\n",
       "        \"@type\": \"Quiz\",\n",
       "        \"about\": {\n",
       "            \"@type\": \"Thing\"\n",
       "        },\n",
       "        \"educationalAlignment\": [\n",
       "            {\n",
       "                \"@type\": \"AlignmentObject\",\n",
       "                \"alignmentType\": \"educationalSubject\"\n",
       "            }\n",
       "        ],\n",
       "        \"hasPart\": []\n",
       "    };\n",
       "\n",
       "    structuredData[\"about\"][\"name\"] = title;\n",
       "    structuredData[\"educationalAlignment\"][0][\"targetName\"] = subject;\n",
       "\n",
       "    for (var i=0; i<cards.length; i++) {\n",
       "        var newPart = {\n",
       "            \"@context\": \"https://schema.org/\",\n",
       "            \"@type\": \"Question\",\n",
       "            \"eduQuestionType\": \"Flashcard\",\n",
       "            \"acceptedAnswer\": {\n",
       "                \"@type\": \"Answer\",\n",
       "            }\n",
       "        };\n",
       "\n",
       "        newPart[\"text\"] = cards[i][\"front\"];\n",
       "        newPart[\"acceptedAnswer\"][\"text\"] = cards[i][\"back\"];\n",
       "\n",
       "        structuredData[\"hasPart\"].push(newPart);\n",
       "    }\n",
       "    /*console.log(structuredData);*/\n",
       "\n",
       "    var el = document.createElement('script');\n",
       "    el.type = 'application/ld+json';\n",
       "    el.text = JSON.stringify(structuredData);\n",
       "\n",
       "    mydiv.parentElement.appendChild(el);\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "function createCards(id, keyControl, grabFocus, shuffleCards, title, subject) {\n",
       "    console.log(id);\n",
       "\n",
       "    var mydiv=document.getElementById(id);\n",
       "    /*mydiv.onclick = window.flipCard(mydiv);*/\n",
       "    /*\n",
       "    mydiv.addEventListener('click', function(){window.flipCard(mydiv);}, false);\n",
       "    mydiv.addEventListener('keydown', function(event){window.checkKey(mydiv,event);}, true);\n",
       "    */\n",
       "    mydiv.onclick = function(){window.flipCard(mydiv);};\n",
       "    //console.log(keyControl);\n",
       "    if (keyControl == \"True\"){\n",
       "        mydiv.onkeydown = function(event){window.checkKey(mydiv,event);};\n",
       "    }\n",
       "    /* mydiv.addEventListener('keydown', function(event){event.stopPropagation(); console.log(event); event.preventDefault();}, true); */\n",
       "    /*mydiv.onkeypress = function(event){console.log(event); event.preventDefault();};*/\n",
       "\n",
       "    //console.log(mydiv);\n",
       "\n",
       "    var cards=eval('cards'+id);\n",
       "    mydiv.dataset.cardnum=0;\n",
       "    mydiv.dataset.numCards=cards.length;\n",
       "\n",
       "    mydiv.dataset.shuffleCards = shuffleCards;\n",
       "    var cardOrder;\n",
       "    if (shuffleCards == \"True\"){\n",
       "        cardOrder = randomOrderArray(cards.length);\n",
       "    } else {\n",
       "        cardOrder = Array.from({ length: cards.length }, (_, index) => index);\n",
       "    }\n",
       "    mydiv.dataset.cardOrder = JSON.stringify(cardOrder);\n",
       "    console.log(mydiv.dataset.cardOrder);\n",
       "\n",
       "\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",
       "    if ((title!=\"\") || (subject != \"\")){\n",
       "        createStructuredData(mydiv, cards, title, subject);\n",
       "    }\n",
       "\n",
       "    var cardnum=0;\n",
       "\n",
       "    for (var i=0; i<2; i++) {\n",
       "\n",
       "\n",
       "\n",
       "        var flipper;\n",
       "        if (i==0){\n",
       "            flipper=createOneCard(mydiv, true, cards, cardOrder[cardnum], cardnum);\n",
       "        }\n",
       "        else {\n",
       "            flipper=createOneCard(mydiv, false, cards, cardOrder[cardnum], 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",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\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",
       "                    if (version[0] == \"2\") {\n",
       "                        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n",
       "                    } else if (version[0] == \"3\") {\n",
       "                        if (MathJax.hasOwnProperty('typeset') ) {\n",
       "                            MathJax.typeset([flipper]);\n",
       "                        } else {\n",
       "                            console.log('WARNING: Trying to force load MathJax 3');\n",
       "                            window.MathJax = {\n",
       "                                tex: {\n",
       "                                    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]\n",
       "                                },\n",
       "                                svg: {\n",
       "                                    fontCache: 'global'\n",
       "                                }\n",
       "                            };\n",
       "\n",
       "                            (function () {\n",
       "                                var script = document.createElement('script');\n",
       "                                script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';\n",
       "                                script.async = true;\n",
       "                                document.head.appendChild(script);\n",
       "                            })();\n",
       "                        }\n",
       "                        MathJax.typeset([flipper]);\n",
       "                    }\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",
       "    if (grabFocus == \"True\" )\n",
       "        mydiv.focus();\n",
       "\n",
       "    return flipper;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        function try_create() {\n",
       "          if(document.getElementById(\"PYPqUkvkteLn\")) {\n",
       "            createCards(\"PYPqUkvkteLn\", \"True\", \"False\", \"False\", \"\", \"\");\n",
       "          } else {\n",
       "             setTimeout(try_create, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "var cardsPYPqUkvkteLn=[{\"front\": \"<i>average</i> (or <i>sample mean</i>) of a data set\", \"back\": \"The value that minimizes the squared error to the data. For a data set $d_0, d_1, \\\\ldots, d_{N-1}$ the average is\\n \\begin{align}\\n \\\\overline{d} = \\frac{1}{N} \\\\sum_{i=0}^{N-1} d_i.\\n \\\\end{align}\\n\", \"topic\": \"statistics\"}, {\"front\": \"expected value<br>(discrete random variable)\", \"back\": \"\\begin{equation*} \\\\mu_X = E \\\\left[ X \\right] = \\\\sum x P_X (x). \\\\end{equation*}\", \"topic\": \"probability\"}];\n",
       "var frontColorsPYPqUkvkteLn= [\"var(--asparagus)\", \"var(--terra-cotta)\", \"var(--cyan-process)\" ];\n",
       "var backColorsPYPqUkvkteLn= [\"var(--dark-blue-gray)\" ];\n",
       "var textColorsPYPqUkvkteLn= [\"var(--snow)\" ];\n",
       "try_create(); "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_flashcards(cards, topics=['probability', 'statistics'])"
   ]
  }
 ],
 "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.11.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}