test.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Test and demonstration notebook for Javascript quiz tool\n",
    "\n",
    "This notebook tests and demonstrates the jupyterquiz library and its use. It draws from a set of example questions that show the supported capabilities of the jupyterquiz library.\n",
    "\n",
    "In particular, this notebook also serves to test different ways for the library to load questions:\n",
    "1. **From a URL:** This is the preferred approach. It will embed a copy of the questions in your Jupyter notebook (and Jupyter book), but it will also try to load the latest version of the questions from the URL via Javascript at page load time. If the questions cannot be loaded from the URL, the stored versions will be used as a fallback.\n",
    "2. **From a JSON File:** This may be more convenient for local testing.\n",
    "3. **From a Python Dict:** This is probably the best path for testing new questions because they can be added and tested within a Jupyter notebook.\n",
    "\n",
    "jupyterquiz supports drawing a random subset of questions, and that is also tested.\n",
    "\n",
    "$$ \\begin{bmatrix} 7 \\end{bmatrix}$$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "tags": [
     "remove-input"
    ]
   },
   "outputs": [],
   "source": [
    "from jupyterquiz import display_quiz\n",
    "\n",
    "git_path=\"https://raw.githubusercontent.com/jmshea/jupyterquiz/main/examples/\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Test all question types, standard URL loading method:\n",
    "\n",
    "$~$"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"cakhKWrLxCjf\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#cakhKWrLxCjf {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionscakhKWrLxCjf=[\n",
       "    {\n",
       "        \"question\": \"Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answer_cols\": 4,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Wiki markup\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"SVG\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Markdown\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Rich Text\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"precision\": 2,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Determine the output of the following Python code:\",\n",
       "        \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"1\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"2\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"12\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"error\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. The + operator for strings performs string concatenation.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"code\": \"mylist+=3\",\n",
       "                \"correct\": false\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+=[3]\",\n",
       "                \"correct\": true\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+={3}\",\n",
       "                \"correct\": false\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"$\\\\pi$\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\frac{22}{7}$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"This is a crude approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\tau$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"\n",
       "            }\n",
       "        ]\n",
       "    }\n",
       "]\n",
       ";\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"cakhKWrLxCjf\")) {\n",
       "            show_questions(questionscakhKWrLxCjf,  cakhKWrLxCjf); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        //console.log(element);\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/jupyterquiz/main/examples/questions.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => show_questions(json, cakhKWrLxCjf))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        show_questions(questionscakhKWrLxCjf, cakhKWrLxCjf);\n",
       "        });\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(git_path+\"questions.json\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Using the 'fdsp' color scheme:\n",
    "$1 +1 $"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"ptZjsQvZzOvz\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#ptZjsQvZzOvz {\n",
       "   --jq-multiple-choice-bg: #345995;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #e26d5a;\n",
       "   --jq-numeric-bg: #5bc0eb;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #666666;\n",
       "   --jq-correct-color: #87a878;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsptZjsQvZzOvz=[\n",
       "    {\n",
       "        \"question\": \"Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answer_cols\": 4,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Wiki markup\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"SVG\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Markdown\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Rich Text\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"precision\": 2,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Determine the output of the following Python code:\",\n",
       "        \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"1\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"2\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"12\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"error\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. The + operator for strings performs string concatenation.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"code\": \"mylist+=3\",\n",
       "                \"correct\": false\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+=[3]\",\n",
       "                \"correct\": true\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+={3}\",\n",
       "                \"correct\": false\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"$\\\\pi$\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\frac{22}{7}$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"This is a crude approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\tau$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"\n",
       "            }\n",
       "        ]\n",
       "    }\n",
       "]\n",
       ";\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"ptZjsQvZzOvz\")) {\n",
       "            show_questions(questionsptZjsQvZzOvz,  ptZjsQvZzOvz); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        //console.log(element);\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/jupyterquiz/main/examples/questions.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => show_questions(json, ptZjsQvZzOvz))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        show_questions(questionsptZjsQvZzOvz, ptZjsQvZzOvz);\n",
       "        });\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(git_path+\"questions.json\", colors='fdsp')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Test loading all questions from file and customizing individual colors:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"hTOFwifeSiWW\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#hTOFwifeSiWW {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionshTOFwifeSiWW=[\n",
       "    {\n",
       "        \"question\": \"Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answer_cols\": 4,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Wiki markup\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"SVG\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Markdown\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Rich Text\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"precision\": 2,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Determine the output of the following Python code:\",\n",
       "        \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"1\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"2\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"12\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"error\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. The + operator for strings performs string concatenation.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"code\": \"mylist+=3\",\n",
       "                \"correct\": false\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+=[3]\",\n",
       "                \"correct\": true\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+={3}\",\n",
       "                \"correct\": false\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"$\\\\pi$\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\frac{22}{7}$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"This is a crude approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\tau$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"\n",
       "            }\n",
       "        ]\n",
       "    }\n",
       "]\n",
       ";\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"hTOFwifeSiWW\")) {\n",
       "            show_questions(questionshTOFwifeSiWW,  hTOFwifeSiWW); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"hTOFwifeSiWW\");\n",
       "        // console.log(document.getElementById(\"hTOFwifeSiWW\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(\"examples/questions.json\", \n",
    "            )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"LsScigVbNUDU\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#LsScigVbNUDU {\n",
       "   --jq-multiple-choice-bg: #a45995;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #224dea;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsLsScigVbNUDU=[\n",
       "    {\n",
       "        \"question\": \"Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answer_cols\": 4,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Wiki markup\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"SVG\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Markdown\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Rich Text\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"precision\": 2,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Determine the output of the following Python code:\",\n",
       "        \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"1\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"2\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"12\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"error\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. The + operator for strings performs string concatenation.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"code\": \"mylist+=3\",\n",
       "                \"correct\": false\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+=[3]\",\n",
       "                \"correct\": true\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+={3}\",\n",
       "                \"correct\": false\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"$\\\\pi$\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\frac{22}{7}$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"This is a crude approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\tau$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"\n",
       "            }\n",
       "        ]\n",
       "    }\n",
       "]\n",
       ";\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"LsScigVbNUDU\")) {\n",
       "            show_questions(questionsLsScigVbNUDU,  LsScigVbNUDU); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"LsScigVbNUDU\");\n",
       "        // console.log(document.getElementById(\"LsScigVbNUDU\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(\"examples/questions.json\", \n",
    "             colors={\n",
    "               '--jq-many-choice-bg': '#224dea',\n",
    "               '--jq-multiple-choice-bg': '#a45995'\n",
    "             }\n",
    "            )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Test loading questions from dict (this is for more rapid question generation and testing) and changing border radius for \"flat\" look:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"YvHwouMlOAMV\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 0px; text-align: left\"> <style>\n",
       "#YvHwouMlOAMV {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsYvHwouMlOAMV=[{\"question\": \"Choose all of the following that can be included in Jupyter notebooks?\", \"type\": \"many_choice\", \"answers\": [{\"answer\": \"Text and graphics output from Python\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Typeset mathematics\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Python executable code\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Formatted text\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Live snakes via Python\", \"correct\": false, \"feedback\": \"I hope not.\"}]}, {\"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\", \"type\": \"many_choice\", \"answer_cols\": 4, \"answers\": [{\"answer\": \"Text and graphics output from Python\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Typeset mathematics\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Python executable code\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Formatted text\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Live snakes via Python\", \"correct\": false, \"feedback\": \"I hope not.\"}]}, {\"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\", \"type\": \"multiple_choice\", \"answers\": [{\"answer\": \"Wiki markup\", \"correct\": false, \"feedback\": \"False.\"}, {\"answer\": \"SVG\", \"correct\": false, \"feedback\": \"False.\"}, {\"answer\": \"Markdown\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Rich Text\", \"correct\": false, \"feedback\": \"False.\"}]}, {\"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\", \"type\": \"numeric\", \"answers\": [{\"type\": \"value\", \"value\": 3.14, \"correct\": true, \"feedback\": \"Correct.\"}, {\"type\": \"range\", \"range\": [3.142857, 3.142858], \"correct\": true, \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"}, {\"type\": \"range\", \"range\": [-100000000, 0], \"correct\": false, \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"}, {\"type\": \"default\", \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"}]}, {\"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\", \"type\": \"numeric\", \"precision\": 2, \"answers\": [{\"type\": \"value\", \"value\": 3.14, \"correct\": true, \"feedback\": \"Correct.\"}, {\"type\": \"range\", \"range\": [3.142857, 3.142858], \"correct\": true, \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"}, {\"type\": \"range\", \"range\": [-100000000, 0], \"correct\": false, \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"}, {\"type\": \"default\", \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"}]}, {\"question\": \"Determine the output of the following Python code:\", \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\", \"type\": \"multiple_choice\", \"answers\": [{\"answer\": \"1\", \"correct\": false, \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"}, {\"answer\": \"2\", \"correct\": false, \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"}, {\"answer\": \"3\", \"correct\": false, \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"}, {\"answer\": \"12\", \"correct\": true, \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"}, {\"answer\": \"error\", \"correct\": false, \"feedback\": \"No. The + operator for strings performs string concatenation.\"}]}, {\"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\", \"type\": \"multiple_choice\", \"answers\": [{\"code\": \"mylist+=3\", \"correct\": false}, {\"code\": \"mylist+=[3]\", \"correct\": true}, {\"code\": \"mylist+={3}\", \"correct\": false}]}, {\"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\", \"type\": \"multiple_choice\", \"answers\": [{\"answer\": \"$\\\\pi$\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"$\\\\frac{22}{7}$\", \"correct\": false, \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"}, {\"answer\": \"3\", \"correct\": false, \"feedback\": \"This is a crude approximation to the true value.\"}, {\"answer\": \"$\\\\tau$\", \"correct\": false, \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"}]}];\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"YvHwouMlOAMV\")) {\n",
       "            show_questions(questionsYvHwouMlOAMV,  YvHwouMlOAMV); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"YvHwouMlOAMV\");\n",
       "        // console.log(document.getElementById(\"YvHwouMlOAMV\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import json\n",
    "with open(\"examples/questions.json\", \"r\") as file:\n",
    "    questions=json.load(file)\n",
    "    \n",
    "display_quiz(questions,  border_radius=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "# #Leave this here for when doing question development\n",
    "\n",
    "# import json\n",
    "# with open(\"examples/questions.json\", \"w\") as file:\n",
    "#     json.dump(questions, file, indent=4)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Test sampling from questions:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"oitfkosbcteC\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"2\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#oitfkosbcteC {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsoitfkosbcteC=[\n",
       "    {\n",
       "        \"question\": \"Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answer_cols\": 4,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Wiki markup\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"SVG\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Markdown\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Rich Text\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"precision\": 2,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Determine the output of the following Python code:\",\n",
       "        \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"1\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"2\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"12\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"error\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. The + operator for strings performs string concatenation.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"code\": \"mylist+=3\",\n",
       "                \"correct\": false\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+=[3]\",\n",
       "                \"correct\": true\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+={3}\",\n",
       "                \"correct\": false\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"$\\\\pi$\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\frac{22}{7}$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"This is a crude approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\tau$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"\n",
       "            }\n",
       "        ]\n",
       "    }\n",
       "]\n",
       ";\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"oitfkosbcteC\")) {\n",
       "            show_questions(questionsoitfkosbcteC,  oitfkosbcteC); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        //console.log(element);\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/jupyterquiz/main/examples/questions.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => show_questions(json, oitfkosbcteC))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        show_questions(questionsoitfkosbcteC, oitfkosbcteC);\n",
       "        });\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(git_path+\"questions.json\",2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [],
   "source": [
    "github_preview=[questions[0]]+[questions[2]]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"HUPncqBnmepz\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#HUPncqBnmepz {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsHUPncqBnmepz=[{\"question\": \"Choose all of the following that can be included in Jupyter notebooks?\", \"type\": \"many_choice\", \"answers\": [{\"answer\": \"Text and graphics output from Python\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Typeset mathematics\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Python executable code\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Formatted text\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Live snakes via Python\", \"correct\": false, \"feedback\": \"I hope not.\"}]}, {\"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\", \"type\": \"multiple_choice\", \"answers\": [{\"answer\": \"Wiki markup\", \"correct\": false, \"feedback\": \"False.\"}, {\"answer\": \"SVG\", \"correct\": false, \"feedback\": \"False.\"}, {\"answer\": \"Markdown\", \"correct\": true, \"feedback\": \"Correct.\"}, {\"answer\": \"Rich Text\", \"correct\": false, \"feedback\": \"False.\"}]}];\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"HUPncqBnmepz\")) {\n",
       "            show_questions(questionsHUPncqBnmepz,  HUPncqBnmepz); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"HUPncqBnmepz\");\n",
       "        // console.log(document.getElementById(\"HUPncqBnmepz\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(github_preview)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Test custom border radius, question alignment, max_width"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"dQgdctQBBKcr\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"1000\"\n",
       "               style=\"border-radius: 0px; text-align: center\"> <style>\n",
       "#dQgdctQBBKcr {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsdQgdctQBBKcr=[\n",
       "    {\n",
       "        \"question\": \"Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Testing parameter to change number of colums for answers: Choose all of the following that can be included in Jupyter notebooks?\",\n",
       "        \"type\": \"many_choice\",\n",
       "        \"answer_cols\": 4,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Text and graphics output from Python\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Typeset mathematics\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Python executable code\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Formatted text\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Live snakes via Python\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"I hope not.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these are used to create formatted text in Jupyter notebooks?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"Wiki markup\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"SVG\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Markdown\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"Rich Text\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"False.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Enter the value of $\\\\pi$ to 2 decimal places.\",\n",
       "        \"type\": \"numeric\",\n",
       "        \"precision\": 2,\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"type\": \"value\",\n",
       "                \"value\": 3.14,\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    3.142857,\n",
       "                    3.142858\n",
       "                ],\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"True to 2 decimal places, but you know $\\\\pi$ is not really 22/7, right?\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"range\",\n",
       "                \"range\": [\n",
       "                    -100000000,\n",
       "                    0\n",
       "                ],\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\pi$ is the AREA of a circle of radius 1. Try again.\"\n",
       "            },\n",
       "            {\n",
       "                \"type\": \"default\",\n",
       "                \"feedback\": \"$\\\\pi$ is the area of a circle of radius 1. Try again.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Determine the output of the following Python code:\",\n",
       "        \"code\": \"a=\\\"1\\\"\\nb=\\\"2\\\"\\nprint(a+b)\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"1\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"2\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. When strings are operated on by +, they are concatenated.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"12\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Yes. The + operator will concatenate the strings \\\"1\\\" and \\\"2\\\".\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"error\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"No. The + operator for strings performs string concatenation.\"\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist.\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"code\": \"mylist+=3\",\n",
       "                \"correct\": false\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+=[3]\",\n",
       "                \"correct\": true\n",
       "            },\n",
       "            {\n",
       "                \"code\": \"mylist+={3}\",\n",
       "                \"correct\": false\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    {\n",
       "        \"question\": \"Which of these is the ratio of a circle's circumference to its diameter?\",\n",
       "        \"type\": \"multiple_choice\",\n",
       "        \"answers\": [\n",
       "            {\n",
       "                \"answer\": \"$\\\\pi$\",\n",
       "                \"correct\": true,\n",
       "                \"feedback\": \"Correct.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\frac{22}{7}$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"$\\\\frac{22}{7}$ is only an approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"3\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"This is a crude approximation to the true value.\"\n",
       "            },\n",
       "            {\n",
       "                \"answer\": \"$\\\\tau$\",\n",
       "                \"correct\": false,\n",
       "                \"feedback\": \"True for the ratio of the circle's circumference to its radius, not diameter.\"\n",
       "            }\n",
       "        ]\n",
       "    }\n",
       "]\n",
       ";\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"dQgdctQBBKcr\")) {\n",
       "            show_questions(questionsdQgdctQBBKcr,  dQgdctQBBKcr); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        //console.log(element);\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/jupyterquiz/main/examples/questions.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => show_questions(json, dQgdctQBBKcr))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        show_questions(questionsdQgdctQBBKcr, dQgdctQBBKcr);\n",
       "        });\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(git_path+\"questions.json\", border_radius=0, question_alignment='center', max_width=1000)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Test URL support"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [],
   "source": [
    "example_link = [{\n",
    "        \"question\": \"The variable mylist is a Python list. \" + \\\n",
    "        \"Choose which code snippet will append the item 3 to mylist. \" +\n",
    "        \"See [W3Schools: Python Join Two Lists]\" + \\\n",
    "        \"(https://www.w3schools.com/python/gloss_python_join_lists.asp) for reference.\",\n",
    "        \"type\": \"multiple_choice\",\n",
    "        \"answers\": [\n",
    "            {\n",
    "                \"code\": \"mylist+=3\",\n",
    "                \"correct\": False\n",
    "            },\n",
    "            {\n",
    "                \"code\": \"mylist+=[3]\",\n",
    "                \"correct\": True\n",
    "            },\n",
    "            {\n",
    "                \"code\": \"mylist+={3}\",\n",
    "                \"correct\": False\n",
    "            }\n",
    "        ]\n",
    "    }]\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"NowbIoFhcfXY\" data-shufflequestions=\"False\"\n",
       "               data-shuffleanswers=\"True\"\n",
       "               data-preserveresponses=\"false\"\n",
       "               data-numquestions=\"1000000\"\n",
       "               data-maxwidth=\"600\"\n",
       "               style=\"border-radius: 10px; text-align: left\"> <style>\n",
       "#NowbIoFhcfXY {\n",
       "   --jq-multiple-choice-bg: #6f78ffff;\n",
       "   --jq-mc-button-bg: #fafafa;\n",
       "   --jq-mc-button-border: #e0e0e0e0;\n",
       "   --jq-mc-button-inset-shadow: #555555;\n",
       "   --jq-many-choice-bg: #f75c03ff;\n",
       "   --jq-numeric-bg: #392061ff;\n",
       "   --jq-numeric-input-bg: #c0c0c0;\n",
       "   --jq-numeric-input-label: #101010;\n",
       "   --jq-numeric-input-shadow: #999999;\n",
       "   --jq-incorrect-color: #c80202;\n",
       "   --jq-correct-color: #009113;\n",
       "   --jq-text-color: #fafafa;\n",
       "}\n",
       "\n",
       ".Quiz {\n",
       "    max-width: 600px;\n",
       "    margin-top: 15px;\n",
       "    margin-left: auto;\n",
       "    margin-right: auto;\n",
       "/*    margin-bottom: 15px;*/\n",
       "/*    padding-bottom: 4px;*/\n",
       "    padding-top: 4px;\n",
       "    line-height: 1.1;\n",
       "    font-size: 16pt;\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".QuizCode {\n",
       "    font-size: 14pt;\n",
       "    margin-top: 10px;\n",
       "    margin-left: 20px;\n",
       "    margin-right: 20px;\n",
       "}\n",
       "\n",
       ".QuizCode>pre {\n",
       "    padding: 4px;\n",
       "}\n",
       "\n",
       ".Quiz code {\n",
       "    background-color: lightgray;\n",
       "    color: black;\n",
       "}\n",
       "\n",
       ".Quiz .QuizCode code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       "\n",
       ".Quiz .MCButton code {\n",
       "    background-color: inherit;\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MCButton .QuizCode {\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       ".Answer {\n",
       "    border-radius: inherit;\n",
       "    display: grid;\n",
       "    grid-gap: 10px;\n",
       "    grid-template-columns: 1fr 1fr;\n",
       "    margin: 10px 0;\n",
       "}\n",
       "\n",
       "@media only screen and (max-width:480px) {\n",
       "    .Answer {\n",
       "        grid-template-columns: 1fr;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       ".Feedback {\n",
       "    font-size: 16pt;\n",
       "    text-align: center;\n",
       "/*    min-height: 2em;*/\n",
       "}\n",
       "\n",
       ".Input {\n",
       "    align: left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       "\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "    font-family: inherit;\n",
       "    font-size: 20px;\n",
       "    font-weight: inherit;\n",
       "    line-height: 20pt;\n",
       "    border: none;\n",
       "    border-radius: 0.2rem;\n",
       "    transition: box-shadow 0.1s);\n",
       "}\n",
       "\n",
       ".Input-text:focus {\n",
       "    /*outline: none;*/\n",
       "    background-color: var(--jq-numeric-input-bg);\n",
       "    box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem var(--jq-numeric-input-shadow);\n",
       "}\n",
       "\n",
       ".MCButton {\n",
       "    background: var(--jq-mc-button-bg);\n",
       "    border: 1px solid var(--jq-mc-button-border);\n",
       "    border-radius: inherit;\n",
       "    color: #333333;\n",
       "    padding: 10px;\n",
       "    font-size: 16px;\n",
       "    cursor: pointer;\n",
       "    text-align: center;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "}\n",
       "\n",
       ".MCButton p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".MultipleChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-multiple-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".ManyChoiceQn {\n",
       "    padding: 10px;\n",
       "    background: var(--jq-many-choice-bg);\n",
       "    color: var(--jq-text-color);\n",
       "    border-radius: inherit;\n",
       "}\n",
       "\n",
       ".NumericQn {\n",
       "    background: var(--jq-numeric-bg);\n",
       "    border-radius: inherit;\n",
       "    color: var(--jq-text-color);\n",
       "    padding: 10px;\n",
       "}\n",
       "\n",
       ".NumericQn p {\n",
       "    color: inherit;\n",
       "}\n",
       "\n",
       ".InpLabel {\n",
       "    color: var(--jq-numeric-input-label);\n",
       "    float: left;\n",
       "    font-size: 15pt;\n",
       "    line-height: 34px;\n",
       "    margin-right: 10px;\n",
       "}\n",
       "\n",
       ".incorrect {\n",
       "    color: var(--jq-incorrect-color);\n",
       "}\n",
       "\n",
       ".correct {\n",
       "    color: var(--jq-correct-color);\n",
       "}\n",
       "\n",
       ".correctButton {\n",
       "    /*\n",
       "    background: var(--jq-correct-color);\n",
       "   */\n",
       "    animation: correct-anim 0.6s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       ".incorrectButton {\n",
       "    animation: incorrect-anim 0.8s ease;\n",
       "    animation-fill-mode: forwards;\n",
       "    box-shadow: inset 0 0 5px var(--jq-mc-button-inset-shadow);\n",
       "    color: var(--jq-text-color);\n",
       "    /*outline: none;*/\n",
       "}\n",
       "\n",
       "@keyframes incorrect-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-incorrect-color);\n",
       "    }\n",
       "}\n",
       "\n",
       "@keyframes correct-anim {\n",
       "    100% {\n",
       "        background-color: var(--jq-correct-color);\n",
       "    }\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "var questionsNowbIoFhcfXY=[{\"question\": \"The variable mylist is a Python list. Choose which code snippet will append the item 3 to mylist. See [W3Schools: Python Join Two Lists](https://www.w3schools.com/python/gloss_python_join_lists.asp) for reference.\", \"type\": \"multiple_choice\", \"answers\": [{\"code\": \"mylist+=3\", \"correct\": false}, {\"code\": \"mylist+=[3]\", \"correct\": true}, {\"code\": \"mylist+={3}\", \"correct\": false}]}];\n",
       "    // Make a random ID\n",
       "function makeid(length) {\n",
       "    var result = [];\n",
       "    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n",
       "    var charactersLength = characters.length;\n",
       "    for (var i = 0; i < length; i++) {\n",
       "        result.push(characters.charAt(Math.floor(Math.random() * charactersLength)));\n",
       "    }\n",
       "    return result.join('');\n",
       "}\n",
       "\n",
       "// Choose a random subset of an array. Can also be used to shuffle the array\n",
       "function getRandomSubarray(arr, size) {\n",
       "    var shuffled = arr.slice(0), i = arr.length, temp, index;\n",
       "    while (i--) {\n",
       "        index = Math.floor((i + 1) * Math.random());\n",
       "        temp = shuffled[index];\n",
       "        shuffled[index] = shuffled[i];\n",
       "        shuffled[i] = temp;\n",
       "    }\n",
       "    return shuffled.slice(0, size);\n",
       "}\n",
       "\n",
       "function printResponses(responsesContainer) {\n",
       "    var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "    var stringResponses='<B>IMPORTANT!</B>To preserve this answer sequence for submission, when you have finalized your answers: <ol> <li> Copy the text in this cell below \"Answer String\"</li> <li> Double click on the cell directly below the Answer String, labeled \"Replace Me\"</li> <li> Select the whole \"Replace Me\" text</li> <li> Paste in your answer string and press shift-Enter.</li><li>Save the notebook using the save icon or File->Save Notebook menu item</li></ul><br><br><br><b>Answer String:</b><br> ';\n",
       "    console.log(responses);\n",
       "    responses.forEach((response, index) => {\n",
       "        if (response) {\n",
       "            console.log(index + ': ' + response);\n",
       "            stringResponses+= index + ': ' + response +\"<BR>\";\n",
       "        }\n",
       "    });\n",
       "    responsesContainer.innerHTML=stringResponses;\n",
       "}\n",
       "/* Callback function to determine whether a selected multiple-choice\n",
       "   button corresponded to a correct answer and to provide feedback\n",
       "   based on the answer */\n",
       "function check_mc() {\n",
       "    var id = this.id.split('-')[0];\n",
       "    //var response = this.id.split('-')[1];\n",
       "    //console.log(response);\n",
       "    //console.log(\"In check_mc(), id=\"+id);\n",
       "    //console.log(event.srcElement.id)           \n",
       "    //console.log(event.srcElement.dataset.correct)   \n",
       "    //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "    var label = event.srcElement;\n",
       "    //console.log(label, label.nodeName);\n",
       "    var depth = 0;\n",
       "    while ((label.nodeName != \"LABEL\") && (depth < 20)) {\n",
       "        label = label.parentElement;\n",
       "        console.log(depth, label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers = label.parentElement.children;\n",
       "    //console.log(answers);\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\" + id);\n",
       "\n",
       "\n",
       "\n",
       "    /* Multiple choice (1 answer). Allow for 0 correct\n",
       "       answers as an edge case */\n",
       "    if (fb.dataset.numcorrect <= 1) {\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            responses[qnum]= response;\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\n",
       "\n",
       "        for (var i = 0; i < answers.length; i++) {\n",
       "            var child = answers[i];\n",
       "            //console.log(child);\n",
       "            child.className = \"MCButton\";\n",
       "        }\n",
       "\n",
       "\n",
       "\n",
       "        if (label.dataset.correct == \"true\") {\n",
       "            // console.log(\"Correct action\");\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Correct!\";\n",
       "            }\n",
       "            label.classList.add(\"correctButton\");\n",
       "\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                fb.innerHTML = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                fb.innerHTML = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            //console.log(\"Error action\");\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "    }\n",
       "    else { /* Many choice (more than 1 correct answer) */\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "         if (label.dataset.correct == \"true\") {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Correct!\";\n",
       "            }\n",
       "            if (label.dataset.answered <= 0) {\n",
       "                if (fb.dataset.answeredcorrect < 0) {\n",
       "                    fb.dataset.answeredcorrect = 1;\n",
       "                    reset = true;\n",
       "                } else {\n",
       "                    fb.dataset.answeredcorrect++;\n",
       "                }\n",
       "                if (reset) {\n",
       "                    for (var i = 0; i < answers.length; i++) {\n",
       "                        var child = answers[i];\n",
       "                        child.className = \"MCButton\";\n",
       "                        child.dataset.answered = 0;\n",
       "                    }\n",
       "                }\n",
       "                label.classList.add(\"correctButton\");\n",
       "                label.dataset.answered = 1;\n",
       "                fb.className = \"Feedback\";\n",
       "                fb.classList.add(\"correct\");\n",
       "\n",
       "            }\n",
       "        } else {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback = jaxify(label.dataset.feedback);\n",
       "            } else {\n",
       "                feedback = \"Incorrect -- try again.\";\n",
       "            }\n",
       "            if (fb.dataset.answeredcorrect > 0) {\n",
       "                fb.dataset.answeredcorrect = -1;\n",
       "                reset = true;\n",
       "            } else {\n",
       "                fb.dataset.answeredcorrect--;\n",
       "            }\n",
       "\n",
       "            if (reset) {\n",
       "                for (var i = 0; i < answers.length; i++) {\n",
       "                    var child = answers[i];\n",
       "                    child.className = \"MCButton\";\n",
       "                    child.dataset.answered = 0;\n",
       "                }\n",
       "            }\n",
       "            label.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            //console.log(responsesContainer);\n",
       "            var response = label.firstChild.innerText;\n",
       "            if (label.querySelector(\".QuizCode\")){\n",
       "                response+= label.querySelector(\".QuizCode\").firstChild.innerText;\n",
       "            }\n",
       "            console.log(response);\n",
       "            //console.log(document.getElementById(\"quizWrap\"+id));\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            if (label.dataset.correct == \"true\") {\n",
       "                if (typeof(responses[qnum]) == \"object\"){\n",
       "                    if (!responses[qnum].includes(response))\n",
       "                        responses[qnum].push(response);\n",
       "                } else{\n",
       "                    responses[qnum]= [ response ];\n",
       "                }\n",
       "            } else {\n",
       "                responses[qnum]= response;\n",
       "            }\n",
       "            console.log(responses);\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End save responses stuff\n",
       "\n",
       "\n",
       "\n",
       "        var numcorrect = fb.dataset.numcorrect;\n",
       "        var answeredcorrect = fb.dataset.answeredcorrect;\n",
       "        if (answeredcorrect >= 0) {\n",
       "            fb.innerHTML = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.innerHTML = feedback + \" [\" + 0 + \"/\" + numcorrect + \"]\";\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([fb]);\n",
       "        }\n",
       "    } else {\n",
       "        console.log('MathJax not detected');\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "\n",
       "/* Function to produce the HTML buttons for a multiple choice/\n",
       "   many choice question  and to update the CSS tags based on\n",
       "   the question type */\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "    var shuffled;\n",
       "    if (shuffle_answers == \"True\") {\n",
       "        //console.log(shuffle_answers+\" read as true\");\n",
       "        shuffled = getRandomSubarray(qa.answers, qa.answers.length);\n",
       "    } else {\n",
       "        //console.log(shuffle_answers+\" read as false\");\n",
       "        shuffled = qa.answers;\n",
       "    }\n",
       "\n",
       "\n",
       "    var num_correct = 0;\n",
       "\n",
       "    shuffled.forEach((item, index, ans_array) => {\n",
       "        //console.log(answer);\n",
       "\n",
       "        // Make input element\n",
       "        var inp = document.createElement(\"input\");\n",
       "        inp.type = \"radio\";\n",
       "        inp.id = \"quizo\" + id + index;\n",
       "        inp.style = \"display:none;\";\n",
       "        aDiv.append(inp);\n",
       "\n",
       "        //Make label for input element\n",
       "        var lab = document.createElement(\"label\");\n",
       "        lab.className = \"MCButton\";\n",
       "        lab.id = id + '-' + index;\n",
       "        lab.onclick = check_mc;\n",
       "        var aSpan = document.createElement('span');\n",
       "        aSpan.classsName = \"\";\n",
       "        //qDiv.id=\"quizQn\"+id+index;\n",
       "        if (\"answer\" in item) {\n",
       "            aSpan.innerHTML = jaxify(item.answer);\n",
       "            //aSpan.innerHTML=item.answer;\n",
       "        }\n",
       "        lab.append(aSpan);\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeSpan;\n",
       "        if (\"code\" in item) {\n",
       "            codeSpan = document.createElement('span');\n",
       "            codeSpan.id = \"code\" + id + index;\n",
       "            codeSpan.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeSpan.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = item.code;\n",
       "            lab.append(codeSpan);\n",
       "            //console.log(codeSpan);\n",
       "        }\n",
       "\n",
       "        //lab.textContent=item.answer;\n",
       "\n",
       "        // Set the data attributes for the answer\n",
       "        lab.setAttribute('data-correct', item.correct);\n",
       "        if (item.correct) {\n",
       "            num_correct++;\n",
       "        }\n",
       "        if (\"feedback\" in item) {\n",
       "            lab.setAttribute('data-feedback', item.feedback);\n",
       "        }\n",
       "        lab.setAttribute('data-answered', 0);\n",
       "\n",
       "        aDiv.append(lab);\n",
       "\n",
       "    });\n",
       "\n",
       "    if (num_correct > 1) {\n",
       "        outerqDiv.className = \"ManyChoiceQn\";\n",
       "    } else {\n",
       "        outerqDiv.className = \"MultipleChoiceQn\";\n",
       "    }\n",
       "\n",
       "    return num_correct;\n",
       "\n",
       "}\n",
       "function check_numeric(ths, event) {\n",
       "\n",
       "    if (event.keyCode === 13) {\n",
       "        ths.blur();\n",
       "\n",
       "        var id = ths.id.split('-')[0];\n",
       "\n",
       "        var submission = ths.value;\n",
       "        if (submission.indexOf('/') != -1) {\n",
       "            var sub_parts = submission.split('/');\n",
       "            //console.log(sub_parts);\n",
       "            submission = sub_parts[0] / sub_parts[1];\n",
       "        }\n",
       "        //console.log(\"Reader entered\", submission);\n",
       "\n",
       "        if (\"precision\" in ths.dataset) {\n",
       "            var precision = ths.dataset.precision;\n",
       "            submission = Number(Number(submission).toPrecision(precision));\n",
       "        }\n",
       "\n",
       "\n",
       "        //console.log(\"In check_numeric(), id=\"+id);\n",
       "        //console.log(event.srcElement.id)           \n",
       "        //console.log(event.srcElement.dataset.feedback)\n",
       "\n",
       "        var fb = document.getElementById(\"fb\" + id);\n",
       "        fb.style.display = \"none\";\n",
       "        fb.innerHTML = \"Incorrect -- try again.\";\n",
       "\n",
       "        var answers = JSON.parse(ths.dataset.answers);\n",
       "        //console.log(answers);\n",
       "\n",
       "        var defaultFB = \"Incorrect. Try again.\";\n",
       "        var correct;\n",
       "        var done = false;\n",
       "        answers.every(answer => {\n",
       "            //console.log(answer.type);\n",
       "\n",
       "            correct = false;\n",
       "            // if (answer.type==\"value\"){\n",
       "            if ('value' in answer) {\n",
       "                if (submission == answer.value) {\n",
       "                    if (\"feedback\" in answer) {\n",
       "                        fb.innerHTML = jaxify(answer.feedback);\n",
       "                    } else {\n",
       "                        fb.innerHTML = jaxify(\"Correct\");\n",
       "                    }\n",
       "                    correct = answer.correct;\n",
       "                    //console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "                // } else if (answer.type==\"range\") {\n",
       "            } else if ('range' in answer) {\n",
       "                console.log(answer.range);\n",
       "                console.log(submission, submission >=answer.range[0], submission < answer.range[1])\n",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.innerHTML = jaxify(answer.feedback);\n",
       "                    correct = answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done = true;\n",
       "                }\n",
       "            } else if (answer.type == \"default\") {\n",
       "                if (\"feedback\" in answer) {\n",
       "                    defaultFB = answer.feedback;\n",
       "                } \n",
       "            }\n",
       "            if (done) {\n",
       "                return false; // Break out of loop if this has been marked correct\n",
       "            } else {\n",
       "                return true; // Keep looking for case that includes this as a correct answer\n",
       "            }\n",
       "        });\n",
       "        console.log(\"done:\", done);\n",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.innerHTML = jaxify(defaultFB);\n",
       "            //console.log(\"Default feedback\", defaultFB);\n",
       "        }\n",
       "\n",
       "        fb.style.display = \"block\";\n",
       "        if (correct) {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"correctButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"correct\");\n",
       "        } else {\n",
       "            ths.className = \"Input-text\";\n",
       "            ths.classList.add(\"incorrectButton\");\n",
       "            fb.className = \"Feedback\";\n",
       "            fb.classList.add(\"incorrect\");\n",
       "        }\n",
       "\n",
       "        // What follows is for the saved responses stuff\n",
       "        var outerContainer = fb.parentElement.parentElement;\n",
       "        var responsesContainer = document.getElementById(\"responses\" + outerContainer.id);\n",
       "        if (responsesContainer) {\n",
       "            console.log(submission);\n",
       "            var qnum = document.getElementById(\"quizWrap\"+id).dataset.qnum;\n",
       "            //console.log(\"Question \" + qnum);\n",
       "            //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "            var responses=JSON.parse(responsesContainer.dataset.responses);\n",
       "            console.log(responses);\n",
       "            if (submission == ths.value){\n",
       "                responses[qnum]= submission;\n",
       "            } else {\n",
       "                responses[qnum]= ths.value + \"(\" + submission +\")\";\n",
       "            }\n",
       "            responsesContainer.setAttribute('data-responses', JSON.stringify(responses));\n",
       "            printResponses(responsesContainer);\n",
       "        }\n",
       "        // End code to preserve responses\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([fb]);\n",
       "            }\n",
       "        } else {\n",
       "            console.log('MathJax not detected');\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el, charC) {\n",
       "    //console.log(\"Input char: \", charC);\n",
       "    if (charC == 46) {\n",
       "        if (el.value.indexOf('.') === -1) {\n",
       "            return true;\n",
       "        } else if (el.value.indexOf('/') != -1) {\n",
       "            var parts = el.value.split('/');\n",
       "            if (parts[1].indexOf('.') === -1) {\n",
       "                return true;\n",
       "            }\n",
       "        }\n",
       "        else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 47) {\n",
       "        if (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 45) {\n",
       "        var edex = el.value.indexOf('e');\n",
       "        if (edex == -1) {\n",
       "            edex = el.value.indexOf('E');\n",
       "        }\n",
       "\n",
       "        if (el.value == \"\") {\n",
       "            return true;\n",
       "        } else if (edex == (el.value.length - 1)) { // If just after e or E\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else if (charC == 101) { // \"e\"\n",
       "        if ((el.value.indexOf('e') === -1) && (el.value.indexOf('E') === -1) && (el.value.indexOf('/') == -1)) {\n",
       "            // Prev symbol must be digit or decimal point:\n",
       "            if (el.value.slice(-1).search(/\\d/) >= 0) {\n",
       "                return true;\n",
       "            } else if (el.value.slice(-1).search(/\\./) >= 0) {\n",
       "                return true;\n",
       "            } else {\n",
       "                return false;\n",
       "            }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "        if (charC > 31 && (charC < 48 || charC > 57))\n",
       "            return false;\n",
       "    }\n",
       "    return true;\n",
       "}\n",
       "\n",
       "function numeric_keypress(evnt) {\n",
       "    var charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC == 13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else {\n",
       "        return isValid(this, charC);\n",
       "    }\n",
       "}\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "function make_numeric(qa, outerqDiv, qDiv, aDiv, id) {\n",
       "\n",
       "\n",
       "\n",
       "    //console.log(answer);\n",
       "\n",
       "\n",
       "    outerqDiv.className = \"NumericQn\";\n",
       "    aDiv.style.display = 'block';\n",
       "\n",
       "    var lab = document.createElement(\"label\");\n",
       "    lab.className = \"InpLabel\";\n",
       "    lab.innerHTML = \"Type numeric answer here:\";\n",
       "    aDiv.append(lab);\n",
       "\n",
       "    var inp = document.createElement(\"input\");\n",
       "    inp.type = \"text\";\n",
       "    //inp.id=\"input-\"+id;\n",
       "    inp.id = id + \"-0\";\n",
       "    inp.className = \"Input-text\";\n",
       "    inp.setAttribute('data-answers', JSON.stringify(qa.answers));\n",
       "    if (\"precision\" in qa) {\n",
       "        inp.setAttribute('data-precision', qa.precision);\n",
       "    }\n",
       "    aDiv.append(inp);\n",
       "    //console.log(inp);\n",
       "\n",
       "    //inp.addEventListener(\"keypress\", check_numeric);\n",
       "    //inp.addEventListener(\"keypress\", numeric_keypress);\n",
       "    /*\n",
       "    inp.addEventListener(\"keypress\", function(event) {\n",
       "        return numeric_keypress(this, event);\n",
       "    }\n",
       "                        );\n",
       "                        */\n",
       "    //inp.onkeypress=\"return numeric_keypress(this, event)\";\n",
       "    inp.onkeypress = numeric_keypress;\n",
       "    inp.onpaste = event => false;\n",
       "\n",
       "    inp.addEventListener(\"focus\", function (event) {\n",
       "        this.value = \"\";\n",
       "        return false;\n",
       "    }\n",
       "    );\n",
       "\n",
       "\n",
       "}\n",
       "function jaxify(string) {\n",
       "    var mystring = string;\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",
       "    // repace markdown style links with actual links\n",
       "    mystring = mystring.replace(/<(.*?)>/, '<a href=\"$1\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "    mystring = mystring.replace(/\\[(.*?)\\]\\((.*?)\\)/, '<a href=\"$2\" target=\"_blank\" class=\"Link\">$1</a>');\n",
       "\n",
       "    //console.log(mystring);\n",
       "    return mystring;\n",
       "}\n",
       "\n",
       "\n",
       "function show_questions(json, mydiv) {\n",
       "    console.log('show_questions');\n",
       "    //var mydiv=document.getElementById(myid);\n",
       "    var shuffle_questions = mydiv.dataset.shufflequestions;\n",
       "    var num_questions = mydiv.dataset.numquestions;\n",
       "    var shuffle_answers = mydiv.dataset.shuffleanswers;\n",
       "    var max_width = mydiv.dataset.maxwidth;\n",
       "\n",
       "    if (num_questions > json.length) {\n",
       "        num_questions = json.length;\n",
       "    }\n",
       "\n",
       "    var questions;\n",
       "    if ((num_questions < json.length) || (shuffle_questions == \"True\")) {\n",
       "        //console.log(num_questions+\",\"+json.length);\n",
       "        questions = getRandomSubarray(json, num_questions);\n",
       "    } else {\n",
       "        questions = json;\n",
       "    }\n",
       "\n",
       "    //console.log(\"SQ: \"+shuffle_questions+\", NQ: \" + num_questions + \", SA: \", shuffle_answers);\n",
       "\n",
       "    // Iterate over questions\n",
       "    questions.forEach((qa, index, array) => {\n",
       "        //console.log(qa.question); \n",
       "\n",
       "        var id = makeid(8);\n",
       "        //console.log(id);\n",
       "\n",
       "\n",
       "        // Create Div to contain question and answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        //iDiv.id = 'quizWrap' + id + index;\n",
       "        iDiv.id = 'quizWrap' + id;\n",
       "        iDiv.className = 'Quiz';\n",
       "        iDiv.setAttribute('data-qnum', index);\n",
       "        iDiv.style.maxWidth  =max_width+\"px\";\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "        \n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id = \"OuterquizQn\" + id + index;\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id = \"quizQn\" + id + index;\n",
       "        \n",
       "        if (qa.question) {\n",
       "            iDiv.append(outerqDiv);\n",
       "\n",
       "            //qDiv.textContent=qa.question;\n",
       "            qDiv.innerHTML = jaxify(qa.question);\n",
       "            outerqDiv.append(qDiv);\n",
       "        }\n",
       "\n",
       "        // Create div for code inside question\n",
       "        var codeDiv;\n",
       "        if (\"code\" in qa) {\n",
       "            codeDiv = document.createElement('div');\n",
       "            codeDiv.id = \"code\" + id + index;\n",
       "            codeDiv.className = \"QuizCode\";\n",
       "            var codePre = document.createElement('pre');\n",
       "            codeDiv.append(codePre);\n",
       "            var codeCode = document.createElement('code');\n",
       "            codePre.append(codeCode);\n",
       "            codeCode.innerHTML = qa.code;\n",
       "            outerqDiv.append(codeDiv);\n",
       "            //console.log(codeDiv);\n",
       "        }\n",
       "\n",
       "\n",
       "        // Create div to contain answer part\n",
       "        var aDiv = document.createElement('div');\n",
       "        aDiv.id = \"quizAns\" + id + index;\n",
       "        aDiv.className = 'Answer';\n",
       "        iDiv.append(aDiv);\n",
       "\n",
       "        //console.log(qa.type);\n",
       "\n",
       "        var num_correct;\n",
       "        if ((qa.type == \"multiple_choice\") || (qa.type == \"many_choice\") ) {\n",
       "            num_correct = make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "            if (\"answer_cols\" in qa) {\n",
       "                //aDiv.style.gridTemplateColumns = 'auto '.repeat(qa.answer_cols);\n",
       "                aDiv.style.gridTemplateColumns = 'repeat(' + qa.answer_cols + ', 1fr)';\n",
       "            }\n",
       "        } else if (qa.type == \"numeric\") {\n",
       "            //console.log(\"numeric\");\n",
       "            make_numeric(qa, outerqDiv, qDiv, aDiv, id);\n",
       "        }\n",
       "\n",
       "\n",
       "        //Make div for feedback\n",
       "        var fb = document.createElement(\"div\");\n",
       "        fb.id = \"fb\" + id;\n",
       "        //fb.style=\"font-size: 20px;text-align:center;\";\n",
       "        fb.className = \"Feedback\";\n",
       "        fb.setAttribute(\"data-answeredcorrect\", 0);\n",
       "        fb.setAttribute(\"data-numcorrect\", num_correct);\n",
       "        iDiv.append(fb);\n",
       "\n",
       "\n",
       "    });\n",
       "    var preserveResponses = mydiv.dataset.preserveresponses;\n",
       "    console.log(preserveResponses);\n",
       "    console.log(preserveResponses == \"true\");\n",
       "    if (preserveResponses == \"true\") {\n",
       "        console.log(preserveResponses);\n",
       "        // Create Div to contain record of answers\n",
       "        var iDiv = document.createElement('div');\n",
       "        iDiv.id = 'responses' + mydiv.id;\n",
       "        iDiv.className = 'JCResponses';\n",
       "        // Create a place to store responses as an empty array\n",
       "        iDiv.setAttribute('data-responses', '[]');\n",
       "\n",
       "        // Dummy Text\n",
       "        iDiv.innerHTML=\"<b>Select your answers and then follow the directions that will appear here.</b>\"\n",
       "        //iDiv.className = 'Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "    }\n",
       "//console.log(\"At end of show_questions\");\n",
       "    if (typeof MathJax != 'undefined') {\n",
       "        console.log(\"MathJax version\", MathJax.version);\n",
       "        var version = MathJax.version;\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([mydiv]);\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",
       "            }\n",
       "        }, 500);\n",
       "if (typeof version == 'undefined') {\n",
       "        } else\n",
       "        {\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([mydiv]);\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",
       "            } else {\n",
       "                console.log(\"MathJax not found\");\n",
       "            }\n",
       "        }\n",
       "    }\n",
       "\n",
       "    // stop event propagation for the .Link class\n",
       "    var links = document.getElementsByClassName('Link')\n",
       "    for (var i = 0; i < links.length; i++) {\n",
       "        links[i].addEventListener('click', function(e){\n",
       "            e.stopPropagation();\n",
       "        });\n",
       "    }\n",
       "\n",
       "    return false;\n",
       "}\n",
       "/* This is to handle asynchrony issues in loading Jupyter notebooks\n",
       "           where the quiz has been previously run. The Javascript was generally\n",
       "           being run before the div was added to the DOM. I tried to do this\n",
       "           more elegantly using Mutation Observer, but I didn't get it to work.\n",
       "\n",
       "           Someone more knowledgeable could make this better ;-) */\n",
       "\n",
       "        function try_show() {\n",
       "          if(document.getElementById(\"NowbIoFhcfXY\")) {\n",
       "            show_questions(questionsNowbIoFhcfXY,  NowbIoFhcfXY); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"NowbIoFhcfXY\");\n",
       "        // console.log(document.getElementById(\"NowbIoFhcfXY\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(example_link)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "finalized": {
   "timestamp": 1622215912635,
   "trusted": true
  },
  "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": 4
}