HideQuiz.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Hiding Question Source Data (Especially Answers) from Users\n",
    "\n",
    "This notebook demonstrates how you can embed JupyterQuiz question/answer source data in a Jupyter Notebook without this data being visible to the users.\n",
    "\n",
    "I will use the following example question to demonstrate. You **would not** want to directly embed a cell like this in your notebook for distribution to users because the users could directly read the answer. So the following cell is shown here to demonstrate the technique. In practice, you will need a separate notebook to encode this data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "example=[{\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"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is how the quiz looks if we just pass it this Python dict:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"jZvlfgkMQymG\" 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",
       "#jZvlfgkMQymG {\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 questionsjZvlfgkMQymG=[{\"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}]}];\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.textContent = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.textContent = 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.textContent = \"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.textContent = \"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",
       "    //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",
       "    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(\"jZvlfgkMQymG\")) {\n",
       "            show_questions(questionsjZvlfgkMQymG,  jZvlfgkMQymG); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"jZvlfgkMQymG\");\n",
       "        // console.log(document.getElementById(\"jZvlfgkMQymG\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from jupyterquiz import display_quiz\n",
    "display_quiz(example)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Storing the Data in a Hidden HTML Element\n",
    "\n",
    "JupyterQuiz now supports pulling the data (as JSON) from the content of an HTML element. If you put an element with style  \"display:none\" in a Markdown cell, then the user will not be able directly read that data. \n",
    "\n",
    "Let's start by converting the example question data to JSON. (Again, this is something that you would do in a *separate* Jupyter notebook.)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "import json"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'[{\"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}]}]'"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "json.dumps(example)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, I have copied that JSON (only the parts between the ticks (') ) and pasted it into a hidden *span* in the Markdown cell below. Double click the following cell to reveal the hidden HTML:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is an example of embedding the quiz question in a hidden DIV:\n",
    "\n",
    "<span style=\"display:none\" class=\"question1\" id=\"question1\">[{\"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}]}]</span> "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To pull the data from the hidden element, that element must have its ID set, and we tell JupyterQuiz to pull from the HTML element by passing it a string with the element's ID prefixed by #.\n",
    "\n",
    "**Jupyter Lab versions of 4.2.5 to at least 4.3.0 strip the ID off the hidden span. To get around this, I will search for a class with the same name if the id is not found. So, in this example, I set both the id and the class to \"question1\".**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"rHjyZdAtbnXC\" 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",
       "#rHjyZdAtbnXC {\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 element=document.getElementById(\"question1\");\n",
       "            if (element == null) {\n",
       "               console.log(\"If you see this mesg on 4.2.5 to 4.3.0, id's don't work -- change to class\");\n",
       "               var questionTmp = document.getElementsByClassName(\"question1\");\n",
       "               // console.log(questionTmp); \n",
       "               element = (questionTmp[0]);\n",
       "               //console.log(element);\n",
       "            }\n",
       "            if (element == null) {\n",
       "               throw new Error(\"Could not find element with id or class question1\");_\n",
       "            }\n",
       "            var questionsrHjyZdAtbnXC;\n",
       "            try {\n",
       "               questionsrHjyZdAtbnXC=JSON.parse(window.atob(element.innerHTML));\n",
       "            } catch(err) {\n",
       "               console.log(\"Fell into catch\");\n",
       "               questionsrHjyZdAtbnXC = JSON.parse(element.innerHTML);\n",
       "            }\n",
       "            console.log(questionsrHjyZdAtbnXC);;\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.textContent = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.textContent = 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.textContent = \"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.textContent = \"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",
       "    //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",
       "    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(\"rHjyZdAtbnXC\")) {\n",
       "            show_questions(questionsrHjyZdAtbnXC,  rHjyZdAtbnXC); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"rHjyZdAtbnXC\");\n",
       "        // console.log(document.getElementById(\"rHjyZdAtbnXC\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# May not work first time if using Kernel -> Restart and Run... \n",
    "# I believe this is because of delays in the browser generating the\n",
    "# class lists needed for JL >= 4.2.5. Just rerun this if necessary\n",
    "\n",
    "display_quiz(\"#question1\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "One problem with this type of embedding is that the JSON is still human-readable, so a user can find the cell containing the question source data and access the answer. Since these quizzes are for self-assessment, the incentive for a user to do that is certainly small. \n",
    "\n",
    "Note that the HTML element with  the question source data can be anywhere in the Jupyter notebook, so that provides some additional obfuscation.\n",
    "\n",
    "However, JupyterQuiz also supports another type of obfuscation:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Hiding Question/Answer Data Using Base64 Encoding\n",
    "\n",
    "Since it would be nice for the question source data to not be human readable, JupyterQuiz also supports reading base64-encoded question data from an HTML element. The base64-encoded data is not human-readable.\n",
    "\n",
    "If you don't know what base64-encoding is, don't worry -- it is not important to use this feature. It is sufficient to know how to create the base64-encoded data, which I demonstrate in the next cell. (Again, this would normally be done in a separate notebook)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "b'W3sicXVlc3Rpb24iOiAiVGhlIHZhcmlhYmxlIG15bGlzdCBpcyBhIFB5dGhvbiBsaXN0LiBDaG9vc2Ugd2hpY2ggY29kZSBzbmlwcGV0IHdpbGwgYXBwZW5kIHRoZSBpdGVtIDMgdG8gbXlsaXN0LiIsICJ0eXBlIjogIm11bHRpcGxlX2Nob2ljZSIsICJhbnN3ZXJzIjogW3siY29kZSI6ICJteWxpc3QrPTMiLCAiY29ycmVjdCI6IGZhbHNlfSwgeyJjb2RlIjogIm15bGlzdCs9WzNdIiwgImNvcnJlY3QiOiB0cnVlfSwgeyJjb2RlIjogIm15bGlzdCs9ezN9IiwgImNvcnJlY3QiOiBmYWxzZX1dfV0='"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from base64 import b64encode\n",
    "b64encode(bytes(json.dumps(example), 'utf8'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The cell below contains a hidden SPAN with the base64-encoded question data as its content. (Note that to create it, I copied in only the part of the base64-output that is between the tick (') marks.) Double click the cell to reveal the hidden HTML:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here is an example of embedding the quiz question in a hidden DIV. The question data is not human readable because of base64-encoding:\n",
    "\n",
    "<span style=\"display:none\" class=\"question2\" id=\"question2\">W3sicXVlc3Rpb24iOiAiVGhlIHZhcmlhYmxlIG15bGlzdCBpcyBhIFB5dGhvbiBsaXN0LiBDaG9vc2Ugd2hpY2ggY29kZSBzbmlwcGV0IHdpbGwgYXBwZW5kIHRoZSBpdGVtIDMgdG8gbXlsaXN0LiIsICJ0eXBlIjogIm11bHRpcGxlX2Nob2ljZSIsICJhbnN3ZXJzIjogW3siY29kZSI6ICJteWxpc3QrPTMiLCAiY29ycmVjdCI6IGZhbHNlfSwgeyJjb2RlIjogIm15bGlzdCs9WzNdIiwgImNvcnJlY3QiOiB0cnVlfSwgeyJjb2RlIjogIm15bGlzdCs9ezN9IiwgImNvcnJlY3QiOiBmYWxzZX1dfV0=</span> "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"dvhCViMmwJFo\" 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",
       "#dvhCViMmwJFo {\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 element=document.getElementById(\"question2\");\n",
       "            if (element == null) {\n",
       "               console.log(\"If you see this mesg on 4.2.5 to 4.3.0, id's don't work -- change to class\");\n",
       "               var questionTmp = document.getElementsByClassName(\"question2\");\n",
       "               // console.log(questionTmp); \n",
       "               element = (questionTmp[0]);\n",
       "               //console.log(element);\n",
       "            }\n",
       "            if (element == null) {\n",
       "               throw new Error(\"Could not find element with id or class question2\");_\n",
       "            }\n",
       "            var questionsdvhCViMmwJFo;\n",
       "            try {\n",
       "               questionsdvhCViMmwJFo=JSON.parse(window.atob(element.innerHTML));\n",
       "            } catch(err) {\n",
       "               console.log(\"Fell into catch\");\n",
       "               questionsdvhCViMmwJFo = JSON.parse(element.innerHTML);\n",
       "            }\n",
       "            console.log(questionsdvhCViMmwJFo);;\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.textContent = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.textContent = 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.textContent = \"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.textContent = \"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",
       "    //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",
       "    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(\"dvhCViMmwJFo\")) {\n",
       "            show_questions(questionsdvhCViMmwJFo,  dvhCViMmwJFo); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"dvhCViMmwJFo\");\n",
       "        // console.log(document.getElementById(\"dvhCViMmwJFo\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_quiz(\"#question2\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"hwBqUvWypWfn\" 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",
       "#hwBqUvWypWfn {\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 element=document.getElementById(\"question3\");\n",
       "            if (element == null) {\n",
       "               console.log(\"If you see this mesg on 4.2.5 to 4.3.0, id's don't work -- change to class\");\n",
       "               var questionTmp = document.getElementsByClassName(\"question3\");\n",
       "               // console.log(questionTmp); \n",
       "               element = (questionTmp[0]);\n",
       "               //console.log(element);\n",
       "            }\n",
       "            if (element == null) {\n",
       "               throw new Error(\"Could not find element with id or class question3\");_\n",
       "            }\n",
       "            var questionshwBqUvWypWfn;\n",
       "            try {\n",
       "               questionshwBqUvWypWfn=JSON.parse(window.atob(element.innerHTML));\n",
       "            } catch(err) {\n",
       "               console.log(\"Fell into catch\");\n",
       "               questionshwBqUvWypWfn = JSON.parse(element.innerHTML);\n",
       "            }\n",
       "            console.log(questionshwBqUvWypWfn);;\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.textContent = feedback + \" [\" + answeredcorrect + \"/\" + numcorrect + \"]\";\n",
       "        } else {\n",
       "            fb.textContent = 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.textContent = \"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.textContent = \"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",
       "    //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",
       "    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(\"hwBqUvWypWfn\")) {\n",
       "            show_questions(questionshwBqUvWypWfn,  hwBqUvWypWfn); \n",
       "          } else {\n",
       "             setTimeout(try_show, 200);\n",
       "          }\n",
       "        };\n",
       "    \n",
       "        {\n",
       "        // console.log(element);\n",
       "\n",
       "        //console.log(\"hwBqUvWypWfn\");\n",
       "        // console.log(document.getElementById(\"hwBqUvWypWfn\"));\n",
       "\n",
       "        try_show();\n",
       "        }\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Test new error checking code\n",
    "display_quiz(\"#question3\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "finalized": {
   "timestamp": 1632669764107,
   "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.13.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}